Firebaseのデータベースから値を取得する

Firebaseとは

Mobile Backend as a Service（MBaas）と呼ばれるクラウドサービスです。

Firebaseは2011年にアメリカで始まったMBaasですが，2014年Googleに買収されたことで一気に知名度が上がりました。

Firebase

無料プランもあるので、個人開発者は始めやすいと思います。

リアルタイムデータベースとは

簡単に説明すると、誰かがデータを更新すると自動で他の端末にも反映される。
更にオフライン動作も可能です。

リアルタイムデータベースはモバイルで使用すると、価値を感じやすいが、
今回はWebからアクセスする方法を理解します。

Firebase Realtime Database | データをリアルタイムで保存して同期  |  Firebase

Firebaseの設定

まずはテスト用に単純なデータを作成します。

ダッシュボードページで、「ウェブアプリにFirebaseを追加」をクリック

表示されるHTMLスニペットを使用するWebページに貼ります。
Firebaseにアクセスするため手続きです。

<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "AIza....",
    authDomain: "YOUR_APP.firebaseapp.com",
    databaseURL: "https://YOUR_APP.firebaseio.com",
    projectId: "YOUR_APP",
    storageBucket: "YOUR_APP.appspot.com",
    messagingSenderId: "123456789" 
  };
  firebase.initializeApp(config);
</script>

データを取り出す

<p><div id="age"></div></p>
<p><div id="job"></div></p>
<p><div id="name"></div></p>
<script>
  var database = firebase.database();
  var dataRef = database.ref('/data');
  dataRef.once("value")
  .then(function(snapshot) {
    document.getElementById("age").innerHTML = snapshot.child("age").val();
    document.getElementById("job").innerHTML = snapshot.child("job").val();
    document.getElementById("name").innerHTML = snapshot.child("name").val();
  });
</script>

データが取り出せない場合はルールを変更して、誰でもアクセスできるようにしてみてください。実際に公開する場合は設定を変更してください。

詳細なデータアクセス方法は以下のリンクを参照してください。

Namespace: database  |  Firebase

参照

第1回　一歩進んだMBaas，Firebaseとは？：スマホアプリ開発を加速する，Firebaseを使ってみよう｜gihyo.jp … 技術評論社