Firebaseは、チャットのようなリアルタイム性の高いアプリを作る際に、端末とサーバー間、端末同士でのデータ同期などのバックエンドで行う処理をAPI提供してくれる便利なバックエンドサービスです。用途としては、複数人でのリアルタイムコミュニケーションアプリやモバイルアプリのオフライン対応などが多いそうです。
まずは試しにということで、Firebaseを使ってグループテキストチャットのサンプルを作成してみましたので、Firebaseの使い方についてご紹介したいと思います。
アプリケーション登録
Firebaseにログインし、ダッシュボードでアプリケーション（データストア）を作成します。
ライブラリの読み込み
以下の様な記述でクライアントアプリにFirebaseのライブラリを読み込みます。
<script src="https://cdn.firebase.com/js/client/2.1.1/firebase.js"></script>
クライアントアプリ作成
作成したFirebase上のデータストアとクライアントでデータ同期をするためのスクリプトを作成します。
データストアの取得
先ほどFirebaseに登録したアプリケーション名を指定してデータストアの参照を取得します。
var dataStore = new Firebase('https://chat-demo-1532.firebaseIO.com/');
データ保存
データストアに対して、child関数で指定したノードにpush関数でデータを保存します。
dataStore.child('messages').push({
'message': 'こんにちは'
});
データ取得
データストアの特定ノードに対してイベントを張ることで、何らかのデータ変更があった場合にリアルタイムにコールバック関数が実行されます。
dataStore.child('messages').on('child_added', function(dataSnapshot) {
//ノードが追加された場合のコールバック処理
});
以下が作成したグループチャットの画面になります。
Firebaseを利用することで、クライアントスクリプトのみでリアルタイムに動くものがすばやく作成できますのでプロトタイプ作成などでサーバ構築する工数が削減できてメリットがあるかと思います。
ご参考までにサンプルソースを載せておきます。
HTMLソース
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://cdn.firebase.com/js/client/2.1.1/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="./chat.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<style type="text/css">
#create-room {
margin: 0 10px;
}
#scroller {
height: 300px;
overflow: auto;
}
</style>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<div id="room-selector" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">
<span id="select-room">チャットルームを選択...</span>
<span class="caret"></span>
</a>
<ul id="rooms" class="dropdown-menu">
<li role="presentation" class="divider"></li>
<li><button class="btn btn-default pull-right" id="create-room">ルーム作成</button></li>
</ul>
</div>
</div>
<div id="scroller" class="panel-body">
<div id='messages'></div>
</div>
<div class="panel-footer">
<input class="form-control" id="message" placeholder="メッセージを送信..."></div>
</div>
</body>
</html>
JavaScriptソース
var myName;
var currentRoomName;
var dataStore;
$(function() {
// アプリケーション用のデータストアの参照を取得
dataStore = new Firebase('https://chat-test-1294.firebaseIO.com/');
// メッセージ投稿
$('#message').keypress(function(e) {
if (e.keyCode == 13) {
var message = $('#message').val();
if( message == '' ) return;
dataStore.child(currentRoomName + '/messages').push({
'name': myName,
'message': message
});
$('#message').val('');
}
});
// チャットルーム作成
$('#create-room').on('click', createRoom);
// チャットルーム選択
$('#rooms').on('click', '.room', function(e) {
var roomName = $(e.currentTarget).children('a').text();
joinRoom(roomName);
});
// チャットルーム選択リスト
dataStore.on('child_added', function (dataSnapshot) {
var key = dataSnapshot.key();
var li = $('
<li class="room">').append($('<a/>').text(key));
$('#rooms .divider').before(li);
});
$(window).on('unload', leaveRoom);
});
function joinRoom(roomName) {
myName = myName ? myName : prompt('あなたの名前は？');
if( !myName ) return;
if( currentRoomName ) leaveRoom();
currentRoomName = roomName;
$('#select-room').text(roomName);
$('#messages').empty();
var messages = dataStore.child(roomName + '/messages');
messages.push({
'message': myName + 'が入室しました'
});
messages.on('child_added', function(dataSnapshot) {
var data = dataSnapshot.val();
$('
<div/>').html( (data.name ? data.name+' : ' : '') + data.message).appendTo('#messages');
$('#scroller').scrollTop($('#messages').height());
});
}
function createRoom() {
var roomName = prompt('ルーム名は？');
if( roomName && roomName != '' )
joinRoom(roomName);
}
function leaveRoom() {
if( currentRoomName ) {
dataStore.child(currentRoomName + '/messages').push({
'message': myName + 'が退室しました'
});
}
}
ピンバック: リアルタイム・バックエンドサービス「Firebase」を使ったWebアプリ作成 | かんた日記
ピンバック: リアルタイム・バックエンドサービス「Firebase」を使ったWebアプリ作成 | infoScoop開発者ブログ | 今速☆ニュース！