■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> |
