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