はてなブログ版記事を是非御覧ください！
こちらに大幅に見やすく同じ内容が掲載しております！
【AmazonAlexaスキル開発】
Echo Spotなどのディスプレイ対応Alexa対応スキルの作り方
ask-sdk V2での作り方 - 指定難病IgA腎症エンジニア ブログ
http://urx.space/Oquc
【AmazonAlexaスキル開発】
Echo Spotなどのディスプレイ対応Alexa対応スキルの作り方
ask-sdk V2での作り方 - 指定難病IgA腎症エンジニア ブログ
http://urx.space/Oquc
こういう人向け
- AmazonAlexaでEcho Spot（Echo Show）対応のディスプレイ表示スキル作成したい
- 音声情報だけではなくディスプレイに表示させたい
- AmazonAlexaキャンペーンでEcho Show無料クーポンを狙っている開発者
- AmazonAlexaディスプレイ表示でドハマリした人
- Alexa SDK V2でディスプレイ表示スキルを開発したい開発者様
当記事を読破後、通常のAmazonAlexaスキルを開発されている開発者様全員が
ディスプレイ付き開発が出来るような、そんな記事を目指して書きました。
ディスプレイ対応は難しい？いえいえそんなことない。
ディスプレイ自体そんなに難しい事ではありませんでした。
ただ、僕はそもそもディスプレイ対応が初めてでかつネットに文献が少ないので、
かなりどはまりしてしまいました。
また、開発環境としてAlexa SDK V2です。
ただ、V1開発者の方は以前ご紹介したV1用の記事をご確認下さい。
【AmazonAlexaスキル開発】Echo Spotなどのディスプレイ対応Alexa対応スキルの作り方 ask-sdk V1での作り方 http://iga34engineer.blogspot.com/2018/12/amazonalexaecho-spotalexa-ask-sdk-v1.html
手順の確認
- AmazonAlexaスキル内でインターフェースの切り替え（Displayの有効化）
- Amazonシミュレータ（ビルド）上で、Displayの有効化
- lambda関数のコーディング書き換え・追記
ひとつひとつ順を追って説明していきますね。
結構やっている事自体はシンプルです。
Alexaスキルでディスプレイ使うタイプのスキルですと宣言して、
デバック用にDisplayを表示させて、
コードでディスプレイ対応のコーディングするだけです。
インターフェースの切り替え
カスタム、対話モデル、インテントなどの左タブの下側に
「インターフェース」という項目がございます。
「インターフェース」＞「Displayインターフェース」をチェックつけて、
「インターフェースを保存」して「モデルをビルド」してください。
ビルトインインサイトにディスプレイに関するものが追加されていると思います。
現時点ではこちらでOKです。
※補足：読み飛ばしてもOK
AmazonAlexaスキルシミュレータ内で、ディスプレイありなしを判別をどうやって切り替えるのか調べた結果、こちらのインターフェースを切り替える事でシミュレータ内部処理的にディスプレイを持っているかどうかオンオフになる事がわかりました。
最終的なデバックでディスプレイが無い機種の場合の挙動を調べたい時はこちらをオフにすれば、OKそうです。
Alexaシミュレータ上でDisplayを有効化する。
これは普段からご実施の方もいらっしゃるかもしれません。
ページ右上にある ☑Device Displayにチェックを入れるだけです。
そうすればAlexaシミュレータ上でディスプレイを出す事が出来ます。
基本的にはいつもONでも良いと思います、非ディスプレイスキルだとしても。
※上記にも説明があるように
☑Device Displayはあくまで「ディスプレイをここの画面に表示する？しない？」の機能になります。
内部的にディスプレイを所持しているかどうかをいじりたい場合はインターフェースを調整してください。
Lambda関数側でディスプレイ対応のコーディングする
こちらのURLにコード公開しました、URLを押すだけで閲覧可能です。
ヘルパー関数を実装する
ソースコード冒頭のconst宣言の直下に関数（function）を置きました。
'use strict';
const Alexa = require('ask-sdk');
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;
}
ちなみにV1時代とは書き方が変わっているので注意してください。
■読み飛ばしてもOK：AmazonAlexaでディスプレイありなし機種の判別方法
こちらの関数の意味は、「ディスプレイありなしか識別しております」
AmazonAlexaでは、ディスプレイありなし判定は入力JSONで識別可能です。
機種によって入力JSONが変化するので、こちらの情報を取得しています。
外部にヘルパー関数を出す意味としては、毎回記述していたら長くなってしまうので、
外に出しましょうということです。
こちらのヘルパー関数はそういう記述になります。
ディスプレイを表示させるためのコーディング
実行したい箇所に下記コーディングしてみましょう。
if (supportsDisplay(handlerInput)) {
const myImage = new Alexa.ImageHelper()
.addImageInstance('https://i.imgur.com/rpcYKDD.jpg')
.getImage();
const primaryText = new Alexa.RichTextContentHelper()
.withPrimaryText('テストディスプレイメッセージ')
.getTextContent();
handlerInput.responseBuilder.addRenderTemplateDirective({
type: 'BodyTemplate1',
token: 'string',
backButton: 'HIDDEN',
backgroundImage: myImage,
title: "Pizza Suggest",
textContent: primaryText,
});
その結果が下記画像です。
if (supportsDisplay(handlerInput)){
ヘルパー関数で返ってきた値で条件分岐しています。
ヘルパー関数めっちゃ便利。正分岐がディスプレイある場合、偽分岐が無しの場合です。
なので、ディスプレイが無い場合は変な処理などは起こりません。
余談：この後の処理
handlerInput.responseBuilder.addRenderTemplateDirective({
上記コード後に、下記コードを通り、.getResponse();を通った段階で反映されます。
return handlerInput.responseBuilder
.speak(speechText)
.reprompt('次にお調べする調味料があればおっしゃってください。')
.getResponse();
結論
- 最悪サンプルコードそのままでも行けちゃいます。
- JSONエディターもindex.jsも先程のURLに公開しております。
- ディスプレイ対応は別に難しい事じゃない。当記事読めば５分で出来る。
