JavaScript
google
nosql
Firebase

Firebase 入門 - リアルタイムデータベースを使ってみる

More than 1 year has passed since last update.

Firebaseのリアルタイムデータベースを使う手順をまとめてみました。

Realtime Database

Firebase Realtime Database はクラウドでホスティングされるデータベースです。
今回は簡単なメッセージアプリを作ってみることにします。

  1. ブラウザで firebase console を開く
    https://console.firebase.google.com/?hl=ja
  2. "ウェブアプリに Firebase を追加"を選択して表示される jaavascript を index.htmlに追加する
    スクリーンショット 2017-03-02 13.58.25.png

    <script src="https://www.gstatic.com/firebasejs/live/3.0/firebase.js"></script>
    <script>
    // Initialize Firebase
    var config = {
    apiKey: "あなたのAPIキー",
    authDomain: "myfirstfirebase(的な名前).firebaseapp.com",
    databaseURL: "https://myfirstfirebase-(的な名前).firebaseio.com",
    storageBucket: "myfirstfirebase-(的な名前).appspot.com",
    };
    firebase.initializeApp(config);
    </script>
    
  3. リアルタイムデータベースを使うスクリプトを index.html に組み込む

    <script>
      var db = firebase.database();
      var chatAll = db.ref("/chat/all");
      //DB内容が変更されたとき実行される
      chatAll.on("value", function(snapshot) {
        document.getElementById("textMessage").innerText = snapshot.val().message;
      });
      //入力内容を更新した時
      var changeData = function(){
        var message = document.getElementById("message").value;
        chatAll.set({message:message});
      }
      //htmlロードが完了したらボタンにイベントを設定
      window.onload = function() {
       document.getElementById("btnChangeData").onclick = changeData;
      };
    </script>
    <body>
    <p>リアルタイムデータベース</p>
    <ul>
    <li id="textMessage"></li>
    <li><input type="text" name="" id="message"></li>
    <li><input type="button" value="更新" id="btnChangeData"></li>
    </ul>
    </body>
    
  4. コンソールで リアルタイムデータベース セキュリティ ルールを変更する

    スクリーンショット 2017-03-02 14.26.33.png
    認証不要に書き換えてみる。
    {"rules":{".read":"true",".write":"true"}}

  5. ローカル環境で実行して内容を確認してみる
    firebase serve
    表示される URLをブラウザで開く
    http://localhost:5000

  6. 上手く動いたらURLを別ブラウザなどで2画面開いて
    更新が同期されるか確認してみる。

    スクリーンショット 2017-03-02 14.33.25.png

  7. デプロイを実行する
    firebase deploy --only hosting
    --only hostingで一部デプロイ。--only パラメータで指定出来るのは hostingdatabasestorage この3種類。

  8. デプロイ成功したら ブラウザで開いてみる.
    firebase open hosting:site

非常に簡単に リアルタイム同期の処理を書くことができました。
iOSやAndroidでも簡単に利用できるようなので、後日ためしてみたいと思っています。

参考

Firebase Realtime Database
Firebase の Realtime Database を使ってみる。Swift版