Alexaのカスタムスキルがガジェットと連携！ 〜Alexa Gadgets Toolkit の Custom Interfaces を試す〜

### 2019/9/23 追記
**※この記事の執筆時点（2019/8/21時点）では、記事に書いた機能は日本語で利用できない状態でしが、2019/9/23時点では日本語でも利用可能になったようです。**

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">ふと、Alexaのカスタムスキルのインターフェースの設定項目を見たら<br>　カスタムインターフェースコントローラー<br>という日本語の項目が出ていて、「これは、もしや？」と思って試してみたら、以前は英語でしかできなかった Alexa Gadgets Toolkit の Custom Interfaces を日本語で動かせました！ <a href="https://t.co/PJzuV6yrXb">pic.twitter.com/PJzuV6yrXb</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1175876826167558144?ref_src=twsrc%5Etfw">September 22, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## はじめに

先週の金曜にお知らせメールが来ていた、「Alexaのカスタムスキルとガジェットを連携させられる」という話。このときは石巻のでハッカソンに参加中で、試すことができていませんでした。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">金曜に来ていたメール。<a href="https://t.co/OCFENIHuw1">https://t.co/OCFENIHuw1</a> <a href="https://t.co/BhElwMzqdQ">pic.twitter.com/BhElwMzqdQ</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1163306194787684354?ref_src=twsrc%5Etfw">August 19, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


ちなみに、上記のお知らせメールにリンクが掲載されていたのは、下記の記事です。
　[● Introducing Custom Interfaces, Enabling Developers to Build Dynamic Gadgets, Games, and Smart Toys with Alexa : Alexa Blogs](https://developer.amazon.com/ja/blogs/alexa/post/ca2cfbfb-37a2-49de-840c-f06f6ad8b74d/introducing-custom-interfaces-enabling-developers-to-build-dynamic-gadgets-games-and-smart-toys-with-alexa)

上記に関係するサンプルを、少し時間をとって2つほど試してみました。
なお、この記事の執筆時点（2019/8/21時点）では、日本語で利用できない状態です。
**⇒ 冒頭に追記したとおり、その後、日本語でも利用可能になりました。**

## [Alexa Gadgets Toolkit](https://developer.amazon.com/ja/alexa/alexa-gadgets)
上記のお知らせでは、[Alexa Gadgets Toolkit](https://developer.amazon.com/ja/alexa/alexa-gadgets) の新機能で「Custom Interfaces」がリリースされたとありました。まずは、その Alexa Gadgets Toolkit のページの記載を見てみます。

以下の画像の赤い矢印で示した部分、NEW! と書かれたのが今回の新機能の部分。
![Alexa Gadgets Toolkit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2ad916df-db9b-5b4b-f7d3-f470928a88ed.png)

Alexaスキルとガジェットとでやりとりができる、というような記載があります。
そして「Learn more」というリンクがあり、その遷移先は下記のドキュメントになっていました。
　[● Learn About Custom Interfaces | Alexa Skills Kit](https://developer.amazon.com/ja/docs/alexa-gadgets-toolkit/custom-interface.html)

これを読んで試してみるのは大変そうだったので、とりあえずサンプルを探すことにしました。

## サンプルを探してみる

先ほどの Alexa Gadgets Toolkit のページをもう少し下に進むと、赤矢印で示した[リソースライブラリ](https://developer.amazon.com/ja/alexa/alexa-gadgets/resources)のリンクがあり、その先には「GitHubのリンク」や「サンプルプロジェクトや動画」などが掲載されていました。

![リソース.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8be82ca2-a991-0091-a6e4-15b56105e799.png)

そして、ページの下部には、楽しそうな動画が2つほど。
![サンプル動画.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/95fb6add-cd6e-478c-ce99-d078f315460e.png)

サンプルの1つ目、[Alexa-Connected Musical Keyboard Gadget](https://www.youtube.com/watch?v=td65hljQsV0) は、ピアノの鍵盤をLEDで光らせて、曲の弾き方を教えてくれるスキルのようです。動画では、ハッピーバースデーかキラキラ星の2つの曲が選べる流れになっていたようでした。

2つ目、[Alexa-Connected Treasure Box Gadget](https://www.youtube.com/watch?v=nc99obeiU_U)は、Echo の横に置かれた箱の上に色々な物をのせると、それについて解説をしてくれるもののようです。説明を見ると RFID を使っているようで、動画では 動物やアルファベット、自由の女神などの説明をする様子を見ることができました。

このように、いろいろなページを行き来する中で、最終的には「[GitHub上の alexa/Alexa-Gadgets-Raspberry-Pi-Samples ](https://github.com/alexa/Alexa-Gadgets-Raspberry-Pi-Samples)」の中の「[src/examples](https://github.com/alexa/Alexa-Gadgets-Raspberry-Pi-Samples/tree/master/src/examples)」にあったものを試すことにしました。

## お試し1つ目： [Wake Word LED Gadget Example](https://github.com/alexa/Alexa-Gadgets-Raspberry-Pi-Samples/tree/master/src/examples/wakeword)

最初は、カスタムスキルと連携する例ではなかったのですが、電子工作部分が簡単そうだったので [Wake Word LED Gadget Example](https://github.com/alexa/Alexa-Gadgets-Raspberry-Pi-Samples/tree/master/src/examples/wakeword) を試してみました。

動かしてみた結果は、以下の動画のとおりです。
Echo と Bluetooth接続された Raspberry Pi を経由して、LEDが連動しています。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">「Alexa」というウェイクワードへの反応に連動して、Raspberry Pi につながったLEDが、点灯後に消えます。<br><br>この動画は「Alexa-Gadgets-Raspberry-Pi-Samples <a href="https://t.co/yl6eafzQVB">https://t.co/yl6eafzQVB</a> 」の中の1つ<br>「Wake Word Gadget <a href="https://t.co/RVlDF161jN">https://t.co/RVlDF161jN</a> 」を試してみた時のものです。 <a href="https://t.co/BS1tubOizw">pic.twitter.com/BS1tubOizw</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1163824760964317186?ref_src=twsrc%5Etfw">August 20, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このサンプルは、カスタムスキルは使われていないものになります。
動作としては、Alexa がウェイクワードに反応した際に LEDが連動して点灯したり、その後、LEDが消えたりというものです。

以下で、これを試した際の流れを書いていきます。

### 事前準備1： デバイスの準備

まず、[Alexa-Gadgets-Raspberry-Pi-Samples のページ](https://github.com/alexa/Alexa-Gadgets-Raspberry-Pi-Samples
) に記載された前提条件となるものは、以下のとおりです。

- Raspberry Pi Zero W (Starter Kit) か Raspberry Pi 3 B+ (Starter Kit) と、インターネット接続
- 8GB以上のマイクロSDカード（最新の Raspian Stretch がインストール済みのもの）
- Amazon開発者アカウント
- Alexa Gadgets に対応した Echo ⇒ [リストはこちらを参照](https://developer.amazon.com/ja/docs/alexa-gadgets-toolkit/understand-alexa-gadgets-toolkit.html#devices)

### 事前準備2： AVS（Alexa Voice Service）の開発者コンソールでガジェットの登録

主な手順は、以下の通りです。
[Alexa-Gadgets-Raspberry-Pi-Samples のページ](https://github.com/alexa/Alexa-Gadgets-Raspberry-Pi-Samples
) に、画面キャプチャをした画像がたくさんのっているので、参考にしつつ進めます。

また、自分は他に @zono_0 さんの Qiitaの記事「[Raspberry PiでAlexa Voice Service(AVS)を利用する方法](https://qiita.com/zono_0/items/2c485b4176d349964876)」も見たりしました。

1. [AVS（Alexa Voice Service）の開発者コンソール](https://developer.amazon.com/alexa/console/avs/home)にログイン
2. 参考ページの手順を見つつ、情報の登録を進める
3. 上記の手順の中ででてくる Amazon ID（日本語表記では 製品ID）と Alexa Gadget Secret（日本語表記では Alexa ガジェットの秘密）をメモしておく

### 事前準備3： Raspberry Pi を Alexa Gadget としてセットアップ

引き続き、[Alexa-Gadgets-Raspberry-Pi-Samples のページ](https://github.com/alexa/Alexa-Gadgets-Raspberry-Pi-Samples
)を見つつ、作業を進めていきます。

1. Alexa-Gadgets-Raspberry-Pi-Samples のリポジトリのデータを取得（複数の方法が書かれてますが、自分は git clone を利用）⇒ データは `/home/pi` へ置く
2. `/home/pi/Alexa-Gadgets-Raspberry-Pi-Samples/` で `sudo bash ./setup.sh` を実行
3. Amazon ID（製品ID）と Alexa Gadget Secret（Alexa ガジェットの秘密）を登録
4. 処理が終わった後、任意のキーを押して再起動させる
5. [Pairing your gadget to an Echo device](https://github.com/alexa/Alexa-Gadgets-Raspberry-Pi-Samples#pairing-your-gadget-to-an-echo-device) のページ等を参照して、Echo と Raspberry Pi とのペアリングを行う

### Raspberry Pi と LED を接続

[Wake Word LED Gadget Example のページ](https://github.com/alexa/Alexa-Gadgets-Raspberry-Pi-Samples/tree/master/src/examples/wakeword) に記載された、以下の部品を準備。

- Raspberry Pi（自分は Raspberry Pi 3 B+ を使いました）
- ブレッドボード
- LED
- 330Ω の抵抗
- オス-メスのジャンパワイヤ 2本

Raspberry Pi の電源を1度OFFにして、これらを [Wake Word LED Gadget Example のページ](https://github.com/alexa/Alexa-Gadgets-Raspberry-Pi-Samples/tree/master/src/examples/wakeword)の図の通りに配線します。
配線が終わったら、Raspberry Pi の電源をONにしてください。

### サンプルプログラムの実行

`/home/pi/Alexa-Gadgets-Raspberry-Pi-Samples/src/examples/wakeword` で `python3 wakeword_gadget.py` を実行。そして、Echo に "Alexa, what time is it?" などのウェイクワードを含む文章を話しかけるなどする。その際、LED が点灯したり消えたりしたらOKです。

## お試し2つ目： カスタムスキルと連携する [Color Cycler Gadget](https://github.com/alexa/Alexa-Gadgets-Raspberry-Pi-Samples/tree/master/src/examples/colorcycler)

### 事前準備

上記の「[お試し1つ目： Wake Word LED Gadget Example](https://qiita.com/youtoy/private/472da6c009a5ee3407ea#%E3%81%8A%E8%A9%A6%E3%81%971%E3%81%A4%E7%9B%AE-wake-word-led-gadget-example)」と事前準備1〜3は共通になります。

### Raspberry Pi と LED・ボタン（タクトスイッチ）を接続

[Color Cycler Gadget
 のページ](https://github.com/alexa/Alexa-Gadgets-Raspberry-Pi-Samples/tree/master/src/examples/colorcycler) に記載された、以下の部品を準備。

- Raspberry Pi（自分は Raspberry Pi 3 B+ を使いました）
- ブレッドボード
- RGBフルカラーLED（アノードコモン）
- 220Ω の抵抗 3つ
- ボタン（タクトスイッチ）
- オス-メスのジャンパワイヤ 6本

Raspberry Pi の電源を1度OFFにして、これらを Color Cycler Gadget のページの図の通りに配線します。
配線が終わったら、Raspberry Pi の電源をONにしてください。

### カスタムスキルの作成

NodeJS か Python のどちらかを使って、カスタムスキル用のソースコードを準備。
自分は、[Prepare the skill code for Deployment (NodeJS Version)](https://github.com/alexa/Alexa-Gadgets-Raspberry-Pi-Samples/tree/master/src/examples/colorcycler#prepare-the-skill-code-for-deployment-nodejs-version)の部分に記載の手順で ZIPファイルを作りました。

1. `/home/pi/Alexa-Gadgets-Raspberry-Pi-Samples/src/examples/colorcycler/` の中の、`skill/NodeJS/lambda/custom` へ移動
3. `npm install` を実行
4. `zip -r ../../skill-code.zip .` を実行し、ZIPファイルを作成（`skill/NodeJS/`に生成される ）

「[Create your Lambda function](https://github.com/alexa/Alexa-Gadgets-Raspberry-Pi-Samples/tree/master/src/examples/colorcycler#create-your-lambda-function)」に記載の手順に従い、Lambda関数を作成（その際に、上記で作成したZIPファイルを利用）

「[Create your skill](https://github.com/alexa/Alexa-Gadgets-Raspberry-Pi-Samples/tree/master/src/examples/colorcycler#create-your-skill)」に記載の手順を参照し、Alexa Skills Kit開発者コンソールから、新規にカスタムスキルを作成（その際、「デフォルトの言語」は 英語 にする）

「[Test your skill](https://github.com/alexa/Alexa-Gadgets-Raspberry-Pi-Samples/tree/master/src/examples/colorcycler#test-your-skill)」に記載の手順を参照し、スキルを試しに動かしてみる。この時点では「No gadgets found 。。。」という返答が帰ってきていればOK。

### サンプルプログラムの実行

`/home/pi/Alexa-Gadgets-Raspberry-Pi-Samples/src/examples/colorcycler` で `python3 color_cycler.py` を実行。そして、Echo に "Alexa, open 【呼び出し名】" と話しかけて、下記の動画のような動作をしていればOK。

**★この記事の執筆時点（2019/8/21時点）では、実機で実行する部分について、日本語利用でセットアップされた Echo では利用できませんでした（自分は英語でセットアップ）。しかし、その後は冒頭に追記したとおり日本語で利用可能になりました。**

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">先ほどに引き続き2つ目！<br>Alexaのカスタムスキルと、ラズパイにつながったフルカラーLED＋ボタンが連動。<br><br>「Alexa-Gadgets-Raspberry-Pi-Samples」のお試し2つ目、<br>「Color Cycler Gadget <a href="https://t.co/dbFlJLKdKh">https://t.co/dbFlJLKdKh</a> 」です！<br><br>スキルからラズパイ、ラズパイからスキルの両方向でやりとりができてます。 <a href="https://t.co/m9m9M2mIqw">pic.twitter.com/m9m9M2mIqw</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1163853812588617733?ref_src=twsrc%5Etfw">August 20, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## さいごに

無事に、Alexaのカスタムスキルとガジェットが連携するサンプルを試すことができました。
結局、ドキュメントやソースコードをあまり読むことなく進めてしまったので、この後は、仕組みの部分の詳細を見ていければと思っています。