LoginSignup
5

More than 5 years have passed since last update.

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

Posted at

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

画面表示の仕方

下記が以前作ったメッセージをしゃべらせるサンプルです。

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

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

画面表示させる例
   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)を埋め込んでいくような形で作ります。
テンプレートの詳細は公式ドキュメントがよくまとまっています。

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

スキルを作成する

スキルを画面表示に対応する

詳細はサンプルコード参照。

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

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

Alexaスキルの開発者コンソールで設定する

Alexaスキルの開発者コンソールのインターフェイス設定で、「Displayインターフェイス」をONにしてモデルをビルドし直します。
ビルトインインテントが大量に増えますが、今回は利用しません。

スクリーンショット 2018-07-29 2.02.10.png

シミュレーターでテストしてみる

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

スクリーンショット 2018-07-29 10.57.34.png

実機でテストしてみる

無事表示されました!
テキスト表示がシミュレーターと若干ずれるようです。
IMG_2277.jpg

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

まとめ

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5