Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Googleアシスタント アクションの Multi-Modal対応について
Search
ichien178
October 09, 2018
Technology
2
320
Googleアシスタント アクションの Multi-Modal対応について
potatotips #55 (iOS/Android開発Tips共有会) - connpass -
https://potatotips.connpass.com/event/100763/
ichien178
October 09, 2018
Tweet
Share
More Decks by ichien178
See All by ichien178
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
420
「学び」を捉えてマインドアップデート
1coin
0
310
ヤフー名古屋TechMeetupを 運営して学んだこと "縁 ~en~"
1coin
0
96
なぜエンジニアの私が マジ価値MeetupでLTをするのか
1coin
0
190
freee会計でのModule Federationによるマイクロフロントエンドの実践
1coin
2
26k
「この技術書がすごい」 好きなので語ります ~Team Geekついて~
1coin
1
410
リモートでも本音が言い合えるチームに なるためにやったこと
1coin
0
860
私の仕事観 + 今の仕事
1coin
0
70
複雑化したReact hookのデバッグとその対策
1coin
4
1.2k
Other Decks in Technology
See All in Technology
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
3
400
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
13k
Bliki (ja), and the Cathedral, and the Bazaar
koic
8
1.3k
メモ整理が苦手な者による頑張らないObsidian活用術
optim
0
120
P2P ではじめる WebRTC のつまづきどころ
tnoho
1
210
BEYOND THE RAG🚀 ~とりあえずRAG?を超えていけ! 本当に使えるAIエージェント&生成AIプロダクトを目指して~ / BEYOND-THE-RAG-Toward Practical-GenerativeAI-Products-AOAI-DevDay-2025
jnymyk
4
230
東京海上日動におけるセキュアな開発プロセスの取り組み
miyabit
0
110
スプリントレビューを効果的にするために
miholovesq
9
1.6k
20150719_Amazon Nova Canvas Virtual try-onアプリ 作成裏話
riz3f7
0
130
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
20
5.8k
MCPと認可まわりの話 / mcp_and_authorization
convto
1
120
AWS Well-Architected から考えるオブザーバビリティの勘所 / Considering the Essentials of Observability from AWS Well-Architected
sms_tech
1
850
Featured
See All Featured
Making Projects Easy
brettharned
116
6.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
We Have a Design System, Now What?
morganepeng
53
7.7k
Building Applications with DynamoDB
mza
95
6.5k
The World Runs on Bad Software
bkeepers
PRO
70
11k
The Cult of Friendly URLs
andyhume
79
6.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Thoughts on Productivity
jonyablonski
69
4.7k
How STYLIGHT went responsive
nonsquared
100
5.6k
A Tale of Four Properties
chriscoyier
160
23k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Speed Design
sergeychernyshev
32
1k
Transcript
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