MonacaとFirebaseの連携方法をご紹介するブログの第4回目です。今回はリアルタイムデータベースを使ってみます。

先に完成品を紹介します。Firebaseの管理画面(コンソール)とアプリ側でデータの同期を行っています。アプリ側でボタンを押すと、現在時刻でデータが登録されます。そして管理画面側でデータを削除すると、それがアプリ側に反映されます。

第1回目でストレージ機能を紹介した際は、ユーザ認証をせずにデータの登録を行いましたが、あまり好ましい実装とは言えません。Firebaseでは権限をつけてデータを保存することを推奨していますので、認証を踏まえた上で実装していきたいと思います。

そこで今回は第2回で作成した認証機能のプロジェクトにコードを追記する形で作成していきます。

HTMLの変更

データの取得に際してFirebaseに接続しますので、セキュリティポリシーを変更します。具体的には connect-src *; を追加します。

Vueテンプレートの変更

ログイン後のページに、[データ追加]ボタンとデータを表示するリストを追加します。

JavaScript側の実装

変数の初期化

JavaScript側ではまず最初に times という変数(配列)を初期化します。

データの追加処理

Firebaseにデータを追加する処理はとても簡単です。
firebase.database().ref('times/') という指定でデータを保存する名称(今回はtimes)を指定します。データの保存はpushで行います。

データの取得

Firebaseリアルタイムデータベースには、データの取得を行うためのvalueイベントがあります。このイベントは、初期データを取得するタイミングと、データに変更があった場合に実行されます。
(コンソールでデータを削除した場合にも呼ばれます)

ユーザの認証状態に応じて、イベントを有効にするonと無効にするoffを設定します。

この処理はVueの構築が終わったタイミング(created内)で行います。

全データが配列で返却されますので、変数timesを初期化して一件ずつ入れ直します。データの値はval()メソッドで取得できます。

全体のコードは以下のようになります。


Firebaseのリアルタイムデータベースではデータの追加処理と、そのイベント通知が分かれているので実装がシンプルになります。チャットや複数端末でのデータ同期などに使うのが良さそうです。

なお、通信にはWebSocketが使われています。特に気にすることはありませんが、何らかの理由によりWebSocket接続が切れてしまっているとデータが反映されないので注意してください。

今回のコードはmoongift/monaca_firebase_realtimedbにアップロードしてあります。実装時の参考にしてください。

Firebase