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を上手に織り交ぜると、よりユーザーフレンドリーなスキルや面白いスキルが作れるのではないでしょうか。
それでは。