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
330
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
Google PixelでAIコーディングしたい
1coin
0
34
AIとペーパー電車をつくってみた
1coin
0
130
地方拠点で エンジニアリングマネージャーってできるの? 〜地方という制約を楽しむオーナーシップとコミュニティ作り〜
1coin
1
460
「学び」を捉えてマインドアップデート
1coin
0
320
ヤフー名古屋TechMeetupを 運営して学んだこと "縁 ~en~"
1coin
0
110
なぜエンジニアの私が マジ価値MeetupでLTをするのか
1coin
0
200
freee会計でのModule Federationによるマイクロフロントエンドの実践
1coin
2
26k
「この技術書がすごい」 好きなので語ります ~Team Geekついて~
1coin
1
420
リモートでも本音が言い合えるチームに なるためにやったこと
1coin
0
890
Other Decks in Technology
See All in Technology
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
0
150
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
8
4.3k
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
1k
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
3
5.5k
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
160
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
240
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
350
AWS 잘하는 개발자 되기 - AWS 시작하기: 클라우드 개념부터 IAM까지
kimjaewook
0
130
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
440
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
180
Developer Advocate / Community Managerなるには?
tsho
0
130
ComposeではないコードをCompose化する case ビズリーチ / DroidKaigi 2025 koyasai
visional_engineering_and_design
0
110
Featured
See All Featured
Thoughts on Productivity
jonyablonski
70
4.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Six Lessons from altMBA
skipperchong
28
4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Navigating Team Friction
lara
190
15k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Balancing Empowerment & Direction
lara
4
690
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
It's Worth the Effort
3n
187
28k
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