alexa-sdk でEcho Showのディスプレイ表示ができるようになっていたので覚書。

基本的な使い方

const Alexa = require('alexa-sdk');

// utility methods for creating Image and TextField objects
const makePlainText = Alexa.utils.TextUtils.makePlainText;
const makeImage = Alexa.utils.ImageUtils.makeImage;

alexa-sdkからDisplay表示に必要なユーティリティを取得します。
これらのユーティリティは以下のようにディスプレイ要素を定義するためのオブジェクトを生成してくれます。

const ImageUtils = require('alexa-sdk').utils.ImageUtils;

// Outputs an image with a single source
ImageUtils.makeImage(url, widthPixels, heightPixels, size, description)
/**
Outputs {
    contentDescription : '<description>'
    sources : [
        {
            url : '<url>',
            widthPixels : '<widthPixels>',
            heightPixels : '<heightPixels>',
            size : '<size>'
        }
    ]
}
*/

ImageUtils.makeImages(imgArr, description)
/**
Outputs {
    contentDescription : '<description>'
    sources : <imgArr> // array of {url, size, widthPixels, heightPixels}
}
*/


const TextUtils = require('alexa-sdk').utils.TextUtils;

TextUtils.makePlainText('my plain text field');
/**
Outputs {
    text : 'my plain text field',
    type : 'PlainText'
}
*/

TextUtils.makeRichText('my rich text field');
/**
Outputs {
    text : 'my rich text field',
    type : 'RichText'
}
*/

https://github.com/alexa/alexa-skills-kit-sdk-for-nodejs#building-echo-show-templates

ハンドラーにセット

通常のレスポンスとちょっと異なる記法になります。

const handlers = {
  'ShowCardIntent': function () {
    const builder = new Alexa.templateBuilders.BodyTemplate1Builder();

    let template = builder.setTitle('My BodyTemplate1')
      .setBackgroundImage(makeImage('https://getshifter.io/app/uploads/2017/05/Shifter_KO__Full_Bkg-01-1024x1024.png'))
      .setTextContent(makePlainText('Text content'))
      .build();

    this.response.speak('Hello shifter man')
      .renderTemplate(template);
    this.emit(':responseReady');
  }
};

あとはLambdaをデプロイすると、以下のようにディスプレイ表示が適用されていることがテストできます。

他のテンプレートを試す

BodyTemplate2

入力

  'ShowCardIntent': function () {

    this.response.speak('Hello shifter man')

    const builder = new Alexa.templateBuilders.BodyTemplate2Builder();

    let template = builder.setTitle('My BodyTemplate2')
      .setImage(makeImage('https://getshifter.io/app/uploads/2017/05/Shifter_KO__Full_Bkg-01-1024x1024.png'))
      .setTextContent(makePlainText('Text content'))
      .build();
    this.response.renderTemplate(template);
    console.log(template)
    this.emit(':responseReady');
  },

出力

BodyTemplate3

入力

  'ShowCardIntent': function () {

    this.response.speak('Hello shifter man')

    // Display.RenderTemplate directives can be added to the response
    if (this.event.context.System.device.supportedInterfaces.Display) {
      const builder = new Alexa.templateBuilders.BodyTemplate3Builder();

      let template = builder.setTitle('My BodyTemplate2')
        .setImage(makeImage('https://getshifter.io/app/uploads/2017/05/Shifter_KO__Full_Bkg-01-1024x1024.png'))
        .setTextContent(makePlainText('Text content'))
        .build();
      this.response.renderTemplate(template);
    }

    this.emit(':responseReady');
  }

出力

さいごに

眠気に負けたのでテストはここまで。
ドキュメントには記載されてないっぽい（2017/08/28時点）ですが、https://github.com/alexa/alexa-skills-kit-sdk-for-nodejs/tree/master/libとかhttps://github.com/alexa/alexa-skills-kit-sdk-for-nodejs/tree/master/test/templateBuildersとかみながらコピペしてると動きます（適当）。