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

>100 Views

March 09, 18

スライド概要

https://jawsugosaka.doorkeeper.jp/events/70125

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

profile-image

クラウドで働くIoTおじさん

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

Alexa Day 2018 re:Cap AIアシスタントAlexaと、 Alexaを支える最新技術を学ぶ1日再び Alexa Skills Kitで プロダクトの可能性 を広げる Re:Cap︖

2.

市川 純 (Jun Ichikawa) @sparkgene

3.

Alexa関連の活動 http://sparkgene.hatenablog.com/ https://qiita.com/sparkgene Alexa Voice Serviceの記事執筆

4.

Facebookグループ Amazon Alexa/Echo JP https://www.facebook.com/groups/314334849014700/

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": { Alexa Appの カードはここ "outputSpeech": {}, "card": {}, "reprompt": {}, "directives": [], "shouldEndSession": Boolean } } ディスプレイは こっち

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”> Action <action token="VALUE">clickable text </action> Inline Images <img src="URL" width="WIDTH" height="HEIGHT" alt="TEXT" /> 2=28px, 3=32px, 5=48ps, 7=68px

25.

Actionの振る舞い

26.

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

27.

Actionタグ <action token=”some-value">Cancel</action>

28.
[beta]
イベント
{
"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.
[beta]
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のフォントサイズ5,7は、Spotでは小さくなる

35.

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

36.

デモ

37.

ありがとうございました