LoginSignup
1
4

More than 5 years have passed since last update.

Amazon Alexaのサンプルを実装してみる

Last updated at Posted at 2018-04-27

この記事は何?

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に向けてそれに対応する動作を行う、というイメージです。
(イラストの一部はここのを利用しています)
Screen Shot 2018-04-28 at 12.23.15 AM.png

事前準備

アカウントの準備が必要です。2つのサイトでアカウントを作成する必要があります。
以下の2つが必要ですので事前に作っておきましょう。
- Amazon Web Serviceのアカウント
- Amazon Alexaのアカウント

Amazon Web ServiceのLambdaでFunctionを作成&ロジックの実装

コンソールを表示して、テキストフィールドにLambdaと入力して検索します。
Screen Shot 2018-04-27 at 4.05.42 PM.png

続いて、次の画面の右上、の部分の(1)がN.Virginiaになっていることを確認して(2)をクリックします。
Screen Shot 2018-04-27 at 4.08.49 PM.png

次にどんなFunctionを作成するかを選択します。
表示された画面の上部で(1)のBlueprintを選択して、画面中程のテキストボックスにalexa-skills-kit-color-expertと入力して検索して、選択(クリック)して、画面右下の[Configure]ボタンをクリックして次の画面に進みます。
Screen Shot 2018-04-27 at 4.15.17 PM.png

ここから、作成するFunctionの詳細を入力していきます。
表示された画面で以下の設定を行います。

  • NameにmyColorSkillNodejsと入力
  • RoleはCreate a custom roleを選択

Screen Shot 2018-04-27 at 4.21.51 PM.png

すると別ウィンドウで「AWS LambdaはIAM roleを使うから・・・」という画面↓が表示されますがビックリしないでください。
Screen Shot 2018-04-27 at 4.22.46 PM.png

以下のように選択して、画面右下の[Allow]ボタンをクリックして次に進みます。

  • IAM Role: lambda_basic_execution
  • Policy Name: Create a new Role Policy

[Allow]ボタンをクリックする元の画面に戻り、値が入力されていると思います。その状態で次に進みましょう。

Screen Shot 2018-04-27 at 4.28.23 PM.png
こんな画面↑が出てきますが、この中の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一覧画面↓を表示します。
Screen Shot 2018-04-27 at 8.05.08 PM.png
その画面で[Create Skill]ボタンをクリックして、新たにSkillを作成します。

この画面↓でSkillの名前を指定します。Skillを呼ぶ時の名前ではありませんのでチャチャッと決めちゃいましょう。ここではNameのところにColor Pickerと入力し[Next]ボタンで次に進みます。
Screen Shot 2018-04-27 at 8.12.29 PM.png

次にSkillのモデルを選択します。今回は(1)のCustomを選択(クリック)して、(2)の[Create skill]ボタンをクリックします。
Screen Shot 2018-04-27 at 9.38.50 PM.png

すると、こんな画面↓が表示されるはずです。
Screen Shot 2018-04-27 at 10.01.14 PM.png

Skillの名前を決める

次に、この画面の右側のSkill builder Checklistを設定していきます。
まず「1. Invocation Name」からです。この名前がSkillを呼び出す時の使う名前になりますので呼びやすく、更に、何の動作がされるSkillかが名前から推測できるようになっていると良いと思います。
(1)にNameを入れて、(2)の[Save Model]ボタンをクリックします。ここではSkillの呼び出し名をcolor pickerとしています。

Screen Shot 2018-04-27 at 10.03.49 PM.png

Slot Typesを追加する

Slot TypeはIntentに紐付けます。Intentとは、音声を解析したときにある動作をさせる為のキッカケ(以後「フック」と書きます)になる文章だったり言葉というイメージです。そのフックの中で更に細かい内容として認識した言葉(このチュートリアルでは「色」)をここで指定していきます。

左メニューのSlot Typesの横にある+をクリックすると、画面右側が下の画像↓のようになります。Create custom slot typeLIST_OF_COLORSと入力して[Create custom slot type]ボタンをクリックして次に進みます。
Screen Shot 2018-04-27 at 10.41.12 PM.png

Slot Valueに値を入力していきます。
red, blue, orange, gold, silver, yellow, black, white
を入れていきます。1つの単語を入力後「Enterキー」またはテキストボックスの右についている+をクリックすることで追加されます。
Screen Shot 2018-04-27 at 10.43.46 PM.png
ちなみに、覚えてもらえる好きな色は、ここで指定した色のみということになります。

ここではまだ[Save Model]ボタンはクリックしないでください。もしクリックしてもエラーになります。クリックしてしまってもエラーになりますが気にしなくてOKです。

Intentを追加します

先程も書きましたが、Intentとは、音声を解析したときにある動作をさせる為のフックになる文章だったり言葉というイメージです。このフックは、その後どんな処理、動作をさせるかの条件分岐に使いますので非常に重要な要素です。

1つ目のIntentは、好きな色をAlexaに覚えてもらう為のフック、という内容になります。

それでは、Intentを入力していきます。
Intentの名前をMyColorIntentとして、[Create custom intent]ボタンをクリックします。
Screen Shot 2018-04-27 at 10.20.13 PM.png

次の画面のSample Utterances
my favorite color is {Color}
と入力して、右側の[+]ボタンをクリックして登録します。(入力中に、テキストボックスの下に更にボックスが出てきますが、特に気にしないでください)
Screen Shot 2018-04-27 at 10.23.18 PM.png

次に、追加で表示されるIntent SlotsのNameがColorの欄のSLOT TYPEにLIST_OF_COLORSを選択します。これでSample Utterancesで入力した{Color}LIST_OF_COLORSの値を採りえますよ、ということを指定したことになります。
Screen Shot 2018-04-27 at 10.47.46 PM.png

もう1つIntentを追加します。

このIntentでは、Alexaに覚えてもらった好きな色を教えてもらう為のフック、という内容になります。

左メニューのIntentsの右側にある+ Addをクリックして、WhatsMyColorIntentと入力して[Create custom intent]ボタンをクリックします。
Screen Shot 2018-04-27 at 11.49.23 PM.png

次の画面でSampleのUtterancesを追加してきます。テキストボックスに入力して、テキストボックスの右端にある「+」をクリックまたは「エンターキー」で追加してきます。
Screen Shot 2018-04-27 at 11.53.35 PM.png

今のリストを追加してください。面倒ならば、上の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]ボタンをクリックして保存します。
Screen Shot 2018-04-27 at 10.50.57 PM.png

[Save Model]ボタンをクリックして、設定にエラーが無ければ以下のようなNotifivationが画面の右下に出てきますので確認しましょう。
Screen Shot 2018-04-27 at 10.53.37 PM.png

Buildする

Intentを作る画面にも出てきていたのですが、ここでやっと[Build Mode]ボタンをクリックしてビルドします。
Screen Shot 2018-04-27 at 10.57.23 PM.png

Buildを開始するとこんな↓Notificationが画面右下に表示され、
Screen Shot 2018-04-27 at 11.00.57 PM.png

Buildが完了するとこんな↓Notificationが同じく画面右下に表示されます。
Screen Shot 2018-04-27 at 11.02.32 PM.png

変更を加えた場合は、都度Buildを行い、変更内容を反映させる必要があるので忘れないようにしてください。

Endpointを指定する

Endpointとは、今回の実装ではズバリ言えば先程実装したLambdaのFunctionです。どのFunctionに繋げるのかを設定します。

準備:ARNを取得する

先程Lambdaで作成したFunctionはARNという文字列で定義されていますので、その文字列をまずは調べてコピーします。
Amazon Web ServiceのLambdaでFunctionの画面に戻り、リストから実装したFunctionを選択して設定を表示します。
すると、設定がまとめて表示されてる画面が出てきますが、その右上に
ARN - arn:aws:lambda:hogehoge
で始まる文字列が表示されていると思います。これがARNです。
Screen Shot 2018-04-27 at 11.10.29 PM.png
Skill IDの設定もありますので、このページは別のタブに表示しておきましょう。

Amazon Alexa側の設定

続いて、Amazon Alexa側にそれを設定していきます。
画面上にあるメニューの[Build]をクリックします↓。
Screen Shot 2018-04-27 at 11.04.07 PM.png

続いて、画面右下にある「4.Endpoint」をクリックします。
Screen Shot 2018-04-27 at 11.05.12 PM.png

この画面↓でAWS Lambda ARNを選択。
Screen Shot 2018-04-27 at 11.08.19 PM.png

直下に表示される内容のDefault Regionに先程調べてFunctionのARNを入力します。そして[Save Endpoints]ボタンを忘れずにクリックして保存します。
Screen Shot 2018-04-27 at 11.20.42 PM.png

続いて、実装したLambdaのFunctionがこのSkillからのみアクセスを可能にする設定を行います。LambdaのFunctionでSkill IDというのが出て来ましたが、やっとここでそのSkill IDを取得することが可能になりますので、その文字列をコピーします。

タブに用意しておいたLambdaのFunctionの画面のDesignerの右メニューの中のAlexa Skikll Kitをクリックして、画面下側にConfiguration Triggersを表示しておきます。
Screen Shot 2018-04-27 at 11.33.16 PM.png

Configuration TriggersのSkill IDにSkillの実装の中のEndpointの画面に表示されていたSkill IDをペーストして右下の[Add]ボタンをクリックして設定を保存します。
Screen Shot 2018-04-27 at 11.39.34 PM.png

お疲れ様でした。以上で設定は完了です。

テストで動作させる

タブメニューのTestをクリックします。(下図の(1))
Screen Shot 2018-04-28 at 12.04.13 AM.png
そして、上図の(2)がOffになっている場合は、画像のようにOnにしてください。

動かしてみる

「open color picker」
で実装したアプリの動作開始です。後は、Alexaと対話しながら答えて遊んでみてください。

感想

今後はもう少し掘り下げて遊んでみて、その内容を記事にしようと思います。

Reference

1
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
4