テンプレートで楽々!はじめての画面対応スキル開発

Alexa スキル開発のはじめ方EchoSpot, 画面付き

画面付きAlexa、Echo Spot に対応したスキル開発に挑戦しました!

今までは音声だけだった Alexa。
画面が付いたことでスキルの幅が広がるだけでなく、技術の幅も広がりました!
これはキャッチアップせねばと、まずは試しにスキルを作ってみました。

スキル「国旗クイズ」の紹介

まずは、作ったスキルのご紹介。

今回つくったのはこちら!

国旗クイズです。

概要

文字通り、国旗を見て国名を当てるクイズスキル。

「アレクサ、国旗クイズをスタート」
と言ったら画面に国旗の画像が表示され、「この国はどこでしょう?」とクイズが始まります。

正解の国名を言えば「正解」、間違っていれば「違います」

2回連続で間違えたら、
「答えを知りたい場合は、答えを教えてと言ってください」と流れます。

「次へ」と言うことで、次の国旗が表示されます。

百聞は一見にしかず!という言葉は適切ではありませんが(笑)
こちらから「聞」いてみてください。

画面出力フロー

このスキルで画面出力を行っているのは国旗の表示のみ。
 
今回は単純に、LaunchRequest を受け取ったら、DynamoDB を経由して S3 からランダムに引っ張ってきた画像を表示して、「次へ」と言われたらまた別の画像をランダムに表示する、という動きをしています。

なので、新しい問題が呼び出された時だけ国旗を表示するという、超絶ワンパターンな作りになっています。

※ 回答の正誤判定の部分は省いています

テンプレートの使い方

BodyTemplate1 の概要

今回、「画像出力情報構築」の部分は、Display テンプレートの中の BodyTemplate1 を使っています。

一番シンプル。

{
"type":"BodyTemplate1",
"token": "string",
"backButton": "VISIBLE"(default) | "HIDDEN",
"backgroundImage": Image,
"title": "string",
"textContent": TextContent
}

引用元:Displayテンプレートのリファレンス

今回は、backgroundImagetitle だけ定義しました。

ソースコード

まず、頭でこの1文を定義。

次に、LaunchRequest と並列の位置に画面有無を判定する部分を追記。

そして、LaunchRequest で画面付きだと判定したら、GiveQuiz という function に飛んでテンプレートを活用。

まず、画面付きか否かを判断して、画面付きならDB参照を実行。
そこから取ってきたURLをインプットとして、テンプレートに当てはめて行きます。

ほんとこれだけでした!!

まとめ

Displayテンプレートを使えば、本当に簡単に画面付きスキルを作ることができました!

おかげさまで開発期間はたった半日。
画面有無判定と、テンプレート記述だけ追記すれば、今あるスキルを画面付き対応に改良することもサクッとできちゃいそうでした。

私が使った BodyTemplete1 以外にも種類があるので、Displayテンプレートリファレンスでご確認ください♪

参考:日本語版 Echo Spot に対応したスキルの作り方

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でaoxaをフォローしよう!