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
Google DevFest Tokyo 2016
Search
Daisuke Yamashita
October 09, 2016
Technology
3
1.1k
Google DevFest Tokyo 2016
Firebaseのススメ 入門編
Firebase Realtime DatabaseとFirebase Hostingの簡単な使い方をご紹介致します!
Daisuke Yamashita
October 09, 2016
Tweet
Share
More Decks by Daisuke Yamashita
See All by Daisuke Yamashita
EducationTech Talks Tokyo #1
dddaisuke
2
1.9k
CTOが語る「Challenge」~うちの会社の技術的挑戦、全部話します~
dddaisuke
2
390
Firebaseのススメ入門編 - Google Play APP DOJO
dddaisuke
0
860
Firebase Realtime Database 株式会社マナボ 導入事例
dddaisuke
4
2.5k
Firebase Overview @ Google I/O 2016
dddaisuke
2
1.3k
サーバーサイドから利用するFirebase
dddaisuke
4
3k
非エンジニアでもデキる ラクラク自動化生活
dddaisuke
9
1.4k
クラウドテクノロジーで加速する開発・運用 | EdTech CTO Night
dddaisuke
4
6.3k
Other Decks in Technology
See All in Technology
S3アクセス制御の設計ポイント
tommy0124
3
190
DevIO2025_継続的なサービス開発のための技術的意思決定のポイント / how-to-tech-decision-makaing-devio2025
nologyance
1
370
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
440
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
3.2k
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3k
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
260
20250903_1つのAWSアカウントに複数システムがある環境におけるアクセス制御をABACで実現.pdf
yhana
3
540
エラーとアクセシビリティ
schktjm
1
1.2k
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.1k
AWSで推進するデータマネジメント
kawanago
1
1.3k
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
210
Featured
See All Featured
Faster Mobile Websites
deanohume
309
31k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
111
20k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
The Cult of Friendly URLs
andyhume
79
6.6k
Designing for humans not robots
tammielis
253
25k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Transcript
Firebaseのススメ 入門編 Daisuke Yamashita @dddaisuke
自己紹介 • 株式会社マナボ CTO Blog:http://blog.daisukeyamashita.com Twitter:@dddaisuke Facebook:dice.k.yamashita • Google Developer Expert
(Cloud) https://developers.google.com/experts/people/daisuke-yamashita
Firebase Realtime Databaseとは? • クラウドでホストされるNoSQLデータベース • 接続されているすべてのクライアントとリアルタイムで同期 • データはJSONとして保存
Firebase Realtime Database の主な機能/特徴 • リアルタイム • オフライン機能 • クライアント端末からアクセス可能
リアルタイム • データが更新されると、接続されているすべてのデバイスがその更新 を数ミリ秒で受信する • クライアントアプリ側でネットワーク処理のコードを書く必要がない
オフライン機能 • Firebase Realtime Database SDKはオフラインでも応答できる状態 を保つ
クライアント端末からアクセス可能 • Firebase Realtime Databaseは、モバイル端末やウェブブラウザか ら直接アクセスできる • セキュリティとデータ検証は、Firebase Realtime Database
Security Rulesによって実現する
注意点 • NoSQLデータベースなので、RDBとは機能や最適化の方法が異なる ◦ 例:データをネストしない 詳細は、「データベースの構造化」をご参照ください。 https://firebase.google.com/docs/database/web/structure-data
Firebase の使い方 • Firebase Command Line Interfaceのインストール
Firebase CLI (Command Line Interface) $ npm install -g firebase-tools
npmを使いインストールします。
Firebase の使い方 詳細: https://firebase.google.com/docs/web/setup // TODO: Replace with your project's
customized code snippet <script src="https://www.gstatic.com/firebasejs/3.0.2/firebase.js"></script> <script> // Initialize Firebase var config = { apiKey: '<your-api-key>', authDomain: '<your-auth-domain>', databaseURL: '<your-database-url>', storageBucket: '<your-storage-bucket>' }; firebase.initializeApp(config); </script>
Firebase の使い方 デモ
開発用ローカル ウェブサーバーを起動する • サンプルコード $ git clone
[email protected]
:dddaisuke/devfest-2016-demo.git
Firebase CLI (Command Line Interface) Firebase CLIで利用したいアカウントでログインします。 $ firebase login
Firebase CLI (Command Line Interface)
Firebase CLI (Command Line Interface) 次にFirebase CLIのセットアップをします。 $ firebase init
Firebase CLI (Command Line Interface)
Firebase CLI (Command Line Interface)
Firebase CLI (Command Line Interface)
Firebase CLI (Command Line Interface)
Firebase CLI (Command Line Interface)
開発用ローカル ウェブサーバーを起動する http://localhost:5000 でローカルサーバーが起動します。 $ firebase serve
開発用ローカル ウェブサーバーの動作確認 ブラウザで http://localhost:5000 にアクセスすると以下のように表示されます。
Firebase の使い方 デモ
Firebase データの取扱い • データの保存 • データの削除 • データの取得
データの保存 Firebase Realtime Database にデータを書き込むメソッドは次の 4 種類 メソッド 処理内容 set()
定義済みのパスへのデータの書き込みや、データの置換を行います。 push() データのリストに追加します。 update() データのすべてを置換することなく、定義済みのパスのキーの一部を更新しま す。 transaction() 同時更新によって破損する可能性がある複合データを更新します。
データの削除 データの削除は単に remove() を呼び出すか、 set() や update() などの書き込み用の関数で、 null を指定する事で削除する事もできます。
データの取得 データは、非同期リスナー firebase.database.Reference にアタッチして取得します。 firebase.database().ref('posts/' + postId + '/starCount').on('value', function(snapshot)
{ updateStarCount(postElement, snapshot.val()); });
データの取得 イベント 内容 value パスのコンテンツ全体に対する変更の読み取りとリッスンする child_added アイテムのリストを取得するか、アイテムのリストへの追加がないかリッスンす る child_changed リスト内のアイテムに対する変更がないかリッスンする
child_removed リストから削除されるアイテムがないかリッスンする child_moved 並べ変えられたデータと併用して、アイテムの優先度に対する変更がないか リッスンする データは、非同期リスナーをアタッチして取得します。
var userId = firebase.auth().currentUser.uid; firebase.database().ref('/users/' + userId).once('value').then(function(snapshot) { var username
= snapshot.val().username; // ... }); リアルタイムでなく、現在の値を1回だけ読み取る場合には、 once を使います。 データの取得
データの取り扱い デモ
Firebase Hosting 静的Webホスティング • 静的ファイル(HTML, CSS, JavaScript, など) • HTTPS通信
• グローバルなCDN
Firebase Hostingを利用してウェブアプリをデプロイする $ firebase deploy
Firebase Hostingを利用してウェブアプリをデプロイする デモ
Firebaseの料金(比較)
Firebaseの料金(比較)
Firebaseの料金
Firebaseをガッツリ仕事にしたい人募集中 iOS / Android / Rails / フロントエンド / インフラエンジニアを積極採用
中!!! 株式会社マナボでは、FirebaseをiOS/Android/ウェブにプロダクション 投入しています。 現在、Firebaseを使えなくてもかまいません。業務でガッツリ使ってみた い人を大募集しています!ご連絡お待ちしております!
Thank You ご静聴ありがとうございました。 Daisuke Yamashita @dddaisuke