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

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
スライドシェアに
上がってます

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

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

8. Re:Cap終わり

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

10. VUI＋画面は最強

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

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

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

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では、文字はセンタ
ーリング

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

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の振る舞い

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

27. Actionタグ
<action token=”some-value">Cancel</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. ベストプラクティス

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

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

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

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

36. デモ

37. ありがとうございました