DisplayTemplateを利用してEcho Show/Spotにタッチ可能なイメージを表示させる

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

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

それでは。

参考