■Firebaseとは
Firebaseは、2014年10月にGoogleに買収されたことで一躍有名になったBaaS（Backend as a Service）です。
BaaSは、サービスの運用に必要な汎用的なサーバー機能を提供するクラウドサービスの一形態です。提供される機能はサービスにより様々ですが、ユーザ管理・認証、データの保存などの機能を持っていることが多くあります。
Firebaseも同様に様々な機能を持っていますが、今回はその中からリアルタイムデータベース機能を活用し、簡易的なリアルタイムチャットを構築してみたいと思います。
■Firebaseに登録
以下のURLよりFirebaseにアクセスし、アカウント登録します。
https://www.firebase.com/login/
■プロジェクトを作成
以下の画面にて「新規プロジェクトを作成」を押してプロジェクトを作成する。
■コードスニペットを取得
「ウェブアプリにFirebaseを追加」を押して、コードスニペットを取得する。
以下をコピーしてHTMLに貼り付ける。
■パーミッションを設定
左側のメニューのDatabaseを選択し、パーミッションを設定する。
「ルール」を押す。
以下になるようにルールを書き換える。
|
1
2
3
4
5
6
|
{
“rules”: {
“.read”: “true”,
“.write”: “true”
}
}
|
■HTMLの用意
・Firebaseを初期化する。
|
1
2
3
4
5
6
7
8
9
10
11
|
<script src=“https://www.gstatic.com/firebasejs/3.1.0/firebase.js”>
<script>
// Initialize Firebase
var config = {
apiKey: “<!– API KEY –>”,
authDomain: “<!– –>.firebaseapp.com”,
databaseURL: “https://<!– –>.firebaseio.com”,
storageBucket: “<!– –>.appspot.com”,
};
firebase.initializeApp(config);
</script>
|
・データを保存するときは次のように書きます。
|
1
2
3
4
5
|
database.ref().child(‘posts’).push({
name: $(‘#name’).val(),
message: $(‘#message’).val(),
created: formatDate(now, ‘YYYY/MM/DD hh:mm’)
});
|
・データを取得するときは次のように書きます。
|
1
2
3
|
database.ref(‘posts’).on(‘child_added’, function(data) {
// 受信したときの処理を書く
});
|
■まとめ
今まではリアルタイムチャットを作ろうとすると、自前でサーバを用意しSocket.IOなどを使って、少し時間をかけて実現していましたが、Firebaseを使うとこれほど簡単に構築することができました。
特に、限られるリソースで制作を進めるスタートアップでは積極的に導入を検討してみると良いと思います。
以下に今回作成した全コードのリストは以下となります。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<html>
<head>
<title>チャットサンプル</title>
<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>
<link rel=“stylesheet” href=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css”>
<script src=“https://www.gstatic.com/firebasejs/3.1.0/firebase.js”></script>
<script>
// Initialize Firebase
var config = {
apiKey: “”,
authDomain: “”,
databaseURL: “”,
storageBucket: “”,
};
firebase.initializeApp(config);
var database = firebase.database();
$(function() {
$(‘#postButton’).on(‘click’, function(event) {
var now = new Date();
database.ref().child(‘posts’).push({
name: $(‘#name’).val(),
message: $(‘#message’).val(),
created: formatDate(now, ‘YYYY/MM/DD hh:mm’)
});
});
});
database.ref(‘posts’).on(‘child_added’, function(data) {
var value = data.val();
var element = $(“<li class=’list-group-item’><b>” + value.name + “</b><br />” + value.message + “<br />” + value.created + “</li>”);
var messages = $(‘#messages’);
messages.append(element);
});
var formatDate = function (date, format) {
if (!format) format = ‘YYYY-MM-DD hh:mm:ss.SSS’;
format = format.replace(/YYYY/g, date.getFullYear());
format = format.replace(/MM/g, (‘0’ + (date.getMonth() + 1)).slice(–2));
format = format.replace(/DD/g, (‘0’ + date.getDate()).slice(–2));
format = format.replace(/hh/g, (‘0’ + date.getHours()).slice(–2));
format = format.replace(/mm/g, (‘0’ + date.getMinutes()).slice(–2));
format = format.replace(/ss/g, (‘0’ + date.getSeconds()).slice(–2));
if (format.match(/S/g)) {
var milliSeconds = (’00’ + date.getMilliseconds()).slice(–3);
var length = format.match(/S/g).length;
for (var i = 0; i < length; i++) format = format.replace(/S/, milliSeconds.substring(i, i + 1));
}
return format;
};
</script>
</head>
<body>
<div class=“panel-default”>
<div id=“scroller” class=“panel-body”>
<ul id=‘messages’ class=“list-group”>
</ul>
</div>
<div class=“panel-footer”>
<input id=“name” type=‘text’ class=“form-control” placeholder=“ユーザー名を入力してください”>
<textarea id=“message” class=“form-control” rows=“5” placeholder=“メッセージを入力してください”></textarea>
<input id=“postButton” class=“btn btn-primary” type=“button” value=“Input”>
</div>
</div>
</body>
</html>
|