JavaScriptから利用するFirebase

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

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

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

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

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

データベースの参照の取得
// 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ツリー上の特定の場所を指し示すもの
データの読み書きするにはまず参照を取得する

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

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

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

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

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

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

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

{
"messages" : {
"name" : "Taro",
"text" : "Hello"
},
"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/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

小技：自動生成されるキーをデータに入れる
空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" : {
"id" : "-KBmsNUshgxhTjcjFi-7",
"name" : "Taro",
"text" : "Hello"
}
}
}
更新後のデータベースの状態

JavaScriptから利用するFirebase

More Related Content

What's hot (18)

Viewers also liked (20)

Similar to JavaScriptから利用するFirebase (20)

JavaScriptから利用するFirebase

Editor's Notes