Alexa Skills Kitでプロダクトの可能性を広げる Re:Cap？

Alexa Day 2018 re:Cap AIアシスタントAlexaと、 Alexaを支える最新技術を学ぶ1日再び Alexa Skills Kitで プロダクトの可能性 を広げる Re:Cap︖

市川 純 (Jun Ichikawa) @sparkgene

Alexa関連の活動 http://sparkgene.hatenablog.com/ https://qiita.com/sparkgene Alexa Voice Serviceの記事執筆

• http://sparkgene.hatenablog.com/
• https://qiita.com/sparkgene

Facebookグループ Amazon Alexa/Echo JP https://www.facebook.com/groups/314334849014700/

• https://www.facebook.com/groups/314334849014700/

Alexa Skills Kitでプロダクトの可能性を広げる ▸Amazon Alexaとは ▹Alexa Skills Kitの基本 ▸プロダクトのスキル開発 ▹VUIの設計 ▹開発 ▹運用 スライドシェアに 上がってます https://www.slideshare.net/junichikawa1/alexa-skills-kit-87985751

• https://www.slideshare.net/junichikawa1/alexa-skills-kit-87985751

https://alexaday2018.jaws-ug.jp/follow-up/

• https://alexaday2018.jaws-ug.jp/follow-up/

cloudinfra-audio https://cloudinfra.audio/ev01-507dfc0a8624

• https://cloudinfra.audio/ev01-507dfc0a8624

Re:Cap終わり

USで公開されているサードパーティー製Skill

VUI＋画面は最強

画面付き早く出て！ Echo Show Echo Spot

画面はどうやって 表示するの？

サンプルソース https://github.com/sparkgene/echo-show-display-test

• https://github.com/sparkgene/echo-show-display-test

応答のフォーマット { "version": "1.0", "sessionAttributes": {}, "response": { Alexa Appの カードはここ "outputSpeech": {}, "card": {}, "reprompt": {}, "directives": [], "shouldEndSession": Boolean } } ディスプレイは こっち

Body Template 1 ・背景画像 ・タイトル ・ primary テキスト ・ secondary テキスト ・ tertiary テキスト ・スクロール可能

Body Template 2 ・背景画像 ・タイトル ・右に画像 ・ primary テキスト ・ secondary テキスト ・ tertiary テキスト ・Spotでは、前景画像が 前面表示 ・文字はセンターリング

Body Template 3 ・背景画像 ・タイトル ・左に画像 ・ primary テキスト ・ secondary テキスト ・ tertiary テキスト ・Spotでは、前景画像が 前面表示 ・文字は左寄せ

Body Template 6 ・背景画像 ・ primary テキスト ・全面テキスト ・ secondary テキスト ・ tertiary テキスト ・Spotでは、文字はセンタ ーリング

Body Template 7 ・背景画像 ・前景画像 ・テキストはタイトルのみ

List Template 1 ・縦にリスト表示 ・ primary テキスト アイテム毎に ・ secondary テキスト ・サムネイル ・ tertiary テキスト ・アイテムのタップで イベント発火 ・声でスクロール

List Template 2 ・横にリスト表示 ・ primary テキスト アイテム毎に ・ secondary テキスト ・サムネイル ・ tertiary テキスト ・アイテムのタップで イベント発火 ・声でスクロール ・Spotは1画面1アイテム

Video App ・HLS, MPEG-TS ・SmoothStreaming MP4, M4A ・MPEG4 or H.264 ・推奨サイズ 640x480 or 1280x720 ・アイテムのタップで イベント発火 ・声でスクロール ・Spotは1画面1アイテム

RichTextも使える

利用可能なタグ Line break <br/> Bold <b> Italics <i> Underline <u> Font Sizes <font size="2”> Action <action token="VALUE">clickable text </action> Inline Images <img src="URL" width="WIDTH" height="HEIGHT" alt="TEXT" /> 2=28px, 3=32px, 5=48ps, 7=68px

Actionの振る舞い

List template のアイテム 各アイテムがタップできる

Actionタグ <action token=”some-value">Cancel</action>

イベント
{
"version": "1.0",
"session": { 〜〜 },
"context": {
"Display": {
"token": "list_template_one"
},
},
"request": {
"type": "Display.ElementSelected",
"requestId": "amzn1.echo-api.request",
"timestamp": "2017-08-12T05:31:08Z",
"locale": "en-US",
"token": "item_1"
}
}

token
{
"version": "1.0",
"session": { 〜〜 },
"context": {
"Display": {
"token": "list_template_one"
},
},
"request": {
"type": "Display.ElementSelected",
"requestId": "amzn1.echo-api.request",
"timestamp": "2017-08-12T05:31:08Z",
"locale": "en-US",
"token": "item_1"
}
}

アクションがあった画面の
token

実際に選択されたアイテムに
紐づくtoken

ベストプラクティス

透明度が70%の黒いレイヤーを画像に反映 すると文字が見やすくなる ↑ Bad Good→

デバイスのサポートインターフェイスを確 認 { "version": "1.0", "session": { 〜 }, "context": { "System": { "device": { "deviceId": "amzn1.ask.device.", "supportedInterfaces": { "AudioPlayer": {}, "Display": { "templateVersion": "1.0", "markupVersion": "1.0" }, "VideoApp": {} } }} }, "request": { 〜 } } “supportedInterface”にリクエスト 元のデバイスが対応している物 が列挙されている。 Echo Showなのか、Spotなのか 判定する情報はない。

ディスプレイをサポートする必要はない すべてのスキルがディスプレイに対応する必要はない。 テンプレートを含まなければ、Cardが画面に表示される。

ShowとSpotの差異に注意すること ▸ Spotでは以下のものは表示されない ▹ ヒント ▹ 戻るボタン ▸ Spotでは背景画像が480pxにCropされる ▸ RichTextのフォントサイズ５，７は、Spotでは小さくなる

画面付きは テンションが上がる

デモ

ありがとうございました