Amazon Echo Spot で「いでよ神龍」をやってみた

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

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

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

# ゴール

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

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

<img width="799" alt="interface.png" src="https://qiita-image-store.s3.amazonaws.com/0/53393/50e88856-777b-02c7-6db9-a2cc6e33f05b.png">

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

<img width="314" alt="builtin-intent.png" src="https://qiita-image-store.s3.amazonaws.com/0/53393/9960c20b-6a7b-c383-ce7e-87770399e0e9.png">

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

[Echo Showで利用できる標準ビルトインインテント](https://developer.amazon.com/ja/docs/custom-skills/standard-built-in-intents.html#built-in-intents-echo-show)
上記を見ると、一部実装しなきゃいけないのかな。。。？

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

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

```ts
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()](https://github.com/alexa/alexa-skills-kit-sdk-for-nodejs/blob/2.0.x/ask-sdk-core/lib/response/ResponseBuilder.ts#L147) を使用します。

## addRenderTemplateDirective() を掘り下げてみる

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

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

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

```ts
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;
}
```

各テンプレートオブジェクトの詳細は [こちら](https://developer.amazon.com/ja/docs/custom-skills/display-interface-reference.html#display-template-reference) を参照。

## Template を掘り下げてみる

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

```ts
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

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

```ts
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` が登場しましたが、上記の通りです。

## ハンドラーを修正する

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

```diff
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();
  },
};
```

## テスト

<img width="411" alt="dialogue.png" src="https://qiita-image-store.s3.amazonaws.com/0/53393/9af8a444-64bc-63f9-200f-80adf54fc031.png">

<img width="809" alt="shenron.png" src="https://qiita-image-store.s3.amazonaws.com/0/53393/8adea910-f0e7-2042-364c-94cffd21aaab.png">

神龍でたーー！！

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



# まとめ

今回は `BodyTemplate7` を使いましたが、
`BodyTemplate` にも複数種類があり、 `ListTemplate` というものもあります。
詳しくは、公式の [Displayインターフェースとテンプレートリファレンス](https://developer.amazon.com/ja/docs/custom-skills/display-interface-reference.html) に丁寧に説明されております。