Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

316 views

Published on

https://jawsugosaka.doorkeeper.jp/events/70125
「Alexa Day 2018 re:Cap - AIアシスタントAlexaと、Alexaを支える最新技術を学ぶ1日再び -」で発表したAlexaのdisplayの話し

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Alexa Skills Kitで プロダクトの可能性 を広げる Re:Cap? Alexa Day 2018 re:Cap AIアシスタントAlexaと、 Alexaを支える最新技術を学ぶ1日再び
  2. 2. @sparkgene 市川 純 (Jun Ichikawa)
  3. 3. http://sparkgene.hatenablog.com/ Alexa Voice Serviceの記事執筆 Alexa関連の活動 https://qiita.com/sparkgene
  4. 4. Amazon Alexa/Echo JP https://www.facebook.com/groups/314334849014700/ Facebookグループ
  5. 5. Alexa Skills Kitでプロダクトの可能性を広げる ▸Amazon Alexaとは ▹Alexa Skills Kitの基本 ▸プロダクトのスキル開発 ▹VUIの設計 ▹開発 ▹運用 https://www.slideshare.net/junichikawa1/alexa-skills-kit-87985751 スライドシェアに 上がってます
  6. 6. https://alexaday2018.jaws-ug.jp/follow-up/
  7. 7. cloudinfra-audio https://cloudinfra.audio/ev01-507dfc0a8624
  8. 8. Re:Cap終わり
  9. 9. USで公開されているサードパーティー製Skill
  10. 10. VUI+画面は最強
  11. 11. 画面付き早く出て! Echo Show Echo Spot
  12. 12. 画面はどうやって 表示するの?
  13. 13. サンプルソース https://github.com/sparkgene/echo-show-display-test
  14. 14. { "version": "1.0", "sessionAttributes": {}, "response": { "outputSpeech": {}, "card": {}, "reprompt": {}, "directives": [], "shouldEndSession": Boolean } } 応答のフォーマット Alexa Appの カードはここ ディスプレイは こっち
  15. 15. Body Template 1 ・背景画像 ・タイトル ・ primary テキスト ・ secondary テキスト ・ tertiary テキスト ・スクロール可能
  16. 16. Body Template 2 ・背景画像 ・タイトル ・右に画像 ・ primary テキスト ・ secondary テキスト ・ tertiary テキスト ・Spotでは、前景画像が 前面表示 ・文字はセンターリング
  17. 17. Body Template 3 ・背景画像 ・タイトル ・左に画像 ・ primary テキスト ・ secondary テキスト ・ tertiary テキスト ・Spotでは、前景画像が 前面表示 ・文字は左寄せ
  18. 18. Body Template 6 ・背景画像 ・全面テキスト ・ primary テキスト ・ secondary テキスト ・ tertiary テキスト ・Spotでは、文字はセンタ ーリング
  19. 19. Body Template 7 ・背景画像 ・前景画像 ・テキストはタイトルのみ
  20. 20. List Template 1 ・縦にリスト表示 アイテム毎に ・サムネイル ・ primary テキスト ・ secondary テキスト ・ tertiary テキスト ・アイテムのタップで イベント発火 ・声でスクロール
  21. 21. List Template 2 ・横にリスト表示 アイテム毎に ・サムネイル ・ primary テキスト ・ secondary テキスト ・ tertiary テキスト ・アイテムのタップで イベント発火 ・声でスクロール ・Spotは1画面1アイテム
  22. 22. Video App ・HLS, MPEG-TS ・SmoothStreaming MP4, M4A ・MPEG4 or H.264 ・推奨サイズ 640x480 or 1280x720 ・アイテムのタップで イベント発火 ・声でスクロール ・Spotは1画面1アイテム
  23. 23. RichTextも使える
  24. 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. 25. Actionの振る舞い
  26. 26. List template のアイテム 各アイテムがタップできる
  27. 27. Actionタグ <action token=”some-value">Cancel</action>
  28. 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. 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. 30. ベストプラクティス
  31. 31. 透明度が70%の黒いレイヤーを画像に反映 すると文字が見やすくなる ↑ Bad Good→
  32. 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なのか 判定する情報はない。
  33. 33. ディスプレイをサポートする必要はない すべてのスキルがディスプレイに対応する必要はない。 テンプレートを含まなければ、Cardが画面に表示される。
  34. 34. ShowとSpotの差異に注意すること ▸ Spotでは以下のものは表示されない ▹ ヒント ▹ 戻るボタン ▸ Spotでは背景画像が480pxにCropされる ▸ RichTextのフォントサイズ5,7は、Spotでは小さくなる
  35. 35. 画面付きは テンションが上がる
  36. 36. デモ
  37. 37. ありがとうございました

×