Amazon Echo Alexaスキル 入門（Echo Spot編）

# 1. はじめに

---

## 自己紹介

- TAKAHIRO NISHIZONO
@zono_0 

---

## profile image

![83260.png](https://qiita-image-store.s3.amazonaws.com/0/240522/8e3a2690-4dba-a347-15a6-168ebbee0952.png)


---

## このスライドを見てできること
- Amazon Echo Spotが理解できる。
- Amazon Echo Spot Alexaスキル開発の勘どころが理解できる。

---

# 2. Amazon Echo Spotについて

---

## Amazon Echo Spot

![Echo Spot White.jpg](https://qiita-image-store.s3.amazonaws.com/0/240522/9c98fbce-d99e-2ca1-20d7-9863f1911d38.jpeg)

---

## Amazon Echo Spotとは

- Amazon が開発した「<font color="Red">小さな円形ディスプレイを備える</font>」スマートスピーカ。
- ベッドサイド、デスク、キッチンなどに馴染みやすいデザイン。
- ビデオ通話、ドアモニター、ネット動画などに対応（見込み）。
- 「<font color="Red">画像</font>」「<font color="Red">動画</font>」「<font color="Red">テキスト</font>」が表示でき、「<font color="Red">タップ</font>」操作が可能。

---


## Amazon Echo Spotの使い方

- Amazon Echo Spotに対して話しかけるだけ。

```text:トーク（サンプル）
ユーザー：「アレクサ、今日の天気は？」
アレクサ：「〇〇の現在の天気は晴れで、摂氏20度です。」
```

---

## Amazon Echo Spotの特徴

- 小さな円形ディスプレイ。
- <font color="Red">2.5-inchタッチスクリーン</font>、<font color="Red">480x480pixel</font>、重さ420g。
- Echo Spotでは、「戻る」ボタンが表示されない。戻るボタン有効の場合、左から長いスワイプで同じ効果を得る。
- Echo Spotでは、Hintディレクティブがレスポンスで使用されていても、表示されない。

---

## Amazon Echo Show

![Amazon Echo Show, Black and White.jpg](https://qiita-image-store.s3.amazonaws.com/0/240522/80d6f930-7344-5442-b19b-cf112bccae71.jpeg)

---

## Amazon Echo Showの特徴

- 長方形ディスプレイ。（日本未発売）
- <font color="Red">7-inchタッチスクリーン</font>、<font color="Red">1024x600pixel</font>、重さ1,170g。
- Echo Showでは、各テンプレートにデフォルトで戻るボタンの表示制御が可能。
- Echo Showでは、Hintディレクティブがレスポンスで使用されている場合、表示される。

---

## Amazon Echo Spotで出来ること

- 画像表示
- 動画再生
- テキスト表示
- ビデオ通話（神機能！だけど、まだ未対応）
- ドアモニター（まだ未対応）
- カメラも付いてるよ！（まだ利用できない）

---

## Echo 姉妹製品

- Amazon Echo Dot 小型（$50）
- Amazon Echo Spot モニタ付き（$130）
- Amazon Tap 屋外用（$139.99）
- Amazon Echo Look カメラ付き（$199）
- Amazon Echo Show モニタ付き（$230）

---

## Echo 姉妹製品
![スクリーンショット (204).png](https://qiita-image-store.s3.amazonaws.com/0/240522/64c60029-e8ab-bfca-cfdf-fcde286a7624.png)


---

## 類似製品

- Google Home（$130）
- LINE WAVE（14,000円）
- Apple HomePod（$349）
- Microsoft Harman Kardon Invoke（$199.95）

---

# 3. Echo Spot 開発について

---

## 画像の形式とサイズ

- <font color="Red">JPEG、PNG 形式</font>画像に対応
    - 対応形式でないと No Image Found。
- 画像容量は<font color="Red">2MB以内</font>のみ
    - 2MB超えだと No Image Found。
    - <font color="Red">100 KB 程度が適切</font>。（Amazon推奨）
    - バックグラウンドイメージは最大500 KB 程度。（Amazon推奨）
- スモールサイズ（横720 x 縦480）と、ラージサイズ（横1200 x 縦800 ）の用意が必要
    - スマホではスモール、PCではラージが扱われる。
    - ただし、Echo Spotのみをターゲットに開発をおこなうのであれば、<font color="Red">正方形サイズ（横480 x 縦480）が適切かも</font>。
- 画像のホストルール
    - <font color="Red">HTTPSエンドポイント</font>（Amazon認定の認証局が署名したSSL）であること。
    - エンドポイントは画像のcross-origin resource sharing（CORS）を許可すること。
    - S3を用いる場合は、cross-origin resource sharing（CORS）の設定が必要。
    - 画像のURLには有効期限を設定してはいけない。

---

## グラフィカル機能

- <font color="Red">Body templates</font>
    - テキストと画像を表示。
    - 画像選択は不可、<font color="Red">action link</font>によるテキスト選択は可能。
- <font color="Red">List templates</font>
    - 水平または垂直の<font color="Red">リストアイテムを表示</font>。
    - スクロール可能なリストを<font color="Red">タッチ選択可能</font>。
- <font color="Red">Text</font>
    - <font color="Red">PlainText</font>または<font color="Red">RichText</font>（\<br/>、\<b>、\<i>、\<u>、\<font size>、\<action>、\<img src>）を利用可能。
- <font color="Red">Images</font>
    - ボディテンプレートまたはリストテンプレートで使用可能。
- <font color="Red">Touch</font>
    - <font color="Red">リストアイテム</font>または<font color="Red">アクションリンク</font>は、タッチ操作をコーディングされている場合に利用可能。
- <font color="Red">AudioPlayer</font>
    - スキルがオーディオを再生すると表示。
- <font color="Red">Video</font>
    - スキルがビデオを再生するときに表示。

---

## ビルトインインテント（Displayインターフェース）

- <font color="Red">AMAZON.PreviousIntent</font>『前へ』：Lambda実装必須
- <font color="Red">AMAZON.NextIntent</font>『次へ』：Lambda実装必須
- AMAZON.ScrollUpIntent『上にスクロール』
- AMAZON.ScrollLeftIntent『左にスクロール』
- AMAZON.ScrollDownIntent『下にスクロール』
- AMAZON.ScrollRightIntent『右にスクロール』
- AMAZON.PageUpIntent『上のページへ』
- AMAZON.PageDownIntent『下のページへ』
- AMAZON.MoreIntent『もっと見せて』
- AMAZON.NavigateSettingsIntent（ユーザーをEcho Showのホーム画面に移動します。スキルセッションは終了します。）
- AMAZON.NavigateSettingsIntent（ユーザーをEcho Show Device Settings画面に移動すると、スキルセッションは続行されます。）

---
# 4. Amazon Developer Portalでの操作

---

## インターフェース追加

- 「Displayインターフェース」をチェックし、「保存」する。

![スクリーンショット (205).png](https://qiita-image-store.s3.amazonaws.com/0/240522/45e0ed24-67f2-f329-ba9a-454c52f297ee.png)


---

## 追加ビルトインインテントの確認

- 「Displayインターフェース」をチェックすると、ディスプレイ操作に必要な必須インテントが自動追加される。

![スクリーンショット (206).png](https://qiita-image-store.s3.amazonaws.com/0/240522/29f6a7f3-8ec7-1804-6aa1-eb809c806171.png)

---

## リクエストの種類

追加のリクエスト1つ
- <font color="Red">'Display.ElementSelected'</font>　・・・<font color="Red">タッチに対するイベント</font>

既存のリクエスト3つ
- 'LaunchRequest'　・・・インテント無し起動
- 'IntentRequest'　・・・インテント指定発話
- 'SessionEndedRequest'　・・・予期せぬ終了

---

## 明示的セッション終了について

参照すべきQiita記事

- [Alexa ディスプレイ端末対応時にセッションをクローズする時の注意点](https://qiita.com/MYamate_jp/items/730cc6724648af02f904)

---

# 5. 技術ドキュメント

---

## 参考

- [Echo ShowとEcho Spot用スキルの作成](https://developer.amazon.com/ja/docs/custom-skills/build-skills-for-echo-show.html)
- [画面付きのAlexaが使えるデバイス用のスキルの作成](https://developer.amazon.com/ja/docs/custom-skills/create-skills-for-alexa-enabled-devices-with-a-screen.html)
- [Displayインターフェースのリファレンス](https://developer.amazon.com/ja/docs/custom-skills/create-skills-for-alexa-enabled-devices-with-a-screen.html)
- [Echo Showで利用できる標準ビルトインインテント](https://developer.amazon.com/ja/docs/custom-skills/standard-built-in-intents.html#built-in-intents-echo-show)

---

## 参考

- [現在のデバイスでサポートされるインターフェースを決定する](https://developer.amazon.com/ja/docs/custom-skills/best-practices-for-echo-show-skills.html#parse-supported-interfaces)
- [VideoAppインターフェースのリファレンス](https://developer.amazon.com/ja/docs/custom-skills/videoapp-interface-reference.html)
- [ASK SDK for Node.js](https://github.com/alexa/alexa-skills-kit-sdk-for-nodejs/blob/2.0.x/README.ja.md)
- [Echo Spot 技術仕様](https://www.amazon.co.jp/Amazon-Echo-Spot-%28%E3%82%A8%E3%82%B3%E3%83%BC%E3%82%B9%E3%83%9D%E3%83%83%E3%83%88%29-%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%82%B9%E3%83%94%E3%83%BC%E3%82%AB%E3%83%BC-%E3%83%96%E3%83%A9%E3%83%83%E3%82%AF/dp/B01J6A7CT6#tech)

---

# 6. まとめ

---

## Echo Spot Alexaスキル開発でおこなうこと

- ディスプレイ無しデバイスで動作すること。
- <font color="Red">「声のみ」でスキルが操作可能</font>であること。
- Displayインターフェースが有効になっており、必須インテントが追加されていること。
- 必須インテントのうち、Lambda実装必須のインテントについて、ロジック実装されていること。
- <font color="Red">明示的にセッションを終了させる</font>こと。
- <font color="Red">リストアイテム</font>または<font color="Red">アクションリンク</font>利用時は、<font color="Red">'Display.ElementSelected'</font>のリクエストに対するロジックを追加実装しタップ操作対応すること。

---

# 7. おわりに

---

## おわりに
いかがでしたでしょうか？
Echo Spotの情報精査がかんぺきでないため、間違っている箇所があるかもしれません。お気づきの点がございましたら、コメント欄へ、ご指摘お待ちしております。

まずは、Echo Spot対応Alexaスキル作り、してみましょう！！

TAKAHIRO NISHIZONO 2018/07/29

---
## ご視聴ありがとうございました。