中津川篤司TwitterFacebookはてブ2Pocket4LINEMonacaとFirebaseの連携方法をご紹介するブログの第4回目です。今回はリアルタイムデータベースを使ってみます。先に完成品を紹介します。Firebaseの管理画面(コンソール)とアプリ側でデータの同期を行っています。アプリ側でボタンを押すと、現在時刻でデータが登録されます。管理画面側でデータを削除すると、それがアプリ側に反映されます。第1回目でストレージ機能を紹介した際は、ユーザ認証をせずにデータの登録を行いましたが、あまり好ましい実装とは言えません。Firebaseでは権限をつけてデータを保存することを推奨していますので、認証を踏まえた上で実装していきたいと思います。そこで今回は第2回で作成した認証機能のプロジェクトにコードを追記する形で作成していきます。HTMLの変更データの取得に際してFirebaseに接続しますので、セキュリティポリシーを変更します。'unsafe-eval'">Vueテンプレートの変更ログイン後のページに、[データ追加]ボタンとデータを表示するリストを追加します。いう変数(配列)を初期化します。追加},データの追加処理Firebaseにデータを追加する処理はとても簡単です。いう指定でデータを保存する名称(今回はtimes)を指定します。データの保存はpushで行います。{alert(error.message)})},}データの取得Firebaseリアルタイムデータベースには、データの取得を行うためのvalueイベントがあります。このイベントは、初期データを取得するタイミングと、データに変更があった場合に実行されます。(コンソールでデータを削除した場合にも呼ばれます)ユーザの認証状態に応じて、イベントを有効にするonと無効にするoffを設定します。この処理はVueの構築が終わったタイミング(created内)で行います。ログアウト状態ではイベントを無効化data.off('value');}});},全データが配列で返却されますので、変数timesを初期化して一件ずつ入れ直します。データの値はval()メソッドで取得できます。全体のコードは以下のようになります。false);Firebaseのリアルタイムデータベースではデータの追加処理と、そのイベント通知が分かれているので実装がシンプルになります。チャットや複数端末でのデータ同期などに使うのが良さそうです。通信にはWebSocketが使われています。気にすることはありませんが、何らかの理由によりWebSocket接続が切れてしまっているとデータが反映されないので注意してください。今回のコードはmoongift/monaca_firebase_realtimedbにアップロードしてあります。実装時の参考にしてください。中津川篤司プログラマ、エンジニアとしていくつかの企業で働き、28歳のときに独立。2004年、まだ情報が少なかったオープンソースソフトの技術ブログ『MOONGIFT』を開設し、毎日情報を発信している。2013年に法人化、ビジネスとエンジニアを結ぶエバンジェリスト業「DevRel」活動をスタートした。Monaca×ホットペッパーAPI。