クリスマスプレゼントに、Amazon Echoはいかが？〜Alexaスキルを自作してみよう〜

diffeasyアドベントカレンダー11日目！

みなさん、AIスピーカー持ってますか？
僕はAmazon Echo(以下Echo) Dotが招待制のときに買って、現在de社で有意義に使ってもらってます:relaxed:

今回はそのEchoに内蔵されているAI、Alexaのスキル開発を自作してみて、クリスマスプレゼントにどう？？って広めます:muscle:



# やることざっくりと
前にLTしたときの「一回尋ねるだけで、ほしい情報を取得できるスキル」を作る上で何やったかを書いていきます。
["Hello, Alexa!" Alexaスキルを自作して、生活のちょっとしたことを簡単にしてみた](https://www.slideshare.net/ssuser98d324/hello-alexa-alexa-103374683)

# 事前準備
- amazon.co.jpのアカウント取得(Echoセットアップ及びAlexaコンソールeにログインするために使う)
- AWSアカウント取得(AlexaスキルのエンドポイントでLambdaを使うため)

#### 事前準備における注意点
上URLのスライドにもあるのですが、Alexaコンソールにはamazon.co.jpのアカウント情報で**ログイン**できます。
間違っても、**Amazon Developerアカウント作成ボタン**を押さないように！！！

# Alexaスキル作成
[Alexa開発者ポータル](https://developer.amazon.com/ja/alexa)からAlexaコンソールにログイン
　↓
「スキルの作成」を選択
　↓
スキル名を入力し、スキルモデルにカスタムが選択されていることを確認し、スキルを作成をクリック
<img width="80%" alt="新しいスキルの作成" src="https://qiita-image-store.s3.amazonaws.com/0/222222/94b4ec95-a91a-b2d7-a084-095370aa9e36.png">
**done**✨

# Alexaスキルの設定
スキルには、少なくとも以下の4つを設定する必要があります。

- 呼び出し名
- インテントとサンプル発音
- モデルのビルド
- エンドポイント

それぞれ説明していきます。

## 呼び出し名、インテントとサンプル発音
この2つはセットで覚えたほうがわかりやすいかなと思ってます。

- 呼び出し名  
→ 作ったスキルを起動させる言葉、呪文
- インテントとサンプル発音  
→ インテント：実行できるアクションの定義（function）  
→ サンプル発音：インテントを呼び出すための呪文

って感じです。
例えば、ラジコでラジオ体操第一を聞きたい！って思ったとき、

**「アレクサ、ラジコでラジオ体操第一を流して」**

って言うと思うのですが、そのときの

- **「ラジコ（で）」**が呼び出し名
- **「ラジオ体操第一を流して」**が【ラジオを流すインテント（アクション定義）】と、そのアクションを【発火させるサンプル発音】

になります。

## モデルのビルド
呼び出し名とインテント（＋サンプル発音等）を作成後、スキルの対話モデルをビルドする必要があります。
ビルドは簡単で、モデルを保存後、「モデルをビルド」を選択すると、勝手にビルドしてくれます。
（ここでエラーが起こるときは、大抵呼び出し名かインテントが設定されていないときです）

## エンドポイント
エンドポイントは、対話モデルがインテント発火後に行うアクションをどこでやるか設定する必要があります。
エンドポイントに設定できるのは

- AWS Lambda
- 自作のHTTPS Webサービス

です。

僕はLabmdaしか使ったことないんで、自作側はわかんないんですけど、[Amazon側の要件を満たす必要がある](https://developer.amazon.com/ja/docs/custom-skills/host-a-custom-skill-as-a-web-service.html)ので、こだわりがないならLambdaでいい気がします。

# 実際にやってみよう
用語もおさえたところで、実際にスキルを作ってみましょう！

## 呼び出し名の設定
まずは呼び出し名の設定ですね。
<img width="20%" alt="Alexaカスタム対話モデルメニュー" src="https://qiita-image-store.s3.amazonaws.com/0/222222/21109d4e-9ff7-b589-ed4f-a0f609e64503.png">

スキル作成後に遷移する画面だと、右側にでっかいボタンがあるんですが、ない場合は左側にメニューがあるので、そこから呼び出し名を選択して下さい。
出てきた画面で呼び出し名を設定します。
<img width="60%" alt="呼び出し名の設定" src="https://qiita-image-store.s3.amazonaws.com/0/222222/31bb8d71-2b11-2046-fdfe-d11979817baf.png">

保存は上の「モデルを保存」でできます。

## カスタムインテントとサンプル発音の追加
次に、カスタムインテントとサンプル発音を追加します。
左メニューの「インテント」の右にある「追加」を選択すると、カスタムインテント追加画面になります。
<img width="60%" alt="インテント作成" src="https://qiita-image-store.s3.amazonaws.com/0/222222/da2b20e8-bcfd-6ce2-bd11-adbd1866e947.png">

インテントの作成の後は、サンプル発音を設定します。
このサンプル発音は、このインテントを発火させるための言葉の数分入力します。
<img width="60%" alt="サンプル発音追加" src="https://qiita-image-store.s3.amazonaws.com/0/222222/10e19984-ac58-a8aa-f0a0-c2f879ebc995.png">

## モデルのビルド
ビルドボタンポチー
<img width="40%" alt="モデルのビルド" src="https://qiita-image-store.s3.amazonaws.com/0/222222/5786e06c-1bc1-92cd-15d7-4601a02d398f.png">

## Lambdaでエンドポイント作成
### １．Lambda関数作成
[AWSコンソール](https://aws.amazon.com/jp/console/)にログインし、Lambda→「関数を作成」の順に選択します。
関数は一から作成を選択し、名前、ランタイム、ロールを設定します。
ロールはカスタムロールを作成すると、下画像みたいなのが勝手に設定されます。
<img width="80%" alt="Lambda関数作成" src="https://qiita-image-store.s3.amazonaws.com/0/222222/92877c2d-0c0d-73db-2c86-58e9a150900e.png">
全部設定できたら関数を作成！


### ２．Lambdaの設定
まず、LambdaのトリガーにAlexa Skills Kitがあるので追加します。
<img width="80%" alt="AlexaSkillsKit選択" src="https://qiita-image-store.s3.amazonaws.com/0/222222/7db093f1-8e01-8b8d-6ecb-37cd7bac67c8.png">

次に、myTodayをクリックすると、下側に関数をインラインで編集できるエディタが現れるので、コードエントリタイプを`.zipファイルをアップロード`に変更します。
<img width="80%" alt="コードエントリタイプの変更" src="https://qiita-image-store.s3.amazonaws.com/0/222222/5bcee29f-cf2a-a8e5-fbf0-de9fe755c091.png">

アップロードするファイル達は、下のGithubに入れてるので、ダウンロードして使って下さい。
https://github.com/tk07Sky/alexa-lambda-sample
ちなみに、index.jsの下の部分をAlexaが話してくれるので、名前とかその後の言葉とか、自由に変えて下さい！

```js:index.js
// 一日と書くと「ついたち」と読んじゃうので、ひらがなで「いちにち」って書いてます
TODAYS_MESSAGE = "たいくん、おはようございます！今日は平和ないちにちが過ごせそうですよ！"
```

編集が終わったら、フォルダ名を`myToday`に変更して、zip化して、Lambdaの画面からアップロードしてください。
アップロードしたら、ファイルを指定するために、ハンドラを`myToday/index.handler`に書き換えてください。

### ３．APP_IDの設定
AlexaとLambdaを繋ぐには、AlexaのAPP_IDを設定する必要があります。
AlexaのAPP_IDはAlexaコンソールの左メニュー→エンドポイントから、AWS Lambdaを選択すると出てきます。
<img width="80%" alt="AlexaのAPP_ID取得" src="https://qiita-image-store.s3.amazonaws.com/0/222222/c3130651-9df9-ac6f-3b07-7b97df99a0df.png">

これをコピーしたら、次の２箇所に貼り付けます

- Lambda関数の環境変数
<img width="80%" alt="Lambda関数の環境変数" src="https://qiita-image-store.s3.amazonaws.com/0/222222/c52e64e7-a18e-f195-c70d-70c104c0b804.png">

- Lambdaに設定したAlexa Skills KitのスキルID
<img width="80%" alt="Lambdaに設定したAlexaSkillsKitのスキルID" src="https://qiita-image-store.s3.amazonaws.com/0/222222/5ea2f46d-cb46-cf97-5a88-290d05526449.png">

### ４．Lambda関数のテスト
Lambdaの仕上げは、関数のテストです。
テストのコードはテンプレートがあるのでそれを使います。
Lambdaのコンソール右上のテストを選択すると、以下の画面が出てくるので、イベントテンプレートを「Amazon Alexa Start Session」にし、イベント名を設定したら、一番下までスクロールして保存します。
<img width="60%" alt="テスト設定" src="https://qiita-image-store.s3.amazonaws.com/0/222222/fd0e554f-c928-dae6-26a1-401907cd42ca.png">
保存後、もう一度テストを選択すると、テンプレートの内容でテストが走ります。
こうなったら成功です！
<img width="80%" alt="テスト成功" src="https://qiita-image-store.s3.amazonaws.com/0/222222/eb8c0db6-f545-600c-27cc-b7a1b8471305.png">

## エンドポイントの設定
Lambdaで作ったエンドポイントを、対話モデルに紐づけます。
Lambdaコンソールの右上に`ARN - arn:aws:lambda:ap-northeast-1:ほにゃらら:function:myToday`とありますが、これの`arn:~`以下をコピーし、Alexaコンソールのエンドポイントの「デフォルトの地域」欄に貼り付けます。
<img width=890%" alt="エンドポイントの設定" src="https://qiita-image-store.s3.amazonaws.com/0/222222/18daa787-1ea5-5234-62b0-34d7447b386b.png">

**⭐️完⭐️成⭐️😤😤😤😤😤**


# さっそく試してみよう
スキルが完成したので、さっそく試してみましょう。
## Alexaコンソールで試す
Alexaコンソールの「テスト」タブを選択すると、以下の画面になります。
　<img width="80%" alt="Alexaのテスト" src="https://qiita-image-store.s3.amazonaws.com/0/222222/5da57856-fce6-c7a1-b8c1-24acd126346c.png">

左側にある入力ボックスに「今日の一日で今日がどうなるか教えて」と入力し、Enterを押しましょう！

<img width="80%" alt="Alexaスキルテスト成功" src="https://qiita-image-store.s3.amazonaws.com/0/222222/d0513ade-9c30-4c08-a39a-b7a713f769a3.png">

こんな表示になれば成功です！
ここで失敗してたら、Lambda側で環境変数のAPP_IDが設定されていないか、Alexa Skills KitのトリガーにスキルIDが設定されていないか、もしくはAlexaコンソールのエンドポイントの設定忘れだと思うので、確認してみて下さい。
（変更したけど、Lambdaの保存し忘れとか、ね）

## 実機で試す
EchoのセットアップにAmazon Alexaアプリを使ったと思うのですが、自作したスキルをEchoで有効にするには、そのアプリを使います。
　
メニュー一覧から**「スキル・ゲーム」**を選んで
<img width="30%" alt="IMG_6473.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/222222/ff6305f7-b823-54ad-3383-7d71ced3ae94.jpeg">
スキルメニューから**「有効なスキル」**を選択
<img width="30%" alt="IMG_6474.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/222222/cf7f29f2-6ba4-0bc6-f03b-c03619f008cb.jpeg">
**「すべてのスキル」**タブを選択したら、自作したスキルがあると思うので選んで
<img width="30%" alt="IMG_6475.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/222222/a527f6a6-a5f1-fed7-1e57-d1fd2fd33e7c.jpeg">
**「有効にする」**を選択すると、使えるようになります！
<img width="30%" alt="IMG_6476.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/222222/d560ccc1-3e8c-534d-8e2e-37aff27d4313.jpeg">

**Enjoy😆**


# まとめ
実際に自分で作ってみて、Alexaスキルって結構簡単に作れるんだなーって感じでした。
そんな感じしないですか？

今回作った機能はまだほんの一部で、これにスロット（インテントの引数）とか、ピカチュウスキルのような、指定したボイスとの会話とか、色んなものが作れます（スキルに対して色んなインテントを用意するとかね）
今後も、時間のあるときには便利なAlexaスキルを作れたらなーって思ってます👍

# 学習する上で参考にしたサイト
[Alexaスキル開発トレーニングシリーズ 第1回 初めてのスキル開発](https://developer.amazon.com/ja/blogs/alexa/post/6e716e5c-55b0-445b-b936-9cfac4712e7b/training-1)

# 次回のアドベントカレンダー
次回は、[@00ryoma00](https://qiita.com/00ryoma00)さんのデザインを勉強し始めたお話です！