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のススメ入門編 - Google Play APP DOJO
Search
Daisuke Yamashita
November 07, 2016
Technology
0
850
Firebaseのススメ入門編 - Google Play APP DOJO
2016年11月7日にGoogleのオフィスで開催された、Google Play APP DOJOの発表資料
https://events.withgoogle.com/appdojojp/
Daisuke Yamashita
November 07, 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 Realtime Database 株式会社マナボ 導入事例
dddaisuke
4
2.5k
Google DevFest Tokyo 2016
dddaisuke
3
1.1k
Firebase Overview @ Google I/O 2016
dddaisuke
2
1.2k
サーバーサイドから利用するFirebase
dddaisuke
4
3k
非エンジニアでもデキる ラクラク自動化生活
dddaisuke
9
1.4k
クラウドテクノロジーで加速する開発・運用 | EdTech CTO Night
dddaisuke
4
6.3k
Other Decks in Technology
See All in Technology
MySQL5.6から8.4へ 戦いの記録
kyoshidaxx
1
260
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
200
AIのAIによるAIのための出力評価と改善
chocoyama
2
580
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
100
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
240
Witchcraft for Memory
pocke
1
470
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
270
フィンテック養成勉強会#54
finengine
0
180
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
170
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
4
2.5k
【PHPカンファレンス 2025】PHPを愛するひとに伝えたい PHPとキャリアの話
tenshoku_draft
0
120
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Scaling GitHub
holman
459
140k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Documentation Writing (for coders)
carmenintech
72
4.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Docker and Python
trallard
44
3.4k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Practical Orchestrator
shlominoach
188
11k
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の料金
Thank You ご静聴ありがとうございました。 Daisuke Yamashita @dddaisuke