【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こちらの記事も人気です。

CIの導入を会社に通す最も簡単な方法

チーム別投稿数表示プラグインを作成しました (Wordpress ダッシ…

BacklogAPI有効活用 -各担当者へ個別レポート-

SPDX license identifiers ってなんだ。

Some tricks with Git

gitリポジトリの追加行数レポーティング (gitlab)

Symfony2 Doctrine2の小ネタ(OneToOneリレーション)

【AWS re:Invent 2016】AWS LambdaがC#をサポート

タグクラウド

サービス

インフォメーション

企業情報

会社Facebook

タグ