Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScriptから利用するFirebase

5,715 views

Published on

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

Published in: Technology
  • Be the first to comment

JavaScriptから利用するFirebase

  1. 1. JavaScriptから利用する Firebase @shimokawa 2016/03/08
  2. 2. 下川拓治 @shimokawa 福岡 → 京都 → 東京 最近はWebアプリ開発が多い Ruby, JavaScript, Java, C/C++
  3. 3. 目次 • データの読み書き • ホスティング • ユーザ認証 • オフライン対応 • 実際に使ってみての感想など
  4. 4. データの読み書き
  5. 5. 使用準備 <script src='https://cdn.firebase.com/js/client/2.4.1/firebase.js'></script> クライアントライブラリをインクルード
  6. 6. Firebaseのデータは1つのJSONオブジェクト { "messages" : { "-KBmsNUshgxhTjcjFi-7" : { "name" : "shimo", "text" : "こんにちは" }, "-KBmsPV_vfbOfsRKNqQr" : { "name" : "shimo", "text" : "こんばんは" } } }
  7. 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. 8. データの保存方法 • 参照オブジェクトのメソッドを使う • set() • update() • push() • transaction()
  9. 9. set() • 基本的な保存方法 • 参照が示すキーに対する値全体を上書きする • 参照が示すキーが存在しない場合はキーごと作成する
  10. 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. 11. push() • 参照する場所の直下に一意なキーを生成した上で、 そのキーに対して値を保存する • キーはタイムスタンプから作られるので、時間順になる • 参照が示す場所にリストデータを保存するのに使う
  12. 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. 13. データの読み出し方法 • 参照にコールバック関数を登録する • on(“イベント種別”, callback) • once(“イベント種別”, callback) • イベントの種類 • value • child_added • child_changed • child_removed • child_moved
  14. 14. on(“value”, callback) • 参照が示す場所以下の値をまるごと取得する • その後、参照先のデータが更新されるたびに 繰り返しコールバック関数に更新後のデータが渡される
  15. 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. 16. on(“child_added”, callback) • 参照の子ノードを一つずつ順番に取得する • 典型的には、push()で作られたリストを指し示す参照から、 そのリストの項目を順に取得する • 既存のデータがある場合は、一通りデータを読み出す • その後、子ノードが追加されるたびに、コールバックが 呼ばれる
  17. 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. 18. その他のイベント • on(“child_changed”, callback) • 参照の子ノードの値が変化した時にコールバックが呼ばれる • on(“child_removed”, callback) • 参照の子ノードが削除された時にコールバックが呼ばれる • on(“child_moved”, callback) • リストデータ内での子ノードの位置が変化したら呼ばれる • リスト内での順序が変わるのはpriorityが変化した時
  19. 19. サンプル:チャットのようなもの https://wiiu.firebaseapp.com/toy_chat.html
  20. 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. 21. サンプル: https://wiiu.firebaseapp.com/pagination.html 過去のメッセージを少しずつ取得するよう修正したもの
  22. 22. ホスティング
  23. 23. ホスティング • HTMLファイルをFirebaseのサーバに置いて公開できる • https://{アプリケーションID}.firebaseapp.com • 有料で独自ドメインにできる 先ほどのサンプルもこれを使っています
  24. 24. ホスティング: 手順 $ npm install -g firebase-tools $ firebase init $ firebase deploy コマンドラインツールをインストールする プロジェクトのディレクトリを初期化する 使用するFirebaseアプリケーションを選択する 初回実行時には先にログインするよう求められる プロジェクトを公開する https://{アプリケーションID}.firebaseapp.com に公開される firebaseコマンドが使えるようになる 設定ファイル firebase.json と、HTMLファイル等を置くディレクトリが作成される
  25. 25. ユーザー認証
  26. 26. セキュリティに関するトピック • ユーザ認証 • Eメール&パスワード • OAuth (Facebook, Twitter, GitHub, Google) • 匿名 • カスタム • アクセス権限の設定 • 入力データの検証
  27. 27. 使用準備 Login & Auth ページの Email & Passwordにある Enable Email & Password Authentication にチェックを入れる
  28. 28. 認証機能を使ったサンプル https://wiiu.firebaseapp.com/auth_required.html
  29. 29. 画面構成と使用するAPI • ユーザ登録画面 • createUser() を使ってユーザを作成 • ログイン画面 • authWithPassword() を使ってログイン処理 • 認証が必要な画面 • getAuth() を使ってログイン中か否かをチェック
  30. 30. その他のユーザー認証関連API unauth() ログアウト changeEmail() メールアドレス変更 changePassword() パスワード変更 resetPassword() パスワードのリセット removeUser() ユーザーの削除
  31. 31. オフライン対応
  32. 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. 33. 実際に使ってみて • 使いはじめの頃はRDBと比較してしまう • 逆順にソートできないの? とか • 制約はあるが、使ってみるとわりと何とかなる • データの蓄積よりリアルタイム性のある情報のやり取り向き • ユーザー認証やオフライン対応の機能はWebアプリを 作る上でとても便利
  34. 34. リンク • 今回のサンプルアプリ • https://wiiu.firebaseapp.com • サンプルアプリのソース • https://github.com/takuji/firebase_demo
  35. 35.
  36. 36. おまけ
  37. 37. APIがPromise化 https://www.firebase.com/blog/2016-01-21-keeping-our-promises.html APIのレスポンスはもっぱらコールバック関数で受け取っていたのが 、 一部のAPIの戻り値がPromiseになった。
  38. 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" } } } 更新後のデータベースの状態

×