59
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

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

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版

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
59
Help us understand the problem. What are the problem?