Google DevFest Tokyo 2016

Transcript

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

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

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

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

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

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

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

   Security Rulesによって実現する

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

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

10. Firebase CLI (Command Line Interface) $ npm install -g firebase-tools

    npmを使いインストールします。

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

12. Firebase の使い方 デモ

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

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

15. Firebase CLI (Command Line Interface)

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

17. Firebase CLI (Command Line Interface)

18. Firebase CLI (Command Line Interface)

19. Firebase CLI (Command Line Interface)

20. Firebase CLI (Command Line Interface)

21. Firebase CLI (Command Line Interface)

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

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

24. Firebase の使い方 デモ

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

26. データの保存 Firebase Realtime Database にデータを書き込むメソッドは次の 4 種類 メソッド 処理内容 set()

    定義済みのパスへのデータの書き込みや、データの置換を行います。 push() データのリストに追加します。 update() データのすべてを置換することなく、定義済みのパスのキーの一部を更新しま す。 transaction() 同時更新によって破損する可能性がある複合データを更新します。

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

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

    { updateStarCount(postElement, snapshot.val()); });

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

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

30. var userId = firebase.auth().currentUser.uid; firebase.database().ref('/users/' + userId).once('value').then(function(snapshot) { var username

    = snapshot.val().username; // ... }); リアルタイムでなく、現在の値を１回だけ読み取る場合には、 once を使います。 データの取得

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

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

    • グローバルなCDN

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

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

35. Firebaseの料金（比較）

36. Firebaseの料金（比較）

37. Firebaseの料金

38. Firebaseをガッツリ仕事にしたい人募集中 iOS / Android / Rails / フロントエンド / インフラエンジニアを積極採用

    中！！！ 株式会社マナボでは、FirebaseをiOS/Android/ウェブにプロダクション 投入しています。 現在、Firebaseを使えなくてもかまいません。業務でガッツリ使ってみた い人を大募集しています！ご連絡お待ちしております！

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