Firebaseのススメ 入門編
Firebase Realtime DatabaseとFirebase Hostingの簡単な使い方をご紹介致します!
Firebaseのススメ入門編Daisuke Yamashita@dddaisuke
View Slide
自己紹介● 株式会社マナボ CTOBlog:http://blog.daisukeyamashita.comTwitter:@dddaisukeFacebook: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 SecurityRulesによって実現する
注意点● 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-toolsnpmを使いインストールします。
Firebase の使い方詳細: https://firebase.google.com/docs/web/setup// TODO: Replace with your project's customized code snippet<br/>// Initialize Firebase<br/>var config = {<br/>apiKey: '<your-api-key>',<br/>authDomain: '<your-auth-domain>',<br/>databaseURL: '<your-database-url>',<br/>storageBucket: '<your-storage-bucket>'<br/>};<br/>firebase.initializeApp(config);<br/>
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
開発用ローカル ウェブサーバーを起動するhttp://localhost:5000 でローカルサーバーが起動します。$ firebase serve
開発用ローカル ウェブサーバーの動作確認ブラウザで http://localhost:5000 にアクセスすると以下のように表示されます。
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をガッツリ仕事にしたい人募集中iOS / Android / Rails / フロントエンド / インフラエンジニアを積極採用中!!!株式会社マナボでは、FirebaseをiOS/Android/ウェブにプロダクション投入しています。現在、Firebaseを使えなくてもかまいません。業務でガッツリ使ってみたい人を大募集しています!ご連絡お待ちしております!
Thank Youご静聴ありがとうございました。Daisuke Yamashita@dddaisuke