Edited at

AngularJs ✕ Firebaseで爆速リアルタイムアプリケーションの作成

More than 3 years have passed since last update.


Firebaseとは

いわゆるモバイルBassでWebアプリケーション、モバイル・アプリケーションの開発者向けにリアルタイムにスケーラブルなバックエンドサービスを提供しています。

つい最近(今年10月)、Googleに買収されています。

一定の転送量、接続数、容量は無料で、クレジットなしで使用できます。

Baasとして有名なParseは、Facebookに買収されていますし、

FirebaseもGoogleがつい先日買収と、もはやBaasの2大巨塔ですね、この2つは。


AngularFire

そして、AngularJsからFirebaseを利用できる、

AngularFireというAPIも公開されていますので、

バックエンドのコードを書く必要も、サーバも必要なく、

必要な作業に集中できます。

AngularFireのAPIを利用することで、

Angularjsのモデルが自動的に同期され、Firebase上でリアルタイムにデータバインディングされます。

これでhtml側でのview, Angularjsでのmodel, firebaseでストアされたjsonのデータの3wayデータバインディングが可能となります。


サンプル:チャットアプリ


index.html

<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のドキュメントはこちら

https://www.firebase.com/docs/web/libraries/angular/index.html


雑感

データをただ単純に保存するのではなく、即座に同期、保存してくれる体験は一度試してみると価値はあるかと思います。Firebaseはバックエンドが必要な時にさくっと使用できるので、おすすめです。

またデータの同期のタイミングなども変更できるようです。

Baasですと、ストック型のデータでリレーションしにくい印象がありますが、Parseと同じようにリレーションをサポートしています。

プロダクション環境でのメインDBに使うのにはまだ厳しい感はありますが、Google傘下になったので容量UPなどこれからに期待。