Edited at

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版