FirebaseをJavaScriptから使う手触りを感じ取っていただければと。

1. JavaScriptから利用する
Firebase
@shimokawa
2016/03/08

2. 下川拓治
@shimokawa
福岡 → 京都 → 東京
最近はWebアプリ開発が多い
Ruby, JavaScript, Java, C/C++

3. 目次
• データの読み書き
• ホスティング
• ユーザ認証
• オフライン対応
• 実際に使ってみての感想など

4. データの読み書き

5. 使用準備
<script src='https://cdn.firebase.com/js/client/2.4.1/firebase.js'></script>
クライアントライブラリをインクルード

6. Firebaseのデータは１つのJSONオブジェクト
{
"messages" : {
"-KBmsNUshgxhTjcjFi-7" : {
"name" : "shimo",
"text" : "こんにちは"
},
"-KBmsPV_vfbOfsRKNqQr" : {
"name" : "shimo",
"text" : "こんばんは"
}
}
}

7. データベースの参照の取得
// JSONオブジェクトのルートの参照
var rootRef = new Firebase(“https://<YOUR-APP-ID>.firebaseio.com/“);
// ルートの直下にあるmessagesキー参照
var messageRef = rootRef.child("messages");
// ルートの直下にあるmessagesキー参照
var messagesRef = new Firebase(“https://<YOUR-APP-ID>.firebaseio.com/messages");
参照は、JSONツリー上の特定の場所を指し示すもの
データの読み書きするにはまず参照を取得する

8. データの保存方法
• 参照オブジェクトのメソッドを使う
• set()
• update()
• push()
• transaction()

9. set()
• 基本的な保存方法
• 参照が示すキーに対する値全体を上書きする
• 参照が示すキーが存在しない場合はキーごと作成する

10. {
"users" : {
"taro" : {
"name" : "Taro",
"age" : 30
}
}
}
var userRef = new Firebase(“https://<YOUR-APP-ID>.firebaseio.com/users/taro");
userRef.set({name: "Taro", age: 30});
保存後のデータベースの内容

11. push()
• 参照する場所の直下に一意なキーを生成した上で、
そのキーに対して値を保存する
• キーはタイムスタンプから作られるので、時間順になる
• 参照が示す場所にリストデータを保存するのに使う

12. var messagesRef = new Firebase("https://<YOUR-APP-ID>.firebaseio.com/messages");
messagesRef.push({name: "Taro", text: “Goodbye"});
{
"messages" : {
"-KBmsNUshgxhTjcjFi-7" : {
"name" : "Taro",
"text" : "Hello"
},
"-KBmsPV_vfbOfsRKNqQr" : {
"name" : "Taro",
"text" : "Goodbye"
}
}
}
更新後のデータベースの状態
自動生成される

13. データの読み出し方法
• 参照にコールバック関数を登録する
• on(“イベント種別”, callback)
• once(“イベント種別”, callback)
• イベントの種類
• value
• child_added
• child_changed
• child_removed
• child_moved

14. on(“value”, callback)
• 参照が示す場所以下の値をまるごと取得する
• その後、参照先のデータが更新されるたびに
繰り返しコールバック関数に更新後のデータが渡される

15. {
"messages" : {
"-KBmsNUshgxhTjcjFi-7" : {
"name" : "Taro",
"text" : "Hello"
},
"-KBmsPV_vfbOfsRKNqQr" : {
"name" : "Taro",
"text" : "Goodbye"
}
}
}
var ref = new Firebase("https://<YOUR-APP-ID>.firebaseio.com/messages");
ref.on("value", function(snapshot) {
console.log(snapshot.val());
});
データベースの内容
snapshot.val()
コールバックに渡されるのはDataSnapshot型のオブジェクト
https://www.firebase.com/docs/web/api/datasnapshot/

16. on(“child_added”, callback)
• 参照の子ノードを一つずつ順番に取得する
• 典型的には、push()で作られたリストを指し示す参照から、
そのリストの項目を順に取得する
• 既存のデータがある場合は、一通りデータを読み出す
• その後、子ノードが追加されるたびに、コールバックが
呼ばれる

17. var ref = new Firebase("https://<YOUR-APP-ID>.firebaseio.com/messages");
ref.on(“child_added", function(snapshot) {
console.log(snapshot.val());
});
データベースの内容
{
"messages" : {
"-KBmsNUshgxhTjcjFi-7" : {
"name" : "Taro",
"text" : "Hello"
},
"-KBmsPV_vfbOfsRKNqQr" : {
"name" : "Taro",
"text" : "Goodbye"
}
}
}
snapshot.val()

18. その他のイベント
• on(“child_changed”, callback)
• 参照の子ノードの値が変化した時にコールバックが呼ばれる
• on(“child_removed”, callback)
• 参照の子ノードが削除された時にコールバックが呼ばれる
• on(“child_moved”, callback)
• リストデータ内での子ノードの位置が変化したら呼ばれる
• リスト内での順序が変わるのはpriorityが変化した時

19. サンプル：チャットのようなもの
https://wiiu.firebaseapp.com/toy_chat.html

20. リストデータ取得時の条件追加
• 並び順の指定
• orderByChild()
• orderByKey()
• orderByValue()
• orderByPriority()
• 取得件数の制限
• limitToFirst()
• limitToLast()
• 範囲の指定
• startAt()
• endAt()
• equalTo()
ref.orderByPriority()
.startAt(100)
.limitToFirst(20)
.once('value', function(snapshot) {
console.log(snapshot.val());
});
使用例

21. サンプル：
https://wiiu.firebaseapp.com/pagination.html
過去のメッセージを少しずつ取得するよう修正したもの

22. ホスティング

23. ホスティング
• HTMLファイルをFirebaseのサーバに置いて公開できる
• https://{アプリケーションID}.firebaseapp.com
• 有料で独自ドメインにできる
先ほどのサンプルもこれを使っています

24. ホスティング: 手順
$ npm install -g firebase-tools
$ firebase init
$ firebase deploy
コマンドラインツールをインストールする
プロジェクトのディレクトリを初期化する
使用するFirebaseアプリケーションを選択する
初回実行時には先にログインするよう求められる
プロジェクトを公開する
https://{アプリケーションID}.firebaseapp.com に公開される
firebaseコマンドが使えるようになる
設定ファイル firebase.json と、HTMLファイル等を置くディレクトリが作成される

25. ユーザー認証

26. セキュリティに関するトピック
• ユーザ認証
• Eメール＆パスワード
• OAuth (Facebook, Twitter, GitHub, Google)
• 匿名
• カスタム
• アクセス権限の設定
• 入力データの検証

27. 使用準備
Login & Auth ページの Email & Passwordにある
Enable Email & Password Authentication にチェックを入れる

28. 認証機能を使ったサンプル
https://wiiu.firebaseapp.com/auth_required.html

29. 画面構成と使用するAPI
• ユーザ登録画面
• createUser() を使ってユーザを作成
• ログイン画面
• authWithPassword() を使ってログイン処理
• 認証が必要な画面
• getAuth() を使ってログイン中か否かをチェック

30. その他のユーザー認証関連API
unauth() ログアウト
changeEmail() メールアドレス変更
changePassword() パスワード変更
resetPassword() パスワードのリセット
removeUser() ユーザーの削除

31. オフライン対応

32. var ref = new Firebase(‘https://<YOUR-APP-ID>.firebaseio.com/.info/connected');
ref.on("value", function(snap) {
if (snap.val() === true) {
console.log("online");
} else {
console.log("offline");
}
});
• 自分のオンライン状態を変化を検知
var lastOnlineRef = new Firebase("users/taro/lastOnline");
lastOnlineRef.onDisconnect().set(Firebase.ServerValue.TIMESTAMP);
• 接続が切れた時に値を更新
• オフライン中にもデータの保存ができて、オンライン
復帰時にサーバと同期

33. 実際に使ってみて
• 使いはじめの頃はRDBと比較してしまう
• 逆順にソートできないの？ とか
• 制約はあるが、使ってみるとわりと何とかなる
• データの蓄積よりリアルタイム性のある情報のやり取り向き
• ユーザー認証やオフライン対応の機能はWebアプリを
作る上でとても便利

34. リンク
• 今回のサンプルアプリ
• https://wiiu.firebaseapp.com
• サンプルアプリのソース
• https://github.com/takuji/firebase_demo

35. 終

36. おまけ

37. APIがPromise化
https://www.firebase.com/blog/2016-01-21-keeping-our-promises.html
APIのレスポンスはもっぱらコールバック関数で受け取っていたのが
、
一部のAPIの戻り値がPromiseになった。

38. 小技：自動生成されるキーをデータに入れる
空push()してset()
var messagesRef = new Firebase("https://<YOUR-APP-ID>.firebaseio.com/messages");
var messageRef = messagesRef.push();
messageRef.set({id: messageRef.key(), name: "Taro", text: “Goodbye"});
{
"messages" : {
"-KBmsNUshgxhTjcjFi-7" : {
"id" : "-KBmsNUshgxhTjcjFi-7",
"name" : "Taro",
"text" : "Hello"
}
}
}
更新後のデータベースの状態