【Alexaスキル開発】今更だけど、Body Templateの種類についてまとめてみた

AIアシスタント Advent Calendar 2018 8日目です!

開発部辻です。
アドベントカレンダーに登録していたことを一週間前まで忘れていました。

12月12日についに日本にもEcho Show端末が来るということで、画面付きスキル開発には欠かせないBody Templateをまとめてみました。
※今回Alexa Presentation Language(APL)の話はしませんのでご了承ください。

Alexa Developer Consoleのテストで表示されるものは若干画像の表示などがずれているため、Echo Show(日本未発売)を使用して確認しました。
(ディスプレイを撮影したため写真が粗くなっています…すみません)

BodyTemplate1

画像が背景に、左上に文字が出てくるタイプですね。

const IMG_URL = 'https://www.sabacan.info/img/syoku_img01.png';

const image = new ImageHelper()
    .addImageInstance(IMG_URL)
    .getImage();

const text = new PlainTextContentHelper()
    .withPrimaryText('Primary Text')
    .withSecondaryText('Secondary Text')
    .withTertiaryText('Tertiary Text')
    .getTextContent();

const title = 'BodyTemplate1';

return handlerInput.responseBuilder
    .speak(title)
    .addRenderTemplateDirective({
        type: "BodyTemplate1",
        backButton: "VISIBLE",
        backgroundImage: image,
        title: title,
        textContent: text
    })
    .getResponse();

const IMG_URL = 'https://www.sabacan.info/img/syoku_img01.png';

const image = new ImageHelper()

.addImageInstance(IMG_URL)

.getImage();

const text = new PlainTextContentHelper()

.withPrimaryText('Primary Text')

.withSecondaryText('Secondary Text')

.withTertiaryText('Tertiary Text')

.getTextContent();

const title = 'BodyTemplate1';

return handlerInput.responseBuilder

.speak(title)

.addRenderTemplateDirective({

type: "BodyTemplate1",

backButton: "VISIBLE",

backgroundImage: image,

title: title,

textContent: text

})

.getResponse();

BodyTemplate2

BodyTemplate1の右上に別の画像を挿入できます。

const IMG_URL = 'https://www.sabacan.info/img/syoku_img01.png';
const IMG2_URL = 'https://www.sabacan.info/img/syoku_img00.png';

const image = new ImageHelper()
    .addImageInstance(IMG_URL)
    .getImage();

const image2 = new ImageHelper()
    .addImageInstance(IMG2_URL)
    .getImage();

const text = new PlainTextContentHelper()
    .withPrimaryText('Primary Text')
    .withSecondaryText('Secondary Text')
    .withTertiaryText('Tertiary Text')
    .getTextContent();

const title = 'BodyTemplate2';

return handlerInput.responseBuilder
    .speak(title)
    .addRenderTemplateDirective({
        type: "BodyTemplate2",
        backButton: "VISIBLE",
        backgroundImage: image,
        image: image2,
        title: title,
        textContent: text
    })
    .getResponse();

const IMG_URL = 'https://www.sabacan.info/img/syoku_img01.png';

const IMG2_URL = 'https://www.sabacan.info/img/syoku_img00.png';

const image = new ImageHelper()

.addImageInstance(IMG_URL)

.getImage();

const image2 = new ImageHelper()

.addImageInstance(IMG2_URL)

.getImage();

const text = new PlainTextContentHelper()

.withPrimaryText('Primary Text')

.withSecondaryText('Secondary Text')

.withTertiaryText('Tertiary Text')

.getTextContent();

const title = 'BodyTemplate2';

return handlerInput.responseBuilder

.speak(title)

.addRenderTemplateDirective({

type: "BodyTemplate2",

backButton: "VISIBLE",

backgroundImage: image,

image: image2,

title: title,

textContent: text

})

.getResponse();

BodyTemplate3

左上の画像を顔写真とかにすれば人物紹介に使えそうな感じ

const IMG_URL = 'https://www.sabacan.info/img/syoku_img01.png';
const IMG2_URL = 'https://www.sabacan.info/img/syoku_img00.png';

const image = new ImageHelper()
    .addImageInstance(IMG_URL)
    .getImage();

const image2 = new ImageHelper()
    .addImageInstance(IMG2_URL)
    .getImage();

const text = new PlainTextContentHelper()
    .withPrimaryText('Primary Text')
    .withSecondaryText('Secondary Text')
    .withTertiaryText('Tertiary Text')
    .getTextContent();

const title = 'BodyTemplate3';

return handlerInput.responseBuilder
    .speak(title)
    .addRenderTemplateDirective({
        type: "BodyTemplate3",
        backButton: "VISIBLE",
        backgroundImage: image,
        image: image2,
        title: title,
        textContent: text
    })
    .getResponse();

const IMG_URL = 'https://www.sabacan.info/img/syoku_img01.png';

const IMG2_URL = 'https://www.sabacan.info/img/syoku_img00.png';

const image = new ImageHelper()

.addImageInstance(IMG_URL)

.getImage();

const image2 = new ImageHelper()

.addImageInstance(IMG2_URL)

.getImage();

const text = new PlainTextContentHelper()

.withPrimaryText('Primary Text')

.withSecondaryText('Secondary Text')

.withTertiaryText('Tertiary Text')

.getTextContent();

const title = 'BodyTemplate3';

return handlerInput.responseBuilder

.speak(title)

.addRenderTemplateDirective({

type: "BodyTemplate3",

backButton: "VISIBLE",

backgroundImage: image,

image: image2,

title: title,

textContent: text

})

.getResponse();

BodyTemplate6

左下にちょっとした説明を入れる感じ。

const IMG_URL = 'https://www.skyarch.net/blog/wp-content/uploads/2017/11/IMG_3016-728x546.jpg';
const IMG2_URL = 'https://www.sabacan.info/img/syoku_img00.png';

const image = new ImageHelper()
    .addImageInstance(IMG_URL)
    .getImage();

const image2 = new ImageHelper()
    .addImageInstance(IMG2_URL)
    .getImage();

const text = new PlainTextContentHelper()
    .withPrimaryText('Primary Text')
    .withSecondaryText('Secondary Text')
    .withTertiaryText('Tertiary Text')
    .getTextContent();

const title = 'BodyTemplate6';

return handlerInput.responseBuilder
    .speak(title)
    .addRenderTemplateDirective({
        type: "BodyTemplate6",
        backButton: "VISIBLE",
        backgroundImage: image,
        image: image2,
        textContent: text
    })
    .getResponse();

const IMG_URL = 'https://www.skyarch.net/blog/wp-content/uploads/2017/11/IMG_3016-728x546.jpg';

const IMG2_URL = 'https://www.sabacan.info/img/syoku_img00.png';

const image = new ImageHelper()

.addImageInstance(IMG_URL)

.getImage();

const image2 = new ImageHelper()

.addImageInstance(IMG2_URL)

.getImage();

const text = new PlainTextContentHelper()

.withPrimaryText('Primary Text')

.withSecondaryText('Secondary Text')

.withTertiaryText('Tertiary Text')

.getTextContent();

const title = 'BodyTemplate6';

return handlerInput.responseBuilder

.speak(title)

.addRenderTemplateDirective({

type: "BodyTemplate6",

backButton: "VISIBLE",

backgroundImage: image,

image: image2,

textContent: text

})

.getResponse();

BodyTemplate7

文字情報はタイトルのみとなっていますね。
画像で説明したい場合に便利そうです

const IMG_URL = 'https://www.skyarch.net/blog/wp-content/uploads/2017/11/IMG_3016-728x546.jpg';
const IMG2_URL = 'https://www.sabacan.info/img/syoku_img00.png';

const image = new ImageHelper()
    .addImageInstance(IMG_URL)
    .getImage();

const image2 = new ImageHelper()
    .addImageInstance(IMG2_URL)
    .getImage();

const text = new PlainTextContentHelper()
    .withPrimaryText('Primary Text')
    .withSecondaryText('Secondary Text')
    .withTertiaryText('Tertiary Text')
    .getTextContent();

const title = 'BodyTemplate7';

return handlerInput.responseBuilder
    .speak(title)
    .addRenderTemplateDirective({
        type: "BodyTemplate7",
        backButton: "VISIBLE",
        backgroundImage: image,
        image: image2,
        title: title,
    })
    .getResponse();

const IMG_URL = 'https://www.skyarch.net/blog/wp-content/uploads/2017/11/IMG_3016-728x546.jpg';

const IMG2_URL = 'https://www.sabacan.info/img/syoku_img00.png';

const image = new ImageHelper()

.addImageInstance(IMG_URL)

.getImage();

const image2 = new ImageHelper()

.addImageInstance(IMG2_URL)

.getImage();

const text = new PlainTextContentHelper()

.withPrimaryText('Primary Text')

.withSecondaryText('Secondary Text')

.withTertiaryText('Tertiary Text')

.getTextContent();

const title = 'BodyTemplate7';

return handlerInput.responseBuilder

.speak(title)

.addRenderTemplateDirective({

type: "BodyTemplate7",

backButton: "VISIBLE",

backgroundImage: image,

image: image2,

title: title,

})

.getResponse();

まとめ

もうすぐ日本でもEcho Showが登場するので、大画面表示対応のスキル開発がはかどりますね!!!!

AWS・クラウドのMSP スカイアーチネットワークス株式会社

AWS・クラウド導入における構築から監視・運用保守までをマネージドサービスで提供する、スカイアーチネットワークスの公式サイト。AWS・クラウドを始め、豊富なサーバー管理の経験と安心のセキュリティ対策、専門エンジニアの確かな知識で、お客様のビジネスの成長をサポートします。AWS・クラウド導入における構築から監視・運用保守までをマネージドサービスで提供する、スカイアーチネットワークスの公式サイト。AWS・クラウドを始め、豊富なサーバー管理の経験と安心のセキュリティ対策、専門エンジニアの確かな知識で、お客様のビジネスの成長をサポートします。

投稿者プロフィール

スカイブロガー

目次

BodyTemplate1

BodyTemplate2

BodyTemplate3

BodyTemplate6

BodyTemplate7

まとめ

投稿者プロフィール

最新の投稿

サービス

インフォメーション

企業情報

会社Facebook

目次

BodyTemplate1

BodyTemplate2

BodyTemplate3

BodyTemplate6

BodyTemplate7

まとめ

投稿者プロフィール

最新の投稿

RECOMMENDこちらの記事も人気です。

Microservices Architecture

大型TVをデジタルサイネージ化し社内情報表示に利用

[Javascript, Node.js] PDFMake PDF pr…

正規表現の基礎

AWSでPHP7+ElastiCache(Redis)を利用したセッショ…

Amazon API Gatewayを利用しAndroidアプリから簡単…

Ruby用Zabbix APIライブラリ、SkyZabbixをリリース

VagrantでMac環境向けにNFSを設定するときの権限設定

タグクラウド

サービス

インフォメーション

企業情報

会社Facebook

タグ