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

AWS Batchを利用してコンテナを定期実行する～前編～

【Alexaスキル開発】Dialogモデルを使って簡単スロット処理

Android端末へのプッシュ通知をAWS SNSから実施する際のIPア…

AWS SimpleIconのSVGを有効活用

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

Raspberry Piでパトランプを作成⑤

Google検索結果画面にパンくずリストを表示する方法 (リッチスニペッ…

Raspberry Piでパトランプを作成②

タグクラウド

サービス

インフォメーション

企業情報

会社Facebook

タグ