この記事は何?
Google AssistantのActionは使った開発はしたことはあったけどAlexaのSkillは未体験だったし、ここ数回AWSさんのConferenceだったり、Meetupに参加させていただき興味が湧いたので作ってみることにしました。
なにはともあれ「実装するならまずはチュートリアルでしょ」と思って進めたのですが、デザイン更新直後だったのか公式の英語のチュートリアルでさえUIが違っていて、すんなりと試せなかったのでここに書き残すことにしました。
この記事を書いたのは、2018年4月28日です。ご覧になっている今、更にUI等が変わっている可能性もありますのでお気をつけください。
実装の内容
Node.jsでFunction(って呼び方で正しい?)を実装するサンプルを実装します。
このサンプルの動作は、自分の好きな色をAlexaに覚えてもった上で、「私のの好きな色は?」という問にAlexaが答えてくれるというSkillです。
Alexa Skillの動作概要
AlexaのSkillの基本的な仕組みは大きく2つのブロックに分けられます。
- Amazon Alexa: マイクから拾った音声を解析して、コンピュータが理解できる形に翻訳して出力する部分。Google AssistantですとAction on Googleです。
- AWS Lambda: 翻訳後の出力に従って、設計した動作を実行するアルゴリズム、ロジックを記述する部分。Google AssistantだとFulfillment(Dialog Flow内の)にあたります。
という説明で、なんとなく2つの実装をして初めて動くというのが伝わっていたらうれしいです。そうなんです2つのパーツを実装が求められます。
スクリーンに表示するWebだったり、スマホのNativeアプリケーションで説明すると、Amazon Alexaがスクリーンに表示されるボタン、テキストボックス等で、AWS Lambdaがスクリーンのボタンをクリックした後に何が動くか指定している部分です。
それでは実際に実装の説明に進みます。図で表すとこんな↓感じでしょうか。Amazon Alexaが音声で命令を受付、その命令を解釈した上でAWS Lambdaに向けてそれに対応する動作を行う、というイメージです。
(イラストの一部はここのを利用しています)
事前準備
アカウントの準備が必要です。2つのサイトでアカウントを作成する必要があります。
以下の2つが必要ですので事前に作っておきましょう。
- Amazon Web Serviceのアカウント
- Amazon Alexaのアカウント
Amazon Web ServiceのLambdaでFunctionを作成&ロジックの実装
コンソールを表示して、テキストフィールドにLambdaと入力して検索します。
続いて、次の画面の右上、の部分の(1)がN.Virginiaになっていることを確認して(2)をクリックします。
次にどんなFunctionを作成するかを選択します。
表示された画面の上部で(1)のBlueprintを選択して、画面中程のテキストボックスにalexa-skills-kit-color-expertと入力して検索して、選択(クリック)して、画面右下の[Configure]ボタンをクリックして次の画面に進みます。
ここから、作成するFunctionの詳細を入力していきます。
表示された画面で以下の設定を行います。
- NameにmyColorSkillNodejsと入力
- RoleはCreate a custom roleを選択
すると別ウィンドウで「AWS LambdaはIAM roleを使うから・・・」という画面↓が表示されますがビックリしないでください。
以下のように選択して、画面右下の[Allow]ボタンをクリックして次に進みます。
- IAM Role: lambda_basic_execution
- Policy Name: Create a new Role Policy
[Allow]ボタンをクリックする元の画面に戻り、値が入力されていると思います。その状態で次に進みましょう。
こんな画面↑が出てきますが、この中のalexa-skills-kitはここではDisableにしておきます。ここにはAlexaのSkillにユニークに与えられるIDを入力するのですが、現在の状況ではまだそのIDは取得できていません。なので、Disableにして次にすすみます。
その他の項目は変更せずに[Create Function]ボタンをクリックしてFunctionの実装は完了です。
ここまでで「Amazon Web ServiceのLambdaでFunctionを作る」は一旦終了です。Alexa Skillを作成が完了したらSkill IDを登録しに戻ってきますので忘れないようにしましょう。
Amazon Alexaの実装をする
(画像はほとんど991px以下の場合になります)
Skillの作る
Amazon AlexaのSkill一覧画面↓を表示します。
その画面で[Create Skill]ボタンをクリックして、新たにSkillを作成します。
この画面↓でSkillの名前を指定します。Skillを呼ぶ時の名前ではありませんのでチャチャッと決めちゃいましょう。ここではNameのところにColor Pickerと入力し[Next]ボタンで次に進みます。
次にSkillのモデルを選択します。今回は(1)のCustomを選択(クリック)して、(2)の[Create skill]ボタンをクリックします。
Skillの名前を決める
次に、この画面の右側のSkill builder Checklistを設定していきます。
まず「1. Invocation Name」からです。この名前がSkillを呼び出す時の使う名前になりますので呼びやすく、更に、何の動作がされるSkillかが名前から推測できるようになっていると良いと思います。
(1)にNameを入れて、(2)の[Save Model]ボタンをクリックします。ここではSkillの呼び出し名をcolor pickerとしています。
Slot Typesを追加する
Slot TypeはIntentに紐付けます。Intentとは、音声を解析したときにある動作をさせる為のキッカケ(以後「フック」と書きます)になる文章だったり言葉というイメージです。そのフックの中で更に細かい内容として認識した言葉(このチュートリアルでは「色」)をここで指定していきます。
左メニューのSlot Typesの横にある+をクリックすると、画面右側が下の画像↓のようになります。Create custom slot typeにLIST_OF_COLORSと入力して[Create custom slot type]ボタンをクリックして次に進みます。
Slot Valueに値を入力していきます。
red, blue, orange, gold, silver, yellow, black, white
を入れていきます。1つの単語を入力後「Enterキー」またはテキストボックスの右についている+をクリックすることで追加されます。
ちなみに、覚えてもらえる好きな色は、ここで指定した色のみということになります。
ここではまだ[Save Model]ボタンはクリックしないでください。もしクリックしてもエラーになります。クリックしてしまってもエラーになりますが気にしなくてOKです。
Intentを追加します
先程も書きましたが、Intentとは、音声を解析したときにある動作をさせる為のフックになる文章だったり言葉というイメージです。このフックは、その後どんな処理、動作をさせるかの条件分岐に使いますので非常に重要な要素です。
1つ目のIntentは、好きな色をAlexaに覚えてもらう為のフック、という内容になります。
それでは、Intentを入力していきます。
Intentの名前をMyColorIntentとして、[Create custom intent]ボタンをクリックします。
次の画面のSample Utterancesに
my favorite color is {Color}
と入力して、右側の[+]ボタンをクリックして登録します。(入力中に、テキストボックスの下に更にボックスが出てきますが、特に気にしないでください)
次に、追加で表示されるIntent SlotsのNameがColorの欄のSLOT TYPEにLIST_OF_COLORSを選択します。これでSample Utterancesで入力した{Color}がLIST_OF_COLORSの値を採りえますよ、ということを指定したことになります。
もう1つIntentを追加します。
このIntentでは、Alexaに覚えてもらった好きな色を教えてもらう為のフック、という内容になります。
左メニューのIntentsの右側にある+ Addをクリックして、WhatsMyColorIntentと入力して[Create custom intent]ボタンをクリックします。
次の画面でSampleのUtterancesを追加してきます。テキストボックスに入力して、テキストボックスの右端にある「+」をクリックまたは「エンターキー」で追加してきます。
今のリストを追加してください。面倒ならば、上の4つくらいでも充分遊べると思います。ただし、入力した文章でしかAlexaに覚えてもらった色を教えてもらえないので、注意しましょう。
- what's my favorite color
- what is my favorite color
- what's my color
- what is my color
- my color
- my favorite color
- get my color
- get my favorite color
- give me my favorite color
- give me my color
- what my color is
- what my favorite color is
- yes
- yup
- sure
- yes please
ここで[Save Model]ボタンをクリックして保存します。
[Save Model]ボタンをクリックして、設定にエラーが無ければ以下のようなNotifivationが画面の右下に出てきますので確認しましょう。
Buildする
Intentを作る画面にも出てきていたのですが、ここでやっと[Build Mode]ボタンをクリックしてビルドします。
Buildを開始するとこんな↓Notificationが画面右下に表示され、
Buildが完了するとこんな↓Notificationが同じく画面右下に表示されます。
変更を加えた場合は、都度Buildを行い、変更内容を反映させる必要があるので忘れないようにしてください。
Endpointを指定する
Endpointとは、今回の実装ではズバリ言えば先程実装したLambdaのFunctionです。どのFunctionに繋げるのかを設定します。
準備:ARNを取得する
先程Lambdaで作成したFunctionはARNという文字列で定義されていますので、その文字列をまずは調べてコピーします。
Amazon Web ServiceのLambdaでFunctionの画面に戻り、リストから実装したFunctionを選択して設定を表示します。
すると、設定がまとめて表示されてる画面が出てきますが、その右上に
ARN - arn:aws:lambda:hogehoge
で始まる文字列が表示されていると思います。これがARNです。
Skill IDの設定もありますので、このページは別のタブに表示しておきましょう。
Amazon Alexa側の設定
続いて、Amazon Alexa側にそれを設定していきます。
画面上にあるメニューの[Build]をクリックします↓。
続いて、画面右下にある「4.Endpoint」をクリックします。
直下に表示される内容のDefault Regionに先程調べてFunctionのARNを入力します。そして[Save Endpoints]ボタンを忘れずにクリックして保存します。
続いて、実装したLambdaのFunctionがこのSkillからのみアクセスを可能にする設定を行います。LambdaのFunctionでSkill IDというのが出て来ましたが、やっとここでそのSkill IDを取得することが可能になりますので、その文字列をコピーします。
タブに用意しておいたLambdaのFunctionの画面のDesignerの右メニューの中のAlexa Skikll Kitをクリックして、画面下側にConfiguration Triggersを表示しておきます。
Configuration TriggersのSkill IDにSkillの実装の中のEndpointの画面に表示されていたSkill IDをペーストして右下の[Add]ボタンをクリックして設定を保存します。
お疲れ様でした。以上で設定は完了です。
テストで動作させる
タブメニューのTestをクリックします。(下図の(1))
そして、上図の(2)がOffになっている場合は、画像のようにOnにしてください。
動かしてみる
「open color picker」
で実装したアプリの動作開始です。後は、Alexaと対話しながら答えて遊んでみてください。
感想
今後はもう少し掘り下げて遊んでみて、その内容を記事にしようと思います。