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
870
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.3k
サーバーサイドから利用するFirebase
dddaisuke
4
3k
非エンジニアでもデキる ラクラク自動化生活
dddaisuke
9
1.4k
クラウドテクノロジーで加速する開発・運用 | EdTech CTO Night
dddaisuke
4
6.3k
Other Decks in Technology
See All in Technology
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
400
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
530
実装で解き明かす並行処理の歴史
zozotech
PRO
1
630
ガバメントクラウドの概要と自治体事例(名古屋市)
techniczna
2
200
Findy Team+のSOC2取得までの道のり
rvirus0817
0
500
多野優介
tanoyusuke
1
480
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
350
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
150
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
150
Where will it converge?
ibknadedeji
0
200
許しとアジャイル
jnuank
1
140
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
640
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
The Cost Of JavaScript in 2023
addyosmani
53
9k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
The Invisible Side of Design
smashingmag
301
51k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
How to train your dragon (web standard)
notwaldorf
96
6.3k
Six Lessons from altMBA
skipperchong
28
4k
Practical Orchestrator
shlominoach
190
11k
The Pragmatic Product Professional
lauravandoore
36
6.9k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
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