Google DevFest Tokyo 2016

Firebaseのススメ　入門編

Firebase Realtime DatabaseとFirebase Hostingの簡単な使い方をご紹介致します！

Transcript

1. Firebaseのススメ
   入門編
   Daisuke Yamashita
   @dddaisuke
   

   View Slide

2. 自己紹介
   ● 株式会社マナボ　CTO
   Blog：http://blog.daisukeyamashita.com
   Twitter：@dddaisuke
   Facebook：dice.k.yamashita
   ● Google Developer Expert (Cloud)
   https://developers.google.com/experts/people/daisuke-yamashita
   

   View Slide

3. Firebase Realtime Databaseとは？
   ● クラウドでホストされるNoSQLデータベース
   ● 接続されているすべてのクライアントとリアルタイムで同期
   ● データはJSONとして保存
   

   View Slide

4. Firebase Realtime Database の主な機能／特徴
   ● リアルタイム
   ● オフライン機能
   ● クライアント端末からアクセス可能
   

   View Slide

5. リアルタイム
   ● データが更新されると、接続されているすべてのデバイスがその更新
   を数ミリ秒で受信する
   ● クライアントアプリ側でネットワーク処理のコードを書く必要がない
   

   View Slide

6. オフライン機能
   ● Firebase Realtime Database SDKはオフラインでも応答できる状態
   を保つ
   

   View Slide

7. クライアント端末からアクセス可能
   ● Firebase Realtime Databaseは、モバイル端末やウェブブラウザか
   ら直接アクセスできる
   ● セキュリティとデータ検証は、Firebase Realtime Database Security
   Rulesによって実現する
   

   View Slide

8. 注意点
   ● NoSQLデータベースなので、RDBとは機能や最適化の方法が異なる
   ○ 例：データをネストしない
   詳細は、「データベースの構造化」をご参照ください。
   https://firebase.google.com/docs/database/web/structure-data
   

   View Slide

9. Firebase の使い方
   ● Firebase Command Line Interfaceのインストール
   

   View Slide

10. Firebase CLI (Command Line Interface)
    $ npm install -g firebase-tools
    npmを使いインストールします。
    

    View Slide

11. 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/>
    

    View Slide

12. Firebase の使い方
    デモ
    

    View Slide

13. 開発用ローカル ウェブサーバーを起動する
    ● サンプルコード
    $ git clone git@github.com:dddaisuke/devfest-2016-demo.git
    

    View Slide

14. Firebase CLI (Command Line Interface)
    Firebase CLIで利用したいアカウントでログインします。
    $ firebase login
    

    View Slide

15. Firebase CLI (Command Line Interface)
    

    View Slide

16. Firebase CLI (Command Line Interface)
    次にFirebase CLIのセットアップをします。
    $ firebase init
    

    View Slide

17. Firebase CLI (Command Line Interface)
    

    View Slide

18. Firebase CLI (Command Line Interface)
    

    View Slide

19. Firebase CLI (Command Line Interface)
    

    View Slide

20. Firebase CLI (Command Line Interface)
    

    View Slide

21. Firebase CLI (Command Line Interface)
    

    View Slide

22. 開発用ローカル ウェブサーバーを起動する
    http://localhost:5000 でローカルサーバーが起動します。
    $ firebase serve
    

    View Slide

23. 開発用ローカル ウェブサーバーの動作確認
    ブラウザで http://localhost:5000 にアクセスすると以下のように表示されます。
    

    View Slide

24. Firebase の使い方
    デモ
    

    View Slide

25. Firebase データの取扱い
    ● データの保存
    ● データの削除
    ● データの取得
    

    View Slide

26. データの保存
    Firebase Realtime Database にデータを書き込むメソッドは次の 4 種類
    メソッド 処理内容
    set() 定義済みのパスへのデータの書き込みや、データの置換を行います。
    push() データのリストに追加します。
    update() データのすべてを置換することなく、定義済みのパスのキーの一部を更新しま
    す。
    transaction() 同時更新によって破損する可能性がある複合データを更新します。
    

    View Slide

27. データの削除
    データの削除は単に remove() を呼び出すか、 set() や update() などの書き込み用の関数で、
    null を指定する事で削除する事もできます。
    

    View Slide

28. データの取得
    データは、非同期リスナー firebase.database.Reference にアタッチして取得します。
    firebase.database().ref('posts/' + postId + '/starCount').on('value', function(snapshot) {
    updateStarCount(postElement, snapshot.val());
    });
    

    View Slide

29. データの取得
    イベント 内容
    value パスのコンテンツ全体に対する変更の読み取りとリッスンする
    child_added アイテムのリストを取得するか、アイテムのリストへの追加がないかリッスンす
    る
    child_changed リスト内のアイテムに対する変更がないかリッスンする
    child_removed リストから削除されるアイテムがないかリッスンする
    child_moved 並べ変えられたデータと併用して、アイテムの優先度に対する変更がないか
    リッスンする
    データは、非同期リスナーをアタッチして取得します。
    

    View Slide

30. var userId = firebase.auth().currentUser.uid;
    firebase.database().ref('/users/' + userId).once('value').then(function(snapshot) {
    var username = snapshot.val().username;
    // ...
    });
    リアルタイムでなく、現在の値を１回だけ読み取る場合には、 once を使います。
    データの取得
    

    View Slide

31. データの取り扱い
    デモ
    

    View Slide

32. Firebase Hosting
    静的Webホスティング
    ● 静的ファイル（HTML, CSS, JavaScript, など）
    ● HTTPS通信
    ● グローバルなCDN
    

    View Slide

33. Firebase Hostingを利用してウェブアプリをデプロイする
    $ firebase deploy
    

    View Slide

34. Firebase Hostingを利用してウェブアプリをデプロイする
    デモ
    

    View Slide

35. Firebaseの料金（比較）
    

    View Slide

36. Firebaseの料金（比較）
    

    View Slide

37. Firebaseの料金
    

    View Slide

38. Firebaseをガッツリ仕事にしたい人募集中
    iOS / Android / Rails / フロントエンド / インフラエンジニアを積極採用
    中！！！
    株式会社マナボでは、FirebaseをiOS/Android/ウェブにプロダクション
    投入しています。
    現在、Firebaseを使えなくてもかまいません。業務でガッツリ使ってみた
    い人を大募集しています！ご連絡お待ちしております！
    

    View Slide

39. Thank You
    ご静聴ありがとうございました。
    Daisuke Yamashita
    @dddaisuke
    

    View Slide