Amazon Echo Spotにバスの運行状況を表示してみる

Echo Spotが届いたので、早速以前作ったバスの時刻表スキルを画面表示に対応させてみました。

以前の記事：
Amazon Echoにバスの到着時刻を教えて貰う
https://qiita.com/osa9/items/e2cc6318b7ed736ac6ff
上記で作成したスキルをベースに作ります。

サンプルコード：
https://github.com/osa9/alexa-bus/tree/display

Amazonの公式ドキュメント：

1. 全体的な情報
https://developer.amazon.com/ja/docs/custom-skills/display-interface-reference.html

2. Displayテンプレート
https://developer.amazon.com/ja/docs/custom-skills/display-template-reference.html

# 画面表示の仕方
下記が以前作ったメッセージをしゃべらせるサンプルです。

```python:以前作った例
response = {
    'version': '1.0',
    'response': {
        'outputSpeech': {
            'type': 'PlainText',
            'text': message, # しゃべらせたいメッセージ
        }
    }
}
```

画面表示にも対応させたい場合は、ディレクティブにDisplay.RenderTemplateを追加します。

```python:画面表示させる例
   response = {
        'version': '1.0',
        'response': {
            'outputSpeech': {
                'type': 'PlainText',
                'text': speech_message,
            },
            'directives': [
                {
                    'type': 'Display.RenderTemplate',
                    'template': {
                        'type': 'BodyTemplate1',  # テンプレートの種類
                        'token': 'TimeTable1',  # 画面の名前(ページ遷移で使う)
                        'title': 'タイトル',  # タイトル
                        'backgroundImage': {  # 背景画像(省略可)
                            "contentDescription": "string",
                            "sources": [
                                {
                                    "url": IMAGE_URL,
                                }
                            ]
                        },
                        'textContent': {  # 本文
                            'primaryText': {
                                'type': 'RichText',
                                'text': '<font size="2">テスト</font>'
                            }
                        }
                    }
                }
            ]
        }
    }
```

いくつか用意されているレイアウトテンプレートにドキュメント([簡易HTML](https://developer.amazon.com/ja/docs/custom-skills/display-interface-reference.html#supported-markup))を埋め込んでいくような形で作ります。
テンプレートの詳細は[公式ドキュメント](https://developer.amazon.com/ja/docs/custom-skills/display-template-reference.html)がよくまとまっています。

ちなみにテンプレートはBodyTemplate1〜7とListTemplate1〜2がありますが、
Echo Spotの場合はEcho Show等とは違って画面が小さいため、テンプレートによる表示の違いはあまりありません。
BodyTemplate1やListTemplate1,2あたりをメインで使っていく感じじゃないでしょうか。

# スキルを作成する
## スキルを画面表示に対応する
詳細は[サンプルコード](https://github.com/osa9/alexa-bus/tree/display)参照。

BodyTemplate1にシンプルにタイトル・背景画像・テキストを埋め込んだだけです。
背景画像の部分は省略可能で、省略時は黒背景となります。
ちなみにテキストカラーは白色固定なので明るい背景画像の場合は明度を落とすなどの前処理が必要です。

背景画像はEcho Spotの場合は、正方形(480x480)のPNGまたはJPG画像を用意します。
https配下に置いてある必要があるので、S3に置いて公開すると良さげです。

## Alexaスキルの開発者コンソールで設定する
[Alexaスキルの開発者コンソール](https://developer.amazon.com/alexa/console)のインターフェイス設定で、「Displayインターフェイス」をONにしてモデルをビルドし直します。
ビルトインインテントが大量に増えますが、今回は利用しません。

<img width="1218" alt="スクリーンショット 2018-07-29 2.02.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/107166/042d0f56-9f98-5791-4aa5-07d2f43756c4.png">

## シミュレーターでテストしてみる
実際に作ったスキルを開発コンソールのシミュレーターでテストしてみます。
可愛いですね！(ちなみに背景画像は公式サイトからパクってきたものなのでサンプルコードに含まれていません)

<img width="1137" alt="スクリーンショット 2018-07-29 10.57.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/107166/7b203e75-fff0-4bab-a4ac-401a68ede275.png">

## 実機でテストしてみる
無事表示されました！
テキスト表示がシミュレーターと若干ずれるようです。
![IMG_2277.jpg](https://qiita-image-store.s3.amazonaws.com/0/107166/19099542-1d0f-fa10-462d-d3d0c52260cf.jpeg)

表示と同時に背景画像を取得するみたいで画像が重いと画像表示が少し遅延します。

# まとめ
今回はAmazon Echo Spotに画面表示するだけのスキルを作成してみました。
慣れてしまえば割と簡単です。

やっぱり画面あった方が良いですね！