Firebaseのリアルタイムデータベースを使う手順をまとめてみました。
Realtime Database
Firebase Realtime Database はクラウドでホスティングされるデータベースです。
今回は簡単なメッセージアプリを作ってみることにします。
- ブラウザで firebase console を開く
https://console.firebase.google.com/?hl=ja -
"ウェブアプリに Firebase を追加"を選択して表示される jaavascript を index.htmlに追加する
<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>
-
リアルタイムデータベースを使うスクリプトを 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>
コンソールで リアルタイムデータベース セキュリティ ルールを変更する
認証不要に書き換えてみる。
{"rules":{".read":"true",".write":"true"}}
ローカル環境で実行して内容を確認してみる
firebase serve
表示される URLをブラウザで開く
http://localhost:5000デプロイを実行する
firebase deploy --only hosting
--only hosting
で一部デプロイ。--only パラメータで指定出来るのはhosting
、database
、storage
この3種類。デプロイ成功したら ブラウザで開いてみる.
firebase open hosting:site
非常に簡単に リアルタイム同期の処理を書くことができました。
iOSやAndroidでも簡単に利用できるようなので、後日ためしてみたいと思っています。
参考
Firebase Realtime Database
Firebase の Realtime Database を使ってみる。Swift版