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

DevOps採用システム自動構築ツール 「SkyHopper」 をリリース

Vimで複数のファイルを便利に開く

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

SkyWayを利用してスクリーン共有＆音声通話を同時に出来る社内ツールを…

SQLAlchemyのINSERTを高速化してみた

SPDX license identifiers ってなんだ。

Getting to know MessagePack as an ef…

Railsのseeds.rbに冪等性を持たせるためのスクリプトを書いた

タグクラウド

サービス

インフォメーション

企業情報

会社Facebook

タグ

DevOps採用システム自動構築ツール「SkyHopper」をリリース