GoogleAssistant
GoogleHome
ActionOnGoogle

Google Assistantの反応と同時にPush通知を出す

この記事は何?

Google Assistantと外部のサービスを自前で接続します。ブラウザ好きなので、今旬なPWA(Progressive Web App)の中でも実装した達成感が出るPush通知と連携させます。今回はFirebase Cloud Messageを使います。

実装すること

Google Assistantで作ったシナリオの中にFCMでPush通知を送るように仕掛けます。シナリオは前回のGoogle Assistantを超デキるVoice Recognition Systemとして使うと全く同じなので、最初にそちらを実装しておいてください。

実装

Firebase

データベースの設定

Push通知を送るためには、通知を送る側が、クライアント側で生成されるユニークなキーを知っておく必要があります。今回はサーバ側が送りますので、Firebaseのデータベースを記憶領域として利用します。
Screen Shot 2017-10-22 at 5.03.19 PM.png

真ん中の青色の「GET STARTED」をクリックするだけです👍

Screen Shot 2017-10-22 at 5.03.37 PM.png

データベースの権限

Read、Writeの権限を設定します。お試しなので、どちらもザルにします。
Screen Shot 2017-10-22 at 5.05.31 PM.png

Firebase Hostingを設定

前回はDialogflowのFulfillmentに用意されているブラウザ上に用意されたエディタに書き込みましたが、今回はリモートからファイルのアップロード(デプロイ)を行います。ここではFirebaseのHostingサービスを利用するので、ここで利用できるようにします。
Screen Shot 2017-10-22 at 5.42.44 PM.png

ここでも青色の「GET STARTED」をクリックします。

Screen Shot 2017-10-22 at 5.42.53 PM.png

続いて、ターミナルからLocalの環境の準備をします。
Node.jsのインストール等を画面の指示通りに行ってください。

$ npm install -g firebase-tools;

までできたら「CONTINUE」ボタンを押して次に進みます。

Screen Shot 2017-10-22 at 5.45.41 PM.png

ここも画面の指示通りに、

$ firebase login;
$ firebase init;
$ firebase deploy;

firebase initをするとターミナルで対話型のセットアップが始まります。
1つ目は、
> Hosting: Configure and deploy Firebase Hosting sites
を、
2つ目は、前回作成したプロジェクトを指定してください。
ここまで完了したら「FINISH」ボタンを押して完了です。

Screen Shot 2017-10-22 at 6.03.29 PM.png

ソースの取得とデプロイ

ソースの取得

次にソースをダウンロードします。
GitHubのここに用意したので使ってください。

$ git pull https://github.com/ryoyakawai/assistant_factaboutgoogle_fcm.git;
$ cd assistant_factaboutgoogle_fcm;

git pull が終わったら先程firebase initをしたときにできたディレクトリの中身を、そっくりそのままassistant_factaboutgoogle_fcmに上書きしてください。
こでれassistant_factaboutgoogle_fcmディレクトリからでもdeployができるようになったはずです。(ちょっと自信ないですが・・・😓)

キーとかを書き込む

2種類あります。
Firebaseを動かすためのキー。
左ペインのメニューからOverviewを選択すると下の画面になりますので、赤丸の画像をクリックしてください。
Screen Shot 2017-10-22 at 7.20.56 PM.png

するとこんな画面が出てきます。configのみをコピーして、assistant_factaboutgoogle_fcm/apps/keys.jsにコピーしてください。
Screen Shot 2017-10-22 at 7.23.41 PM.png

次に便宜上(本来はサーバには上げないでくださいね)、サーバキーをコピーします。左ペインのメニューの[Overview]の隣にある歯車のアイコンをクリックして「Project settings」をクリック。

Screen Shot 2017-10-22 at 6.23.01 PM.png

表示された画面「CLOUD MESSAGING」のタブを表示するとServer Keyを確認することが可能です。
Screen Shot 2017-10-22 at 6.23.17 PM.png

キーのコピー(assistant_factaboutgoogle_fcm/apps/keys.jsの作成)が完成したら、もう1度デプロイします。
assistant_factaboutgoogle_fcmの中にいることを確認して以下のコマンドをターミナルから行ってください。ここではfunctionshostingのみをデプロイしていますが、--only functions, hostingはつけなくてもOKです。

$ firebase deploy --only functions,hosting;

完成するとweb側のせってい画面はこんな感じになります。既にデプロイをしているので、この状態で見るとDeployHistoryにその履歴が表示されているはずです。
Screen Shot 2017-10-22 at 6.03.29 PM.png

認証の有効化

テストとはいえ誰が来たのか分かるようにしておきます。
左ペインのメニューからAuthenticationをクリックして、SIGN-IN METHODのタブを表示します。選択肢はいろいろありますが、ここではGoogleの認証のみ有効にします。
Screen Shot 2017-10-22 at 6.18.37 PM.png
最後のSAVEボタンを押すのを忘れずに。

ここで実装は終了です。お疲れ様でした。

テストサイトの表示

デプロイをしたときにターミナルに以下の3つが表示されるはずです。

Project Console: https://console.firebase.google.com/project/hogehoge/overview
Hosting URL: https://hoge.firebaseapp.com
Function URL (dialogflowFirebaseFulfillment): https://hoge.cloudfunctions.net/dialogflowFirebaseFulfillment````

ここの「Hosting URL」にアクセスしてください。

ログインとPush通知の許可

Hosting URL」にアクセスすると以下のような画面が出てきます。のでログインをしてください。

Screen Shot 2017-10-22 at 7.49.39 PM.png

ログインが完了すると以下の画面、Push通知を許可するボタンの画面になりますので、クリックしてPush通知を許可してください。
Screen Shot 2017-10-22 at 7.53.17 PM.png

これで、ブラウザはサーバによって特定されましたのでPush通知が飛んで来るはずです。
ここからGoogle Assistantからのテストになります。前回の動作のテストを行う準備をするに従ってSimulatorでテストを行ってください。

アプリの内容はGoogleさんの歴史本社を教えてくれるものでした。どちらを聞いてもなんらかのPush通知が届くようになっています。

Push通知を受け取る

先程ログインしたページのタブが閲覧できるようにになっていた場合は、ページの下にPush通知の内容が表示されます。
Screen Shot 2017-10-22 at 8.01.32 PM.png

先程ログインしたページのタブが閲覧できない場合は、OSによって違いますがmacOSの場合は以下の画像のようになります。
Screen Shot 2017-10-22 at 6.44.34 PM.png

まとめ

スクリプトも説明せずにザザッときてしまいましたが、応用例として例えばGoogle Assistantの説明に従って画像を表示するとか、そういったブラウザ経由で何かをすることが可能になりました。アイデア次第ではいろいろ楽しめると思います。

おまけ

誰がログインしてきたかを確認

左ペインのメニューのAuthenticationの「USERS」のタブで確認可能です。
Screen Shot 2017-10-22 at 8.12.48 PM.png

どれだけの人がPush通知を受け取るか確認

左ペインのメニューのDatabaseの「DATA」のタブで確認可能です。
通知を送った時についでに受け取れなかったユーザのTokenは削除するようなスクリプトになっていますので、ここにいるのは通知を受け取れるアクティブなユーザのみとなります。
Screen Shot 2017-10-22 at 8.15.06 PM.png