AlexaカスタムスキルとEcho Showで子供のお手伝いを記録してみた

## なんでやろうと思ったか

プライムデーとかで衝動的にEcho Showを買ったものの、使い道としてニュースや天気を聞くくらいになっていました。何か活用できないかと考えていたところ、以下のすばらしい資料があり、こちらを参考に我が家でもこどものお手伝いを記録しつつ、ついでにEcho Showを使って見える化してみようと思いました。

https://www.slideshare.net/ssuseredaaf9/alexa-amplify

## Alexaスキルとは

Alexaスキルとは、Amazonが販売している音声デバイス(Amazon Echoなど)やアプリに搭載されている音声サービス「Alexa」の機能を拡張するアプリケーションのことを言います。ニュースや天気もAlexaスキルになります。このAlexaスキルは自分で作成（公開）することができ、クッキングスキル、スマートデバイススキルなど用途に応じた作成方法があります。([参考](https://developer.amazon.com/ja-JP/docs/alexa/ask-overviews/list-of-skills.html))
今回は、Alexaスキルの中でも自分でプログラミングができて汎用性の高い、カスタムスキルを使っていきます。このカスタムスキルの作成方法や環境準備については以下の公式動画シリーズ「Alexa道場」が非常にわかりやすいです。

https://developer.amazon.com/ja-JP/alexa/alexa-skills-kit/get-deeper/webinars

## カスタムスキルを作成する

### Amazon Developerアカウント作成

Alexaスキルを作成するためには Amazon Developer のアカウントが必要になります。
開発者サイト([https://developer.amazon.com/ja](https://developer.amazon.com/ja))にアクセスし、ログインからアカウントを作成してください。既にAlexaを持っている方はAlexaに登録しているamazonアカウントのメールアドレスと一致するようにしてください。

![alexa1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/6b349089-2419-2bba-a307-73826c148159.jpeg)


### Alexa開発者コンソールでカスタムスキルを作成

アカウント作成後、Alexa開発者コンソール([https://developer.amazon.com/alexa/console/ask/](https://developer.amazon.com/alexa/console/ask/))にアクセスし、スキルの作成を行います。（私はお手伝い記録という名前にしました）

![alexa2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/2f2ec51c-d1e4-21c4-6720-dc7ad1e725ed.png)


カスタムスキルを作成する場合、ホスティング方法としてAlexa-hosted(Alexa開発者コンソール上のAWS環境）、または自分のAWS環境を利用することができます。Alexa-hostedはお手軽な反面、できることに制限があるため今回は自分のAWS環境上で処理を作成していきたいと思います。

![alexa3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/2d84a9e3-3bf6-7f8f-f360-9264c5d90bbe.png)

カスタムスキル作成後、Alexa上から利用できるかどうかをAlexaホーム([https://alexa.amazon.co.jp/spa/index.html#skills](https://alexa.amazon.co.jp/spa/index.html#skills))から確認することができます。[すべてのスキル]→[開発スキル]から見えることを確認します。
![alexa-skill.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/8f2eb18f-fbdb-50b7-377f-9cc321351645.png)

## カスタムスキルとAWS Lambdaと紐付け

### Lambda ARNの設定

Alexa開発者コンソールにて、自分のAWSアカウントで作成したLambda(Lambda作成手順は省略します)のARNをエンドポイントに設定します。また次の手順で必要になるスキルIDをメモしておきます。

![alexa4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/62f36eba-ddc7-4389-5657-2a7ca3064d20.png)


### Alexa Skill Kitのトリガー紐付け

AWSマネジメントコンソールにて、LambdaのトリガーとしてAlexaを設定します。Alexa Skills Kitを選択し、Skill IDに上記のメモした値を設定します。

![alexa5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/f1baa3de-056d-5d52-9eff-44da87bcb582.png)

## カスタムスキル実装

### 会話のデザイン

初めに会話のデザインをします。以下の公式記事によると、フローチャートよりもシチュエーショナルデザインをするとよいとのことです。

https://developer.amazon.com/ja-JP/alexa/alexa-skills-kit/get-deeper/tutorials-code-samples/build-an-engaging-alexa-skill/module-2

今回のお手伝い記録スキルはこのような会話デザインにしました。スキルを起動し、名前とお手伝い内容を回答し、お手伝いに応じたポイントを付与するというものです。

![alexa-design.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/60e348c1-e348-f461-6a1e-a53445c8c62c.png)


プロンプトに対する回答を識別するために、インテントを登録する必要があります。開発者コンソールから新しいインテントを作成します。以下は会話デザイン内の名前を質問した際のインテントになります。

![alexa-intent.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/ff095677-f65f-41e6-cb68-a029dfc2be7c.png)


名前やお手伝いのように事前に決まっているパターンから認識したい場合、スロットという機能を用います。スロットも同じく開発者コンソールにて設定します。以下はお手伝いの内容をスロットにて定義している部分です。

![alexa-slot.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/9c9fae23-b13f-9bf6-2522-1a813340f8dd.png)

### Lambda実装

Lambdaを実装するときは、[公式のサンプル](https://developer.amazon.com/ja-JP/docs/alexa/custom-skills/use-the-alexa-skills-kit-samples.html)を参考にしました。初めにHello,worldをベースに実装して、プロンプトやインテントの実装イメージを掴むといいと思います。私は、データベースストレージ（DynamoDB）と対話中のセッションの状態管理を利用したかったので追加で [ハイ&ローゲームスキル](https://github.com/alexa/skill-sample-nodejs-highlowgame) を参考にしました。
参考までにDynamoDBには、お手伝い記録の履歴、こども毎のポイント集計、お手伝い内容のマスタの３テーブルを作成しました。以下はお手伝い内容のマスタテーブルです。お手伝い毎のIDとポイントのみのシンプルなテーブルです。IDをスロットのIDと合わせることでkeyで引っ張れるようにしています。

![alexa-table.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/17a4f2b8-aeae-0d1e-92f7-51a7633cb009.png)


### Echo Showでの画面表示
お手伝いをAlexaに報告する際、今までのお手伝いポイントの累計をEcho Showに表示したいと思います。開発者コンソールのマルチモーダルからオーサリングツールで作成をクリックし、開発画面を起動します。

![alexa-display1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/9e0aa1f3-0afe-0656-2ead-01923a5cb89d.png)

画面は、Alexa Presentation Language（APL）を使って開発します。詳細については以下の公式ガイドを参考にしてください。

https://developer.amazon.com/ja-JP/docs/alexa/alexa-presentation-language/add-visuals-and-audio-to-your-skill.html

お手伝い記録スキルでは兄弟全員のポイントを見えるようにして競争心を芽生えさせるようにこんな画面にしてみました。
![alexa-display2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/d48ec3aa-3cd8-9cc7-9a3b-5c7a1ba907ee.png)


### 開発者コンソール上でのテスト
Lambda関数のデプロイとAlexaカスタムスキルのモデルビルドが完了したら、テストを行います。Alexaシミュレータにて発話をタイピング(orマイク入力)することでテストを行うことができます。

![alexa-test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/56e96216-1fcc-354d-1697-9ad63cd63d7a.png)


### 実機でのテスト
ここまでできたらお家のAlexaに話かけてみてください！
動かない場合やエラーが発生した場合は、AWS側のLambdaのログを参照してください。会話に関するデバッグは開発者コンソールから行います。
今回は、非公開（開発ステージ）なので自分のAmazonアカウントに紐づいたデバイスでしか利用できませんが、広く公開して利用してもらおうと思った場合、開発者コンソールにて、公開設定と認定を受けないといけません。（が今回そこについては記載しません）

![alexa-publish.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2277523/05b7ce2d-82f9-eed2-b1f8-bb99ef576259.png)


## 感想

このカスタムスキルを作ってから１ヶ月ほど経ちますが、物珍しさからか子供たちのお手伝いが積極的になってきました。溜まったポイントはゲームやYoutubeなど遊びの時間に還元できるようにしてますがシステムチックにはしていないのでどうにかできないか検討中です。また、お手伝いの内容はDynamoDBを直編集しているのでカスタムスキル以外からも参照・編集できるようなWeb画面でも作ってみようかと思っています。

## 参考
https://developer.amazon.com/ja-JP/alexa/alexa-skills-kit/get-deeper/webinars

https://www.slideshare.net/ssuseredaaf9/alexa-amplify