Navigate users from assistant app to android app
Download as PPTX, PDF0 likes484 views
This document discusses how to navigate users from an Assistant app to an Android app. It provides code to: 1. Check if the user's device supports screen output and send a basic card with a link button if so. If not, it checks if another device is available that supports screen output and requests a transfer. 2. Define functions for the welcome intent and handling a new surface. 3. Build a basic card rich response with a link button that will launch the LINE app when clicked, and provide example HTML to redirect to the LINE app after 5 minutes.
![1. Check whether a surface the user is using supports a screen.
[Yes] 2. Send a Basic Card with a Link Button.
[No] 3. Check whether the user has a surface which is supporting a screen.
[Yes] 4. Request to transfer the user to the surface.
[Yes] 5. Send a Basic Card with a Link Button.
Send a Basic Card w/ a Link Button
?](https://image.slidesharecdn.com/navigateusersfromassistantapptoandroidapp-171228002548/85/Navigate-users-from-assistant-app-to-android-app-9-320.jpg)
![// 1. Check whether a surface the user is using supports a screen
const screenSupported =
app.hasSurfaceCapability(app.SurfaceCapabilities.SCREEN_OUTPUT);
if (screenSupported) {
// 2. Send a Basic Card with Link Button
} else {
// 3. Check whether the user has a surface which is supporting a screen.
const screenAvailable =
app.hasAvailableSurfaceCapabilities(app.SurfaceCapabilities.SCREEN_OUTPUT);
if (screenAvailable) {
// 4. Request to transfer the user to the surface.
const context = "<context>";
const notificationTitle = "<title>";
app.askForNewSurface(
context, notificationTitle, [app.SurfaceCapabilities.SCREEN_OUTPUT]);
} else {
...
}
}](https://image.slidesharecdn.com/navigateusersfromassistantapptoandroidapp-171228002548/85/Navigate-users-from-assistant-app-to-android-app-14-320.jpg)
Navigate users from assistant app to android app
- 1. Navigate users from Assistant App to Android App 2017/12/19 APP DOJO
- 2. Yoichiro Tanaka Software Engineer / IT Architect Google Developers Expert (Web) twitter.com/yoichiro google.com/+YoichiroTanaka
- 4. Surfaces Support audio experiences only Support screen experiences only Support both audio and screen experiences
- 6. Simple Responses Supported on ● actions.capability.AUDIO_OUTPUT ● actions.capability.SCREEN_OUTPUT
- 7. Rich Responses - Basic Card Supported on ● actions.capability.SCREEN_OUTPUT Image, Title, Sub-title, Text body, Link button, Border
- 9. 1. Check whether a surface the user is using supports a screen. [Yes] 2. Send a Basic Card with a Link Button. [No] 3. Check whether the user has a surface which is supporting a screen. [Yes] 4. Request to transfer the user to the surface. [Yes] 5. Send a Basic Card with a Link Button. Send a Basic Card w/ a Link Button ?
- 13. "use strict"; process.env.DEBUG = "actions-on-google:*"; const App = require("actions-on-google").DialogflowApp; const functions = require("firebase-functions"); exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => { const app = new App({request, response}); const inputWelcome = (app) => { // for Default Welcome Intent }; const actionMap = new Map(); actionMap.set("input.welcome", inputWelcome); app.handleRequest(actionMap); });
- 14. // 1. Check whether a surface the user is using supports a screen const screenSupported = app.hasSurfaceCapability(app.SurfaceCapabilities.SCREEN_OUTPUT); if (screenSupported) { // 2. Send a Basic Card with Link Button } else { // 3. Check whether the user has a surface which is supporting a screen. const screenAvailable = app.hasAvailableSurfaceCapabilities(app.SurfaceCapabilities.SCREEN_OUTPUT); if (screenAvailable) { // 4. Request to transfer the user to the surface. const context = "<context>"; const notificationTitle = "<title>"; app.askForNewSurface( context, notificationTitle, [app.SurfaceCapabilities.SCREEN_OUTPUT]); } else { ... } }
- 21. exports.dialogflowFirebaseFulfillment = functions.https.onRequest((request, response) => { const app = new App({request, response}); const inputWelcome = (app) => { ... }; const newSurface = (app) => { // 5. Send a Basic Card with a Link Button. }; const actionMap = new Map(); actionMap.set("input.welcome", inputWelcome); actionMap.set("new_surface", newSurface); app.handleRequest(actionMap); });
- 22. app.ask( app.buildRichResponse() .addSimpleResponse("<simple>") .addBasicCard( app.buildBasicCard("This is a **Basic Card** output.") .setTitle("Go to LINE app") .addButton("Launch", "https://server/launch_line.html") ) );
- 24. <!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="refresh" content="5;URL=line://nv/chat"> <meta charset="utf-8"> </head> <body> <p>Launch LINE App after 5 minutes.</p> </body> </html>
- 27. Conclusion Surface Capabilities ● AUDIO_OUTPUT and SCREEN_OUTPUT Check Methods ● hasSurfaceCapability ● hasAvailableSurfaceCapabilities Basic Card Rich Response with Link Button
- 28. Thanks!
Editor's Notes
- #2: 今日は、Googleアシスタント向けアプリから、ユーザをAndroidアプリへ誘導するための一つのやり方について紹介したいと思います。
- #3: 自己紹介です。
- #4: さて、Googleアシスタントは、実は皆さんのかなり身近なところに既にいます。Android端末をお持ちであれば、Homeボタンを長押しすることで呼び出すことができますし、iOSをお使いの方は、Googleアシスタントアプリを入れることで、利用することができます。また、Alloというメッセージングアプリの中にも、Googleアシスタントがいます。もちろん、Google Homeの向こう側にも、Googleアシスタントが待ち構えています。ここで重要なポイントは、それぞれユーザが何で操作をし、どのようにフィードバックを得るか、です。Google Homeであれば声で、Androidであれば声もしくはテキストで、Alloであればテキストのみ、という違いがあります。
- #5: ユーザとGoogleアシスタントの接点のことを「サーフェス」と呼んでいます。現在サーフェスは、AUDIO、SCREEN、そしてその両方の3種類があります。
- #6: アシスタントアプリを開発して提供する際に、どのサーフェスを必要とするかを選択することができます。必要とするサーフェスの組み合わせによって、そのアシスタントアプリを呼び出すことができる場所が決まります。例えば、AUDIOを必須と選択した際には、Alloからそのアシスタントアプリを呼び出すことはできません。
- #7: アシスタントアプリがユーザに提供する応答には、いくつかの種類があります。まず、Simple Responseは、単純なメッセージです。これは、表示することも読み上げることもできるため、AUDIOとSCREENの両方でサポートされています。
- #8: それに対して、Rich Responseの中にあるBasic Cardという応答は、その名の通り、メッセージだけでなく、画像や枠線、そしてリンクなどを含んでいます。これは読み上げられないので、SCREEN Surfaceのみがサポートされます。つまり、画面を持つデバイスにいるGoogleアシスタントでしか表示できないことになります。ここでは、このBasic Cardの中でサポートされているリンクを使います。
- #9: つまり、GoogleアシスタントからユーザにリンクつきBasic Cardを提示してクリックしてもらうことで、そのリンク先としてAndroidアプリを起動させることができます。
- #10: ここでは、アシスタントアプリからユーザにLinkButtonを持つBasic Cardを送信するための手順を紹介します。まず、ユーザがSCREEN Surfaceをサポートする場所からアシスタントアプリを使っているかどうかをチェックします。もしSCREEN Surfaceをサポートしていれば、応答として即座にBasic Cardを送ります。そうではなく、もしAUDIO Surfaceのみをサポートしている場所からだった場合は、応答としてBasic Cardをユーザに送信することができません。その際には、ユーザをSCREEN Surfaceをサポートした場所に「誘導」する必要があります。そのためには、まずユーザがSCREEN Surfaceをサポートしたデバイスを持っているかどうかをチェックします。もし持っていなかった場合は、Basic Cardを送ることはできませんので、そこで断念です。幸いにもSCREEN Surfaceをサポートしたデバイスを持っていれば、その場所に誘導するためのリクエストを応答として返します。これにより、Googleアシスタントはユーザに「誘導しようとしてるけど、どうする？」と問い合わせをします。ユーザがそれを了承した際には、SCREEN SurfaceをサポートしたデバイスにいるGoogleアシスタントに会話が引き継がれ、アシスタントアプリはBasic Cardを応答として送信することで、めでたくユーザに表示されます。
- #11: では実際に試してみましょう。まず、Dialogflowで最初から作られているWelcomeインテントに対して、応答するようにします。Default Welcome Intentをクリックしてください。
- #12: コードを書いてSurfaceの状態をチェックするため、Fulfillmentの項目にあるUser webhookにチェックを入れてください。
- #13: 次に、Fulfillmentメニューをクリックして、インラインエディタを有効にします。
- #14: そして、input.welcomeアクションに対する処理をするハンドラ関数を作ります。
- #15: ここで、先ほど紹介したSurfaceの対応状況をチェックする手順を実装していきます。まず、hasSurfaceCapabilityにSCREEN_OUTPUTを渡すことで、そのユーザが現在SCREENをサポートしたデバイスを使っているかどうかを確認することができます。結果がtrueの場合のBasic Cardを応答するコードは、後で紹介しましょう。現在SCREENをサポートしたデバイスを使っていない場合は、さらにhasAvailableSurfaceCapabilitiesにSCREEN_OUTPUTを渡すことで、そのユーザがSCREENをサポートしたデバイスを有しているかどうかを確認します。その結果、SCREENをサポートしたデバイスを有していた場合は、askForNewSurfaceにSCREEN_OUTPUTを渡して呼び出します。askForNewSurfaceによって、SCREENをサポートしたデバイスにユーザを誘導することができます。
- #16: ただし、ドキュメントには、現在英語ロケールでしかaskForNewSurfaceが機能しないことが書かれています。日本語ロケールでも近い将来使えるようになるはずなので、楽しみに待つことにしましょう。
- #17: さて、先ほど書いたコードがどのように機能するか、確認してみましょう。シミュレータでは、サポートするSurfaceを切り替えることができます。ここでは、AUDIO Surfaceのみサポートするモードにします。
- #18: さっそくアシスタントアプリにつないでみましょう。すると、Default Welcome Intentが作動します。ここで、"<context>. Is it okay if I send that to your phone?"という応答がGoogleアシスタントから返ってきます。つまり、あなたのAndroid端末に通知を送っても良いですか？と聞いてきています。Ok、と返しましょう。
- #19: すると、このようにAndroid端末にOSの通知が来ます。会話が通知経由で引き継がれようとしています。
- #20: さて、ユーザがOkをして会話が無事引き継がれた際には、Dialogflowに特定のイベントが飛んできます。それを受け取るためのインテントを作りましょう。CREATE INTENTをクリックしてください。
- #21: インテント名を適当につけた後、Eventsとしてactions_intent_NEW_SURFACEと入力してください。これが、新しいSurfaceにユーザが到達したときに飛んでくるイベントです。この処理もコードで実装するため、アクションをつけて、Webhookを有効にします。
- #22: そして、いま作ったインテントのアクションを処理するためのハンドラ関数を追加します。
- #23: ここでは、SCREEN Surfaceをサポートしたデバイスからのリクエストになりますので、めでたくBasic Cardを応答として送信する処理を書くことができます。addBasicCardの中で、addButtonにURLを渡すことで、LinkButtonを追加することができます。ただし、ここで指定可能なURLはhttpまたがhttpsのみです。そのため、直接Androidアプリを起動することができませんので、ウェブページを経由して起動するようにします。
- #24: 先ほど受信した通知をタップすると、Basic Cardを送信する処理が実行され、このようにAndroid側のGoogleアシスタント内でカードが表示されます。Launchをタップすることで、先ほど指定したURLに飛びます。
- #25: HTMLの中では、例えばこのようにline://を使ってLINEアプリのURL Schemeを指定しておけば、
- #26: 一旦HTMLが表示され、
- #27: metaタグのrefreshによって、めでたくLINEが起動しました。
- #28: まとめです。Googleアシスタントは、AUDIOおよびSCREENというSurfaceと呼ばれる場所の区別があり、ユーザがどのSurfaceにいるか、そしてどのSurfaceを使えるかをチェックすることができます。そして、Basic Card Rich ResponseのLinkButtonを利用することで、Androidアプリへの誘導を実現することが可能なことを紹介しました。
- #29: 以上です。ありがとうございました。