alexa-sdkでEcho Showのディスプレイ表示に対応する(part.1)

この記事は一人Alexa Skills Kit for Node.js Advent Calendar 2017の20日目の記事です。

Echo ShowのようなディスプレイがあるデバイスではCardのように以下のような専用の表示に関する記述があります。

{
  "directives": [
    {
      "type": "Display.RenderTemplate",
      "template": {
        "type": "BodyTemplate1",
        "token": "CheeseFactView",
        "backButton": "HIDDEN",
        "backgroundImage": ImageURL,
        "title": "Did You Know?",
        "textContent": {
          "primaryText": {
              "type": "RichText",
              "text": "The world’s stinkiest cheese is from Northern France" 
          }
        }
      }
    }
  ]
}

from : https://developer.amazon.com/blogs/alexa/post/12826e9e-e06a-4ab4-a583-8e074709a9f3/how-to-build-alexa-skills-for-echo-show1

alexa-sdkでは、Alexa.templateBuildersを使用することでこれらのObject(JSON)を比較的簡単に作ることができます。

Shiftermanでトライしたケース

実際にトライしてみたケースです。

'use strict'
const Alexa = require('alexa-sdk')
const http = require('https')
const makePlainText = Alexa.utils.TextUtils.makePlainText
const makeImage = Alexa.utils.ImageUtils.makeImage

const handlers = {
  'LaunchRequest': function () {
    // Build template
    const builder = new Alexa.templateBuilders.BodyTemplate2Builder()
    const template = builder.setTitle('skill tittle')
      .setImage(makeImage('https://getshifter.io/app/uploads/2017/05/Shifter_KO__Full_Bkg-01-1024x1024.png'))
      .setTextContent(makePlainText('this is some description about the fact'), makePlainText('sample'))
      .build()
    this.response.renderTemplate(template)

    this.response.cardRenderer(SKILL_NAME, 'this is some description about the fact')
    this.response.speak(speechOutput)

    this.emit(':responseReady')
  }
}

text / image共に専用のオブジェクトとして格納する必要がありますので、Alexa.utilsから必要なものを取得します。
あとは作りたいタイプのテンプレートビルダーをew Alexa.templateBuilders.BodyTemplate2Builder()のような形で呼び出して、メソッドチェーンで表示する内容を追加していきます。

なお、これらに対応する場合はthis.emit()ではなくthis.emit(':responseReady')を使います。