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

  • 46
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

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などこれからに期待。