Googleアシスタントアクションの Multi-Modal対応について

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-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で使った場合 • スピーカーは画面がないので、わんこの画像を確認するために、スマホでの利用を促す

• スマホ連携を許可した場合、通知が送信される • ※ 画面ありのAndroid/iOSのスマホへの移動しかできない。 (2018/10/09 現在)

• スマホ連携を許可した場合、通知が送信される • ※ 画面ありの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

Googleアシスタントアクションの Multi-Modal対応について

Googleアシスタントアクションの Multi-Modal対応について

ichien178

More Decks by ichien178

Other Decks in Technology

Featured

Transcript