Help us understand the problem. What is going on with this article?

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

More than 3 years have 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版

t_furu
1980年鹿児島県霧島市生まれ 東京の中小IT企業にて物流システム開発に従事。その他通信関連企業経験を経てフリーランスとなり、ソフトウェアだけでなくハードウェア系込みのサービス開発に取り組み、現在に至る。 鹿児島初の モノづくりスペース TUKUDDO を運営中してましたが、移転閉店。 現在は 秋葉原にて ベンチャー企業に所属して Webサービスを開発中。
http://tf-web.jp
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