44
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-12-24

##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行以内で簡単チャットアプリが作成できます。

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

44
44
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
44
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?