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
「AI駆動開発」のボトルネック『言語化』を効率化するには
taniiicom
1
100
MCP とマネージド PaaS で実現する大規模 AI アプリケーションの高速開発
nahokoxxx
1
1.4k
AIコードアシスタントとiOS開発
jollyjoester
1
230
(HackFes)米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
5
660
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
200
AI エンジニアの立場からみた、AI コーディング時代の開発の品質向上の取り組みと妄想
soh9834
6
260
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
140
Railsの限界を超えろ!「家族アルバム みてね」の画像・動画の大規模アップロードを支えるアーキテクチャの変遷
ojima_h
3
390
怖くない!GritQLでBiomeプラグインを作ろうよ
pal4de
1
120
経理出身PdMがAIプロダクト開発を_ハンズオンで学んだ話.pdf
shunsukenarita
1
110
Turn Your Community into a Fundraising Catalyst for Black Philanthropy Month
auctria
PRO
0
130
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
220
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1k
The Pragmatic Product Professional
lauravandoore
35
6.8k
The World Runs on Bad Software
bkeepers
PRO
70
11k
GitHub's CSS Performance
jonrohan
1031
460k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Producing Creativity
orderedlist
PRO
346
40k
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