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
860
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
MCPに潜むセキュリティリスクを考えてみる
milix_m
1
880
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
15
7.6k
Kiro Hookを Terraformで検証
ao_inoue
0
140
KCD Lima: eBee in Peru!
lizrice
0
110
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
330
経理出身PdMがAIプロダクト開発を_ハンズオンで学んだ話.pdf
shunsukenarita
1
240
増え続ける脆弱性に立ち向かう: 事前対策と優先度づけによる 持続可能な脆弱性管理 / Confronting the Rise of Vulnerabilities: Sustainable Management Through Proactive Measures and Prioritization
nttcom
1
220
Amazon CloudWatchのメトリクスインターバルについて / Metrics interval matters
ymotongpoo
3
290
Turn Your Community into a Fundraising Catalyst for Black Philanthropy Month
auctria
PRO
0
200
経験がないことを言い訳にしない、 AI時代の他領域への染み出し方
parayama0625
0
260
AIを使っていい感じにE2Eテストを書けるようになるまで / Trying to Write Good E2E Tests with AI
katawara
3
1.9k
ユーザー理解の爆速化とPdMの価値
kakehashi
PRO
1
110
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Speed Design
sergeychernyshev
32
1k
Being A Developer After 40
akosma
90
590k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Thoughts on Productivity
jonyablonski
69
4.8k
Building Applications with DynamoDB
mza
95
6.5k
GraphQLとの向き合い方2022年版
quramy
49
14k
It's Worth the Effort
3n
185
28k
Unsuck your backbone
ammeep
671
58k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Raft: Consensus for Rubyists
vanstee
140
7k
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