Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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)

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Ꟛ涪㛇燉濼陎 2. Development

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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 【データ追加例】

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

孡חז׷ֶ⦼媮 3. Pricing

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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)

Slide 23

Slide 23 text

⿫罋项俱 4. Reference materials

Slide 24

Slide 24 text

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) ※ӳޠ

Slide 25

Slide 25 text

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ެࣜυΩϡϝϯτ

Slide 26

Slide 26 text

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