たんたんとがんばる

ruby, Ruby on Rails, React etc.

Firebase試してみた(Javascriptでデータベースを読み込みしてみた、編)

f:id:norihiko-saito-1219:20160811210928j:plain

Web Music ハッカソン#6で多くのチームがFirebaseのデータベースを使っており気になったため少し調べてみました。
Firebaseの"ファ"の字も知らなかった我々はすでに負けていたのだ。という感慨を抱きつつ(しつこい)、
サンプルチャットアプリのコードを元にコメントをつけたので公開します。
今回はデータ読み込み編です(書き込み編は後日公開予定)(Javascript)

サンプルコード

Firebase: Build a Real Time Web Chat App

Firebaseのデータベースの特徴

  • NoSQL(json形式)
  • オフラインでRead/Write可能(オフライン時にはローカルに書き込みされ、NW復帰後反映される)

サンプルコード解説

  • firebaseのデータベースを取得
    ※コンソール上で事前に用意されたDB接続用のKeyなどをjavascriptに貼り付ける必要あり
this.database = firebase.database();
  • messages のデータベースパスへのリファレンスを取得
this.messagesRef = this.database.ref('messages');
  • messagesのデータベースはこんな感じ
  • consoleからimport/exportできます
friendlychat-12345/
    messages/
        -K2ib4H77rj0LYewF7dP/
            text: "Hello"
            name: "anonymous"
        -K2ib5JHRbbL0NrztUfO/
            text: "How are you"
            name: "anonymous"
        -K2ib62mjHh34CAUbide/
            text: "I am fine"
            name: "anonymous"
  • レコードの最後の12件を取得して内容をWeb画面に表示するサンプルコード
// limitToLast(n)で最後の12件を参照(データが多すぎたときに全部読み込まないように)

// child_addedやchild_changedはデータに変化があったとき用のイベント
// child_addedはデータが追加された場合、child_changedはデータが変更された場合
// 他にはchild_removed, child_moved, value(→とにかく何らかの変化があったとき用)
// イベントリスナにはdataを引数にしたコールバック関数を指定する
this.messagesRef.limitToLast(12).on('child_added'), setMessage);
this.messagesRef.limitToLast(12).on('child_changed'), setMessage);

// data.keyでキー、data.valでバリュー、val.xxxで任意のプロパティにアクセスできる。
var setMessage = function(data) {
  var val = data.val;
  this.displayMessage(data.key, val.name, val.text, val.photoUrl, val.imageUrl);
}.bind(this);

リファレンス

Retrieve Data on the Web  |  Firebase

最後に

(今さらかもしれませんが)Firebaseすげー!
時間があるときにきちんとまとめようと思います。