[日本語Alexa] Alexa-SDK Ver2(その7) ディスプレイ表示

2018.05.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

本記事は、Alexa SDK for Node.js Ver2入門と題して、入門用という位置付けで、Alexa SDKの使い方を、順に紹介しているものです。(対象は、Node.js用のみです。Java用には触れておりません)

その7では、ディスプレイ表示について見ていきたいと思います。

ディスプレイ表示のためには、レスポンスでDisplayディレクティブを返すことになりますが、Alexa-SDKでは、ResponseBuilderで、これを簡単に設定できるようになっています。

なお、ディスプレイ表示に対応するには、スキルのインターフェースで 画面インターフェース を有効にする必要があります。

2 テンプレートの種類

テンプレートの種類は、画像やテキストの配置で下記の7種類が提供されています。

BodyTemplate1
BodyTemplate2
BodyTemplate3
BodyTemplate6
BodyTemplate7
ListTemplate1
ListTemplate2

各テンプレートの詳細については、公式のドキュメントをご参照下さい。
Display Interface and Template Reference

3 addRenderTemplateDirective

Alexa SDKでは、ResponseBuilderaddRenderTemplateDirective()を使用してテンプレートを表示します。

addRenderTemplateDirective(template: interfaces.display.Template): this;

引数のinterfaces.display.Templateは、次のように、テンプレートの種類だけインターフェースが定義されていますので、これに従って値を設定する作業になります。

type Template = interfaces.display.ListTemplate2 |
                interfaces.display.ListTemplate1 | 
                interfaces.display.BodyTemplate7 | 
                interfaces.display.BodyTemplate6 | 
                interfaces.display.BodyTemplate3 | 
                interfaces.display.BodyTemplate2 | 
                interfaces.display.BodyTemplate1;
}

namespace interfaces.display {
    interface BodyTemplate1 {
        'type': 'BodyTemplate1';
        'token'?: string;
        'backButton'?: interfaces.display.BackButtonBehavior;
        'backgroundImage'?: interfaces.display.Image;
        'title'?: string;
        'textContent'?: interfaces.display.TextContent;
    }
    interface BodyTemplate2 {
        'type': 'BodyTemplate2';
        'token'?: string;
        'backButton'?: interfaces.display.BackButtonBehavior;
        'backgroundImage'?: interfaces.display.Image;
        'image'?: interfaces.display.Image;
        'title'?: string;
        'textContent'?: interfaces.display.TextContent;
    }
    interface BodyTemplate3 {
        'type': 'BodyTemplate3';
        'token'?: string;
        'backButton'?: interfaces.display.BackButtonBehavior;
        'backgroundImage'?: interfaces.display.Image;
        'image'?: interfaces.display.Image;
        'title'?: string;
        'textContent'?: interfaces.display.TextContent;
    }
    interface BodyTemplate6 {
        'type': 'BodyTemplate6';
        'token'?: string;
        'backButton'?: interfaces.display.BackButtonBehavior;
        'backgroundImage'?: interfaces.display.Image;
        'textContent'?: interfaces.display.TextContent;
        'image'?: interfaces.display.Image;
    }
    interface BodyTemplate7 {
        'type': 'BodyTemplate7';
        'token'?: string;
        'backButton'?: interfaces.display.BackButtonBehavior;
        'title'?: string;
        'image'?: interfaces.display.Image;
        'backgroundImage'?: interfaces.display.Image;
    }
    interface ListTemplate1 {
        'type': 'ListTemplate1';
        'token'?: string;
        'backButton'?: interfaces.display.BackButtonBehavior;
        'backgroundImage'?: interfaces.display.Image;
        'title'?: string;
        'listItems'?: Array<interfaces.display.ListItem>;
    }
    interface ListTemplate2 {
        'type': 'ListTemplate2';
        'token'?: string;
        'backButton'?: interfaces.display.BackButtonBehavior;
        'backgroundImage'?: interfaces.display.Image;
        'title'?: string;
        'listItems'?: Array<interfaces.display.ListItem>;
    }
}

それでは、いくつかのテンプレートをサンプルとして書いてみます。

4 BodyTemplate1

BodyTemplate1のインターフェースは下記のとおりです。

interface BodyTemplate1 {
    'type': 'BodyTemplate1';
    'token'?: string;
    'backButton'?: interfaces.display.BackButtonBehavior;
    'backgroundImage'?: interfaces.display.Image;
    'title'?: string;
    'textContent'?: interfaces.display.TextContent;
}

interfaces.display.BackButtonBehaviorは、下記のようになっていますので、どちらかを指定します。

type BackButtonBehavior = 'HIDDEN' | 'VISIBLE';

interfaces.display.Image及び、interfaces.display.TextContentについては、生成するためのヘルパー関数が利用可能です。

interfaces.display.Image

const myImage = new Alexa.ImageHelper()
    .withDescription('FooDescription')
    .addImageInstance('http://BarImageSource')
    .getImage();

interfaces.display.TextContent

const myTextContent = new Alexa.PlainTextContentHelper()
    .withPrimaryText('Foo')
    .withSecondaryText('Bar')
    .withTertiaryText('Baz')
    .getTextContent();

const myTextContent = new Alexa.RichTextContentHelper()
    .withPrimaryText('Foo')
    .withSecondaryText('Bar')
    .withTertiaryText('Baz')
    .getTextContent();

そして、実装は下記のようになりました。

const title = 'BodyTemplate1';
const backgroundImage = new Alexa.ImageHelper()
    .addImageInstance('https://s3.amazonaws.com/skill-card-sample/BackgroundImage.jpg')
    .getImage();
const textContent = new Alexa.RichTextContentHelper()
    .withPrimaryText('PrimaryText')
    .withSecondaryText('<font size="7">SecondaryText</font>')
    .withTertiaryText('<font size="1">TertiaryText</font>')
    .getTextContent();
const token = 'TOKEN'
return handlerInput.responseBuilder
    .speak('hello')
    .addRenderTemplateDirective({
        type: 'BodyTemplate1',
        backButton: 'VISIBLE',
        backgroundImage: backgroundImage,
        title: title,
        textContent: textContent,
        token : token,
    })
    .getResponse();

5 BodyTemplate3

ほとんど、使い方は同じですが、BodyTemplate3の実装例は下記のとおりです。

BodyTemplate3では、ヒントの表示が可能ですが、こちらは、addRenderTemplateDirective()ではなく、addHintDirective()を使用します。

const title = 'BodyTemplate3';
const backgroundImage = new Alexa.ImageHelper()
    .addImageInstance('https://s3.amazonaws.com/skill-card-sample/BackgroundImage.jpg')
    .getImage();
const forgroundImage = new Alexa.ImageHelper()
    .addImageInstance('https://s3.amazonaws.com/skill-card-sample/ForgroundImage.jpg')
    .getImage();
const textContent = new Alexa.RichTextContentHelper()
    .withPrimaryText('PrimaryText')
    .withSecondaryText('<font size="7">SecondaryText</font>')
    .withTertiaryText('<font size="1">TertiaryText</font>')
    .getTextContent();
const token = 'TOKEN'
return handlerInput.responseBuilder
    .speak('hello')
    .addHintDirective('hint message')
    .addRenderTemplateDirective({
        type: 'BodyTemplate3',
        backButton: 'VISIBLE',
        backgroundImage: backgroundImage,
        image:  forgroundImage,
        title: title,
        textContent: textContent,
        token : token,
    })
    .getResponse();

6 ListTemplate1

ListTemplate1の場合は、interfaces.display.ListItemが使用されますが、こちらのインターフェースは下記のとおりです。

namespace interfaces.display {
    interface ListItem {
        'token': string;
        'image'?: interfaces.display.Image;
        'textContent'?: interfaces.display.TextContent;
    }
}

そして実装例です。

const title = 'ListTemplate1';
const backgroundImage = new Alexa.ImageHelper()
    .addImageInstance('https://s3.amazonaws.com/skill-card-sample/BackgroundImage.jpg')
    .getImage();
const image = new Alexa.ImageHelper()
    .addImageInstance('https://s3.amazonaws.com/skill-card-sample/ForgroundImage.jpg')
    .getImage();
const textContent = new Alexa.PlainTextContentHelper()
    .withPrimaryText('PrimaryText')
    .withSecondaryText('SecondaryText')
    .withTertiaryText('TertiaryText')
    .getTextContent();
const listItem = {
    token : 'item',
    image : image,
    textContent : textContent
}

const token = 'TOKEN'
return handlerInput.responseBuilder
    .speak('hello')
    .addRenderTemplateDirective({
        type: 'ListTemplate1',
        backButton: 'HIDDEN',
        backgroundImage: backgroundImage,
        listItems:  [listItem, listItem, listItem],
        title: title,
        token : token,
    })
    .getResponse();

7 最後に

今回は、ディスプレイ表示について見てみました。ResponseBuilderでは、既存のコードに追加するだけでディスプレイ表示に対応できることが分かります。

まだ、国内ではディスプレイ対応の端末が販売されていませんが、今のうちにイメージアップしておくことは大事かもしれません。

8 参考リンク


Display Interface and Template Reference
Response Building
Echo Showの表示を試してみる @sparkgene
[日本語Alexa] Alexa SDK for Node.js Ver2入門(その1)はじめの一歩
[日本語Alexa] Alexa SDK for Node.js Ver2入門(その2)ハンドラの登録
[日本語Alexa] Alexa SDK for Node.js Ver2入門(その3)レスポンスの作成
[日本語Alexa] Alexa-SDK Ver2(その4)スキル属性
[日本語Alexa] Alexa-SDK Ver2(その5)ダイアログモード
[日本語Alexa] Alexa-SDK Ver2(その6) 所在地情報
[日本語Alexa] Alexa-SDK Ver2(その7) ディスプレイ表示