Alexa Blogs
日本のお客様への Echo Spot の発売開始がアナウンスされました。 Echo Spot は音声のパワーにビジュアルディスプレイをコンパクトなデザインで組み合わせており、より魅力的な音声体験をお客様にお届けすることができます。Echo Spot 向けのカスタムスキルでは、標準の音声インターフェイスに加え、ユーザーからの応答にインタラクティブなタッチディスプレイを追加することができます。
スキルの開発者にとっては、画面付きの音声対応デバイスは、音声によるイノベーションを改めて考え直すまたとない機会を創出します。
このブログ記事では、Echo Spot向けに魅力的な音声ファーストのスキルを構築する方法を解説します。
画面付きデバイスの検出方法
ユーザーがスキルを使用する際、画面を見ているかどうかによって、ユーザーからの応答やアクションは異なります。スキル側では、ユーザーが使用しているデバイスにディスプレイ画面が付いているかどうかを検出できるようになっています。あなたのスキルでは、スキルのコード内でこの違いを検出してどちらのタイプの対話にも対応させる必要があります。
下の図は、デバイスが画面付きかどうかを検出し、その後 Alexa Skills Kit にあらかじめ用意されているボディテンプレートの一つを使って、グラフィカルユーザーインターフェイス(GUI)を作成した例です。
まず、下の図のように開発者コンソールで、スキルが画面付きデバイスに対応するように有効化します。
スキルが受け取るJSONリクエストには、デバイスが画面付きかどうか、オーディオプレイヤーやビデオのような、その他のインターフェースをサポートしているかどうかなど、すべての情報が含まれています。
それでは、あらゆるAlexaデバイス（Echo:画面なし、Echo Spot: 画面付き)から受け取るJSONリクエストの中身を詳しくみてみましょう。
ステップ 1
以下のヘルパー関数をスキルのコードに挿入し、スキルのコード内で、ユーザーのデバイスが画面付きかどうかを検出します。上のJSONを見てわかる通り、デバイスがディスプレイをサポートしているかどうかを識別するには、受け取ったJSONリクエストの中を見て、"supportedInterfaces"ノードの中に、"Display"ノードが存在するかどうかをチェックします。
// スキルが画面付きデバイスで動作している時は true を返す。
function supportsDisplay {
var hasDisplay =
this.event.context &&
this.event.context.System &&
this.event.context.System.device &&
this.event.context.System.device.supportedInterfaces &&
this.event.context.System.device.supportedInterfaces.Display
return hasDisplay;
}
ステップ 2
インテント内からヘルパー関数をコールし、デバイスがディスプレイ付きかどうかをチェックします。
suggestPizza: function (){
// supportsDisplay ヘルパー関数をコールし、デバイスが画面付きかどうかチェックする
if (supportsDisplay.call(this)) {
//画面付きの場合
}
else {
//画面なしの場合
}
}
ステップ 3
一般的に、ユーザーがスキルを使用する際、ユーザーが画面を見ているかどうかによって、ユーザーからの応答やアクションは異なります。ユーザーが使用しているデバイスがディスプレイ付きかどうか検出できたら、スキルのコードでは、どちらのタイプの対話でも対応できるようにプログラムします。
以下は、デバイスがディスプレイ付きかどうか検出したあと、Alexa Skills Kitであらかじめ用意されたボディテンプレートの一つを選択してGUIを作成するコードの例です。
const Alexa = require('alexa-sdk');
const makePlainText = Alexa.utils.TextUtils.makePlainText;
const makeRichText = Alexa.utils.TextUtils.makeRichText;
const makeImage = Alexa.utils.ImageUtils.makeImage;
suggestPizza: function (){
var speechOutput
//スキルが受け取ったJSONリクエストを引数としてsupportsDisplayヘルパー関数を呼び出し、デバイスが画面付きかどうかを確認します。
if (supportsDisplay.call(this)) { //もしデバイスが画面付きの場合、テンプレートを使って画面を生成し音声を出力します。
var title = 'ベジタブルピザ’;
var description = 'ゴールデンコーン、ブラックオリーブ、トウガラシ、チーズをふんだんに使ったベジタブルピザがお勧めです。美味しいですよ！';
var imageURL = 'https://i.imgur.com/rpcYKDD.jpg'
speechOutput = description;
// ディスプレイディレクティブの作成
const builder = new Alexa.templateBuilders.BodyTemplate1Builder();
const template = builder.setTitle(title)
.setBackgroundImage(makeImage(imageURL))
.setTextContent(makeRichText('' + description + ''), null, null)
.build();
this.response.renderTemplate(template);
}
else{ //デバイスが画面付きでなかった場合、音声のみで応答を返します。
speechOutput = "ゴールデンコーン、ブラックオリーブ、トウガラシ、チーズをふんだんに使ったベジタブルピザがお勧めです。美味しいですよ。";
}
this.response.speak(speechOutput);
this.emit(':responseReady');
}
Alexa Skills Kit SDK for Node.js バージョン2を使ってマルチモーダルのスキルを構築する
2018年4月に Node.js SDKのバージョン2がリリースされました。 アップデートされたSDKは、従来からの機能の強化に加え新機能を追加することで、より素早くスキルを作成し、コードの複雑さを取り除くことができます。新しいSDKには、マルチモーダルスキルをとても簡単に作成するためのディスプレイディレクティブがあります。 次のコードは、SDK V2の使い方の例です。
ステップ 1
// スキルが画面付きデバイスで動作している時は true を返す。
function supportsDisplay(handlerInput) {
var hasDisplay =
handlerInput.requestEnvelope.context &&
handlerInput.requestEnvelope.context.System &&
handlerInput.requestEnvelope.context.System.device &&
handlerInput.requestEnvelope.context.System.device.supportedInterfaces &&
handlerInput.requestEnvelope.context.System.device.supportedInterfaces.Display
return hasDisplay;
}
ステップ 2
handle 関数の中で supportsDisplay() ヘルパー関数をコールし、レスポンスを組み立てます。
const SuggestPizzaHandler = {
canHandle(handlerInput) {
const request = handlerInput.requestEnvelope.request;
return request.type === 'LaunchRequest'
|| (request.type === 'IntentRequest'
&& request.intent.name === SuggestPizza);
},
handle(handlerInput) {
if (supportsDisplay(handlerInput) ) {
// device has display
}
}
}
ステップ 3
デバイスが画面付きの場合、あらかじめ用意されているボディテンプレートから一つ選択し addRenderTemplateDirective を使用してGUIを生成します。
const SuggestPizzaHandler = {
canHandle(handlerInput) {
const request = handlerInput.requestEnvelope.request;
return request.type === 'LaunchRequest'
|| (request.type === 'IntentRequest'
&& request.intent.name === SuggestPizza);
},
handle(handlerInput) {
const speechOutput = "We suggest the Veggie Delite pizza which has Golden Corn, Black Olives, Capsicum and a lot of cheese. Yum!";
if (supportsDisplay(handlerInput) ) {
const myImage = new Alexa.ImageHelper()
.addImageInstance('https://i.imgur.com/rpcYKDD.jpg')
.getImage();
const primaryText = new Alexa.RichTextContentHelper()
.withPrimaryText(speechOutput)
.getTextContent();
handlerInput.responseBuilder.addRenderTemplateDirective({
type: 'BodyTemplate1',
token: 'string',
backButton: 'HIDDEN',
backgroundImage: myImage,
title: "Pizza Suggest",
textContent: primaryText,
});
}
return handlerInput.responseBuilder
.speak(speechOutput)
.withSimpleCard(speechOutput)
.getResponse();
},
};
Echo Spot でスキルをテストする
作成したスキルは、Echo Spot デバイス、もしくは Alexa Skills Kit 開発者コンソールのテストページにある、Echo Spot シミュレーターを使ってテストすることができます。 Echo Spot デバイスでテストする場合は、Echo Spot をセットアップしたアカウントと、開発者アカウントが同じである必要があります。
参考リソース
画面付きデバイス向けの音声ファーストスキルをデザインする際に役立つリソースをご紹介します。
- 画面付きEchoデバイス向けスキルデザインのベストプラクティス
- Displayインターフェースとテンプレートリファレンス
- Alexaスキルで発生する画面ベースの対話に関する問題のテスト
- Designing Skills for Echo Show: Choosing the Right Display Template (英語)
- Voice Design Guide: Choose the right template on Echo Show or Echo Spot (英語。日本語は現在準備中です)
第10回 Alexa道場 「Echo Spot に対応したスキルを作ろう 」
Echo Spot 向けに、画像やビデオ、フォーマットされたテキストを表示するマルチモーダル対応スキルの作り方を学びましょう。登録は今すぐこちらから。
