Firebaseとは
いわゆるモバイルBassでWebアプリケーション、モバイル・アプリケーションの開発者向けにリアルタイムにスケーラブルなバックエンドサービスを提供しています。
つい最近（今年10月）、Googleに買収されています。
一定の転送量、接続数、容量は無料で、クレジットなしで使用できます。
Baasとして有名なParseは、Facebookに買収されていますし、
FirebaseもGoogleがつい先日買収と、もはやBaasの2大巨塔ですね、この２つは。
AngularFire
そして、AngularJsからFirebaseを利用できる、
AngularFireというAPIも公開されていますので、
バックエンドのコードを書く必要も、サーバも必要なく、
必要な作業に集中できます。
AngularFireのAPIを利用することで、
Angularjsのモデルが自動的に同期され、Firebase上でリアルタイムにデータバインディングされます。
これでhtml側でのview, Angularjsでのmodel, firebaseでストアされたjsonのデータの3wayデータバインディングが可能となります。
サンプル:チャットアプリ
<script src='https://gist.github.com/05b6d92af489a9b614a7.js'></script>
<noscript><pre><code>
File: index.html
-------------------------
<!DOCTYPE html>
<html>
<head>
<title>AngularFire Sample</title>
</head>
<body>
<div ng-app="sampleApp" ng-controller="SampleController">
<ul class="chatbox">
<li ng-repeat="message in messages">{{message.from}}: {{message.content}}</li>
</ul>
<form ng-submit="addMessage(message)">
<input type="text" ng-model="message"/>
<input type="submit" value="Send Message"/>
</form>
</div>
<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
<script type="text/javascript">
// 依存モジュールとしてfirebaseを登録
var app = angular.module("sampleApp", ["firebase"]);
app.controller("SampleController", function($scope, $firebase) {
// now we can use $firebase to synchronize data between clients and the server!
// create a reference to the Firebase where we will store our data
// var ref = new Firebase("https://<your-firebase>.firebaseio.com/");
// firebaseとの同期
var ref = new Firebase("https://luminous-heat-9275.firebaseio.com/sample/");
var sync = $firebase(ref);
// this uses AngularFire to create the synchronized array
// we add chatMessages array to the scope for our ng-repeat
// ストアされたjson objectを配列としてmodelにバインド
$scope.messages = sync.$asArray();
$scope.user = "Guest " + Math.round(Math.random()*101);
// called by ng-submit a method to create new messages
$scope.addMessage = function(message) {
// calling $add on a synchronized array is like Array.push,
// except that it saves the changes to Firebase!
// modelにjson objectを追加
$scope.messages.$add({from: $scope.user, content: message});
$scope.message = "";
};
// if the messages are empty, add something for fun!
$scope.messages.$loaded(function(messages) {
if( messages.length === 0 ) {
messages.$add({from: 'Firebase Docs', content: 'Hello matz!'});
}
});
});
</script>
</body>
</html>
</code></pre></noscript>
100行以内で簡単チャットアプリが作成できます。
var ref = new Firebase("https://<your-firebase>.firebaseio.com/");
上記の箇所をfirebaseにサインアップして、URLを書き換えてください。
Firebaseにストアされたデータにindexをはる方法
設定で、json形式でkey,rulesの中に.indexOnを記述するだけ
詳細はこちら
https://www.firebase.com/docs/security/guide/indexing-data.html
Firebaseにストアされたデータのセキュリティに関して
jsonでのセキュリティルールの設定が可能。
認証されたユーザがどのようにデータを変更できるかを決める。
データの転送はSSL経由。
さらなる詳細はこちら
https://www.firebase.com/docs/security/
AngularFire利用アプリ
好きなアーティストの音楽をランキング順の聴くことができるサービスです。
Recentの箇所をfirebaseでストアしています。
Lamusica
http://manchan.github.io/lamusica/
githubはこちら
https://github.com/manchan/lamusica
AngularFireのドキュメントはこちら
雑感
データをただ単純に保存するのではなく、即座に同期、保存してくれる体験は一度試してみると価値はあるかと思います。Firebaseはバックエンドが必要な時にさくっと使用できるので、おすすめです。
またデータの同期のタイミングなども変更できるようです。
Baasですと、ストック型のデータでリレーションしにくい印象がありますが、Parseと同じようにリレーションをサポートしています。
プロダクション環境でのメインDBに使うのにはまだ厳しい感はありますが、Google傘下になったので容量UPなどこれからに期待。