Firebase と AngularJS による Web アプリ開発

() translation by (you can also view the original English article)

Firebase は、サーバサイドのプログラミングをせずに、Web アプリを開発できる素晴らしい技術です。Firebase を利用すると、開発をより早く、簡単に行えるようになります。この記事では、高い開発者エクスペリエンスとユーザーエクスペリエンスの両方を実現する、Firebase と AngularJS による Web アプリ開発の流れをご紹介します。

Firebase と AngularJS を使うと何がそんなに良いのでしょうか? それは、これらの技術がどのように出来ているかを知ると分かります。AngularJS が提供する双方向のデータバインドは、 "Don't just save data. Sync it. ( データをただ保存するな。同期しろ。) " という考え方を持つ Firebase と非常に相性がいいのです。

開発は早く進み、かつ例えば、ユーザが入力した内容は即座に保存され、すぐに他のユーザからも利用できるようになっているような、高いユーザエクスペリエンスも提供できます。

ステップ 1: データベースのセットアップ

まずはデータベースを作成しましょう。まだ Firebase のアカウントをお持ちでない場合は、作成してください ( Github アカウントでサインインできます! )。ログイン後、フォームを埋めてボタンを押し、新しくアプリを作成します。

後ほど Facebook ログインも利用するので、Facebook アプリの詳細 ( つまり、App ID と App Secret ) をデータベースのオプションで設定する必要があります。Firebase アプリ名の下にある "Manage App" ボタンを押して、"Login & Auth" タブを選択、Facebook の設定項目を入力し "Enable Facebook Authentication" にチェックします。

Facebook と連携するためには、Facebook アプリ側でも必要な設定がいくつかあります。必要な作業はすぐに終わるので、Firebase のドキュメントにある手順に沿って行ってください。

ステップ 2: Angular アプリのセットアップ

アプリのベースとなる HTML と JavaScript を作成します。今回は、Facebook アカウントでログインできる、シンプルなチャットアプリを開発します。

まず HTML ファイルを作成し、以下のコードを挿入します。

<html ng-app="simpleChat">
<head>
        <script src="https://cdn.firebase.com/v0/firebase.js"></script>
      <script src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
	    <script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>
	    <script src="angular.app.js"></script>
    </head>
    <body>
    </body>
</html>

ここでは、必要なスクリプトをいくつか読み込んでいます。firebase.js と angular.js が含まれるのはもちろんですが、angularfire.min.js を読み込み、Firebase と AngularJS の連携をとても簡単にする AngularFire モジュールを利用します。

次に angular.app.js ファイルを作成します。このファイルに、アプリのロジックを実装します。simpleChat という名前でメインのモジュールを宣言するところから始めましょう。

1	var app = angular.module('simpleChat', [ 'firebase' ]);

このモジュールは唯一 AngularFire が提供する firebase モジュールにのみ依存しています。

ステップ 3: Facebook でログイン

それでは、ユーザが Facebook アカウントでログインすることができるようにしましょう。今回作成するアプリはとても小規模なので、ここでは MessagesCtrl というコントローラーを 1つだけ作ります。

1	app.controller('MessagesCtrl', ["$scope", "$firebase",
2	function ($scope, $firebase) {

$firebase を使って AngularJS と Firebase の接続やデータの同期を行います。

Firebase のインスタンスが必要になるので、作成しましょう。

1	var ref = new Firebase('https://your-unique-url.firebaseio.com/');

'your-unique-url' は、実際のデータベースの URL に置き換えてください。たった今作成した ref オブジェクトと authWithOAuthPopup() 関数を使って、Facebook ログインのポップアップ表示およびログイン処理を行います。渡す引数は、ユーザのログインに使うプロバイダー名だけです。

1	$scope.login = function(){
2	ref.authWithOAuthPopup("facebook", function(error, authData) {
3	});
4	}

ログイン実装は、これでほぼ完成です。もしユーザがログインしていると、$scope.authData 変数は、ユーザのデータを保持していますし、ログインしていなければ null になります。

次に、コントローラーとサイインのためのボタンと一緒に <div> をページに追加します。

<div ng-controller="MessagesCtrl">
	<button ng-click="login()" ng-hide="authData">Log In</button>
	<input ng-model="newMessage.text" ng-keyup="handleKeyup($event)">
	<div ng-repeat="message in data.messages"> <b>{{ message.author }}:</b> {{ message.text }} </div>
</div>

ここでは、ユーザがログインした際にボタンを非表示にするために、ngHide ディレクティブを使いました。そして、ログインボタンをクリックした際は先に定義した $scope.login() メソッドを呼び出します。

これでアプリをテストできるので、ログインするとログインボタンが消えるのを確認してみてください。

ステップ 4: メッセージの表示

これまでのステップと同様に、このステップの実装もまた、とても簡単です。まずは HTML を準備しましょう。ngRpeat を使ってすべてのメッセージに対して繰り返し処理を行い、メッセージを表示します。

1	<div ng-repeat="message in data.messages"> <b>{{ message.author }}:</b> {{ message.text }} </div>

ここでコントローラーを更新する必要があります。Firebase から返されるオブジェクトを保持する obj 変数を作成してください。

1	var obj = $firebase(ref).$asObject();

$asObject() メソッドは、参照全体をいくつかの便利なメソッドを加えた JavaScript オブジェクトに変換します。加えられたメソッドの中で、今回は three-way バインディング ( Firebase-AngularJS-DOM ) を設定する .$bindTo() を使います。

1	obj.$bindTo($scope, 'data');

$scope を第1引数に、プロパティ名を第2引数に指定します。バインドしているオブジェクトは $scope の下に指定したプロパティ名で保持されます( この例では $scope.data )。

メッセージを表示するための作業はこれで全部です! まだデータベースの messages 配列には何も入れていないので、アプリを動かしても今は何も表示されません。

ステップ 5: メッセージの送信

このステップはさらに早く終わるでしょう。コントローラーの div に、ユーザがメッセージを入力するためのフォームを追加します。

1	<input ng-model="newMessage.text" ng-keyup="handleKeyup($event)">

入力された値は、$scope.newMessage.text 変数にバインドされ、keyup イベントが $scope.handleKeyup() コールバックを呼び出します。ユーザが Enter キーを押しているかどうか確認するため、$event を引数として渡している点に注意してください。

それでは、$scope.handleKeyup() 関数を定義しましょう。

1	$scope.handleKeyup = function handleKeyup(e) {

まず、Enter キーが押されているかどうか確認します。

1	if (e.keyCode == 13) {

もし押されているなら、ユーザの表示名を $scope.newMessage オブジェクトに追加し、メッセージを Firebase のデータベースに保存します

1	$scope.newMessage.author = ref.getAuth().facebook.displayName;
2	ref.child("messages").push($scope.newMessage);

また、$scope.newMessage オブジェクトを初期化する必要もあります。

1	$scope.newMessage = {};

以上です。2つのブラウザでアプリを開き ( 2つの Facebook アカウントを使えるようにするため ) 、使ってみてください！例によって、ご意見、ご感想、ご質問はフォームより投稿をお願いします。