Alexa and AI global meetup

Designing Skills for Echo Show Alexa Global MeetUp 2017-0830

市川 純 (Jun Ichikawa) @sparkgene

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

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

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

• https://www.facebook.com/groups/314334849014700/

Echo Show

Amazon Echo Series Amazon Echo Echo Tap Echo Look Echo Dot Echo Show

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

• 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 number two. here’s more about 〜〜〜

What can we do with the screen ⚫ background image ⚫ Display of long sentences ⚫ List interface ⚫ audio player controller ⚫ video player ⚫ touch interface

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 Use case ⚫ text only ⚫ ask action to user

body template 2

body template 2 ⚫ Single image on right side ⚫ Rich or Plain text ⚫ Background image Use case ⚫ specific entity ⚫ show item after user chose from a list

body template 3

body template 3 ⚫ ⚫ ⚫ ⚫ Single image on left side Rich or Plain text Background image Scrollable text Use case ⚫ specific entity ⚫ show item after user chose from a list

body template 6

body template 6 ⚫ Plain text ⚫ Background image Use case ⚫ Welcome screen ⚫ long explanation

list template 1

list template 1 ⚫ ⚫ ⚫ ⚫ ⚫ ordered list list can include thumbnail Rich and Plain text scroll by voice tap item invoke event Use case ⚫ static or dynamic lists

list template 2

list template 2 ⚫ ⚫ ⚫ ⚫ ⚫ ordered list list must include image Plain text scroll by voice tap item invoke event Use case ⚫ movie or book list

Video

Video app Supported format ⚫ HLS ⚫ H.264 GUI features ⚫ ⚫ ⚫ ⚫ playback control Title Subtitle Seek bar Voice control ⚫ Alexa, pause/resume ⚫ Alexa, stop/close

Supported Markups

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.

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": {
"type": "Display.ElementSelected",
"requestId": "amzn1.echo-api.request",
"timestamp": "2017-08-12T05:31:08Z",
"locale": "en-US",
"token": "item_1"
}
}

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

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": { "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.

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.

dem o https://github.com/sparkgene/echo-show-display-test

• https://github.com/sparkgene/echo-show-display-test

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