Edited at

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

More than 1 year has passed since last update.

本日 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();
},
};

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


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';
}

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


ハンドラーを修正する

では、型定義通りに設定してみます。

パラメータは必要最低限設定

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インターフェースとテンプレートリファレンス に丁寧に説明されております。