魅力的なスキルを開発する

5分でスキルを作ってみよう

はじめに

このモジュールでは、Cake Timeというシンプルなスキルを実際に作ってみましょう。ユーザーに誕生日をたずね、記憶し、次の誕生日まであと何日かを伝えたり、誕生日当日におめでとうと言ったりするスキルです。

  • ユーザーに誕生日をたずねる
  • 誕生日を覚える
  • 次の誕生日まであと何日かを伝える
  • 誕生日当日におめでとうと言う

「Alexaスキルを開発する理由」モジュールでは、 ユーザーが「ハローワールド」スキルと対話するとどうなるかを見てきました。

次のビデオでは、Cake Timeスキルを開発した後、ユーザーがどのようにこのスキルと対話するかを見てみましょう:

シンプルですが、開発方法は若干複雑なのがわかりましたね。対話をシンプルで自然なものにするのが、スキル開発者である私たちの腕の見せ所です。人間の会話パターンを真似ると、会話がかなり自然になります。人がものを覚えるように、スキルにもメモリ機能を持たせます。親友なのに名前を覚えてくれないとイライラしますよね(実は親友ではないのかもしれません)。このCake Timeは1日で作成できます。ただし少し複雑なので、このコースでは、4つのモジュールに分けて作っていきましょう。
このコースを修了すれば、便利でシンプル、かつユーザーを惹きつけるスキルが完成します。便利なスキルはユーザーに価値をもたらします。このCake Timeは、カウントダウン付きで誕生日を祝ってくれる楽しくて便利なスキルです。また、ユーザーの関心をつかんで離さず、また使おうと思わせる魅力的なスキルでもあります。誕生日当日までチェックし続けようと思わせるのがCake Timeの魅力です。では、さっそく始めましょう。

このモジュールについて

初めてAlexaスキルを開発する場合は、このモジュールと次の3つのモジュールを完了することをお勧めします。これら4つのモジュールでは、このスキル作成に必要なすべてのステップを順を追って学ぶことができます。
途中で行き詰まったり、コードが動かなくなってしまっても大丈夫です。各モジュールの最後にあるコードセクションで、完成したコードを提供しています。
Alexaスキルの基礎を理解し、より高度な会話ができるスキルを作成したい場合は、 会話デザインのコースを受けてみてください。

対象となる機能

  • 発話
  • インテント
  • スロット
  • ダイアログ管理
  • メモリと永続性
  • ユーザープロファイル設定

Step 1: ログイン

まず、Amazon開発者アカウントを使って Alexa開発者コンソールにログインします。アカウントがない場合は、こちら で作成します。

Step 2: スキルを作成する

a. コンソールの右側にあるスキルの作成をクリックします。新しいページが表示されます。

create skill screenshot

b. スキル名フィールドにCake Timeと入力します。

create skill screenshot

c. デフォルトの言語日本語に設定します。

d. これはカスタムスキルなので、スキルに追加するモデルを選択カスタムを選択します。

create skill screenshot

スキルにはフロントエンドとバックエンドがあります。フロントエンドでは、発話(ユーザーが言ったこと)をインテント(目的のアクション)にマッピングします。バックエンドでユーザーのインテントをどう処理するかを決定する必要があります。 AWS Lambda 関数やHTTPSエンドポイントを使って独自にスキルをホスティングするか、Alexaでスキルをホスティングするかのいずれかです。AWSの無料枠には制限があるため、スキルの使用頻度が上がってきたら、独自にホスティングするオプションに変更できます。このコースでは、Alexaでホスティングするオプションを選択します。

e. スキルのバックエンドリソースをホスティングする方法を選択で、Alexaがホストを選択します。

create skill screenshot

f. ページ上部にあるスキルを作成をクリックします。

create skill screenshot

AWSがスキルリソースをプロビジョニングするまでに多少時間がかかります。

Console link screenshot

注: いったんAlexa開発者コンソールを終了して再度戻ると、スキルタブのAlexaスキルリストに作成したスキルが表示されています。編集をクリックしてスキルの編集に進みましょう。

Skill edit screenshot

g.ビルドが完了したら、左パネルの呼び出し名をクリックします。

create skill screenshot

H.スキルの呼び出し名「ケークウォーク」を日本語で入力します。スキルの呼び出し名は必ず日本語で入力してください。

create skill screenshot

Step 3: ユーザーにあいさつする

ユーザーが最初にやりたいことはスキルを起動することです。スキルを起動するインテントはビルトインインテントのため、フロントエンドでは定義の必要がありません。 ただし、バックエンドではインテントに応答する必要があります。このステップでは、バックエンドコードを更新してユーザーがスキルを起動したときにあいさつを返すようにします。

a. Alexa開発者コンソールでCake Timeスキルを開きます。コードエディタタブをクリックします。コードエディタでindex.jsファイルが開きます。

Node.jsモジュールにはASK SDKを使います。スキルがJSONリクエストに対してどう応答するかを定義するには、各インテントのハンドラーを定義します。

code nav link screenshot

ハンドラーには2つの関数があります:

  • canHandle() 関数
  • handle() 関数

canHandle() 関数では、ハンドラーが応答するリクエストを定義します。handle()関数では、ユーザーに応答を返します。

スキルがリクエストを受け取ると、各ハンドラーのcanHandle() 関数がそのハンドラーでリクエストに対応できるかを判断します。
この場合、ユーザーはスキルを起動しようとしているため、LaunchRequestリクエストになります。つまり、LaunchRequestHandlercanHandle()関数がSDKにこのリクエストを実行できることを知らせます。コンピューター用語で言えば、canHandle がtrueを返すことで、この処理を実行できることを確認します。

ヒント: コードエディタでCTRL+F (Macの場合はCommand+F)を押すと、テキストを検索できます。 検索ウィンドウが開きます。エディタ内でコードを検索する場合に便利な機能です。

use the find function

Cake Timeスキルを起動した後は何が起こるでしょうか? この場合は、シンプルに「こんにちは。ケーク·タイムへようこそ。起動してくれてありがとうございます。 さようなら。」と言うことでユーザーがスキルを起動できたことを確認します。


LaunchRequestHandlerオブジェクトで、 handle()関数を探します。この関数はresponseBuilder関数を使って、応答を作成し、ユーザーに返します。

handle()関数で、const speechTextで始まる行を探します。この変数には、ユーザーがスキルを起動したときにスキルがユーザーに言う文字列が含まれています。このスキルに合うよう、内容を変更してみましょう。

 

b. LaunchRequestHandlerオブジェクトのhandle() 関数で、const speechTextで始まる行を探します。この行を以下の内容に置き換えます:

const speakOutput = 'こんにちは、ケーク·タイムへようこそ。起動してくれてありがとうございます。 さようなら。';

行の最後には必ずセミコロン(;)を含めてください。

プログラミングに詳しくない方のために説明すると、文字列は一重または二重引用符でカプセル化されます。文字列のテキストを変更する場合は、引用符の内側のテキストを置き換えてください。

既存のテキストを置換するか、新しいテキストを追加すると、そのテキストの直前か直後に空白行が追加される場合があります。空白行はコードには影響しないため、削除して構いません。

また、コード行にこのコースのコードスニペットとは異なるインデントが適用されている場合があります。インデントもコードには影響しませんので、お好みに応じてTabキーを押してインデントを追加しても構いません。

LaunchRequestHandlerの今置換したテキスト行の下に、handlerInput.responseBuilderがあります。SDKのこの部分は、ユーザーへの応答を作成するのに利用できます。  

次の行には、 .speak(speechText)があります。speechText変数は、先ほど定義しました。.speak()関数は、 responseBuilderspeechText の値をユーザーに読み上げるよう指示します。  

次に、responseBuilder.reprompt()関数を探します(今、handle()関数のLaunchRequestHandlerを参照していることを確認してください)。  

スキルがユーザーの応答を待つのであれば、この関数を使用します。今回は、スキルにあいさつさせた後に終了するため、現時点ではこのコード行を省略します。

 

c. LaunchRequestHandlerhandle() 関数で、.reprompt()で始まる行を探します。行の先頭にスラッシュを2つ(//)追加します。これはコメント行を意味します。つまり、コードを実行してもこの行は無視されます。

 

d. 次に、LaunchRequestHandlerの、今コメントアウトした行のすぐ下にある.getResponse()関数を探します。この関数は、responseBuilder'sが作成した内容をスキルが返す応答に変換します。returnで始まる行があったのを覚えているでしょうか。 この行は、送信ボタンを押すようなイメージで、応答を送信します。

 

これらの変更をすべて行ったら、LaunchRequestHandler のhandle()関数のコードは、次のようになるはずです:

handle function code screenshot

これで、このスキルのLaunchRequestを処理するコードが完成しました。まずは、変更を保存し、コードをデプロイしましょう。

e. 保存をクリックします。

save button

f. デプロイをクリックします。

deploy button

Step 4: スキルをテストする

では、スキルをテストしてみましょう。まず、テストシミュレーターを有効にします。

a. テスト タブをクリックします。テストシミュレーターが開きます。

test nav link screenshot

コンピューターのマイクを使用する許可を求めるアラートが表示される場合があります。許可するをクリックして、音声を使ったスキルのテストを有効にします。これで、Alexa搭載デバイスに話しかけるのと同じようにテストできます。

alert window screenshot

b. ページ左上部のドロップダウンメニューで、開発中を選択します。

menu development screenshot

開発者コンソールでのテスト

コンソールでスキルをテストする方法は2つあります。1つ目は、ユーザーの発話を左上のボックスに入力する方法です。入力間違いは動作に影響するため、正確に入力してください。 2つ目は、マイクアイコンを押しながら、話しかける方法です。

今のところ、スキルにはインテントが1つあります。LaunchRequestです。この関数は、ユーザーがAlexaにスキルを開く、または起動するようリクエストすると応答を返します。ユーザーは「アレクサ、ケークウォークを開いて」と言います。 このスキルの名前「Cake Time」は、スキルの呼び出し名として自動で設定されています。呼び出し名は変更できますが、この演習ではこのまま使用しましょう。

c. スキルをテストします。左上のボックスにケークウォークを開いて(大文字小文字の区別なし)と入力してEnterを押すか、マイクアイコンを押しながら「ケークウォークを開いて」と言います。

skill test screenshot

Alexa開発者コンソールでテストする場合は、ウェイクワード(通常は「アレクサ」)は不要です。「ケークウォークを開いて」と入力するか言うだけで構いません。Alexa搭載デバイスでテストする場合は、ウェイクワードを付けて次のように言います。「アレクサ、ケークウォークを開いて」

まとめ

スキルを開いたら、Alexaが「こんにちは、ケークウォークへようこそ。起動してくれてありがとうございます。 さようなら。」と言いましたか? もしそうなら、おめでとうございます。 スキル開発の基本は完了です。すぐに、魅力ある会話型の音声エクスペリエンスを提供する新しいスキルを作れるようになるでしょう。

まだまだ学ぶことはたくさんあります。 次のセクションでは、より便利なスキルになるよう機能を拡張していきます。

コード

スキルが動作しない、または構文エラーが出るといった問題がある場合は、以下の完成したコードサンプルをダウンロードしてください。Alexa開発者コンソールのコードエディタタブを開き、このコードをindex.jsファイルにコピーして貼り付けます。テストする前に、必ずコードを保存してデプロイしてください。