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

音声アシスタント特集

SIN

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では、ResponseBuilderのaddRenderTemplateDirective()を使用してテンプレートを表示します。

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入門（その１）はじめの一歩
 [日本語Alexa] Alexa SDK for Node.js Ver2入門（その２）ハンドラの登録
 [日本語Alexa] Alexa SDK for Node.js Ver2入門（その３）レスポンスの作成
 [日本語Alexa] Alexa-SDK Ver2（その4）スキル属性
 [日本語Alexa] Alexa-SDK Ver2（その5）ダイアログモード
 [日本語Alexa] Alexa-SDK Ver2（その6) 所在地情報
 [日本語Alexa] Alexa-SDK Ver2（その7) ディスプレイ表示

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

2 テンプレートの種類

3 addRenderTemplateDirective

4 BodyTemplate1

5 BodyTemplate3

6 ListTemplate1

7 最後に

8 参考リンク

イベント

EVENT【1/17（水）】初心者向け営業活動をカンタンにする「Zendesk for sales」とは？

EVENT【12/14（木）】認証機能の開発工数削減をデモで体験！次世代認証基盤サービス『Auth0 by Okta』導入実践ウェビナー

EVENT【12/12リモート】クラスメソッドの会社説明会〜フリーランスエンジニア/インフラ案件編〜を開催します

EVENT【1/16（火）】AWSセキュリティ成熟度モデルを活用して組織のセキュリティレベルを上げよう！

EVENT【1/11（木）】忙しすぎるエンジニアのための開発環境リファクタリングガイド《2023年後期版》

EVENT【1/18（木）東京】VMware Cloud on AWS／Amazon FSx for NetApp ONTAP 〜俺たちの推しサービスを見て・聞いて・使ってくれ〜

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

2 テンプレートの種類

3 addRenderTemplateDirective

4 BodyTemplate1

5 BodyTemplate3

6 ListTemplate1

7 最後に

8 参考リンク

イベント

EVENT【1/17（水）】初心者向け 営業活動をカンタンにする「Zendesk for sales」とは？

EVENT【12/14（木）】認証機能の開発工数削減をデモで体験！次世代認証基盤サービス『Auth0 by Okta』導入実践ウェビナー

EVENT【12/12リモート】クラスメソッドの会社説明会 〜フリーランスエンジニア/インフラ案件編 〜 を開催します

EVENT【1/16（火）】AWSセキュリティ成熟度モデルを活用して組織のセキュリティレベルを上げよう！

EVENT【1/11（木）】忙しすぎるエンジニアのための開発環境リファクタリングガイド《2023年後期版》

EVENT【1/18（木）東京】VMware Cloud on AWS／Amazon FSx for NetApp ONTAP 〜俺たちの推しサービスを見て・聞いて・使ってくれ〜

EVENT【1/17（水）】初心者向け営業活動をカンタンにする「Zendesk for sales」とは？

EVENT【12/12リモート】クラスメソッドの会社説明会〜フリーランスエンジニア/インフラ案件編〜を開催します