LoginSignup
59

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-03-09

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版

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
59