Echo Showで遊んでみた②

これは[DeafEngineers Advent Calendar 2022](https://qiita.com/advent-calendar/2022/deafengineers)の23日目の記事です。


デフエンジニアの会はデフ（＝ろう・難聴＝聴覚障害者）のエンジニア、また、聴者（＝耳が聴こえる人）エンジニアで構成されているグループです。

みなさんこんにちは、湘南生まれの横浜育ち、新しもの好き「てん」です。
よろしくおねがいしますｂ

前回の「[Echo Showで遊んでみた①](https://qiita.com/tenpro21/items/321987cd5176a6830342)」の続きです。

# 前回のスキルを試してみて
いろいろ試していくうちにアレクサスキルを自作できるということなので、どのようにできるか調べてみたところ、下記の通り。
**◎Alexaスキル開発** 
Alexa Skills Kitで提供されているデザインやAPI、コンポーネントを使って開発し共有できる

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

**◎Blueprint**
コーディングなしで提供されているテンプレートをカスタマイズして共有できる

https://blueprints.amazon.co.jp/

今回はJavaScript等を用いてできるということから、Alexa Skills Kitを使ってどんなコーディングができるか試してみました。

# Alexa Skills Kitを試してみる
試してみるにあたり、いろいろ混乱した部分があったので、備忘録という形で留めておきます。

## Amazon Developerへの登録
１．まず「Amazon Developer」サイトを開いて、右上の「ログイン」をクリック。
![01トップ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/2978073a-daac-b7b8-d391-78d2b2668eb8.png)
２．ログイン画面でユーザ登録する。
**!! ユーザ登録するにあたり注意点をまとめたので参考にしてください !!**
・アカウントは日本Amazonで買い物するのに作成したアカウントでログインします。
　→　Amazon Developerアカウントと紐づけられ日本のアレクサで使えるようになります。
・下の方にある「Amazon Developerアカウントを作成」はUSのアカウントが作成されてしまい、日本のアレクサでは使用できないので、これまでAmazonで買い物等したことがなく新規に作成される場合は、Amazon日本サイトでアカウント作成してから、ここに入るようにしてください。
![02ログイン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/fa33fbdb-d817-5bf1-82bd-c1b0ed952626.png)

３．「Amazon開発者ポータルへの登録」画面が出てくるので、必要事項を記載して、次へ進みます。
![03ポータルへの登録01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/438a6bbe-118b-22f6-3385-8d7a6ec60f02.png)

４．「Amazon開発ポータルへようこそ」画面が出てくるので、適宜チェック入れて「コンソールの利用を開始」ボタンをクリック。
![04ポータルへの登録02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/44e70ba6-af72-e338-d91d-ce3e3a262ba8.png)

## 開発環境の準備
５．ログイン後、右上にある「開発者コンソール」をクリック。
![05amazondeveloper.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/3028a930-4a76-c321-2a7b-223318834a36.png)

６．「開発者コンソール」画面が出てくるので、左側にある「Alexa Skills Kit」をクリック。
![06開発コンソール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/6c6d1b64-d647-e527-cb38-8860ddc6ed1d.png)

７．「スキル」作成画面がでてくるので、右上にある「スキルの作成」をクリック。
![07スキル作成画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/803853d0-835a-9565-ed52-56bdc2ba4345.png)

８．「名前、ロケール」を入れる画面がでてくるので、ここでは下記の通り作成し「次へ」ボタンをクリック。

　　　スキル名　　　：hoge
　　　ロケール選択　：日本語
![08名前ロケール.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/faaf1214-e4e6-d193-1b58-2052298241d4.png)

９．「エクスペリエンスのタイプ」を聞かれるので、ここではテストのために一番右側の「その他」を丸ポッチ。
![09スキル作成画面01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/a5d270c9-a028-1755-597e-d1fcfb686727.png)

１０．「モデルを選択する」「ホスティングサービス」が出てくるので、ここでは下記の通り選択。
　　モデルを選択：カスタム
　　ホスティングサービス：Node.js　※Pythonも選べるのはすごいと思いました。
![10スキル作成画面02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/3ab84fbc-3400-a8ca-4c80-2e7f31ccb151.png)

１１．「ホスト地域」の選択を求められるのですが、米国東部、米国西部、EUしかなかったので、日本に近いという勝手なイメージで「米国西部」を選択して「次へ」ボタンをクリック。
![11スキル作成画面03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/7e856b47-0ca9-91b7-01a7-1f5399c0e318.png)

１２．「テンプレート」選択画面が出てるので、ここではテストのために「スクラッチで作成」を選択し「次へ」ボタンをクリック。
![12スキル作成画面04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/571abe02-6ff8-e60d-141d-4a71f10576e9.png)


１３．「選択内容を確認する」画面がでてくるので、内容に問題ないか確認した上で「Create Skill」ボタンをクリック。
![13スキル作成画面05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/2170610b-e8d9-6f1e-a304-f1ae20cb6f86.png)


１４．初回作成時にAWSアカウントが割り当てられるので、セキュリティのために指示に従いテキスト入力し送信。
![14スキル作成画面06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/65c1139b-e2db-5070-f9f0-97f5461972c6.png)

１５．Alexa-hostedスキルが作成されるので、しばらく待ちます。
![15スキル作成画面07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/9c55ef12-d6de-3c47-bba3-bde3a9378fa8.png)

１６．「Alexaデザインガイド」画面が立ち上がり、コードエディタやテスト、公開等の環境ができます。
![16スキル作成画面08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/f52424fe-566c-7cf2-2094-c9d0137edf78.png)

## 開発してみる
１７．左側の「呼び出し」－「スキルの呼び出し名」をクリックすると、呼び出し名の内容が確認できます。
※８．で入れたスキル名がそのまま呼び出し名に設定されているので、必要に応じて変更します（今回はテストなのでそのままにします）。
![17スキル作成画面09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/45b00849-8876-5a59-631e-50f717cd9371.png)

１８．左側の「インテント」を開くと、発話パターンの設定ができることが確認できます。
※王道？である「HelloWorld」のインテントもあります。
![18スキル作成画面10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/47b13b43-7308-cc5e-9d83-0fc2d3a9228d.png)

１９．どういう風に動作するか確認するために「テスト」を実行してみます。
※スキル作成直後はテストが無効「非公開」になっているので「開発中」に切り替えます。
![19スキル作成画面11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/aaf8abce-66f1-0949-2f2a-77efe6647bbd.png)

２０．「開発中」に切り替えることで、会話テスト等ができます。
![20スキル作成画面12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/90e53c94-825e-0faa-de61-5799c356cb59.png)

２１．試しに会話テストを実施した結果がこちら。
※会話の応答結果およびJSON内容、アレクサ画面イメージまであり、すごい！
![21スキル作成画面13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/26a13713-909f-9aa2-99d1-cf2d24697d62.png)

## アレンジしてみる
２２．会話の応答結果をカスタマイズするには「コードエディタ」をクリック。
index.jsをはじめ、local-debugger.js、package.json、util.jsのソースコードが確認できます。
![22スキル作成画面14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/806f5a57-0fea-c5c3-1979-218f51c69657.png)

２３．index.js上の下記の項目をアレンジし、応答結果をカスタマイズしてみます。

　'LaunchRequest'に対する応答：
　　const speakOutput = 'hogeを立ち上げました';
　'HelloWorldIntent'に対する応答：
　　const speakOutput = 'デフエンジニアの会へようこそ!';

　右上の「デプロイ」を実行しないとテストできないので「デプロイ」ボタンをクリックしデプロイを実施。
![23スキル作成画面15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/1bf903c8-43f0-315a-da5a-a58ab7e50215.png)

２４．再度会話テストしてみた結果がこちら。
![24スキル作成画面16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/57162bd7-8e3c-e6e5-0be0-2dc8eb61d89c.png)

２５．package.jsonがあるので、外部ライブラリを呼び出して実行することもできそう。
![25スキル作成画面17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692202/5cf109cf-d3b3-1aa1-fabe-6a9e81a1b92c.png)

# 今後の予定
機器でのテストをと思ったのですが、開発バージョンの実行方法がわからずもう少し調べてみようと思います。
※展開するには類似のものがないか等の審査を経て公開されるので、ちょっと時間がかかりそうな印象をうけました。
とはいえ、特別な開発環境を揃えることなくWEB上で完結できるあたりすごいなと感動しました。
最初にご紹介した「Blueprint」も時間をみて、試してみようと思います。

他にもスキル開発に関わる機能やツールについての要望を投稿するサイトもあるので、ご参考までに留めておきます。

https://alexa.uservoice.com/forums/922300-alexa%E3%82%B9%E3%82%AD%E3%83%AB-developer-voice-%E6%97%A5%E6%9C%AC%E8%AA%9E

　・手話学習教材（スライド、動画）
　・カメラ認識による応答があればいいな
　・デフエンジニアの会発のアプリを作成公開

・・・といろいろ楽しみが増えてきましたｂ
進捗あれば、またここでご紹介したいと思います！