More than 5 years have passed since last update.

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

Last updated at 2017-10-23Posted at 2017-10-23

この記事は何？

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

実装すること

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

実装

Firebase

データベースの設定

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

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

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

データベースの権限

Read、Writeの権限を設定します。お試しなので、どちらもザルにします。

Firebase Hostingを設定

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

ここでも青色の「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を選択すると下の画面になりますので、赤丸の画像をクリックしてください。

するとこんな画面が出てきます。configのみをコピーして、assistant_factaboutgoogle_fcm/apps/keys.jsにコピーしてください。

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

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

表示された画面「CLOUD MESSAGING」のタブを表示するとServer Keyを確認することが可能です。

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

$ firebase deploy　--only functions,hosting;

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

認証の有効化

テストとはいえ誰が来たのか分かるようにしておきます。
左ペインのメニューからAuthenticationをクリックして、SIGN-IN METHODのタブを表示します。選択肢はいろいろありますが、ここではGoogleの認証のみ有効にします。

最後の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」にアクセスしてください。