Alexa Skills Kitでプロダクトの可能性を広げる Re:Cap？
Download as PPTX, PDF1 like576 views
https://jawsugosaka.doorkeeper.jp/events/70125 「Alexa Day 2018 re:Cap - AIアシスタントAlexaと、Alexaを支える最新技術を学ぶ1日再び -」で発表したAlexaのdisplayの話し
![{
"version": "1.0",
"sessionAttributes": {},
"response": {
"outputSpeech": {},
"card": {},
"reprompt": {},
"directives": [],
"shouldEndSession": Boolean
}
}
応答のフォーマット
Alexa Appの
カードはここ
ディスプレイは
こっち](https://image.slidesharecdn.com/20180219-jaws-ug-alexarecap-180309032841/85/Alexa-Skills-Kit-Re-Cap-14-320.jpg)
Alexa Skills Kitでプロダクトの可能性を広げる Re:Cap？
- 1. Alexa Skills Kitで プロダクトの可能性 を広げる Re:Cap？ Alexa Day 2018 re:Cap AIアシスタントAlexaと、 Alexaを支える最新技術を学ぶ1日再び
- 2. @sparkgene 市川 純 (Jun Ichikawa)
- 3. http://sparkgene.hatenablog.com/ Alexa Voice Serviceの記事執筆 Alexa関連の活動 https://qiita.com/sparkgene
- 4. Amazon Alexa/Echo JP https://www.facebook.com/groups/314334849014700/ Facebookグループ
- 5. Alexa Skills Kitでプロダクトの可能性を広げる ▸Amazon Alexaとは ▹Alexa Skills Kitの基本 ▸プロダクトのスキル開発 ▹VUIの設計 ▹開発 ▹運用 https://www.slideshare.net/junichikawa1/alexa-skills-kit-87985751 スライドシェアに 上がってます
- 8. Re:Cap終わり
- 10. VUI＋画面は最強
- 11. 画面付き早く出て！ Echo Show Echo Spot
- 12. 画面はどうやって 表示するの？
- 14. { "version": "1.0", "sessionAttributes": {}, "response": { "outputSpeech": {}, "card": {}, "reprompt": {}, "directives": [], "shouldEndSession": Boolean } } 応答のフォーマット Alexa Appの カードはここ ディスプレイは こっち
- 15. Body Template 1 ・背景画像 ・タイトル ・ primary テキスト ・ secondary テキスト ・ tertiary テキスト ・スクロール可能
- 16. Body Template 2 ・背景画像 ・タイトル ・右に画像 ・ primary テキスト ・ secondary テキスト ・ tertiary テキスト ・Spotでは、前景画像が 前面表示 ・文字はセンターリング
- 17. Body Template 3 ・背景画像 ・タイトル ・左に画像 ・ primary テキスト ・ secondary テキスト ・ tertiary テキスト ・Spotでは、前景画像が 前面表示 ・文字は左寄せ
- 18. Body Template 6 ・背景画像 ・全面テキスト ・ primary テキスト ・ secondary テキスト ・ tertiary テキスト ・Spotでは、文字はセンタ ーリング
- 20. List Template 1 ・縦にリスト表示 アイテム毎に ・サムネイル ・ primary テキスト ・ secondary テキスト ・ tertiary テキスト ・アイテムのタップで イベント発火 ・声でスクロール
- 21. List Template 2 ・横にリスト表示 アイテム毎に ・サムネイル ・ primary テキスト ・ secondary テキスト ・ tertiary テキスト ・アイテムのタップで イベント発火 ・声でスクロール ・Spotは1画面1アイテム
- 22. Video App ・HLS, MPEG-TS ・SmoothStreaming MP4, M4A ・MPEG4 or H.264 ・推奨サイズ 640x480 or 1280x720 ・アイテムのタップで イベント発火 ・声でスクロール ・Spotは1画面1アイテム
- 23. RichTextも使える
- 24. 利用可能なタグ Line break <br/> Bold <b> Italics <i> Underline <u> Font Sizes <font size="2”> 2=28px, 3=32px, 5=48ps, 7=68px Action <action token="VALUE">clickable text </action> Inline Images <img src="URL" width="WIDTH" height="HEIGHT" alt="TEXT" />
- 25. Actionの振る舞い
- 28. イベント { "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" } }
- 29. 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
- 30. ベストプラクティス
- 32. デバイスのサポートインターフェイスを確認 { "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なのか 判定する情報はない。
- 34. ShowとSpotの差異に注意すること ▸ Spotでは以下のものは表示されない ▹ ヒント ▹ 戻るボタン ▸ Spotでは背景画像が480pxにCropされる ▸ RichTextのフォントサイズ５，７は、Spotでは小さくなる
- 35. 画面付きは テンションが上がる
- 36. デモ
- 37. ありがとうございました
Editor's Notes
- #5: Recently I made a Facebook group. We share information about Alexa, so if you are interested about alexa please join us.
- #25: rich text support some markups. you can only specify font size 2, 3, 5, 7. The default font size is 3. For best control of your display, specify the font size. use action if you want to add clickable text. it can be tapped on the Echo Show screen.
- #26: action on display echo show have a touch screen. so you can add a action.
- #27: list template items are clickable. of course you can choose items with you voice.
- #28: action tag add clickable word to the body template.
- #29: if user chose item by voice, you need to add a sample utterance and intent schema. but tap event invoke different request with the voice control. the request type is “display element selected” like this.
- #30: display token is used to recognize which screen invoked the event. and request token used to recognize what item was selected. if you create a skill with list template or clickable text and use it for chose something. you need to implement “voice event”, and “tap event” for good user experience.
- #31: best practices for echo show skills
- #32: if you use image like left side, the text is hard to see. so 70% opacity black layer is recommended for optimal contrast. right side image is good to read the text
- #33: Determine the Supported Interfaces for the Current Device. The supported interface is listed in “supportedInterface” . If the “Display” is not listed in here, it means the device do not support display. do not include templates in the result.
- #36: best practices for echo show skills
- #37: best practices for echo show skills