Amazon Echo Show用のSkillを作ってみる

この記事はスマートスピーカー Advent Calendar 2017の12日目の記事になります。
といいつつ記事をアップするのが13日になってしまいました・・・。ごめんなさい。

この記事では、まだ日本では未発売ですが、いずれ重要な存在になってきそうなAmazon Echo Show用のSkillを作ってみようと思います。
Amazon Echo ShowはAmazon Echo+タッチスクリーンといった感じの商品で、Skillでもタッチスクリーンを使用できるのでAmazon Echoより様々なことができるようになります。
例えば
 ・スクリーンに情報や画像を表示(テンプレートが使用できます)
 ・動画を再生
 ・スクリーンへのタッチに応じて処理を行う

などができるようになります。
これらすべてを盛り込みたかったのですが、時間の都合上スクリーンに情報を表示のみとさせてください(泣)

Amazon開発者コンソールでSKillを作成する

まず、Amazon Echo用のAlexa Skillと同様にAmazon開発者コンソールからSkillの作成を行っていきます。
Amazon Echo用のSkill作成方法はこちらをご参考にしていただければと。

スキル情報を入力

こちらもほぼ普通のAlexa Skillと同じように入力を行うのですが、スクリーンに表示する際のデザインを簡単にするためにレンダリングテンプレートを使用するため、「はい」を選択してます。

Skill BuilderでIntentを定義

こちらも通常通りにIntentを定義します。今回は「showSomething」というカスタムIntentをひとつだけ定義しています。

Service EndpointをLambdaで作成し、ARNを設定

次にAlexaからのリクエストに対して処理をするService EndpointをLambdaで作成します。今回はJavascript(Node.js)で作成しました。
Echo Showに表示する部分だけ抜粋するとこんな感じです。


'showSomething': function () {

      if (this.event.context.System.device.supportedInterfaces.Display) {
        const builder = new Alexa.templateBuilders.BodyTemplate3Builder();

        let template = builder.setTitle('Echo Show Sample')
          .setImage(makeImage('https://kotodama.today/wp-content/uploads/2017/06/kotodamatoday.png')) //画像の表示
          .setTextContent(makePlainText('KOTODAMA TODAY')) 
          .build();
        this.response.renderTemplate(template);
      }

      this.emit(':responseReady');
    },

「showSomething」というIntentがあった場合にスクリーン付きのデバイスの場合はKOTODAMA TODAYのロゴを表示したり文言を表示したりするようにしています。

今回はBodyTemplate3Builderというクラスを使用していますが、これ以外にもBodyTemplate1Builderや、ListTemplate1Builderなど複数の種類のテンプレートが使用できます。

作成したLambdaのARNはいつもどおり設定します。

以上でSkillの作成は完了です。

テストしてみる

じゃあテストしてみましょうということで、テスト画面で「show something」と入力してみます。
すると、無事に画像やテキストがEcho Show のレンダリングレスポンス(ベータ)に表示されました。よかった、よかった(デザインは微妙ですが><)

おわりに

今回はAmazon Echo Show用のSkillの作り方を駆け足で紹介させていただきました。
でも、まだ

・動画を再生
・スクリーンへのタッチに応じて処理を行う

なども試せておりませんので、いずれまた詳細に解説した記事を書けたらなと考えております。