Firebaseを使ってみた

ご注意

この記事は 2015年5月19日 に書かれたものです。内容が古い可能性がありますのでご注意ください。

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などのサードパーティサービスと連携した認証機能やデータの読み書きの権限を柔軟に設定する機能を持っています。これらの機能を利用すれば、実用的なアプリケーションが開発できると思います。ぜひ、試してみてください。

Google のクラウドサービスについてもっと詳しく知りたい、直接話が聞いてみたいという方のために、クラウドエースでは無料相談会を実施しております。お申し込みは下記ボタンより承っておりますので、この機会にぜひ弊社をご利用いただければと思います。

無料相談会のお申込みはこちら