DisplayTemplateを利用してEcho Show/Spotにタッチ可能なイメージを表示させる
はじめに
Echo ShowやEcho Spotといったディスプレイ付のデバイスでは、GUIを使ったインタラクションの補完を行うことができます。
これにより、音声だけでなくイメージの表示やタッチによる応答といったマルチモーダルなインタラクションが可能となります。
Echo Show and All-New Echo Spot
今回は、ディスプレイにイメージを表示してタッチすると応答してくれるスキル（英語版）を作ってみます。
スキルを起動するとAlexaの発話とともにイメージが表示され、画面にタッチすると反応してくれる簡単なスキルです。
スキルの設定
ディスプレイを利用したスキルを作成するために、ディスプレイインターフェースを利用することを明示的に設定します。
開発者コンソールにてスキルを作成の上、「Interfaces」より「Display Interface」を有効にします。
バックエンド(AWS Lambda)の実装
Lambda（Node.js）の実装は、以下のようになります。
'use strict';
const Alexa = require('alexa-sdk');
const makePlainText = Alexa.utils.TextUtils.makePlainText;
const makeImage = Alexa.utils.ImageUtils.makeImage;
const handlers = {
'LaunchRequest': function () {
const itemImage1st = makeImage('https://xxx/mesoko-first.png', 720, 480);
const itemImage2nd = makeImage('https://xxx/mesoko-second.png', 720, 480);
const listItemBuilder = new Alexa.templateBuilders.ListItemBuilder();
const listTemplateBuilder = new Alexa.templateBuilders.ListTemplate2Builder();
listItemBuilder.addItem(itemImage1st, 'mesoko-first', makePlainText('Mesoko the 1st'));
listItemBuilder.addItem(itemImage2nd, 'mesoko-second', makePlainText('Mesoko the 2nd'));
const listItems = listItemBuilder.build();
const listTemplate = listTemplateBuilder.setToken('listToken')
.setTitle('Mesoko List')
.setListItems(listItems)
.build();
this.response.speak('Hello, we are "Mesoko" sisters.')
.renderTemplate(listTemplate);
this.emit(':responseReady');
},
'ElementSelected': function () {
let message = 'Who am I?';
switch (this.event.request.token) {
case "mesoko-first":
message = '<audio src=\"https://xxx/mesoko-first.mp3" />';
break;
case "mesoko-second":
message = '<audio src=\"https://xxx/mesoko-second.mp3" />';
break;
}
this.response.speak(message)
this.emit(':responseReady');
},
（以下略）
上記をざっくり解説していきます。
- LaunchRequestハンドラ（スキル起動時）でリストのテンプレート（イメージ）を生成
- ElementSelectedハンドラ（ディスプレイ上要素のタッチ時のイベント）で選択されたアイテムごとの発話(mp3再生)
LaunchRequestハンドラでは、alexa-sdkのtemplateBuilderを利用してリストのテンプレート生成を行います。
今回は、ListTemplate2というテンプレートを利用しています。
ListItemBuilderでアイテムを追加する時に、mesoko-first,mesoko-secondといったtokenを付与することで、後で選択されたアイテムを特定できるようにしておきます。
listItemBuilder.addItem(itemImage1st, 'mesoko-first', makePlainText('Mesoko the 1st'));
listItemBuilder.addItem(itemImage2nd, 'mesoko-second', makePlainText('Mesoko the 2nd'));
ElementSelectedハンドラでは、イベントのリクエストとして取得されるtoken（上記で設定したアイテム毎のtoken）を元に、アイテムごとの処理（発話）を設定しています。
switch (this.event.request.token) {
case "mesoko-first":
message = '<audio src=\"https://xxx/mesoko-first.mp3" />';
break;
case "mesoko-second":
message = '<audio src=\"https://xxx/mesoko-second.mp3" />';
break;
}
以上で、タッチすると応答してくれるイメージを表示する処理を実装することが出来ました。
デモ
おわりに
DisplayTemplateを利用して、Echo Show/Spotにイメージを表示するスキルを作ってみました。
GUIでインターフェースが補完されることで、スキルの可能性やアイデアが更に広がりそうです。
VUI, GUIを上手に織り交ぜると、よりユーザーフレンドリーなスキルや面白いスキルが作れるのではないでしょうか。
それでは。
