Echo SpotとAPIでインタラクティブなカスタムスキル

F4bffafe049a4c79d6e3b56fac9b0eb7?s=47 KIKUCHI Joe
September 14, 2018

Echo SpotとAPIでインタラクティブなカスタムスキル

API Meetup Tokyo #28で発表したスライドになります。

F4bffafe049a4c79d6e3b56fac9b0eb7?s=128

KIKUCHI Joe

September 14, 2018
Tweet

Transcript

  1. Echo Spot と API で インタラクティブな カスタムスキル API Meetup Tokyo

    #28 (Sep 14, 2018) KIKUCHI Joe
  2. 自己紹介 名前:菊池条 勤め先:フォージビジョン株式会社 好きなAWS サービス:AWS Lambda, AWS X-Ray API Meetup

    Tokyo #28 (2018/9/14) 2
  3. 会社紹介 http://forgevision.com/ API Meetup Tokyo #28 (2018/9/14) 3

  4. Echo Spot 2018 年7 月26 日 日本でも出荷開始 「スタイリッシュでコンパクトなEcho Spot は、ス

    マートスピーカーの機能にスクリーンが加わって さらに便利に」 - Amazon 製品紹介ページより 2.5 インチ タッチスクリーン API Meetup Tokyo #28 (2018/9/14) 4
  5. インタラクティブな Alexa カスタムスキルを 作ってみた API Meetup Tokyo #28 (2018/9/14) 5

  6. 作ったスキル クイズを出題 クイズに関係した画像の表示 回答は音声か画面タッチで可能 ASK CLI とASK SDK for Node.js

    を使って TypeScript で開発 API Meetup Tokyo #28 (2018/9/14) 6
  7. 使用した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
  8. 画像表示 カスタムスキルの設定でDisplay インターフェース を有効にする レスポンスのdirectives にDisplay.RenderTemplate を 追加 テンプレートのbackgroundImage やimage

    に画像の URL を指定 API Meetup Tokyo #28 (2018/9/14) 8
  9. 画像表示(コード例) 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
  10. タッチイベント テンプレートのタッチイベントを起こしたい箇所 のtoken を設定 テキスト中の特定の箇所にタッチイベントを入れ たい場合は<action token="token">Touch Me!</action> のようにマークアップする Display.ElementSelected

    リクエストが発行されるの で、リクエストに含まれるtoken の値を見て適切に 処理する API Meetup Tokyo #28 (2018/9/14) 10
  11. タッチイベント(コード例) 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
  12. デモ API Meetup Tokyo #28 (2018/9/14) 12

  13. 作っているもの 会社の受付スキル 来客の要件を聞き、内容に応じた通知を行う A さんのお客様の場合はSlack でmention 、B さん のお客様の場合は電話、etc API

    Meetup Tokyo #28 (2018/9/14) 13
  14. 会社の受付スキル(構成図) API Meetup Tokyo #28 (2018/9/14) 14

  15. ForgeVision Engineer Blog https://techblog.forgevision.com/ API Meetup Tokyo #28 (2018/9/14) 15

  16. ご清聴ありがとう ございました API Meetup Tokyo #28 (2018/9/14) 16