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
SRE×AIOpsを始めよう!GuardDutyによるお手軽脅威検出
amixedcolor
0
140
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
130
いざ、BSC討伐の旅
nikinusu
2
780
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
3.2k
Adopting Jetpack Compose in Your Existing Project - GDG DevFest Bangkok 2024
akexorcist
0
110
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
1
110
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.9k
ドメインの本質を掴む / Get the essence of the domain
sinsoku
2
160
第1回 国土交通省 データコンペ参加者向け勉強会③- Snowflake x estie編 -
estie
0
130
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
760
TanStack Routerに移行するのかい しないのかい、どっちなんだい! / Are you going to migrate to TanStack Router or not? Which one is it?
kaminashi
0
600
Engineer Career Talk
lycorp_recruit_jp
0
180
Featured
See All Featured
Statistics for Hackers
jakevdp
796
220k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Facilitating Awesome Meetings
lara
50
6.1k
Teambox: Starting and Learning
jrom
133
8.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
130
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
GitHub's CSS Performance
jonrohan
1030
460k
GraphQLとの向き合い方2022年版
quramy
43
13k
Making Projects Easy
brettharned
115
5.9k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Unsuck your backbone
ammeep
668
57k
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