本日 Amazon Echo Spot が発売して届いた方もいらっしゃるのではないでしょうか。
私は明日届くそうです・・・。

ということで、
~~Amazon Echo Spot で「いでよ神龍」をやってみた~~
改め、
Amazon Echo Spot の到着が待ちきれなかったのでシミュレーターで「いでよ神龍」をやってみた

では、早速
Display インターフェースを使ってみます。

ゴール

ちび「アレクサ、○○を開いて」
Alexa「(ピコン)」
ちび「いでよ神龍！！」
Alexa「さあ願いを言え、どんな願いも1つだけ叶えてやろう」

Alexa Skills Kit で Display インターフェースを有効にする方法

Alexa Skills Kit の「インターフェース」から Display インターフェースを ON にします。

ビルトインインテントがこんなに増えたんだが。。。
これら全部実装必要なのかしら。。。

Echo Showで利用できる標準ビルトインインテント
上記を見ると、一部実装しなきゃいけないのかな。。。？

とりあえず、今回無視します！

ask-sdk で Display インターフェースを使う方法

const ShenronIntentHandler = {
  canHandle(handlerInput: Alexa.HandlerInput) {
    return handlerInput.requestEnvelope.request.type === 'IntentRequest'
      && handlerInput.requestEnvelope.request.intent.name === 'ShenronIntent';
  },
  handle(handlerInput: Alexa.HandlerInput) {
    return handlerInput.responseBuilder
      .speak('こんにちは')
      .reprompt('こんにちは')
      .getResponse();
  },
};

普段このように書いております ResponseBuilder の addRenderTemplateDirective() を使用します。

addRenderTemplateDirective() を掘り下げてみる

それでは、TypeScript の型定義を追っていきます。

上記、GitHub へのリンクのように、
引数は1つで interfaces.display という namespace にある Template という型を要求しています。

Template の定義は以下のようになっており、
Display.RenderTemplate ディレクティブに定義できるテンプレートオブジェクトが設定できるようになっています。

export declare namespace interfaces.display {
  type Template = interfaces.display.ListTemplate2 | interfaces.display.ListTemplate1 | interfaces.display.BodyTemplate7 | interfaces.display.BodyTemplate6 | interfaces.display.BodyTemplate3 | interfaces.display.BodyTemplate2 | interfaces.display.BodyTemplate1;
}

各テンプレートオブジェクトの詳細はこちらを参照。

Template を掘り下げてみる

今回は BodyTemplate7 を使用します。
BodyTemplate7 で登場する型定義を追っていきます。

export declare namespace interfaces.display {
  interface BodyTemplate7 {
    'type': 'BodyTemplate7';
    'token'?: string;
    'backButton'?: interfaces.display.BackButtonBehavior;
    'title'?: string;
    'image'?: interfaces.display.Image;
    'backgroundImage'?: interfaces.display.Image;
  }
}

どこかに定義されている情報として以下の2つが登場しました。

interfaces.display.BackButtonBehavior
interfaces.display.Image

各定義を追っていきます。

export declare namespace interfaces.display {
  type BackButtonBehavior = 'HIDDEN' | 'VISIBLE';

  interface Image {
    'contentDescription'?: string;
    'sources'?: Array<interfaces.display.ImageInstance>;
  }

  interface ImageInstance {
    'url': string;
    'size'?: interfaces.display.ImageSize;
    'widthPixels'?: number;
    'heightPixels'?: number;
  }

  type ImageSize = 'X_SMALL' | 'SMALL' | 'MEDIUM' | 'LARGE' | 'X_LARGE';
}

新たな登場人物として ImageInstance と ImageSize が登場しましたが、上記の通りです。

ハンドラーを修正する

では、型定義通りに設定してみます。
パラメータは必要最低限設定

const ShenronIntentHandler = {
  canHandle(handlerInput: Alexa.HandlerInput) {
    return handlerInput.requestEnvelope.request.type === 'IntentRequest'
      && handlerInput.requestEnvelope.request.intent.name === 'ShenronIntent';
  },
  handle(handlerInput: Alexa.HandlerInput) {
    return handlerInput.responseBuilder
+     .addRenderTemplateDirective({
+       type: 'BodyTemplate7',
+       title: 'いでよ神龍',
+       image: {
+         sources: [
+           {
+             url: '${画像のURL}'
+           }
+         ]
+       }
+     })
      .speak('さあ願いを言え、どんな願いも1つだけ叶えてやろう')
      .reprompt('どうした、早く願いを言え')
      .getResponse();
  },
};

テスト

神龍でたーー！！

※画像は Google 画像検索で引っかかったものを使わせていただきました

まとめ

今回は BodyTemplate7 を使いましたが、
BodyTemplate にも複数種類があり、 ListTemplate というものもあります。
詳しくは、公式の Displayインターフェースとテンプレートリファレンスに丁寧に説明されております。