Slide 1

Slide 1 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 スマホでもスピーカーでも! 誰でもできる Googleアシスタントアプリ開発 Android Bazaar and Conference 2018 Autumn in KAWASAKI

Slide 2

Slide 2 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 1. 自己紹介 2. Googleアシスタントとは 3. 標準開発環境とSDK 4. マルチデバイスの考え方 5. マルチデバイスアプリの実装 6. リッチなUIや音声の合成 Agenda

Slide 3

Slide 3 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 自己紹介

Slide 4

Slide 4 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 Community Video Market Corporation VP of Engineering Product Manager Twitter: @ns_twt Writing Shibuya.apk ときどきGDGでの登壇やお手伝いなど Namito Satoyama Profile 黒帯エンジニアが教えるプロの技術 Android開発の教科書 (共著:SB Creative) ステップバイステップで力がつく Googleアシスタント アプリ開発入門 (共著:ソシム)

Slide 5

Slide 5 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 Yahoo Japan Corporation Yahoo! MAP Android App Developer Twitter: @1coin178 Geo, Locationが好き Writing Shinji Ichien Profile ステップバイステップで力がつく Googleアシスタント アプリ開発入門 (共著:ソシム) Product 作ったGoogleアシスタントアプリ はじめての 書籍です!!!

Slide 6

Slide 6 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 Googleアシスタントとは

Slide 7

Slide 7 text

Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止 Google Assistant • ユーザが置かれている 様々な行動文脈において 「対話型」で解決してく れるAIアシスタント • 様々なデバイスへの搭載 が加速 • スマホ • AIスピーカー • TV • 車、時計、イヤホン..etc Google Assistant Conversation(対話)

Slide 8

Slide 8 text

5億台のデバイスに搭載 https://youtu.be/ogfYd705cRs

Slide 9

Slide 9 text

SmartDisplay https://youtu.be/ https://store.google.com/us/product/google_home_hub?hl=en-US

Slide 10

Slide 10 text

5千種類の連携デバイス https://youtu.be/ogfYd705cRs

Slide 11

Slide 11 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 OK,Google なにができる? OK,Google.

Slide 12

Slide 12 text

Googleが提供する機能(アプリ) 情報取得系のアプリ Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止

Slide 13

Slide 13 text

音声ニュース Googleが提供する機能(アプリ) Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止

Slide 14

Slide 14 text

リマインダ(Push) Googleが提供する機能(アプリ) Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止

Slide 15

Slide 15 text

アシスタント (情報管理) Googleが提供する機能(アプリ) Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止

Slide 16

Slide 16 text

3rd Party Apps(Yahoo!MAP) 位置情報をもとに 周辺のゴミの収集日 を調べる Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止

Slide 17

Slide 17 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 App Directory https://assistant.google.com/explore?hl=ja_jp

Slide 18

Slide 18 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 標準開発環境とSDK

Slide 19

Slide 19 text

標準開発環境 Actions on Google • Googleアシスタントを 機能拡張する開発者向け のプラットフォーム • アプリの設定管理、 シミュレータなどの機能 がある。リリース管理も。 • Webツール • 自然言語対話プラット フォーム • アプリの会話フローの構 築や会話文からフレーズ の抽出、会話分析が可能 • Webツール • FirebaseのFaaS • アプリのバックエンド処 理を担う • 他のFirebase機能との 連携に強み • Node.jsが実行可能 プログラミング不要 プログラミング不要 Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止

Slide 20

Slide 20 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 標準開発環境の全体像 Google Cloud Platform プロジェクト (アプリ) プロジェクト エージェント 接続 Firebaseプロジェクト 管理 呼び出し JSファイル シミュレータ Google アシスタント 呼び出し Actions on Google

Slide 21

Slide 21 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 標準開発環境の全体像 (プロジェクトの作成) Google Cloud Platform プロジェクト (アプリ) Actions on Google プロジェクト エージェント 開発者 接続 Firebaseプロジェクト 管理 呼び出し JSファイル シミュレータ Google アシスタント 呼び出し 作成

Slide 22

Slide 22 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 標準開発環境の全体像 (バックエンド開発) Google Cloud Platform プロジェクト (アプリ) プロジェクト エージェント 開発者 接続 Firebaseプロジェクト 管理 呼び出し JSファイル シミュレータ Google アシスタント 呼び出し 作成 Actions on Google deploy

Slide 23

Slide 23 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 標準開発環境の全体像 (バックエンド開発) Google Cloud Platform プロジェクト (アプリ) プロジェクト エージェント 開発者 接続 Firebaseプロジェクト 管理 呼び出し 接続 外部API JSファイル 呼び出し シミュレータ 設定 Google アシスタント 呼び出し 作成 Actions on Google deploy 設定

Slide 24

Slide 24 text

Google Cloud Platform プロジェクト Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 標準開発環境の全体像 (動作確認・テスト) (アプリ) プロジェクト エージェント 開発者 接続 Firebaseプロジェクト 管理 呼び出し 接続 外部API JSファイル 呼び出し シミュレータ Deploy 設定 Google アシスタント 呼び出し 作成 Actions on Google 動作確認・テスト

Slide 25

Slide 25 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 開発を効率化するSDKの活用 Google Cloud Platform プロジェクト (アプリ) プロジェクト エージェント 開発者 接続 Firebaseプロジェクト 管理 呼び出し 接続 外部API JSファイル 呼び出し シミュレータ 動作確認・テスト Deploy 設定 Google アシスタント 呼び出し 作成 Actions on Google Client Libraryを活用

Slide 26

Slide 26 text

• Dialogflowからのリクエストを扱いやすく • Intentに対応するバックエンドでの処理の実装を簡単に • Actions on Googleの機能利用をサポート • GUI • 位置情報取得 • ログイン etc.. • 利用可能言語:Node.js Actions on Google Client Library について Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止

Slide 27

Slide 27 text

Actions on Google Client Libraryの使い方【1/3】 Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止 Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 const { dialogflow } = require('actions-on-google') const functions = require(‘firebase-functions’) const app = dialogflow() exports.endpoint = functions.https.onRequest(app) app.intent(‘Default Welcome Intent’, conv => { conv.ask(‘アプリが起動しました。何か話してください’) }) app.intent('Good Bye', conv => { conv.close('会話を終了します。さようなら') }) • npmでインストール • npm install actions-on-google • npm install firebase-functions

Slide 28

Slide 28 text

Actions on Google Client Libraryの使い方【2/3】 Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止 Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 const { dialogflow } = require('actions-on-google') const functions = require(‘firebase-functions’) const app = dialogflow() exports.endpoint = functions.https.onRequest(app) app.intent(‘Default Welcome Intent’, conv => { conv.ask(‘アプリが起動しました。何か話してください’) }) app.intent('Good Bye', conv => { conv.close('会話を終了します。さようなら') }) • npmでインストール • npm install actions-on-google • npm install firebase-functions • 会話に対する処理のハンドルには、 DialogflowApp クラスを利用。必須。

Slide 29

Slide 29 text

Actions on Google Client Libraryの使い方【3/3】 Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止 Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 const { dialogflow } = require('actions-on-google') const functions = require(‘firebase-functions’) const app = dialogflow() exports.endpoint = functions.https.onRequest(app) app.intent(‘Default Welcome Intent’, conv => { conv.ask(‘アプリが起動しました。何か話してください’) }) app.intent('Good Bye', conv => { conv.close('会話を終了します。さようなら') }) • npmでインストール • npm install actions-on-google • npm install firebase-functions • 会話に対する処理のハンドルには、 DialogflowApp クラスを利用。必須。 • DialogflowからのIntentに対する処理を定義 app.intent(‘Intent名’), conv => { // 会話に対する処理 }) 覚えておこう! 応答メソッド 説明 conv.ask 応答 + 返答待ち conv.close 応答 + アプリ終了

Slide 30

Slide 30 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 マルチデバイスの考え方

Slide 31

Slide 31 text

Multimodal Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止 https://youtu.be/JDakZMlXpQo Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 • 実際の会話は、言 葉のみで完結する ことは多くない • ビジュアルと音声 の相互作用により 最適化される

Slide 32

Slide 32 text

会話におけるビジュアルの価値 Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止 https://youtu.be/JDakZMlXpQo Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 • 多くの商品から欲し いものを探す場合 • 音声のみの表現だと 冗長になってしまう • ビジュアルだと直感 的

Slide 33

Slide 33 text

会話におけるビジュアルの価値 Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止 https://youtu.be/JDakZMlXpQo Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 • 比較要素が多い場合 • 音声のみの表現だと ユーザが記憶してお かないといけない • ビジュアルだと直感 的

Slide 34

Slide 34 text

会話におけるビジュアルの価値 Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止 https://youtu.be/JDakZMlXpQo Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 • ものの大きさや色/ 形、材料など • 言葉だと想像できな いことも多い • ビジュアルだと直感 的に選択できる

Slide 35

Slide 35 text

マルチデバイスの会話設計 Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止 https://youtu.be/JDakZMlXpQo Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 • 音声出力とスクリー ン表示の内容を詳細 化する

Slide 36

Slide 36 text

マルチデバイスの会話設計 Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止 https://youtu.be/JDakZMlXpQo Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 • Multimodalの文脈 に合わせて表示/非 表示を選択する

Slide 37

Slide 37 text

マルチデバイスの出し分け Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止 https://youtu.be/JDakZMlXpQo Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 音声→✕ 画面→○ 音声→○ 画面→○ 音声→○ 画面→✕ • デバイスによって音 声利用/画面利用が できるかどうかをも とに出し分けを行う

Slide 38

Slide 38 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 マルチデバイスアプリの 実装

Slide 39

Slide 39 text

音声出力/画面出力の認識 Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止 Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 Surface Capabilities 様々な形態のデバイス面( Surface )で最適化したレスポンスを返すためのしくみ 1.Surface capabilities for Actions サポートされるSurfaceのみでアプリを実行してもらうように設定できる 2.Runtime surface capabilities 実行時にSurfaceを認識する Response branching Surfaceを認識してレスポンスを変える Conversation branching Surface別に全く異なる会話を提示する Multi-surface conversations ひとつのSurface別に全く異なる会話を提示する

Slide 40

Slide 40 text

Surface capabilities for Actions サポートされるSurfaceのみでアプリを 実行してもらうように設定できる ● 音声 (audio) ● 画面 (screen) ● メディア再生 (media play back) ● ブラウザ(web browser) Ex: 画面ありデバイスだけで利用可能にする Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 画面あり のみ 制限なし

Slide 41

Slide 41 text

• Actions on Google Client Libraryで判断可能 • 4つのcapability定義 Runtime surface capabilities(Response branching) Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止 Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 const hasScreen = conv.surface.capabilities.has('actions.capability.SCREEN_OUTPUT'); const hasAudio = conv.surface.capabilities.has('actions.capability.AUDIO_OUTPUT'); const hasMediaPlayback = conv.surface.capabilities.has('actions.capability.MEDIA_RESPONSE_AUDIO'); const hasWebBrowser = conv.surface.capabilities.has('actions.capability.WEB_BROWSER'); # 利用例 if (hasScreen) { conv.ask("画面あるよー"); } else { conv.close("ごめん、画面ないねん"); }; Surface capabilityの種類 説明 SCREEN_OUTPUT 画面出力 AUDIO_OUTPUT 音声出力 MEDIA_RESPONSE_AUDIO メディアコンテンツの再生 WEB_BROWSER Webブラウザのサポート

Slide 42

Slide 42 text

• のIntentのcontextsにcapabilitiesを設定する • 設定したcapabilityのみに、Intentの起動を制限 Runtime Surface capabilities(Conversation branching) Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止 Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止

Slide 43

Slide 43 text

Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止 Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 Runtime Surface capabilities(Multi-surface conversations) ● 伝えたい情報やコンテキストに応じて、表示するデバイス面を選択 ● サンプル:「今日のわんこ」アクション Speaker Smartphone (Android/iOS) 通知 今日のわんこ を教えて 柴犬です。 画像で確認しますか? はい! https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Shiba_Inu.jpg/250px-Shiba_Inu.jpg

Slide 44

Slide 44 text

Multi-surface conversations のサンプル アクション:「今日のわんこ」を Google Homeで使った場合 ● スピーカーは画面がないので、わんこ の画像を確認するために、スマホでの 利用を促す Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止

Slide 45

Slide 45 text

Multi-surface conversations のサンプル アクション:「今日のわんこ」を Google Homeで使った場合 ● スピーカーは画面がないので、わんこ の画像を確認するために、スマホでの 利用を促す ● スマホ連携を許可した場合、 通知が送信される ● ※ 画面ありのAndroid/iOSのスマホへ の移動しかできない。 (2018/10/13 現在) Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止

Slide 46

Slide 46 text

Multi-surface conversations のサンプル アクション:「今日のわんこ」を Google Homeで使った場合 ● スピーカーは画面がないので、わんこ の画像を確認するために、スマホでの 利用を促す ● スマホ連携を許可した場合、 通知が送信される ● ※ 画面ありのAndroid/iOSのスマホへ の移動しかできない。 (2018/10/13 現在) Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Shiba_Inu.jpg/250px-Shiba_Inu.jpg

Slide 47

Slide 47 text

【1/4】Multi-surface conversationsの実装方法 app.intent('Today Dog - yes', conv => { const dogName = conv.data.dogName if (conv.screen) { // 画面あるなら、画像を表示する } else { const screenAvailable = conv.available.surfaces.capabilities.has('actions.capability.SCREEN_OUTPUT'); if (screenAvailable) { // 画面が利用可能なデバイス(スマホ)に引き継ぐ const context = '今日のわんこの画像を確認しよう'; const notification = '今日のわんこ「' + dogName + '」の画像を見よう'; const capabilities = ['actions.capability.SCREEN_OUTPUT']; conv.ask(new NewSurface({ context, notification, capabilities })); } else { // 画像を表示できないので、終了する } } }) Google Home -> Smartphoneに 会話を引き継ぐ Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止

Slide 48

Slide 48 text

【2/4】Multi-surface conversationsの実装方法 app.intent('Today Dog - yes', conv => { const dogName = conv.data.dogName if (conv.screen) { // 画面あるなら、画像を表示する } else { const screenAvailable = conv.available.surfaces.capabilities.has('actions.capability.SCREEN_OUTPUT'); if (screenAvailable) { // 画面が利用可能なデバイス(スマホ)に引き継ぐ const context = '今日のわんこの画像を確認しよう'; const notification = '今日のわんこ「' + dogName + '」の画像を見よう'; const capabilities = ['actions.capability.SCREEN_OUTPUT']; conv.ask(new NewSurface({ context, notification, capabilities })); } else { // 画像を表示できないので、終了する } } }) Google Home -> Smartphoneに 会話を引き継ぐ 画面付きデバイスが利用可能であるか? ・Googleアシスタントと連携済みであるか Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止

Slide 49

Slide 49 text

【3/4】Multi-surface conversationsの実装方法 app.intent('Today Dog - yes', conv => { const dogName = conv.data.dogName if (conv.screen) { // 画面あるなら、画像を表示する } else { const screenAvailable = conv.available.surfaces.capabilities.has('actions.capability.SCREEN_OUTPUT'); if (screenAvailable) { // 画面が利用可能なデバイス(スマホ)に引き継ぐ const context = '今日のわんこの画像を確認しよう'; const notification = '今日のわんこ「' + dogName + '」の画像を見よう'; const capabilities = ['actions.capability.SCREEN_OUTPUT']; conv.ask(new NewSurface({ context, notification, capabilities })); } else { // 画像を表示できないので、終了する } } }) Actions on Google Node.js Client Library のNewSurfaceクラスを利用 会話、通知文言を設定し、 画面付きデバイスへ連携 Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止

Slide 50

Slide 50 text

【4/4】Multi-surface conversationsの実装方法 Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止 通知タップ時のハンドリング ● Dialogflowでイベント 「actions_intent_NEW_SURFACE」 を受け取るIntentを作成 ● アクションのBE側の処理で、 Intentをハンドリング app.intent('New Surface', (conv, input, newSurface) => { if (newSurface.status === 'OK') { const dogName = conv.data.dogName const dogImageUrl = conv.data.dogImageUrl conv.ask(dogName + 'の画像はこちらです。') // わんこの画像を表示 } else { // 会話の終了 } })

Slide 51

Slide 51 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 リッチなUIや音声の合成

Slide 52

Slide 52 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 RichResponse

Slide 53

Slide 53 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 Rich Response 画面のある端末で 画面表示をリッチに することができる コンポーネント

Slide 54

Slide 54 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 BasicCardを 表示します Rich Response

Slide 55

Slide 55 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 Rich Response app.intent('basic', (conv) => { // 画面出力の有無を確認 if (!conv.surface.capabilities.has('actions.capability.SCREEN_OUTPUT')) { conv.close('このデバイスは画面出力に対応していないため、BasicCardを表示できません。'); return; } conv.ask('BasicCardを表示します’); conv.ask(new BasicCard({ title: 'じゃんけん', subtitle: 'クマくんのじゃんけんゲーム', text: '**クマくん**とじゃんけんをしましょう。\n「*Ok Google, クマくんのじゃんけんゲームと 話す」と言ってください。*', image: new Image({ url: '画像URL', alt: 'アイコン画像', }), buttons: new Button({ title: '詳しくはこちら', url: 'https://assistant.google.com/services/a/uid/00000045ffe70d1e?hl=ja', }), display: 'CROPPED', })); // 操作Suggest conv.ask(new Suggestions(suggestions)); });

Slide 56

Slide 56 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 Rich Response実装例 app.intent('basic', (conv) => { // 画面出力の有無を確認 if (!conv.surface.capabilities.has('actions.capability.SCREEN_OUTPUT')) { conv.close('このデバイスは画面出力に対応していないため、BasicCardを表示できません。'); return; } conv.ask('BasicCardを表示します’); conv.ask(new BasicCard({ title: 'じゃんけん', subtitle: 'クマくんのじゃんけんゲーム', text: ‘**クマくん**とじゃんけんをしましょう。〜省略〜と言ってください。*', image: new Image({ url: '画像URL', alt: 'アイコン画像', }), buttons: new Button({ title: '詳しくはこちら', url: 'https://assistant.google.com/services/a/uid/00000045ffe70d1e?hl=ja', }), display: 'CROPPED', })); // 操作Suggest conv.ask(new Suggestions(suggestions)); }); 必須:Simple Response 音声/バブルチャット共通

Slide 57

Slide 57 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 Rich Response Carousel Media Response Table https://developers.google.com/actions/assistant/responses

Slide 58

Slide 58 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 SSML

Slide 59

Slide 59 text

SSMLとは Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止 Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 Speech Synthesis Markup Language • 音声合成マークアップ言語仕様 • XMLで音声合成できる • W3Cにより仕様化 • https://www.w3.org/TR/speech-synthesis11/ • Actions on Googleではこの一部をサポート

Slide 60

Slide 60 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 お疲れっした〜 ありがとっした〜 SSMLの基本的な構文 タグをルートタグと して、配下に音声文言や音 声合成要素タグを入れる 例:breakタグで0.5秒待っ てから次の文言を発声する

Slide 61

Slide 61 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 入力方法(Dialogflow) Intents -> [任意のIntent] -> Responses -> Text response

Slide 62

Slide 62 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 入力方法(Actions on Google Client Library) const app = new DialogflowApp({request, response}); const ssmlMessage = 'お疲れっした〜 ありがとっした〜 ‘; // 音声とスマホで同じ文言の場合 app.tell('' + ssmlMessage + '’); // 音声とスマホで文言を変える場合 const displayMessage = 'おつかれやまでーす’; app.tell({ speech: '' + ssmlMessage + '' , displayText: displayMessage });

Slide 63

Slide 63 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 検証 Simulator -> AUDIO

Slide 64

Slide 64 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 SSMLタグの例

Slide 65

Slide 65 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 // time指定 お疲れっした〜 ありがとっした〜。 // strength指定 お疲れっした〜 ありがとっした〜。 読み上げを停止する timeかstrengthで指定する

Slide 66

Slide 66 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 //いち 1 //いちばんめ 1 //2010年10月08日 20101008 //22時1分 2201 // S-P-E-C SPEC //+81の8001706113 08001706113 //シンプル<ピー> シンプルプラン 文字を指定したフォーマットで読み上げる

Slide 67

Slide 67 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 // speed=”100%” Theme // speed="200%” Theme // speed="200%" clipBegin="0s" clipEnd=”2s” repeatCount="3" repeatDur="12s" Theme 音声ファイルを再生する

Slide 68

Slide 68 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 無料で利用できる音声 Actions on Google Sound Library YouTube Audio Library

Slide 69

Slide 69 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 頑張ってみた例 詳しくは、SlideShareにて公開しています。 「SSMLでできること」 https://www.slideshare.net/nsface/ssml

Slide 70

Slide 70 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 まとめ

Slide 71

Slide 71 text

まとめ Copyright (C) 2018 Namito.Satoyama. All Rights Reserved. 無断引用・転載禁止 • Googleアシスタントはすでにとても普及している • Googleアシスタントははじめから様々なデバイス での利用が想定されている • Audio+Visualで、本質的な会話に近づくので、画 面がある端末は積極利用する • リッチなUIや音声合成で、会話をさらに最適化す ることが可能

Slide 72

Slide 72 text

Copyright (C) 2018 Namito.Satoyama, Shinji.Ichien All Rights Reserved. 無断引用・転載禁止 Thanks!