Googleアシスタント アクションの Multi-Modal対応について potatotips#55 @1coin178

My Profile Ichien Shinji 【一円 真治】 Twitter: @1coin178 Yahoo Japan Corporation Yahoo! MAP Android App, Backend 最近、 Googleアシスタントの開発入門の書籍を出版しました！ よろしくお願いします！ Kindle版も 発売中！

今日話すこと ● GoogleアシスタントのMulti-Modal対応方法 ○ Google Home -> スマホへ誘導させる方法 ○ 例えば、Google Homeから料理レシピの話を聞いていたら、 どんな料理か画像で確認したくなった 話さないこと ● Googleアシスタントのアクションの細かい作り方

GoogleアシスタントのMulti-Modal対応とは ● VoiceとVisualを使い分 けて、理解しやすい会話 に ● コンテキストと情報にあっ たデバイスの選択 Design Actions for the Google Assistant beyond smart speakers (Google I/O '18) - https://youtu.be/JDakZMlXpQo

どんなデバイスがあるのか Keynote (Google I/O '18) - https://youtu.be/ogfYd705cRs

どんなデバイスがあるのか https://youtu.be/ogfYd705cRs Multi-Modal対応が 今後重要に Keynote (Google I/O '18) - https://youtu.be/ogfYd705cRs

Multi-Modal 対応方法 ● Surface capabilities for Actions ○ アクション自体にサポートするデバイス面 (Surface)の制限をかける ● Runtime surface capabilities ○ アクション実行時にSurfaceを判断 ● Multi-surface conversations ○ Google Home(Voice) -> Smartphone(Visual)への誘導

Multi-Modal 対応方法 ● Surface capabilities for Actions ○ アクション自体にサポートするデバイス面 (Surface)の制限をかける ● Runtime surface capabilities ○ アクション実行時にSurfaceを判断 ● Multi-surface conversations ○ Google Home(Voice) -> Smartphone(Visual)への誘導

Multi-surface conversations ● 伝えたい情報やコンテキストに応じて、表示するデバイス面を選択する ● サンプル:「今日のわんこ」アクション Speaker Smartphone (Android/iOS) 通知 今日のわんこ を教えて 柴犬です。 画像で確認します か? はい！ https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Shiba_Inu.jpg/250px-Shiba_Inu.jpg

Multi-surface conversations のサンプル アクション:「今日のわんこ」を Google Homeで使った場合 ● スピーカーは画面がないので、わ んこの画像を確認するために、ス マホでの利用を促す

Multi-surface conversations のサンプル アクション:「今日のわんこ」を Google Homeで使った場合 ● スピーカーは画面がないので、わ んこの画像を確認するために、ス マホでの利用を促す ● スマホ連携を許可した場合、 通知が送信される ● ※ 画面ありのAndroid/iOSのスマ ホへの移動しかできない。 (2018/10/09 現在)

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

Multi-surface conversationsの 実装方法 【1/4】 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に 会話を引き継ぐ

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 { // 画像を表示できないので、終了する } } }) Multi-surface conversationsの 実装方法 【2/4】 画面付きデバイスが利用可能であるか? ・Googleアシスタントと連携済みであるか Google Home -> Smartphoneに 会話を引き継ぐ

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 { // 画像を表示できないので、終了する } } }) Multi-surface conversationsの 実装方法 【3/4】 Actions on Google Node.js Client Libraryの NewSurfaceクラスを利用 会話、通知文言を設定し、 画面付きデバイスへ連携

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 { // 会話の終了 } }) ● Dialogflowでイベント 「actions_intent_NEW_SURFACE 」を受け取るIntentを作成 ● アクションのBE側の処理で、 Intentをハンドリング Multi-surface conversationsの 実装方法 【4/4】 通知タップ時のハンドリング https://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Shiba_Inu.jpg/250px-Shiba_Inu.jpg

今後のMulti-Modal Conversation ● App ActionsやSlicesとの連携に期待 Speaker Smartphone (Android/iOS) Android App 通知 App Actions Slices

サンプルコード ● 1coin178/actions-on-google-multi-modal-sample ○ https://github.com/1coin178/actions-on-google-multi-modal-sample

● Scale your design - Conversation design process - Conversation design ○ https://designguidelines.withgoogle.com/conversation/conversation-design-process/scale-yo ur-design.html ● Surface Capabilities | Actions on Google | Google Developers ○ https://developers.google.com/actions/assistant/surface-capabilities 参考資料

Thanks.

Appendix

Multi-surface conversations のサンプル アクション:「今日のわんこ」を スマホで使った場合 ● 画面があるので、そのままスマホ で、わんこの画像を表示 https://upload.wikimedia.org/wikipedia/commons/b/bf/Pembroke_Welsh_Corgi_600.jpg?uselang=ja

Surface capabilities for Actions 対応するcapabilityを アクション実行前に設定できる ● 音声 (audio) ● 画面 (screen) ● メディア再生 (media play back) ● ブラウザ(web browser) ● Ex: 画面ありデバイスだけで利用可能にす る

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'); Runtime surface capabilities Actions-on-Google Node.js クライアントライブラリで判断可能 ● conv.surface.capabilities.has 4つのcapability定義 ● actions.capability.SCREEN_OUTPUT ● actions.capability.AUDIO_OUTPUT ● actions.capability.MEDIA_RESPONS E_AUDIO ● actions.capability.WEB_BROWSER # 利用例 if (hasScreen) { conv.ask("画面あるよー"); } else { conv.close("ごめん、画面ないねん"); }; 参考: https://developers.google.com/actions/assistant/surface-capabilities#runtime-surface-capabilities