alexa-sdkで作ったスキルでカードを表示するようにする

この記事は一人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の３つが増えました。
それぞれカードで表示する「タイトル」「本文」「画像」となります。

これらのデータは以下のような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などのディスプレイのあるデバイスではまた別の出力方法がありますが、そちらについてはまた次回以降に紹介します。