Echo Spotが届いたので、早速以前作ったバスの時刻表スキルを画面表示に対応させてみました。
以前の記事：
Amazon Echoにバスの到着時刻を教えて貰う
https://qiita.com/osa9/items/e2cc6318b7ed736ac6ff
上記で作成したスキルをベースに作ります。
サンプルコード：
https://github.com/osa9/alexa-bus/tree/display
Amazonの公式ドキュメント：
-
全体的な情報
https://developer.amazon.com/ja/docs/custom-skills/display-interface-reference.html -
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にしてモデルをビルドし直します。
ビルトインインテントが大量に増えますが、今回は利用しません。
シミュレーターでテストしてみる
実際に作ったスキルを開発コンソールのシミュレーターでテストしてみます。
可愛いですね！(ちなみに背景画像は公式サイトからパクってきたものなのでサンプルコードに含まれていません)
実機でテストしてみる
無事表示されました！
テキスト表示がシミュレーターと若干ずれるようです。
表示と同時に背景画像を取得するみたいで画像が重いと画像表示が少し遅延します。
まとめ
今回はAmazon Echo Spotに画面表示するだけのスキルを作成してみました。
慣れてしまえば割と簡単です。
やっぱり画面あった方が良いですね！