alexa-sdkで作ったスキルでカードを表示するようにする
この記事は一人Alexa Skills Kit for Node.js Advent Calendar 2017の18日目の記事です。 Alexa Skillでは音声でのレスポンスだけでなく、管理アプリに表示されるカード […]
広告ここから
広告ここまで
目次
この記事は一人Alexa Skills Kit for Node.js Advent Calendar 2017の18日目の記事です。
Alexa Skillでは音声でのレスポンスだけでなく、管理アプリに表示されるカードについてもカスタマイズができます。
tellでカードを表示する
返事をしてセッションを終了させるTell
では、以下のように実装をします。
const speechOutput = 'Speech output'
this.emit(':tell', speechOutput)
Cardを含める場合は以下のようになります。
const speechOutput = 'Speech output'
const cardTitle = 'cardtitle'
const cardContent = 'cardContent'
const imageObj = imageObj = {
smallImageUrl: 'https://imgs.xkcd.com/comics/standards.png',
largeImageUrl: 'https://imgs.xkcd.com/comics/standards.png'
}
this.emit(':tellWithCard', speechOutput, cardTitle, cardContent, imageObj)
cardTitle
・cardContent
・imageObj
の3つが増えました。
それぞれカードで表示する「タイトル」「本文」「画像」となります。
これらのデータは以下のようなJSONにまとめられます。
{
"shouldEndSession": false,
"outputSpeech": {
"type": "SSML",
"ssml": "<speak> Speech output </speak>"
},
"card": {
"type": "Simple",
"title": "cardtitle",
"content": "cardContent"
}
}
card
は音声再生側では使用されないデータですので、視覚情報として出すことを前提にした内容で構わないかなと思います。
:ask
についてもreprompt
が増えるだけでほぼ同じです。
const speechOutput = 'Speech output'
const repromptSpeech = 'reprompt'
const cardTitle = 'cardtitle'
const cardContent = 'cardContent'
const imageObj = 'https://example.com'
this.emit(':askWithCard', speechOutput, repromptSpeech, cardTitle, cardContent, imageObj)
カードを出すようにすることで、住所などの覚えるのが大変なデータを「アプリに住所出したからみてね」のようにすることができます。
Echo Showなどのディスプレイのあるデバイスではまた別の出力方法がありますが、そちらについてはまた次回以降に紹介します。