Experts.jp日本に、もっとエキスパートを。(1)Firebaseはリアルタイム同期なデータベースを中心に、Auth認証やPushNotificationやユーザーの行動分析といったアプリケーションに最適な機能を提供するBasSです。IOにて、PushNotificationや行動分析機能が追加されるなど話題となりました。今回はFirebaseのリアルタイムベースとAngular2を用いて、リアルタイムにデータをやり取りする方法について解説します。FirebaseのリアルタイムデータベースFirebaseのリアルタイムデータベースはクラウドホスト型のNoSQLデータベースです。JSONの形式でデータは保存されます。APIはもちろん、iOS/Android/Web用のSDKが提供されているので、非常に簡単に導入することができます。ネットワークが途中で切れた場合は自動的に再接続を行い、復帰後に改めてデータが同期されます。同時100コネクション、1GBのデータ、10GBの転送量までは無料で使うことができるので、まず試してみるといったことができます。今回はこの無料プランとAngular2を使って進めていきます。CLIで環境構築Angular2の環境構築が初めての方でも簡単に導入できるように、Angular2ではCLIが公開されています。これを利用して環境を構築していきます。(※別途、Node.jsのインストールが必要です)angular-cliまずはnpmを使って、angular-cliをインストールします。versionでバージョンが表示されます。newコマンドを用いてプロジェクトを作成します。newの後には任意のプロジェクト名を入力してください。sampleでプロジェクトを作成します。works!と表示されます。これで開発環境の準備が整いました。本題のAngularFireを導入していきます。2.4.2に対応しています。続いて、firebase用の型定義ファイルをインストールします。typingsを実行してインストールをしてください。1系と0系では、コマンドやインストールされるファイルの構成が異なります。現在のバージョンのangular-cliでは0系でインストールされますが、npmでインストールされる最新版は1系になります。本稿では1系がインストールされている状態で解説を行います。0系の場合は以下のtypingsに追記する作業は必要ありません。src/typings.d.tsにインストールされたfirebaseの型定義ファイル群を追記します。追加]});};続いて、/src/system-config.tsに以下のようにfirebase,angularfire2の記述を追記します。'angularfire2.js'}}これでAngular2でFirebaseを使う準備が整いました。続いて、Firebaseの登録と設定を行っていきましょう。firebaseFirebaseはGoogleアカウントで登録することができます。登録が完了すると、プロジェクトを作るためのボタンが表示されます。「新規プロジェクトを作成」ボタンをクリックして、アプリケーションを作成しましょう。アプリケーションが作成できたら「Database」ページを開きます。以下のように、まだデータベースには何も入っていません。この画面から初期データを登録してみましょう。このようにデータを作成しました。'item0003'}}}Firebase上では、すべてオブジェクトの形式でデータが構成されるようにしておきます。続いて、「ルール」のタブをクリックしてルールを設定します。ルールはデータベースへの値に対してのアクセス権の設定を行うことができます。JSONの形式でデータを定義していきます。詳しいルールの記載は、以下のページに説明があります。https://html5exp-sample.firebaseio.com/ここではサンプルということで、読み書きともに誰からでもできるように設定しておきましょう。"true"}}}これによってデータベースのitems以下は、読み書きともに誰でも許可されるようになりました。これで登録したデータが読み取れるか試してみましょう。/src/main.tsを開きます。配列で渡しておきます。することによって、今後Angular2のコンポーネント内でFirebaseに必要な設定とプロバイダが提供されるようになります。続いて、画面にデータを表示するためのコンポーネントに変更を加えます。asyncはAsyncPipeと呼ばれるAngular2にはじめから組み込まれているPipeのひとつです。これはitemsのObservableをsubscribeしたときの引数を自動的に取得して表示してくれるPipeです。詳しい使い方や解説は以下のページにありますので、こちらをご一読ください。コマンドを改めて実行すると、Firebaseで登録されたデータが表示されるようになります。次にブラウザからデータを追加する処理を実装していきましょう。#newItem><button>send</button></form>FirebaseListObservableにデータをpushするだけで配列データにデータを追加することができます。今度はリストのデータを更新してみましょう。#newItem><button>send</button></form>this.items.update(key,{value:value});のように更新したいデータの$keyと値を渡すことで更新ができます。Firebaseのオブジェクトには$keyというプロパティがあり、各データのKey名を取得することができます。pushで追加されたデータは、一意なKeyが自動で振られるようになっています。続いて、リストのデータを削除してみましょう。(click)="removeAll()">全削除</button>更新と同様にthis.items.remove(key);と削除したいデータのKeyを渡すことで、そのデータのみを削除することができます。this.items.remove();とKeyを渡さずにremoveするとリスト全体が削除されるので注意してください。このように非常に簡単にデータの読み書きが実装できてしまいます。オブジェクトデータの取り扱い続いて、今度はリストデータでなく単一のオブジェクトのデータを扱ってみましょう。Firebaseの管理画面でDatabaseのデータに以下のようなconstantsを追加しました。{...}}ルール設定ページにいき、constantsは読み込み専用に設定しておきます。"true"}}}src/app/sample.component.tsを、以下のように修正します。{this.items.remove();}}そして、ビューのタイトル部分をconstantsから取得して表示させるようにします。(click)="deleteAll()">全削除</button>こうすることで、オブジェクトのデータを読み込んで画面に表示させることができました。オブジェクトの更新オブジェクトの更新をする際は、リストと同様にupdate関数を用いて変更を行うことができます。その時にはルールで書き込みが許可されている必要があります。title"});オブジェクトの削除オブジェクトの削除を行う際にはremove関数を用いますが、以下のようにremoveするとconstantsごと削除されます。constantsごと削除1つのプロパティのみを削除したい場合は、以下のように削除したいプロパティまで取得した上でremove関数を実行します。//titleだけ削除まとめこのようにAngular2とFirebaseを使うことで、簡単にリアルタイムにデータのやり取りを行うことができるようになります。今回はサンプルということで誰でも読み書きできる形にしていますが、ユーザー認証をFirebaseで作ったり、既にあるログイン情報を利用して認証させたりできるので、新規でも追加でも導入しやすくなっています。次回はその認証機能を用いてログインすると書き込みができるようにしていきたいと思います。