Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Echo SpotとAPIでインタラクティブなカスタムスキル
KIKUCHI Joe
September 14, 2018
Programming
0
200
Echo SpotとAPIでインタラクティブなカスタムスキル
API Meetup Tokyo #28で発表したスライドになります。
KIKUCHI Joe
September 14, 2018
Tweet
Share
More Decks by KIKUCHI Joe
See All by KIKUCHI Joe
woowig
1
460
woowig
0
2.5k
Other Decks in Programming
See All in Programming
nanimonodemonai
2
1.4k
line_developers_tw
0
540
muttsu_623
0
520
ken3ypa
0
160
takahi5
0
230
e10dokup
0
450
mraible
PRO
0
180
line_developers_tw
0
550
anchorcable
1
120
jun0
3
660
nrslib
20
13k
ajstarks
2
550
Featured
See All Featured
garrettdimon
287
110k
malarkey
393
60k
mojombo
358
62k
akmur
252
19k
roundedbygravity
84
7.8k
jakevdp
774
200k
sachag
446
36k
hannesfritz
27
930
jensimmons
207
10k
malarkey
119
16k
rmw
11
740
3n
163
22k
Transcript
Echo Spot と API で インタラクティブな カスタムスキル API Meetup Tokyo
#28 (Sep 14, 2018) KIKUCHI Joe
自己紹介 名前:菊池条 勤め先:フォージビジョン株式会社 好きなAWS サービス:AWS Lambda, AWS X-Ray API Meetup
Tokyo #28 (2018/9/14) 2
会社紹介 http://forgevision.com/ API Meetup Tokyo #28 (2018/9/14) 3
Echo Spot 2018 年7 月26 日 日本でも出荷開始 「スタイリッシュでコンパクトなEcho Spot は、ス
マートスピーカーの機能にスクリーンが加わって さらに便利に」 - Amazon 製品紹介ページより 2.5 インチ タッチスクリーン API Meetup Tokyo #28 (2018/9/14) 4
インタラクティブな Alexa カスタムスキルを 作ってみた API Meetup Tokyo #28 (2018/9/14) 5
作ったスキル クイズを出題 クイズに関係した画像の表示 回答は音声か画面タッチで可能 ASK CLI とASK SDK for Node.js
を使って TypeScript で開発 API Meetup Tokyo #28 (2018/9/14) 6
使用したAPI クイズ研 API http://quizken.jp/api Google Custom Search JSON API https://developers.google.com/custom-
search/json-api/v1/overview API Meetup Tokyo #28 (2018/9/14) 7
画像表示 カスタムスキルの設定でDisplay インターフェース を有効にする レスポンスのdirectives にDisplay.RenderTemplate を 追加 テンプレートのbackgroundImage やimage
に画像の URL を指定 API Meetup Tokyo #28 (2018/9/14) 8
画像表示(コード例) const image = new ImageHelper() .withDescription(description) .addImageInstance(url) .getImage(); const
display: BodyTemplate3 = { image, textContent, title, type: 'BodyTemplate3', }; return handlerInput.responseBuilder .speak(speechText) .addRenderTemplateDirective(display) .getResponse(); API Meetup Tokyo #28 (2018/9/14) 9
タッチイベント テンプレートのタッチイベントを起こしたい箇所 のtoken を設定 テキスト中の特定の箇所にタッチイベントを入れ たい場合は<action token="token">Touch Me!</action> のようにマークアップする Display.ElementSelected
リクエストが発行されるの で、リクエストに含まれるtoken の値を見て適切に 処理する API Meetup Tokyo #28 (2018/9/14) 10
タッチイベント(コード例) const elementSelectedRequestHandler: RequestHandler = { canHandle(handlerInput: HandlerInput) { return
handlerInput.requestEnvelope.request.type === 'Display.ElementSelected'; }, handle(handlerInput: HandlerInput) { const { token } = handlerInput.requestEnvelope.request as ElementSelectedRequest; return doSomething(token); }, }; API Meetup Tokyo #28 (2018/9/14) 11
デモ API Meetup Tokyo #28 (2018/9/14) 12
作っているもの 会社の受付スキル 来客の要件を聞き、内容に応じた通知を行う A さんのお客様の場合はSlack でmention 、B さん のお客様の場合は電話、etc API
Meetup Tokyo #28 (2018/9/14) 13
会社の受付スキル(構成図) API Meetup Tokyo #28 (2018/9/14) 14
ForgeVision Engineer Blog https://techblog.forgevision.com/ API Meetup Tokyo #28 (2018/9/14) 15
ご清聴ありがとう ございました API Meetup Tokyo #28 (2018/9/14) 16