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 Global MeetUp 2017-08-30
Designing Skills
for
Echo Show
@sparkgene
市川 純 (Jun Ichikawa)
http://qiita.com/sparkgene
http://sparkgene.hatenablog.com/
Amazon Alexa/Echo JP
https://www.facebook.com/groups/314334849014700/
Facebookグループもあります
Echo Show
Amazon Echo Series
Amazon Echo Echo Tap Echo Dot
Echo Look Echo Show
https://www.youtube.com/watch?v=WQqxCeHhmeU&feature=youtu.be&t=74s
Features of Echo Show
 7 inch touch screen
 Dual Stereo Speaker
 Playing Video
 Drop-in with live video
 Camera
Designing Skills
for Echo Show
When using Amazon Echo
Alexa, where's the nearest swimming pool?
〜〜〜、check out the Alexa App
results is shown in
Alexa App
Alexa App card
On Echo Show
Alexa, where's the nearest swimming pool?
Here are your nearby pools. Which one do
you to see
Alexa, select n...
What can we do with the screen
 background image
 Display of long sentences
 List interface
 audio player controller
...
control screen by voice
 scroll up / down
 scroll right / left
 page up / down
 next / back
Display template
Display Template
 body template
 list template
body template 1
body template 1
 full width text
 Rich or Plain text
 Background image
 Scrollable text
 text only
 ask action to us...
body template 2
body template 2
 Single image on right side
 Rich or Plain text
 Background image
 specific entity
 show item after u...
body template 3
body template 3
 Single image on left side
 Rich or Plain text
 Background image
 Scrollable text
 specific entity
 ...
body template 6
body template 6
 Plain text
 Background image
 Welcome screen
 long explanation
Use case
list template 1
list template 1
 ordered list
 list can include thumbnail
 Rich and Plain text
 scroll by voice
 tap item invoke even...
list template 2
list template 2
 ordered list
 list must include image
 Plain text
 scroll by voice
 tap item invoke event
 movie or...
Video
Video app
 HLS
 H.264
 playback control
 Title
 Subtitle
 Seek bar
GUI features
Supported format
 Alexa, pause/resu...
Supported Markups
Supported Markup for Text in Display
Templates
Line break <br/>
Bold <b>
Italics <i>
Underline <u>
Font Sizes <font size="...
Action on Display
List template items
These items can click
Action tag
<action token=”some-value">Cancel</action>
click request
{
"version": "1.0",
"session": { 〜〜 },
"context": {
"Display": {
"token": "list_template_one"
},
},
"request...
token
{
"version": "1.0",
"session": { 〜〜 },
"context": {
"Display": {
"token": "list_template_one"
},
},
"request": {
"ty...
Best Practices
for Echo Show
Skills
70% opacity black layer is recommended for
optimal contrast.
↑ Bad Good→
Determine the Supported Interfaces for the
Current Device
{
"version": "1.0",
"session": { 〜 },
"context": {
"System": {
"...
User may not be near echo
Make the primary content of each template visible and
recognizable from up to 7 feet away.
Custo...
https://github.com/sparkgene/echo-show-display-test
demo
ありがとうございました
Any Questions?
Upcoming SlideShare
Loading in …5
×

Alexa and AI global meetup

347 views

Published on

designing skills for echo show
https://jawsug-cli.doorkeeper.jp/events/63079

Published in: Software
  • Be the first to comment

Alexa and AI global meetup

  1. 1. Alexa Global MeetUp 2017-08-30 Designing Skills for Echo Show
  2. 2. @sparkgene 市川 純 (Jun Ichikawa)
  3. 3. http://qiita.com/sparkgene http://sparkgene.hatenablog.com/
  4. 4. Amazon Alexa/Echo JP https://www.facebook.com/groups/314334849014700/ Facebookグループもあります
  5. 5. Echo Show
  6. 6. Amazon Echo Series Amazon Echo Echo Tap Echo Dot Echo Look Echo Show
  7. 7. https://www.youtube.com/watch?v=WQqxCeHhmeU&feature=youtu.be&t=74s
  8. 8. Features of Echo Show  7 inch touch screen  Dual Stereo Speaker  Playing Video  Drop-in with live video  Camera
  9. 9. Designing Skills for Echo Show
  10. 10. When using Amazon Echo Alexa, where's the nearest swimming pool? 〜〜〜、check out the Alexa App results is shown in Alexa App
  11. 11. Alexa App card
  12. 12. On Echo Show Alexa, where's the nearest swimming pool? Here are your nearby pools. Which one do you to see Alexa, select number two. here’s more about 〜〜〜
  13. 13. What can we do with the screen  background image  Display of long sentences  List interface  audio player controller  video player  touch interface
  14. 14. control screen by voice  scroll up / down  scroll right / left  page up / down  next / back
  15. 15. Display template
  16. 16. Display Template  body template  list template
  17. 17. body template 1
  18. 18. body template 1  full width text  Rich or Plain text  Background image  Scrollable text  text only  ask action to user Use case
  19. 19. body template 2
  20. 20. body template 2  Single image on right side  Rich or Plain text  Background image  specific entity  show item after user chose from a list Use case
  21. 21. body template 3
  22. 22. body template 3  Single image on left side  Rich or Plain text  Background image  Scrollable text  specific entity  show item after user chose from a list Use case
  23. 23. body template 6
  24. 24. body template 6  Plain text  Background image  Welcome screen  long explanation Use case
  25. 25. list template 1
  26. 26. list template 1  ordered list  list can include thumbnail  Rich and Plain text  scroll by voice  tap item invoke event  static or dynamic lists Use case
  27. 27. list template 2
  28. 28. list template 2  ordered list  list must include image  Plain text  scroll by voice  tap item invoke event  movie or book list Use case
  29. 29. Video
  30. 30. Video app  HLS  H.264  playback control  Title  Subtitle  Seek bar GUI features Supported format  Alexa, pause/resume  Alexa, stop/close Voice control
  31. 31. Supported Markups
  32. 32. Supported Markup for Text in Display Templates 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" /> Use RichText type to use markups.
  33. 33. Action on Display
  34. 34. List template items These items can click
  35. 35. Action tag <action token=”some-value">Cancel</action>
  36. 36. click request { "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" } }
  37. 37. 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" } } clicked screen the taped item
  38. 38. Best Practices for Echo Show Skills
  39. 39. 70% opacity black layer is recommended for optimal contrast. ↑ Bad Good→
  40. 40. Determine the Supported Interfaces for the Current Device { "version": "1.0", "session": { 〜 }, "context": { "System": { "device": { "deviceId": "amzn1.ask.device.", "supportedInterfaces": { "AudioPlayer": {}, "Display": { "templateVersion": "1.0", "markupVersion": "1.0" }, "VideoApp": {} } } } }, "request": { 〜 } } The supported interface is listed in “supportedInterface”. If the “Display” is not listed in here, it means the device do not support display.
  41. 41. User may not be near echo Make the primary content of each template visible and recognizable from up to 7 feet away. Customers can use Echo Show from across the kitchen or even when they cannot easily see it. Skills need to support these possibilities.
  42. 42. https://github.com/sparkgene/echo-show-display-test demo
  43. 43. ありがとうございました Any Questions?

×