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

1. Alexa Global MeetUp 2017-08-30
Designing Skills
for
Echo Show

2. @sparkgene
市川 純 (Jun Ichikawa)

3. http://qiita.com/sparkgene
http://sparkgene.hatenablog.com/

4. Amazon Alexa/Echo JP
https://www.facebook.com/groups/314334849014700/
Facebookグループもあります

5. Echo Show

6. Amazon Echo Series
Amazon Echo Echo Tap Echo Dot
Echo Look Echo Show

7. https://www.youtube.com/watch?v=WQqxCeHhmeU&feature=youtu.be&t=74s

8. Features of Echo Show
 7 inch touch screen
 Dual Stereo Speaker
 Playing Video
 Drop-in with live video
 Camera

9. Designing Skills
for Echo Show

10. When using Amazon Echo
Alexa, where's the nearest swimming pool?
〜〜〜、check out the Alexa App
results is shown in
Alexa App

11. Alexa App card

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. What can we do with the screen
 background image
 Display of long sentences
 List interface
 audio player controller
 video player
 touch interface

14. control screen by voice
 scroll up / down
 scroll right / left
 page up / down
 next / back

15. Display template

16. Display Template
 body template
 list template

17. body template 1

18. body template 1
 full width text
 Rich or Plain text
 Background image
 Scrollable text
 text only
 ask action to user
Use case

19. body template 2

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. body template 3

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. body template 6

24. body template 6
 Plain text
 Background image
 Welcome screen
 long explanation
Use case

25. list template 1

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. list template 2

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. Video

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. Supported Markups

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. Action on Display

34. List template items
These items can click

35. Action tag
<action token=”some-value">Cancel</action>

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. 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. Best Practices
for Echo Show
Skills

39. 70% opacity black layer is recommended for
optimal contrast.
↑ Bad Good→

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. 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. https://github.com/sparkgene/echo-show-display-test
demo

43. ありがとうございました
Any Questions?