*

Firebaseを使ってみた

公開日: : 最終更新日:2015/05/27 投稿者: 未分類

Firebaseとは

Firebaseは2014年10月にGoogleに買収されたバックエンドサービスです。Firebaseの最大の特長はリアルタイムなデータ同期です。Firebaseを使うことで、例えば、デバイス間のデータ同期に必要な複雑なサーバコードの開発をほとんど省略することができます。本記事では、非常に簡単なチャットアプリを例に、その機能の一部をご紹介します。

アカウント、アプリケーションの作成

Firebaseには料金プランがいくつかありますが、まずは、無料の”HACKER PLAN”で、アカウントを作成しましょう。無料プランでは、100MBのデータストレージと毎月5GBまでのデータ転送が利用可能です。また、最大同時接続数は50までに制限されています。また、静的ファイルをホスティングし、CDNを通して配信するサービスも提供されており、こちらは、1GBのストレージと毎月100GBのデータ転送が無料で使えます。
アカウントを作成して、ログインすると、Firebaseアプリケーションやその中のデータや設定を管理するコンソールを利用することができます。
では、コンソールから新しいアプリケーションを作成してみましょう。一番左のAPP NAMEとAPP URLに適当な値を入力して、「CREATE NEW APP」ボタンを押してください。なお、APP URLはグローバルユニークにならないとエラーメッセージが表示されます。

firebase_dashboard01

Firebaseを使った簡単なチャットアプリの作成

以下のような内容でexample.htmlを作成して、WEBブラウザで開いてみましょう。”自分のアプリケーション”と書かれている箇所のは、上記で作成したアプリケーションのIDに置き換えてください。

[html]

<html>
<head>
<script src=’https://cdn.firebase.com/js/client/2.2.1/firebase.js’></script>
<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js’></script>
</head>
<body>
<div id=’messagesDiv’></div>
<input type=’text’ id=’nameInput’ placeholder=’Name’>
<input type=’text’ id=’messageInput’ placeholder=’Message’>
<script>
var myDataRef = new Firebase(‘https://自分のアプリケーション.firebaseio.com/’);
$(‘#messageInput’).keypress(function (e) {
if (e.keyCode == 13) {
var name = $(‘#nameInput’).val();
var text = $(‘#messageInput’).val();
myDataRef.push({name: name, text: text});
$(‘#messageInput’).val(”);
}
});
myDataRef.on(‘child_added’, function(snapshot) {
var message = snapshot.val();
displayChatMessage(message.name, message.text);
});
function displayChatMessage(name, text) {
$(‘<div/>’).text(text).prepend($(‘<em/>’).text(name+’: ‘)).appendTo($(‘#messagesDiv’));
$(‘#messagesDiv’)[0].scrollTop = $(‘#messagesDiv’)[0].scrollHeight;
};
</script>
</body>
</html>

[/html]

インプットフォームが2つだけのシンプルなページが表示されます。

firebase_firstapp01

Nameに”タロウ”、Messageに”こんにちは”と入力してEnterキーを押すと、HTMLが変更されます。以下は、Chromeのデベロッパーツールでページのソースを表示したものです。

firebase_firstapp02

さて、ここで、Firebaseのコンソールでデータの中身を確認してみましょう。管理コンソールのトップ画面で該当アプリケーションの「Manage App」ボタンを押すと、以下のような画面に遷移します。

firebase_dashboard02

表示される文字数が短いので後ろが切れていますが、ページから入力したデータが登録されていることがわかります。また、データには”-JnyVwRk6eYUTEU2e4aU”というIDが自動で付与されています。
これだけでは、Firebaseの最大の特長である、リアルタイムのデータ同期の凄さが、わからないので以下のようなデモ動画を作成しました。

このデモでは、ローカルのWEBサーバ上に上述のHTMLファイルを置いて、ブラウザのウインドウを2つ開いて、それぞれで、そのページにアクセスしています。片方のウインドウでメッセージを入力すると、すぐにもう片方のウインドウにも反映されることがわかるかと思います。

コードの解説

Javascript Client Libraryのロード

[javascript]

<script src=’https://cdn.firebase.com/js/client/2.2.1/firebase.js’></script>

[/javascript]

CDNからFirebase Javascript Client Libraryをロードします。

Firebaseへのリファレンスオブジェクトの生成

[javascript]

var myDataRef = new Firebase(‘https://自分のアプリケーション.firebaseio.com/’);

[/javascript]

アプリケーションのURLを指定して、Firebaseへのリファレンスを作成します。
上述の例ではルートを指定していますが、この引数を例えば’https://自分のアプリケーション.firebaseio.com/message_list’に変更したHTMLを作成して、同じようにNameとMessageを入力すると、ルートの子要素にmessage_listが作成され、その下にデータが登録されます。

firebase_dashboard03

データの登録

[javascript]
myDataRef.push({name: name, text: text});

[/javascript]

push()メソッドの引数にオブジェクトを渡すことで、Firebaseにデータを登録します。
データはスキーマレスで、好きな構造のオブジェクトを登録することができます。ただし、データの階層の深さが32までという制限があります。

イベントを検知した時の処理

[javascript]
myDataRef.on(‘child_added’, function(snapshot) {
var message = snapshot.val();
displayChatMessage(message.name, message.text);
});

[/javascript]

on()メソッドにイベントタイプとコールバック関数を渡して、イベントを検知した時の処理を記述しています。
イベントタイプに”child_added”を指定した場合、new Firebase()で指定した場所の既存の子要素に対して、それぞれ一度ずつ、そして、子要素が追加された時にコールバック関数が呼ばれます。その他のイベントタイプについてはhttps://www.firebase.com/docs/web/api/query/on.html を参照してください。
コールバック関数にはDataSnapshotオブジェクトが渡されます。val()メソッドで、その内容をJavascriptオブジェクトとして取得することができます。

まとめ

いかがでしたでしょうか?今回は、簡単な例を通して、Firebaseのごく基本的な機能についてのみご紹介しましたが、FirebaseはFacebook, Twitterなどのサードパーティサービスと連携した認証機能やデータの読み書きの権限を柔軟に設定する機能を持っています。これらの機能を利用すれば、実用的なアプリケーションが開発できると思います。ぜひ、試してみてください。

この記事を書いた人

hida
雑食エンジニア/にわかSF者

関連記事

apps-gcp7月の人気記事ランキング

ちょっと間が空いてしまいましたが、今回のapps-gcpでは先月(7月)の人気記事ランキングを発

記事を読む

apps-gcp11月の人気記事ランキング

大分間が空いてしまいましたが、今回のapps-gcpは11月の人気記事ランキングです。先月はGC

記事を読む

apps-gcp 2017年1-3月人気記事ランキング

今回のapps-gcpは2017年1~3月の人気記事ランキングです。去年までは月毎でのランキ

記事を読む

PAGE TOP ↑