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
突撃! 隣のAmazon Bedrockユーザー 〜YouはどうしてAWSで?〜
minorun365
PRO
3
390
OSTという文化を組織に根付かせてみた
sansantech
PRO
2
380
どこよりも遅めなWinActor Ver.7.5.0 新機能紹介
tamai_63
0
210
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
46k
LINEヤフーのフロントエンド組織・体制の紹介
lycorp_recruit_jp
1
1.2k
サーバー管理しないサーバーサービスManaged DevOps Pool
kkamegawa
0
130
GC24 Recap: Interface Internals
task4233
0
130
DroidKaigi 2024 たすけて!ViewModel
mhidaka
5
940
20240912 JJUGナイトセミナー
mii1004
0
140
Agile in Automotive Industry, puzzles and lights.
hiranabe
3
1.4k
プロダクトエンジニアを支えるための開発生産性向上施策
tsukakei
0
140
Tricentisにおけるテスト自動化へのAI活用ご紹介/20240910Shunsuke Katakura
shift_evolve
0
200
Featured
See All Featured
A Philosophy of Restraint
colly
202
16k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Done Done
chrislema
180
16k
Creatively Recalculating Your Daily Design Routine
revolveconf
215
12k
For a Future-Friendly Web
brad_frost
174
9.3k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
1
52
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
Debugging Ruby Performance
tmm1
72
12k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
19k
It's Worth the Effort
3n
182
27k
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