Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Firebaseを使ったリアルタイム同期アプリケーション開発/firebase
Search
kiharu sasaki
March 19, 2016
Technology
9
5.4k
Firebaseを使ったリアルタイム同期アプリケーション開発/firebase
Firebaseを使ったリアルタイムアプリケーション開発
kiharu sasaki
March 19, 2016
Tweet
Share
More Decks by kiharu sasaki
See All by kiharu sasaki
マルチクラウドナイト/multicloud-night-panel-discussion
kiharu
1
330
Firebase を使った Web アプリケーション開発/serverless
kiharu
14
13k
15分で分かったつもりになるAngular 2 概要/angular2
kiharu
23
20k
AWS Lambda と Node.js で作るサーバ不要のイベントドリブンアプリケーション/aws-lambda
kiharu
24
9.1k
WordPress サイトを iPhone アプリにしてみた
kiharu
6
1.6k
Other Decks in Technology
See All in Technology
英語は話せません!それでも海外チームと信頼関係を作るため、対話を重ねた2ヶ月間のまなび
niioka_97
0
110
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9k
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
130
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.4k
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
400
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
6
3.3k
Where will it converge?
ibknadedeji
0
180
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
5.4k
AWSにおけるTrend Vision Oneの効果について
shimak
0
120
20250929_QaaS_vol20
mura_shin
0
110
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
150
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
330
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Designing for Performance
lara
610
69k
GitHub's CSS Performance
jonrohan
1032
460k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
RailsConf 2023
tenderlove
30
1.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Making Projects Easy
brettharned
119
6.4k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The World Runs on Bad Software
bkeepers
PRO
71
11k
How STYLIGHT went responsive
nonsquared
100
5.8k
Transcript
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://<YOUR-‐FIREBASE-‐APP>.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://<YOUR-‐APP>.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://<YOUR-‐APP>.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://<YOUR-‐FIREBASE-‐APP>.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