Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Google DevFest Tokyo 2016

Google DevFest Tokyo 2016

Firebaseのススメ 入門編

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

Daisuke Yamashita

October 09, 2016
Tweet

More Decks by Daisuke Yamashita

Other Decks in Technology

Transcript

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  12. Firebase の使い方
    デモ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. Firebase CLI (Command Line Interface)

    View full-size slide

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

    View full-size slide

  17. Firebase CLI (Command Line Interface)

    View full-size slide

  18. Firebase CLI (Command Line Interface)

    View full-size slide

  19. Firebase CLI (Command Line Interface)

    View full-size slide

  20. Firebase CLI (Command Line Interface)

    View full-size slide

  21. Firebase CLI (Command Line Interface)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. Firebase の使い方
    デモ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. データの取得
    イベント 内容
    value パスのコンテンツ全体に対する変更の読み取りとリッスンする
    child_added アイテムのリストを取得するか、アイテムのリストへの追加がないかリッスンす

    child_changed リスト内のアイテムに対する変更がないかリッスンする
    child_removed リストから削除されるアイテムがないかリッスンする
    child_moved 並べ変えられたデータと併用して、アイテムの優先度に対する変更がないか
    リッスンする
    データは、非同期リスナーをアタッチして取得します。

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. Firebaseの料金(比較)

    View full-size slide

  36. Firebaseの料金(比較)

    View full-size slide

  37. Firebaseの料金

    View full-size slide

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

    View full-size slide

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

    View full-size slide