2014/12/24

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

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


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データバインディングが可能となります。


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

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