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
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.8k
CTOが語る「Challenge」~うちの会社の技術的挑戦、全部話します~
dddaisuke
2
370
Firebaseのススメ入門編 - Google Play APP DOJO
dddaisuke
0
780
Firebase Realtime Database 株式会社マナボ 導入事例
dddaisuke
4
2.3k
Firebase Overview @ Google I/O 2016
dddaisuke
2
1.1k
サーバーサイドから利用するFirebase
dddaisuke
4
3k
非エンジニアでもデキる ラクラク自動化生活
dddaisuke
9
1.3k
クラウドテクノロジーで加速する開発・運用 | EdTech CTO Night
dddaisuke
4
6.3k
Other Decks in Technology
See All in Technology
生成AIの強みと弱みを理解して、生成AIがもたらすパワーをプロダクトの価値へ繋げるために実践したこと / advance-ai-generating
cyberagentdevelopers
PRO
1
200
Spring Frameworkの新標準!? ~ RestClientとHTTPインターフェース入門 ~
ogiwarat
1
190
AWS パートナー企業でテクニカルサポートに従事して 3年経ったので思うところをまとめてみた
kazzpapa3
1
150
【若手エンジニア応援LT会】AWS Security Hubの活用に苦労した話
kazushi_ohata
0
240
最速最小からはじめるデータプロダクト / Data Product MVP
amaotone
5
770
いまならこう作りたい AWSコンテナ[本格]入門ハンズオン 〜2024年版 ハンズオンの構想〜
horsewin
10
2.2k
AWS re:Inventを徹底的に楽しむためのTips / Tips for thoroughly enjoying AWS re:Invent
yuj1osm
1
650
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
550
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
260
【若手エンジニア応援LT会】AWSで繋がり、共に成長! ~コミュニティ活動と新人教育への挑戦~
kazushi_ohata
0
250
コンテナのトラブルシューティング目線から AWS SAW についてしゃべってみる
kazzpapa3
1
110
[AWS JAPAN 生成AIハッカソン] Dialog の紹介
yoshimi0227
0
160
Featured
See All Featured
A better future with KSS
kneath
238
17k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
GitHub's CSS Performance
jonrohan
1030
460k
Designing the Hi-DPI Web
ddemaree
280
34k
Music & Morning Musume
bryan
46
6.1k
Six Lessons from altMBA
skipperchong
26
3.5k
Designing for humans not robots
tammielis
249
25k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
Become a Pro
speakerdeck
PRO
24
5k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8k
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