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.3k
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
320
Firebase を使った Web アプリケーション開発/serverless
kiharu
14
13k
15分で分かったつもりになるAngular 2 概要/angular2
kiharu
23
20k
AWS Lambda と Node.js で作るサーバ不要のイベントドリブンアプリケーション/aws-lambda
kiharu
24
9k
WordPress サイトを iPhone アプリにしてみた
kiharu
6
1.6k
Other Decks in Technology
See All in Technology
Postman AI エージェントビルダー最新情報
nagix
0
120
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
人とAIとの共創を夢見た2か月 #共創AIミートアップ / Co-Creation with Keito-chan
kondoyuko
1
540
GigaViewerにおけるMackerel APM導入の裏側
7474
0
160
会社員しながら本を書いてきた知見の共有
sat
PRO
3
650
AWS LambdaをTypeScriptで動かして分かった、Node.jsのTypeScriptサポートの利点と課題
smt7174
1
2.8k
マップを速く表示するために
tsuboyan5
0
170
Type Challengesに新しい問題を追加して Type ChallengesのMaintainerになった話
ysknsid25
3
650
AIエージェントデザインパターンの選び方
almondo_event
0
110
トイルを撲滅!インフラ領域での生成AI活用のススメ
shuya
0
340
AWS パートナー企業のテクニカルサポートが日々思っていること 〜そして、4/15 の現場から〜
kazzpapa3
2
400
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
37k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Code Review Best Practice
trishagee
68
18k
The Cost Of JavaScript in 2023
addyosmani
49
7.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Designing for humans not robots
tammielis
253
25k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Art, The Web, and Tiny UX
lynnandtonic
298
21k
Scaling GitHub
holman
459
140k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.3k
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