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.2k
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
300
Firebase を使った Web アプリケーション開発/serverless
kiharu
14
12k
15分で分かったつもりになるAngular 2 概要/angular2
kiharu
23
20k
AWS Lambda と Node.js で作るサーバ不要のイベントドリブンアプリケーション/aws-lambda
kiharu
24
8.9k
WordPress サイトを iPhone アプリにしてみた
kiharu
6
1.5k
Other Decks in Technology
See All in Technology
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
120
[JAWS-UG金沢支部×コンテナ支部合同企画]コンテナとは何か
furuton
3
230
顧客が本当に必要だったもの - パフォーマンス改善編 / Make what is needed
soudai
24
6.7k
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.6k
プロダクトエンジニアが活躍する環境を作りたくて 事業責任者になった話 ~プロダクトエンジニアの行き着く先~
gimupop
1
460
visionOSでの空間表現実装とImmersive Video表示について / ai-immersive-visionos
cyberagentdevelopers
PRO
1
100
よくわからんサービスについての問い合わせが来たときの強い味方 Amazon Q について
kazzpapa3
0
220
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
450
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
210
話題のGraphRAG、その可能性と課題を理解する
hide212131
4
1.4k
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
バクラクにおける可観測性向上の取り組み
yuu26
3
400
Featured
See All Featured
Teambox: Starting and Learning
jrom
132
8.7k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Unsuck your backbone
ammeep
668
57k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Testing 201, or: Great Expectations
jmmastey
38
7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
How GitHub (no longer) Works
holman
311
140k
Designing for Performance
lara
604
68k
Agile that works and the tools we love
rasmusluckow
327
21k
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