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();
BodyTemplate2
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();
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();
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();
まとめ
もうすぐ日本でもEcho Showが登場するので、大画面表示対応のスキル開発がはかどりますね!!!!
投稿者プロフィール
最新の投稿
AWS2021.12.02AWS Graviton3 プロセッサを搭載した EC2 C7g インスタンスが発表されました。
セキュリティ2021.07.14ゼロデイ攻撃とは
セキュリティ2021.07.14マルウェアとは
WAF2021.07.13クロスサイトスクリプティングとは?