FIREBASEを使った リアルタイム同期アプリケーション開発 March 19 2016 Kiharu Sasaki

⡟ղ加ֹכ׷ ,JIBSV4BTBLJ 崧׃ךؿٗٝزؒٝسؒٝآص، "OHVMBS+4#BDLCPOF3FBDU 4&̔؝ٝ؟ٕ̔رؠ؎ش̔崧׃ ➙؝؝ Freelance bump.hatenablog.com facebook.com/kiharu.sasaki @bump_of_kiharu

Firebaseの概要と特徴 開発基礎知識 気になるお値段 1 2 3 4 INDEX 本日お話する内容 参考資料

'JSFCBTFך嚊銲ה暴䗙 1. What is Firebase ?

Overview FIREBASE リアルタイムなデータ同期が求められる、チャットサービスやゲームなどが得意領域 Chat System Online Game Mobile App Web Service リアルタイムデータ同期を必要としないシステムでも
 手軽にアプリケーションを構築したい場合に大変便利

2. マルチプラットフォーム Overview 1. BaaS FIREBASE バックエンド機能を提供するBaaSであり、開発者はクライアントサイドのみに注力できる。 3. リアルタイムDB 4. ユーザー認証（ログイン） 5. オフライン処理

BaaS and Cross-platform クライアントサイドもマルチプラットフォームで利用可能 Server Database Auth API サーバーサイド（Firebaseが提供する機能） クライアントサイド 各プラットフォーム
 の標準ライブラリ 1. BaaS 2. マルチプラットフォーム サーバーサイドの 管理は一切不要！

Realtime Database アプリケーション全体で1つのJSONとして全データが格納される {   "users":  {   "uid001":  {   "name":  "Fujiwara"   }   },   "messages":  {   "id-­‐001":  {                            "name":  "Fujiwara",                          "text":  "hello!"                },                "id-­‐002":  {                            "name":  "guest",                          "text":  "goodbye"                }          }   } ๏ No-SQL / KVS ๏ 全データを1つのJSONに格納 ๏ トランザクションも対応 ๏ データ構造がそのままREST API に ๏ データのアクセスルールを
 設定可能（Security & Rules） 3. リアルタイムDB (1)

RESTful API データの階層構造により、それぞれのデータが一意のURLエンドポイントを持つ {   "users":  {   "uid001":  {   "name":  "Fujiwara"   }   },   //  ......   } curl  'https://.firebaseio.com/users/uid001.json' {  "name":  "Fujiwara"  } 3. リアルタイムDB (2) 【GET例】

6TFSBVUIFOUJDBUJPO プロバイダーアカウントによる、ユーザー登録・ログイン認証を簡単に実装できる e-Mail & Password Facebook Twitter GitHub Google ΧελϜ !  # $ % ※カスタム認証機能により、自前サービスアカウントでのログインも実装可能 4. ユーザー認証（ログイン） &

Offline processing オフライン時はローカルキャッシュにデータ保持、オンライン復帰後に自動でデータ同期。 • データの保存が可能（ローカルキャッシュ） • アプリケーションを動かし続けられる • オンライン状態の変更が検知可能 • 復帰後に自動的にデータ同期 • オフライン時の保存順は維持される ' オフライン時 オンライン復帰時 5. オフライン処理

Ꟛ涪㛇燉濼陎 2. Development

Deployment steps デプロイまでの操作はこれだけ。サーバーサイドを気にすることなく開発に集中できる 'JSFCBTF،ؕؐٝز׾⡲䧭 ٓ؎ـٓٔ؎ٝأز٦ٕ٥،فٔ⡲䧭 ؝٦ر؍ؚٝ ،فٔ؛٦ءّٝ׾رفٗ؎ 3 2 1 4 ˟䗳銲ח䘔ׄגծSFCBTFKTPO SVMFTך鏣㹀׮遤ֲ $  npm  install  -­‐g  firebase-­‐tools   $  firebase  login   $  firebase  init $  firebase  deploy

JS Libraries AngularFire BackboneFire EmberFire ReactFire メジャーなJSフレームワークのライブラリが提供されおり、容易に開発が可能

Data access データの変更検知は、各種イベントリスナーをトリガーにリアルタイムに反映する var  ref  =  new  Firebase("https://.firebaseio.com/message/");   ref.push({name:"Sasaki",  text:"Hello  world"}); • データの追加・変更・削除用のメソッドを使用 • データの状態変化は各イベントリスナーで検知、リアルタイムに画面反映
 Callback / Promise（一部のAPIはPromiseを返す）
 https://www.firebase.com/blog/2016-01-21-keeping-our-promises.html 【データ追加例】

Common Queries Firebase用の基本的な検索用クエリが用意されている var  ref  =  new  Firebase("https://.firebaseio.com/message/");   ref.orderByPriority()        .limitToFirst(100)
      .once("value",  function()  {                //  do  something        }); • 並び順、取得件数、範囲指定を行うためのメソッドを利用 • メソッドチェーンで条件を複数繋げて指定可能 【クエリー例】

User Authentication (ex. Facebook) Facebookログインを行う場合を想定 'BDFCPPL"QQ⡲䧭 'BDFCPPL%FWFMPQFST "QQ*%"QQ4FDSFUך涫ꐮ 'JSFCBTF%BTICPBSE "1*ㄎן⳿׃ 3 2 1 +4ַ׵ؚٗ؎ٝ钠鏾禸ך"1*׾ㄎן⳿ׅ 'BDFCPPL%FWFMPQFST؟؎زַ׵钠鏾欽،فٔ؛٦ءّٝ׾⡲䧭 ⡲䧭׃׋'#"QQך*%4FDSFU׾涫ꐮ 䗳銲ח䘔ׄגِ٦ؠر٦ةךإُؗٔذ؍ٕ٦ٕ׮鏣㹀

Example API Calls : Authentication Firebaseオブジェクトを生成し、認証用APIをコールするだけ var  ref  =  new  Firebase("https://.firebaseio.com");   ref.authWithOAuthPopup("facebook",  function(error,  authData)  {      if  (error)  {          //  Τϥʔॲཧ      }  else  {          //  ੒ޭ      }   }); ref.unauth(); ログイン ※ポップアップベースの認証フローの場合 ログアウト

$BVUJPOQPJOUT フェイルオーバーの仕組みがないのは致命的かもしれない・・・？ • フェイルオーバーの仕組みがない • RDBのような細かい検索は出来ない
 ( ex: % LIKE % ) • Firebaseのホスティングには
 Development / Staging / Production
 といった環境が用意されていない これらを踏まえた上で計画的なご利用を 利用時の注意点

孡חז׷ֶ⦼媮 3. Pricing

Pricing ストレージサイズ、転送量、コネクション数によって異なる

Pricing プラン上限を超えてしまった場合は、超過分は従量課金される Database Storage $5.00 / GB (month) Database Trasfer $1.25 / GB (month) Hosting Storage $0.03 / GB (month) Hosting Transfer $0.10 / GB (month)

⿫罋项俱 4. Reference materials

3FGFSFODFNBUFSJBMT 利用前に目を通しておくべき参考資料 https://html5experts.jp/technohippy/18040/ FirebaseͰ࡞Δ؆୯ϦΞϧλΠϜ΢ΣϒΞϓϦέʔγϣϯʢલฤʣ http://sssslide.com/www.slideshare.net/fumihikoshiroyama/gdg-tokyo-firebase-android GDG Tokyo FirebaseΛ࢖ͬͨ AndroidΞϓϦ։ൃ http://sssslide.com/speakerdeck.com/dddaisuke/sahasaitokarali-yong-surufirebase αʔόʔαΠυ͔Βར༻͢ΔFirebase http://www.slideshare.net/tsimo/javascriptfirebase-59251680 JavaScript͔Βར༻͢ΔFirebase https://www.firebase.com/blog/2016-01-21-keeping-our-promises.html Keeping our Promises (and Callbacks) ※ӳޠ

3FGFSFODFNBUFSJBMT 当スライドで言及しなかったけど目を通しておいたほうが良い資料 http://qiita.com/laco0416/items/b068ab0cf19a26f0992d FirebaseͷRulesΛཧղ͢Δ http://sssslide.com/www.slideshare.net/likr/20150619ngkyoto AngularFireͰָʑόοΫΤϯυ https://www.firebase.com/blog/2013-10-01-queries-part-one.html Queries, Part 1: Common SQL Queries Converted for Firebase ※ӳޠ https://www.infoscoop.org/blogjp/2015/01/24/realtime-app-firebase/ ϦΞϧλΠϜɾόοΫΤϯυαʔϏεʮFirebaseʯΛ࢖ͬͨWebΞϓϦ࡞੒ https://www.firebase.com/docs/ FirebaseެࣜυΩϡϝϯτ

ご静聴ありがとうございました Thank you