新旧Firebaseの違い

2016年5月のGoolge I/Oのキーノート、そしてそれに続く各セッションでFirebaseの大幅な拡張が発表されました。いったいどのような拡張が行われたのか、それはその発表前後のトップページの文言を比較すると分かりやすいでしょう。

旧Firebase
素晴らしいアプリを開発 モバイル／ウェブアプリのための強力なプラットフォーム

新Firebase
アプリビジネス成功への近道 質の高いアプリを作成し、ビジネスを成功に導く ために必要なツールとインフラストラクチャ

どうでしょう。新旧の立ち位置の違いが明確に表れていると思いませんか。

つまり、以前のFirebaseは単純にアプリのバックエンド開発／運用の省力化が目的でしたが、新しいFirebaseはアプリビジネスに関わるすべての領域をサポートして、その成功を目指すものになった、ということです。

新しいFirebase

新しいFirebaseの謳い文句は「アプリビジネス成功への近道」でした。それでは、Googleの考える「アプリビジネスの成功」とは何で、そのために拡張された機能にはどういうものがあるのでしょうか。これもFirebaseのトップページに分かりやすい説明があります。

この図から分かるようにGoogleはアプリ提供のプロセスをDevelop（開発）・Grow（拡大）・Earn（収益）の3つのステージで捉えています。さらに各ステージが繋がって輪になっていることから分かるように、この3ステージはアプリが生きている限り、オーバーラップしながら繰り返し現れてはずっと続いていくものです。

また、図をよく見ると3ステージから成る輪の中心にAnalytics（解析）があることが分かります。これらを考え合わせると、Googleが考えるアプリビジネスが成功している状態とは、Analyticsを軸にDevelop・Grow・Earnがスムーズに連携している状態であると理解することができます。

Analyticsと3つのステージ

全体像がわかったところで各ステージをサポートする機能を個別に見ていきましょう。なお、旧Firebaseにはなかった機能名は太字で記しています。

Analytics

先ほども書いたとおりAnalyticsは新しいFirebaseの核となる機能です。ここで得られる情報がDevelop・Grow・Earnすべてのステージを駆動します。

Firebase Analytics

モバイルアプリのイベントログを記録します。初めての起動・アプリ内課金・アプリのバージョンアップなどのデフォルトで記録されるイベントの他、開発者が独自に定義したイベントの発生を記録し、Firebasコンソールで確認できます。対応する環境はiOSとAndroidです。

Develop

認証、ストレージ、テストなどアプリの開発に必要となる各種機能群です。

Firebase Cloud Messaging

以前はGoogle Cloud Messagingと呼ばれていた機能です。対象のカテゴリを指定して通知を送信できます。対応する環境はiOS、Android、Webです。

Firebase Authentication

認証機能を提供します。FacebookやTwitterのアカウントを使用した認証、メールアドレスとパスワードを使用した認証などが利用できます。対応する環境はiOS、Android、Webです。

Firebase Realtime Database

サーバーと全クライアント間でデータが同期されるリアルタイムNoSQLデータベースです。前回で説明したとおり、Firebaseで最も古い、サービスを特徴付ける機能です。対応する環境はiOS、Android、Webです。

Firebase Storage

Google Cloud Storageを内部的に使用するストレージサービスです。Firebase Realtime Databaseとは異なり、写真や動画などの静的なコンテンツを保存するのに適しています。対応する環境はiOS、Android、Webです。

Firebase Hosting

HTMLやJS、CSSなど静的なファイルのホスティングサービスです。Firebaseのコマンドラインツールを使用すれば、コマンドをひとつ実行するだけで簡単にウェブアプリをデプロイできます。対応する環境はもちろんWebだけです。

Firebase Remote Config

アプリの動作や外観をFirebaseコンソールから変更することができます。設定内容はOSの種類や国に応じて切り替えることができる他、例えばランダムに10%のユーザーにだけ特定の機能を有効にすることも可能です。対応する環境はiOSとAndroidです。

Firebase Test Lab for Android

Googleのデータセンター内の様々なAndroid端末上でテストを実行できます。テストの結果はログやスクリーンショットで確認できます。対応する環境は現在のところAndroidだけです。

Firebase Crash Reporting

iOS/Androidアプリのエラーを監視し、エラー発生時にはAnalyticsのイベントを発火し、情報を収集します。対応する環境はiOSとAndroidです。

Grow

公開後のアプリのユーザーベースの拡大に必要な機能群です。

Firebase Notifications

FirebaseコンソールからグラフィカルなUIを通じてユーザーの端末に通知を送信できます。実際のメッセージの送信にはFirebase Cloud Messagingが利用されています。対応する環境はiOSとAndroidです。

Firebase App Indexing

以前はGoogle App Indexingと呼ばれていた機能です。Googleの検索結果にアプリを表示でき、直接アプリを起動できるようになります。対応する環境はiOSとAndroidです。

Firebase Dynamic Links

端末の種類は何か、アプリがインストールされているかどうか、アプリのユーザー登録は完了しているかどうか、などの条件に応じて適切に動作を変えるURLを生成できます。対応する環境はiOSとAndroidです。

Firebase Invites

Firebase Dynamic Linksを使用してユーザーにアプリの招待を送ることができます。対応する環境はiOSとAndroidです。

Google AdWords

Google AdWordsのアカウントをFirebaseプロジェクトにリンクし、アプリの利用状況に応じたターゲットユーザーを指定できるようになります。対応する環境はiOSとAndroidです。

Earn

アプリから収益を得るために必要な機能です。現時点で所属するAPIはAdMobしかないので、構成の都合で無理やり作ったステージの感じも若干あります。

AdMob by Google

以前からあるモバイル広告プラットフォームですが、Firebaseプラットフォームの一員となったことでFirebase Analyticsを分析に利用できるようになりました。対応する環境はiOSとAndroidです。

ウェブアプリ

先のセクションでFirebaseで提供されている機能を一通り簡単に説明しました。太字の項目が多いことからも、旧Firebaseと比較して非常に多くの機能が追加されたことがわかると思います。しかし、ここでウェブ開発者な皆さん（html5experts.jpなので当然そうですよね？）にとって少し残念なお知らせがあります。気づかれた方もいるかもしれませんが、これら新機能の大部分はウェブアプリでは使えません。

説明のために各機能の対応プラットフォームと、ついでとして元となったサービスを表形式でまとめました。

いつからかFirebaseの機能が大幅に拡張されたかのように錯覚していましたが、表を見るとWeb版に関しては旧来のFirebaseと比較してできることにほぼ差がないということが一目瞭然です。Develop、Grow、EarnがAnalyticsを中心に連携するのが新Firebaseの基本理念だったはずですが、Webに関して言えばDevelopしかありません。大丈夫なんでしょうか。

そしてそのDevelopについても、2つの違いのうちのひとつであるFirebase Cloud MessagingについてはGoogle Cloud Messagingから名前が変わっただけで、結局新旧の違いらしい違いといえばFirebase Storageにより静的なファイルが扱いやすくなったことくらいです。

従って、ウェブ開発者の視点では新旧の違いは機能面からではなく、「GoogleがFirebaseに対して本気になっている」という精神面での向上として捉えるのが正解でしょう。実際Firebaseドキュメント日本語化の状況や、公式ブログでのFirebaseの露出も以前とは段違いですので、FacebookのParse.comに対する仕打ちのようなものを心配する必要が直近ではなくなったと考えられるのはウェブ開発者としても非常に喜ばしいことです。

機能面以外の変更

これまで機能面（と精神面）での変更点について紹介してきましたが、最後にそれら以外の変更点についても簡単に触れておきます。

FirebaseコンソールのUI

機能が追加されるに当たって、当然ですがそれらを管理するFirebaseコンソールのUIも変更されています。しかし見た目の変更を除けば、既存機能に関しては左側のナビゲーションに表示される項目が増えただけですので、それほど気にする必要はありません。

ただし、以前のFirebaseで作成したプロジェクトを新しいFirebaseコンソールで管理するには明示的にコンソールをアップグレードし、さらにデータベースの情報をインポートする必要があります。

料金体系

料金体系が大幅に変更されました。元々はFreeプランを含めてクォータの違いごとに6種類あったものが、現在はフリープラン（SPARK）・月額固定制有料プラン（FLAME）・従量制有料プラン（BLAZE）の3種類にまとめられました。

これまでフリープランを使用してた人にとっては、クォータはほぼ変更がないまま、以前は無料では利用できなかった独自ドメインを設定できるようになったということで喜ばしい変更でしょう。

サポート言語の追加

あくまでも実験的にですがC++ SDKが追加されています。モバイルゲームなどパフォーマンスが要求されるアプリでは利用を検討してみてもいいでしょう。

まとめ

身もふたもない言い方をすれば、新しいFirebaseは「これまでGoogleが個別に提供していたアプリ提供者向けサービスを上流から下流までほぼ全て集約した統一ブランドの名前」になりました。

本連載に限っての結論としては「以前とほぼ変わっていない」という理解で構いません。UIの変更はもちろんありますが、できることは変わっていないので取り急ぎは安心して前回の記事を参考にして頂ければと思います。

ということで次回こそ、Firebaseで何かを作りながらより詳細に機能を紹介します。

こんにちは！ 2014年に連載した「WebRTCを使ってみよう！」シリーズのアップデートとしてお送りしているこの連載ですが、今回はもとの連載にはなかった内容を番外編としてお届けします。

httpsのハードル

前回は複数人、複数会議室で利用できるようにして、実用的なアプリを作る準備ができました。ところが実際に使おうとすると、Chromeのセキュリティポリシーと向き合わなくてはなりません。

「getUserMedia()やService Workerなどの強力なAPIは、セキュアな環境でなくては利用できない」というポリシーは今のWebの状況に合わせたものだと思います。では、その環境をどうやって用意すればよいのでしょうか？

もちろん証明書を取得して、きちんとサーバーを立てるのがまっとうなやり方です。最近はLet’s Encryptなど無料で証明書を発行するサービスもあります（参考：“Let’s Encrypt – how get to free SSL for WebRTC”）。とはいえ、試験的な利用でそこまで準備するのは大変というのも、正直なところです。そこで今回は、比較的とっつきやすい方法をご紹介します。

Webサーバー

HTMLやJavaScriptなどの静的コンテンツを配置できる手段はいくつかあります。エンジニアの皆さんであれば、次の2つをすでに利用されている方々も多いのではないでしょうか？

• GitHub Pages
• Google App Engine

どちらも http / https の両方でアクセスできますし、独自ドメインで利用することも可能です。（※利用方法についてはWebに多くの情報がありますので、そちらをご参照ください）

また、シグナリングで利用するFirebaseにも静的コンテンツのホスティング機能があります。

シグナリングサーバー

シグナリングにはsocket.ioなど、WebSocketを活用した仕組みが使われる例が多いようです。もちろん他の方法（例えば手動シグナリング）でもいいのですが、サーバーとクライアント（ブラウザ）で双方向に通信するにはWebSocketが適切なのでしょう。

https://～から取得されたHTML/JavaScriptからWebSocketサーバーに接続する場合には、そちらもセキュアでなくてはなりません。(ws://～ではなく、wss://～）。WebSocketを利用したシグナリングサーバーを自分で用意する場合、そちらでも証明書が必要になります。

そこで今回はリアルタイムメッセージングに利用できるBaaSであるFirebaseを使って、シグナリングの仕組みを構築したいと思います。

Firebaseでシグナリングを実現するには

まずはFirebaseにサインアップし、必要なキーやURLを入手しましょう。

• 参考：Firebaseで作る簡単リアルタイムウェブアプリケーション

（※手順については今回は省略させていただきます。あしらかず）

ブラウザでFirebaseの機能を利用するために、必要なライブラリを読み込んでおきます。今回はデータベースを利用するので、必要なjsファイルは次の通りとなります。

<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-app.js"></script>
 <script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>

それから取得しておいたキーとURLを用いてFirebaseに接続します。

// Initialize Firebase
  let config = {
    apiKey: "yourAPIKey",  // <-- please set your API key
    databaseURL: "https://yourapp.firebaseio.com/",  // <-- please set your database URL
  };
  firebase.initializeApp(config);
  let database = firebase.database();

シグナリングで送りたいモノ

前回の記事にもあるように、シグナリングでは2つの通信ケースがあります。

• ルーム内の他のメンバー全員（接続している他のクライアントすべて）に送る
• 特定のメンバー（特定のクライアント）だけに送る

また後者のためには、特定のメンバーを識別するための何らかのIDが必要となります。

• クライアント側で、重ならない/重なりにくい ようにIDを決める（UUID、タイムスタンプ、乱数など）
• サーバー側でIDを振り出す

Firebaseを使うとデータベースに格納されるオブジェクトのすべてにIDが振られるので、今回はそれを利用します。

データベースの構造

Firebaseはデータベースによる階層構造をもったデータの永続化と、その追加/変更/削除のイベント通知が行えます。今回は次のようなアプリ/ルーム/メンバーの階層構造としました。

例えばルーム”test”にメンバー”bbb”が参加する場合、次の2カ所のイベントを待ち受けています。

• multi/room_test/_broadcast_ の child_added イベント
• multi/room_test/_direct_/member_bbb の child_added イベント

また、multi/room_test/_join_ はメッセージのやりとり以外の用途で使います。

メンバーのIDの決定

メンバーを特定してメッセージを送るには、メンバーを識別するIDが必要です。先ほどは仮に”bbb”としましたが、実際には衝突を避けるためにFirebase側で振り出されるキーを利用することにしました。

let databaseRoot = 'myapp/multi/';
    let key = database.ref(databaseRoot + room + '/_join_').push({ joined : 'unknown'}).key
    clientId = 'member_' + key;
    database.ref(databaseRoot + room + '/_join_/' + key).update({ joined : clientId});

データベースにパスを指定してpush()すると、子要素が追加されて、そのキーが返っています。その値を使って先ほどの子要素の内容を更新しています。

ここまで終わった時のDatabaseの内容をFirebaseのコンソールで見てみると、次のようになっています。

ルーム内へのブロードキャスト

シグナリングの流れは前回と同じです。

• 新たに通信を開始したい人（member_xxxx）が、通信開始の合図のルーム内にブロードキャスする(“call me”）

“test”ルームにブロードキャストする場合には、 multi/room_test/_broadcast_ の下を使います。

let roomBroadcastRef = database.ref(databaseRoot + room + '/_broadcast_');

  // 通信開始の合図
  function callMe() {
    emitRoom({type: 'call me'});
  }

  function emitRoom(msg) {
    msg.from = clientId; // メッセージに送信元（自分のID)をセット
    roomBroadcastRef.push(msg);
  }

各メンバーはこのブロードキャストのイベントを待ち受けていて、typeに応じて処理を行います。

roomBroadcastRef.on('child_added', function(data) {
      let message = data.val();
      let fromId = message.from;
      if (fromId === clientId) {
        // ignore self message (自分自身からのメッセージは無視する）
        return;
      }
      
      if (message.type === 'call me') {
        // 接続処理
      }
    });

socket.ioでは自分自身からメッセージは飛んで来ませんが、Firebaseでは自分でpush()してもイベントが飛んでくるので、それは無視しています。

特定のメンバーへのメッセージ

通信開始の合図である”call me”以外は、特定のメンバー宛のメッセージのやり取りになります。例えば member_bbb 宛のメッセージは、この下にpush()します。

• multi/room_test/direct/member_bbb

function emitTo(id, msg) {
    msg.from = clientId; // メッセージに送信元（自分のID)をセット
    database.ref(databaseRoot + room + '/_direct_/' + id).push(msg);
  }

Offer/Answerの交換やICE Candidateのやり取りは、すべてこちらのメンバー宛のメッセージになります。

Firebaseのルール設定

Firebaseのデータベースにはアクセスのルール指定があります。デフィルトではread/writeにAuth必要なルールが生成されていますが、今回のサンプルでは特定のパス以下はAuth不要で読み書きできるよう、ルールを追加しました。

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null",
    "myapp" : {
      "multi" : {
        ".read": true,
        ".write": true
      }
    }
  }
}

NAT越えの設定 STUNの設定

せっかくFirebaseでメッセージをやり取りできるので、NATを超えてWebRTCで通信できるようにしましょう。

NATを超えて通信を行うには、ローカルネットワークでのIPアドレスではなく、グローバルIPを伝える必要があります。今回は詳しく説明しませんが、そのための仕組みがSTUNです。GoogleがSTUNサーバーを公開しているので、それを使わせてもらいましょう。

function prepareNewConnection(id) {
    let pc_config = {"iceServers":[{"urls": "stun:stun.l.google.com:19302"}]}; // for STUN server
    let peer = new RTCPeerConnection(pc_config);
    // ... 省略 ...
  }

※ 2014年の記事では”url” と指定していましたが、現在の仕様では”urls”と指定する必要があります。

このようにSTUNサーバーを指定することで、通信経路の候補(ICE Candidate)に、STUN経由で取得した情報も含まれるようになります。

動かしてみよう

今回のサンプルをGitHub Pagesで公開しています。Firebaseもしばらく(〜2016年9月末の予定）使える状態にしておきますので、皆さんもお試しください。

• GitHub Pages で試す multi_firebase.html (Chrome/Firefox）
• GitHub でソースを見る multi_firebase.html

※シグナリングの手段以外は、前回のソースと同様の処理になっています。

使い方

• URLの後ろに ?room という形で、好きなルーム名を指定してください
  • https://mganeko.github.io/webrtcexpjp/basic2016/multi_firebase.html?お好きなルーム名
• ルーム名を指定せずに multi_firebase.html を開くと、ランダムにルーム名を決定します
• [Start Video]をクリックし、カメラの映像とマイクの音声を取得します
• 通信相手にも同じルーム名を指定してブラウザ(Chrome/Firebox)でアクセスしてもらいます
  • ?room も含むURLを伝えてください
  • “Mail link of this room” をクリックすると、URLを送るためのメーラーが開きます。宛先を指定して送信してください
• 通信相手にも[Start Video]をクリックし、カメラの映像とマイクの音声を取得してもらいます
• 自分、あるいは相手から[Connect]ボタンを押してください
• Firebase経由で情報が交換され、P2P通信が始まります
• このサンプルでは、同じルームに同時に4人まで(3人の相手と)通信することができます

トラブルシューティング

• 異なるPCで通信できない場合
  • → ルーム名が一致しているか確認していください
  • ルーム名を指定せずにブラウザでアクセスすると、ランダムにルーム名が決定されます
  • 異なるPCでは、それぞれ異なるルーム名がランダムに決定されます
• 一度接続できたが、その後できなくなった場合
  • ルーム内の過去のブロードキャストメッセージが残っている可能性があります
  • ルーム名を変更して、再度接続してみてください
• （例えば）会社と自宅で通信できない場合
  • → NATだけでなく、FirewallでUDP通信やポートが制限されている可能性があります
  • ※Firewallを超えての通信については、次回の記事で取り上げる予定です

Edge同士での通信

webrtc.orgが提供しているadapter.jsを使うと、多くのブラウザの差異を吸収することができます。最新のhttps://webrtc.github.io/adapter/adapter-latest.jsを読み込めば、Microsoft EdgeのサポートしてるORTCを、WebRTCのオブジェクトのインターフェイスを通して利用することができます。

残念ながらサポートしているビデオコーデックの制限で、ChromeやFirefoxとのビデオ通信はできませんが、Edge同士であれば今回のFirebaseを使ったシグナリングでビデオ/オーディオのP2P通信を行うことができます。

• GitHub Pages で試す multi_firebase_adapter.html (Chrome/Firefox）
• GitHub でソースを見る multi_firebase_adapter.html

注意点

• Edgeでは、同一のカメラを複数のウィンドウ/タブで利用することができません。同一PCで通信する場合は、複数のカメラを用意してください
• Edgeでは現在のところSTUNはサポートされていない(TURNのみサポート)ため、今回のサンプルでNATを越えた通信はできません

次回は

今回はFirebaseを使ってシグナリングを実現しました。次回はNAT/Firewallを超えてのWebRTC通信についてお届けする予定です。

2016年5月18～20日の3日間、Googleの本社ビルのすぐそばにあるショアライン・アンフィシアターでGoogle I/O 2016が開催されました。

例年5千名程の参加者から大幅に増えて、今年は実に約7千人の人々が参加していたようです。屋外イベント施設ということもあり、まるで野外フェスのような雰囲気でした。

本レポートではGoogle I/O最初のセッションである、基調講演の内容について紹介します。

Google Assistant

まず最初にスンダー・ピチャイ氏に紹介されたのが、Google Assistantです。

Google Assistantは新しい対話型のボイスアシスタント機能です。Google製のアシスタント機能といえばGoogle Nowがありますが、これを進化させ、対話型のシステムとしたのがGoogle Assistantのようです。コンテキストを認識し、ユーザーが質問すると現在地や直近のクエリーなどに応じて、適切に答えを返します。

例えば、有名な建築物の前で「これを設計したのは誰？」と質問すると、その場所の情報に応じて回答してくれます。

デモでは、ユーザーが「今夜やってる映画は？」と聞くと、Google Assistantは近くの映画館で上映しているタイトルをいくつか提示し、さらにユーザーが「子どもと一緒に行きたい」と言うと、子どもと一緒に鑑賞するのにふさわしいと思われる映画を提案していました。さらに「4枚チケットが必要ですか？」とGoogle Assistantが尋ねてくるので、ユーザが映画のタイトルや枚数を答えると、自動で予約し、チケットの情報を提示する、というデモが行われました。

このように、『提案をしてくれる』というのがGoogle Assistantの大きな特徴です。Google Assistantは基調講演の中で発表されたGoogle HomeやGoogle Alloなどの製品にも組み込まれるようです。

Google Home

続いてGoogle Assistantの機能を組み込んだGoogle Homeという製品が紹介されました。

Google Assistantのボイスアシスタント機能の他にWifiスピーカーとしての機能もあり、クラウドから音楽のストリーミング再生もできるようです。プレイリストやアルバムへのアクセスもボイスコントロールでき、Google Castを通して、AndroidやiOSのデバイスから音楽を送信することもできるとのことでした。

Amazon Echoと似たような製品のようです。大きさは手のひらに乗るくらいの小さなデバイスでした。今年の後半から使えるようになるとのことです。

Google Allo

次にAlloというモバイル用のメッセージングアプリが紹介されました。見た目はLineやFacebook messenger等と大差なく見えます。

文字や絵文字の大きさを自由に変えることができることが紹介されました。地味だが良い機能、ということで会場が少し盛り上がります。

しかし当然のことながら、ただのメッセージングアプリではありません。このAlloにはGoogle Assistantの機能が組み込まれており、なんとチャットのテキストや画像を解析して、返信用のテキストを複数提案してくれます。

例えば「Dinner later?」とチャットの相手が送ると、「I’m in!」「I’m busy」という返信用のメッセージが表示されます。ユーザは選んでクリックするだけでメッセージを送信することができます。

またチャット内の画像も解析されるので、誰かが犬の写真をアップロードすると、犬種も識別された上で、「Cude dog!」「Aww!」「Nice bernese mountain dog」といった返信メッセージが提示されます。

またGoogle Asisstantのbotががチャットの中に存在するようなかたちになっており、店のお店のサジェストや予約、検索等も対話形式でチャットの中で行うことができるようです。

さらにChromeのようにIncognito Modeが搭載されており、エンドツーエンドでの暗号化やNotificationの制御、メッセージの期限などを設定できるようになっているとのことです。

Google Duo

続いてDuoというビデオチャットアプリの紹介です。

ビデオチャットを実現するアプリは数多く世に出ていますが、このDuoにはビデオコールをかけられた側は、応答する前にそのビデオストリームを見ることができるという特徴があるようです。この機能は『Knock Knock』と呼ばれているそうで、これにより着呼側は誰が、どんな状況でコールしてきたのかを知ることができます。

コール先は電話番号に紐づくとのことで、AppleのFaceTimeの競合として考えられそうです。

DuoはWebRTCとQUICを使用したWebプロトコルベースのアプリと紹介されました。

AlloとDuoはAndroidとiOSで2016年夏頃リリースされる予定で、Android版では事前登録が開始されています。

• Google Allo
• Google Duo

Android N

続いてAndroid Nについての発表が行われました。

GoogleがAndroidの開発を行うようになってから、10年が経過したようです。今やAndroidはスマートフォンだけではなく、Android Wear、Android TV、Android Autoなど、多くのプラットフォームが登場しています。

Androidの最新バージョンであるAndroid Nは現在プレビュー版(6/28現在Developer Preview 4)が公開中です。こちらで名前の募集も行われていましたが、現在は終了し近日中に公開されるようです。

Android Nでは、新しいOSのアップデートがあると、自動的にソフトウェアをバッググラウンドでダウンロードし、次回Androidの電源を入れた際にシームレスで新しいソフトウェアイメージに切り替わるようです。

またマルチウィンドウが正式に採用され、スマートフォンでYoutubeを見ながら他のタスクを行ったり、Android TVでは映像を見ながら検索などの他の作業を行うことができるようになります。

現在はAndroid NのDeveloper Preview 4がリリースされており、Nexus 6やNexus 5X等の一部の対応した機種であれば、Android Nを試用することができます。(Android Developers Blog)

Daydream

続いてI/O開催前から噂が絶えなかったVRに関する発表です。

Androidスマートフォンで高品質なVR体験を提供可能であるDaydreamというプラットフォームが発表されました。

どのようにAndroidスマートフォン上で、高品質なVR体験を可能にするのか、講演では3つの要素が挙げられていました。 まずはスマートフォン本体、次にヘッドセットコントローラのリファレンスデザイン、そしてアプリで、ぞれぞれが協調してエンドツーエンドのユーザ体験を提供するために設計されています。

ハイパフォーマンスセンサーやヘッドトラッキング、表示のレスポンスの速さなど、VR用に作られた仕様を満たしたスマートフォンは、Daydream-readyと呼ばれ、高いクオリティのVR体験を提供することができます。Daydream-readyなスマートフォンは、SamsungやAlcatel、Asusなどの企業から、2016年秋以降リリースされるようです。発表された中に日本の企業はありませんでした。

リファレンスデザインとして紹介されたヘッドセットとコントローラは非常にシンプルなものでした。コントローラはボタンは少なくクリッカブルなタッチパッドがついており、スクロールやスワイプができます。オリエンテーションセンサーも内蔵しており、ユーザがどこをポインティングしているかが分かります。

アプリに関しては、VR用のGoogle Playが開発されており、ユーザーがアプリを探し、購入、インストールがVR上で可能になることが発表されました。またGoogle Play MoviesやGoogle Mapsのストリートビュー、Google Photos、YouTubeもVR上で鑑賞できるようになります。

Daydreamが使えるようになるのは2016年秋になるとのことですが、Android NのDeveloper Previewを使用することでアプリなどの開発は今から行うことができます。

Android Wear 2.0

Android Wearは2年前のGoogle I/Oで初めて発表されましたが、今回は初めて大幅なアップデートとなるAndroid Wear 2.0が発表されました。

大きな変化としては、今までAndroid Wearのアプリがインターネットにアクセスするためには母艦となるAndroidやiOSスマートフォンが必要であったことに対し、Android Wear 2.0ではスタンドアロンで動作することが可能になることが挙げられます。アプリが直接BluetoothやWi-Fi、LTEなどを通してインターネットにアクセスできるようになり、ペアリングされたスマートフォンが電源を切っている場合でも、アプリは引き続きフル機能を提供できるようになります。

その他にもUIの刷新や、手書き入力の対応等も発表されました。

Android Wear 2.0はプレビュー版が公開されおり、秋には正式リリースとなるようです。

Progressive Web AppsとAccelerated Mobile Pages

基調講演も終盤に差しかかり、ここで初めて、わずかですがWebについての発表がありました。 モバイルデバイス上でWebをより快適にするための取り組みとして、Progressive Web AppsとAccelerated Mobile Pagesの2つの紹介です。

Progressive Web Apps、略してPWAppsは、オフライン状態でも動作可能、エンゲージメントを高めるための通知、ホームスクリーンにアイコンを登録、といったネイティブアプリのような振る舞いを実現したWebアプリのことを指します。ChromeにはServiceWorkerをはじめとする、Progressive Web Appsを実現するための仕組みが実装されています。

Accelerated Mobile Pagesは、既存のWeb標準に基づいた非常に速いモバイルWebサイトを作るための、オープンソースのプロジェクトです。

特に新規発表はなく、基調講演内ではわずか1分程度の紹介でしたが、Google I/O全体では多くのPWAppsやAMPのセッションが行われていました。HTML5 Experts.jpでもGoogleが新たに提唱するProgressive Web Appsの新たな開発パターン「PRPL」とは？という記事を公開していますので、そちらをご覧ください。

Android Studio

Android Studio 2.2 Previewが公開されたと発表がありました。

Android Studio 2.2では、ビルドが10倍、エミュレータも3倍速くなっているそうです。また、新しいレイアウトデザイナやAPKアナライザーが搭載されるとのことでした。

Firebase

続いてFirebaseの新バージョンが発表されました。

FirebaseはGoogleが2014年の10月に買収したBaaSサービスです。モバイルアプリに特化した分析ツールである、Firebase Analyticsが発表されました。ユーザがアプリ内で何をしているか、ユーザがどこからきたのかなど分析することが可能です。Android AnalyticsはAndroidでもiOSも扱うことができ、無制限に無料で使用することができると発表されました。

Android Instant Apps

今回の基調講演の後半で一際注目を集めたのがこのAndroid Instant Appsではないでしょうか。

Webアプリの場合、ユーザはリンクをクリックするだけでアプリを使用することができますが、Androidアプリはインストールを必要とするため、ユーザがそこで離脱してしまうことが多くあります。その課題を解決する一手となるのが今回発表されたAndroid Instant Appsのようです。

今回発表されたAndroid Instant Appsでは、AndroidアプリがWeb等のリンクからインストールレスで使えるようなるとのことです。

講演中のデモの中では、いくつかのAndroidアプリをURLから起動し、実際にアプリを使用できることが示されていました。 アプリの中の直近で必要になるモジュールだけをフェッチしているらしく、起動も素早く行われ、アプリを使用してからのインストールも非常にスムーズに行えるようです。

これにより、Androidアプリ開発者は、より多くのユーザにリーチできるようになります。AndroidアプリとWebとの親和性が高くなり、Androidアプリのユーザ体験が大きく変わる機能となるのではないでしょうか。

おわりに

今年はGoogleのAIの技術力を発揮した製品やサービスが多く発表されました。

基調講演内でWebやChromeに関する発表は非常に少なかったのですが、Google I/O全体では33ものモバイルWebに関するセッションが行われていました。

既に公開されている

• 今、Webの最先端では何が起こっているのか？──最新機能目白押し！Google I/O 2016セッションレポート【前編】
• Webの最先端では何が起こっているか、今Googleが取り組んでいることは？──Google I/O 2016セッションレポート【後編】
• Googleが新たに提唱するProgressive Web Appsの新たな開発パターン「PRPL」とは？

以外にもセッションレポートを公開していく予定です。お楽しみに。

Firebaseはリアルタイム同期なデータベースを中心に、Auth認証やPushNotificationやユーザーの行動分析といったアプリケーションに最適な機能を提供するBasSです。先月行われたGoogle IOにて、PushNotificationや行動分析機能が追加されるなど話題となりました。

今回はFirebaseのリアルタイムベースとAngular2を用いて、リアルタイムにデータをやり取りする方法について解説します。

Firebaseのリアルタイムデータベース

Firebaseのリアルタイムデータベースはクラウドホスト型のNoSQLデータベースです。JSONの形式でデータは保存されます。 APIはもちろん、iOS/Android/Web用のSDKが提供されているので、非常に簡単に導入することができます。

また、ネットワークが途中で切れた場合は自動的に再接続を行い、復帰後に改めてデータが同期されます。同時100コネクション、1GBのデータ、10GBの転送量までは無料で使うことができるので、まず試してみるといったことができます。

今回はこの無料プランとAngular2を使って進めていきます。

Angular CLIで環境構築

Angular2の環境構築が初めての方でも簡単に導入できるように、Angular2ではCLIが公開されています。これを利用して環境を構築していきます。（※別途、Node.jsのインストールが必要です）

angular-cli

まずはnpmを使って、angular-cliをインストールします。

npm install -g angular-cli

インストールが成功していれば、ng versionでバージョンが表示されます。

angular-cli: 1.0.0-beta.5
node: 5.6.0
os: darwin x64

続いて、ng newコマンドを用いてプロジェクトを作成します。newの後には任意のプロジェクト名を入力してください。（angularやfirebaseという名称を用いるとパッケージ名が重複してしまうため、関連ライブラリのインストールに失敗するのでご注意ください）

ng new sample
cd sample

今回はng new sampleでプロジェクトを作成します。

sampleというフォルダができるのでcd sampleで移動し、この状態で ng serve コマンドを実行するとサンプルのアプリケーションがビルドされ、http://localhost:4200/にブラウザでアクセスするとsample works!と表示されます。

これで開発環境の準備が整いました。

AngularFire導入

本題のAngularFireを導入していきます。

angularfire2

npm install angularfire2 firebase@2.4.2 --save

※ 6月14日現在の最新版は、firebase 2.4.2に対応しています。

続いて、firebase用の型定義ファイルをインストールします。 typingsがインストールされていない場合は npm i -g typingsを実行してインストールをしてください。

typings install dt~firebase --save --global

※ 注意

typings 1系と0系では、コマンドやインストールされるファイルの構成が異なります。現在のバージョンのangular-cliでは0系でインストールされますが、npmでインストールされる最新版は1系になります。本稿では1系がインストールされている状態で解説を行います。0系の場合は以下のtypingsに追記する作業は必要ありません。

src/typings.d.tsにインストールされたfirebaseの型定義ファイル群を追記します。

/// <reference path="../typings/browser.d.ts" />
/// <reference path="../typings/index.d.ts" />
declare var module: { id: string };

angular-cli-build.jsを開き、vendorNpmFilesに'angularfire2/**/*.js' 'firebase/lib/*.js' を追記します。

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'angularfire2/**/*.js', // <- 追加
      'firebase/lib/*.js'      // <- 追加
    ]
  });
};

続いて、/src/system-config.tsに以下のようにfirebase,angularfire2の記述を追記します。

/** Map relative paths to URLs. */
const map: any = {
  'firebase': 'vendor/firebase/lib/firebase-web.js',
  'angularfire2': 'vendor/angularfire2'
};

/** User packages configuration. */
const packages: any = {
  angularfire2: {
    defaultExtension: 'js',
    main: 'angularfire2.js'
  }
}

これでAngular2でFirebaseを使う準備が整いました。

Firebaseの登録

続いて、Firebaseの登録と設定を行っていきましょう。

firebase

FirebaseはGoogleアカウントで登録することができます。登録が完了すると、プロジェクトを作るためのボタンが表示されます。

「新規プロジェクトを作成」ボタンをクリックして、アプリケーションを作成しましょう。

アプリケーションが作成できたら「Database」ページを開きます。 以下のように、まだデータベースには何も入っていません。まずはこの画面から初期データを登録してみましょう。

このようにデータを作成しました。

{
  items: {
    0: {
      value: 'item0001'
    },
    2: {
      value: 'item0002'
    },
    2: {
      value: 'item0003'
    }
  }
}

Firebase上では、すべてオブジェクトの形式でデータが構成されるようにしておきます。

続いて、「ルール」のタブをクリックしてルールを設定します。 ルールはデータベースへの値に対してのアクセス権の設定を行うことができます。JSONの形式でデータを定義していきます。

詳しいルールの記載は、以下のページに説明があります。 https://html5exp-sample.firebaseio.com/

ここではサンプルということで、読み書きともに誰からでもできるように設定しておきましょう。

{
  "rules": {
    "items": {
      ".read": "true",
      ".write": "true"
    }
  }
}

これによってデータベースのitems以下は、読み書きともに誰でも許可されるようになりました。では、これで登録したデータが読み取れるか試してみましょう。/src/main.tsを開きます。

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { SampleAppComponent, environment } from './app/';
import { FIREBASE_PROVIDERS, defaultFirebase } from 'angularfire2'; // <- add

if (environment.production) {
  enableProdMode();
}

bootstrap(SampleAppComponent,[
  FIREBASE_PROVIDERS, // <- add
  defaultFirebase('https://<your-firebase-app>.firebaseio.com/') // <- add
]);

main.ts にangularfire2のファイルをimportし、bootstrap関数の第２引数にFIREBASE_PROVIDERSと defaultFirebase('https://.firebaseio.com/') を配列で渡しておきます。

こうすることによって、今後Angular2のコンポーネント内でFirebaseに必要な設定とプロバイダが提供されるようになります。

続いて、画面にデータを表示するためのコンポーネントに変更を加えます。

import { Component } from '@angular/core';
import { AngularFire, FirebaseListObservable } from 'angularfire2'; //<- add

@Component({
  moduleId: module.id,
  selector: 'sample-app',
  templateUrl: 'sample.component.html',
  styleUrls: ['sample.component.css']
})
export class SampleAppComponent {
  title = 'sample works!';
  items: FirebaseListObservable<any[]>;
  constructor(af: AngularFire) {
		this.items = af.database.list('/items');
  }
}

<h1>{{title}}</h1>
<ul *ngFor="let item of items | async">
  <li class="text">
    {{item.value}}
  </li>
</ul>

*ngFor="let item of items | async" のasyncはAsyncPipeと呼ばれるAngular2にはじめから組み込まれているPipeのひとつです。これはitemsのObservableをsubscribeしたときの引数を自動的に取得して表示してくれるPipeです。詳しい使い方や解説は以下のページにありますので、こちらをご一読ください。

Async Pipe

ng serve コマンドを改めて実行すると、Firebaseで登録されたデータが表示されるようになります。

データの追加

次にブラウザからデータを追加する処理を実装していきましょう。

export class SampleAppComponent {
  title = 'sample works!';
  items: FirebaseListObservable<any[]>;
  constructor(af: AngularFire) {
    this.items = af.database.list('/items');
  }
  addItem(value:string) {
    this.items.push({value:value});
  }
}

<h1>{{title}}</h1>
<ul *ngFor="let item of items | async">
  <li class="text">
    {{item.value}}
  </li>
</ul>

<form (ngSubmit)="addItem(newItem.value);newItem.value=''">
  <input type="text" #newItem>
  <button>send</button>
</form>

FirebaseListObservableにデータをpushするだけで配列データにデータを追加することができます。

データの更新

今度はリストのデータを更新してみましょう。

export class SampleAppComponent {
  title = 'sample works!';
  items: FirebaseListObservable<any[]>;
  constructor(af: AngularFire) {
    this.items = af.database.list('/items');
  }
  addItem(value:string) {
    this.items.push({value:value});
  }
  updateItem(key:string,value:string) {
	  this.items.update(key,{value:value});
  }
}

<h1>{{title}}</h1>
<ul *ngFor="let item of items | async">
  <li class="text">
    {{item.value}}
    <input [(ngModel)]="item.value" (keyup)="updateItem(item.$key,item.value)"/>
  </li>
</ul>

<form (ngSubmit)="addItem(newItem.value);newItem.value=''">
  <input type="text" #newItem>
  <button>send</button>
</form>

this.items.update(key,{value:value});のように更新したいデータの$keyと値を渡すことで更新ができます。 Firebaseのオブジェクトには$keyというプロパティがあり、各データのKey名を取得することができます。 pushで追加されたデータは、一意なKeyが自動で振られるようになっています。

データの削除

続いて、リストのデータを削除してみましょう。

export class SampleAppComponent {
  title = 'sample works!';
  items: FirebaseListObservable<any[]>;
  constructor(af: AngularFire) {
    this.items = af.database.list('/items');
  }
  addItem(value:string) {
    this.items.push({value:value});
  }
  updateItem(key:string,value:string) {
	  this.items.update(key,{value:value});
  }
  deleteItem(key:string) {
	  this.items.remove(key);
  }
  deleteAll() {
	  this.items.remove();
  }
}

<h1>{{title}}</h1>
<ul *ngFor="let item of items | async">
  <li class="text">
    {{item.value}}
    <input [(ngModel)]="item.value" (keyup)="updateItem(item.$key,item.value)"/>
    
    <button (click)="removeItem(item.$key)">削除</button>
  </li>
</ul>

<form (ngSubmit)="addItem(newItem.value);newItem.value=''">
  <input type="text" #newItem>
  <button>send</button>
</form>

<button (click)="removeAll()">全削除</button>

更新と同様にthis.items.remove(key);と削除したいデータのKeyを渡すことで、そのデータのみを削除することができます。

this.items.remove();とKeyを渡さずにremoveするとリスト全体が削除されるので注意してください。

このように非常に簡単にデータの読み書きが実装できてしまいます。

オブジェクトデータの取り扱い

続いて、今度はリストデータでなく単一のオブジェクトのデータを扱ってみましょう。Firebaseの管理画面でDatabaseのデータに以下のようなconstantsを追加しました。

{
  constants: {
    title: "My first firebase app"
  },
  items: {
    ...
  }
}

ルール設定ページにいき、constantsは読み込み専用に設定しておきます。

{
  "rules": {
    "constants": {
      ".read": "true",
      ".write": "false"
    },
    "items": {
      ".read": "true",
      ".write": "true"
    }
  }
}

src/app/sample.component.tsを、以下のように修正します。

import { Component } from '@angular/core';
import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2'; //<- add

@Component({
  moduleId: module.id,
  selector: 'sample-app',
  templateUrl: 'sample.component.html',
  styleUrls: ['sample.component.css']
})
export class SampleAppComponent {
  constants: FirebaseObjectObservable<any>;
  items: FirebaseListObservable<any[]>;
  constructor(af: AngularFire) {
    this.constants = af.database.object('/constants');
    this.items = af.database.list('/items');
  }
  addItem(value:string) {
    this.items.push({value:value});
  }
  updateItem(key:string,value:string) {
    this.items.update(key,{value:value});
  }
  deleteItem(key:string) {
    this.items.remove(key);
  }
  deleteAll() {
    this.items.remove();
  }
}

そして、ビューのタイトル部分をconstantsから取得して表示させるようにします。

<h1>{{(constants | async)?.title}}</h1>
<ul *ngFor="let item of items | async">
  <li class="text">
    <input [(ngModel)]="item.value" (keyup)="updateItem(item.$key,item.value)"/>

    <button (click)="deleteItem(item.$key)">削除</button>
  </li>
</ul>

<form (ngSubmit)="addItem(newItem.value);newItem.value=''">
  <input type="text" #newItem>
  <button>send</button>
</form>

<button (click)="deleteAll()">全削除</button>

こうすることで、オブジェクトのデータを読み込んで画面に表示させることができました。

オブジェクトの更新

オブジェクトの更新をする際は、リストと同様にupdate関数を用いて変更を行うことができます。その時にはルールで書き込みが許可されている必要があります。

this.constants.update({title:"new title"});

オブジェクトの削除

オブジェクトの削除を行う際にはremove関数を用いますが、以下のようにremoveするとconstantsごと削除されます。

this.constants.remove(); // constantsごと削除

１つのプロパティのみを削除したい場合は、以下のように削除したいプロパティまで取得した上でremove関数を実行します。

af.database.object('/constants/title').remove(); //titleだけ削除

まとめ

このようにAngular2とFirebaseを使うことで、簡単にリアルタイムにデータのやり取りを行うことができるようになります。

今回はサンプルということで誰でも読み書きできる形にしていますが、ユーザー認証をFirebaseで作ったり、既にあるログイン情報を利用して認証させたりできるので、新規でも追加でも導入しやすくなっています。

次回はその認証機能を用いてログインすると書き込みができるようにしていきたいと思います。

Firebaseとは

Firebaseはデータストレージ、ユーザー管理などアプリケーションのバックエンドとして必要となる機能をサービスを提供することで、アプリケーション開発者がクライアントサイドの開発に集中できるようにしてくれるBaaS（Backend as a Service）の一種です。

2014年10月にGoogleに買収され、Google Cloud Platform（GCP）の一員となりました。この買収によりGCPにはPaaS（Platform as a Service）としてGoogle App Engine、IaaS（Infrastracture as a Service）としてGoogle Compute Engine、BaaSとしてFirebaseと、いわゆるXaaS系が一通り揃ったことになります。

Firebaseの特徴

Firebaseはもともとは開発者用APIを持つウェブサイトに埋め込み可能なリアルタイムチャットサービスとして始まりました。

しかし、多くのユーザーがチャットサービスとしてではなく、ゲームなどのアプリケーションでリアルタイムにデータを同期するために使用したため、創業者たちはチャットサービスのリアルタイムメッセージングシステムを切り出して別サービスとしました。これが現在のFirebaseの元となっています。

そのため、Firebaseは数あるBaasの中でも特にチャットアプリのようなリアルタイムにデータを同期する必要があるサービスに適しています。

Firebaseの機能

リアルタイムデータベース

FirebaseのデータベースはスキーマレスないわゆるNoSQLで、特定のアプリケーションに関係するデータ全体がひとつのJSONオブジェクトとして保持される点が大きな特徴です。

これによりデータが階層構造をなすため、それぞれのデータが一意のURLを持つことができます。例えばデータベース全体を指すURLは以下のようになります。

• https://アプリケーションID.firebaseio.com/

特定のデータを示すURLは以下のようになります。

• https://アプリケーションID.firebaseio.com/プロパティのパス

例えばアプリケーション名 my-first-chat-app のデータ全体が以下の様であるとして

{
  "messages" : {
    "-K5kPGFquoTbqHYQqBRS" : {
      "body" : "message",
      "name" : "name"
    },
    "-K5kPUqfBfdj4bAa1fyv" : {
      "body" : "message2",
      "name" : "name2"
    },
    "-K5kR-lwtG4I5w9T36Xq" : {
      "body" : "message3",
      "name" : "name3"
    }
}

最初のメッセージ（messages/-K5kPGFquoTbqHYQqBRS）の内容だけを確認したいのであれば、次のURLをブラウザで表示すればいいということになります。

• https://my-first-chat-app.firebaseio.com/messages/-K5kPGFquoTbqHYQqBRS

特定データの表示

認証

Firebaseを使用すると非常に簡単にユーザー認証をアプリケーションに組み込むことができます。組み込みの認証機構としては、メールアドレスとパスワードを使用した認証、OAuthを使用した認証（Facebook, Twitter, GitHub, Google）、匿名ログインがあり、加えてJSON Web Tokens (JWTs)を使用して既存の任意の認証システムと連携することも容易です。

ホスティング

HTML、CSS、JS、画像などの静的なアセットは、Firebaseコマンドラインツールを使用して自身のドメイン上（アプリケーションID.firebaseapp.com）、もしくは有料プランであれば独自ドメイン上に簡単にデプロイすることができます。

さらにデプロイの履歴は管理画面で見ることができ、問題があった場合には以前のバージョンにロールバックすることも可能です。

コマンドラインツール

Firebaseのホスティングサービスを利用するにはFirebaseコマンドラインツールを使用する必要があります。node.jsとnpmがインストールされていればコマンドツールは以下のコマンドで簡単にインストールできます。

$ npm install -g firebase-tools

firebaseコマンドで利用可能なサブコマンドは、以下のとおりです。

firebase init

プロジェクトディレクトリを初期化します。ホスティングサービスに必要なすべての設定は当コマンドによりプロジェクトディレクトリルートに作成されるfirebase.jsonファイルに含まれます

firebase deploy

現在のプロジェクトをサーバーにデプロイします

firebase disable:hosting

ホスティングを無効にし、アクセスに対し”Site Not Found”ページを表示するようにします

firebase login

コマンドラインツールをログインします

firebase logout

コマンドラインツールをログアウトします

firebase list

現在ログイン中のユーザーが利用可能なFirebaseアプリの一覧を表示します

APIとSDK

FirebaseデータベースにはREST APIがあり、さらにそのAPIを利用する各種環境用のクライアントライブラリが標準で用意されています。

• Web（JavaScript）
• iOS（Objective C）
• Android（Java）

なお、これらの標準クライアントライブラリを使用するとFirebaseはオフラインでの動作が保証されます。つまりネットワーク接続がない場合でも、Firebaseデータベースの読み書きの対象を一旦ローカルのキャッシュとすることで、アプリケーションは正常に動作します。その後、接続が復活した時に内容がサーバーと同期されます。

また、標準ライブラリに加えて、REST APIを使用する非公式なライブラリとして以下の様なものもあります。これ以外にもいろいろとありますので、サーバーサイドで自分の好きな言語を利用したい場合はGitHubなどで検索してみるといいでしょう。

• Python-Firebase（Python）
• Firebase-Php（PHP）
• Firebase-Ruby（Ruby）
• BigBertha（Ruby）
• Rest-Firebase（Ruby）

なお、標準クライアントライブラリを使用した場合はオフラインでの動作が保証されますが、非公式ライブラリを使用した場合はその限りではありません。

サンプルアプリケーション

Firebaseを使用した基本的なアプリケーション開発の流れを確認するために簡単なチャットアプリケーションを作成してみましょう。先に紹介したとおりFirebaseクライアントライブラリは環境に応じて複数ありますが、今回はJavaScript版クライアントライブラリを使用してWebアプリケーションを作成します。

サンプルチャット

Firebaseアプリケーション作成

まずはじめに、今回のサンプルから使用するデータベースを用意するため、ウェブコンソールからFirebaseアプリケーションを作成します。http://firebase.com/ を開き、画面右上のログインボタンをクリックしてログインしてください。

アカウントを新たに作成しても構いませんし、GoogleアカウントやGitHubアカウントを使用してログインすることもできます。

Firebaseログイン後

ログイン後、左下の入力エリアにアプリ名とアプリURLを入力して、アプリを作成します。今回は以下の様な設定を使用するものとします。

Firebaseアプリ新規作成

サーバーサイドで行う作業は以上です。これだけでNoSQLデータベースが作成され、クライアントアプリから自由に利用できるようになりました。

サンプルアプリケーションの初期化

サンプルアプリケーションは最終的にFirebaseホスティングサービスを利用するため、まずfirebase initコマンドを実行してプロジェクトディレクトリを初期化します。

% firebase init

? What Firebase do you want to use? my-first-chat-app
? What directory should be the public root? public
✔  Public directory public has been created
Firebase initialized, configuration written to firebase.json

初期化にあたって

1. アプリ名
2. デプロイするファイルを配置するディレクトリ

を聞かれるので、アプリ名は先程作成したものを、ディレクトリ名はデフォルトのpublicを設定してください。

ウェブアプリケーション作成

それではここから実際に冒頭のサンプルアプリケーションを作成していくこととします。といっても必要となるのはHTMLファイルが一つだけ、それも非常に小さなものですので先に全体を見てしまいましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Firebaseサンプル1</title>
  </head>
  <body>
    <div>
      <input id="name" placeholder="名前" />
      <input id="message" placeholder="メッセージ" />
      <button id="send">投稿</button>
    </div>
    <ul id="messages">
    </ul>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
    <script src="https://cdn.firebase.com/js/client/2.3.2/firebase.js"></script>
    <script>
      // データベースの参照を準備
      var firebaseRef = new Firebase("https://my-first-chat-app.firebaseio.com/"); // ... 1
      var messagesRef = firebaseRef.child('messages'); // ... 2

      // 既存メッセージを表示
      messagesRef.on('child_added', function(snapshot) { // ... 3
        var msg = snapshot.val();
        $('<li>').text(msg.name + ': ' + msg.body).prependTo('#messages');
      });

      $('#send').click(function() {
        // 新規メッセージを投稿
        messagesRef.push({ // ... 4
          name: $('#name').val(),
          body: $('#message').val()
        });
      });
    </script>
  </body>
</html>

今回のサンプルアプリケーションのコードはこれだけ、コメントや空行を除けばJavaScript部分はたったの12行です。このコードをローカルに保存し、ブラウザで開いてみてください。HTMLを含めて全体でも40行弱のコードですが、複数ブラウザで開いて、一方でメッセージを入力すればその内容はリアルタイムに他方に反映され、（かろうじて）チャットとして利用できます。

コードの詳細については次回以降に譲りますが、簡単に説明すると、行われている処理は以下のとおりです。

1. アプリケーションURLを引数としてFirebaseオブジェクトをインスタンス化し、前節で作成したFirebaseデータベースに接続するためのオブジェクトを生成します。
2. Firebaseデータベースのmessagesオブジェクトへの参照を取得します。この参照への操作はサーバー上のFirebaseデータベースに保存されることになります。
3. messagesオブジェクトに子ノードが追加された場合のコールバック関数を登録します。今回はコールバック関数内でメッセージの内容をli要素としてul要素に追加しています。なお、onメソッドで登録されたコールバック関数はHTMLの初回読み込み時にも実行されるため、初回読み込み時用の処理を特別に記述する必要はありません。
4. messagesオブジェクトに子ノードを追加します。

オフライン対応の確認

さて、ここで一つ面白い実験をしてみましょう。複数のブラウザでサンプルアプリを開き、使用しているコンピューターのネットワークをOFFにしてください。

そのまま一方の画面でメッセージをいくつか入力すると、メッセージを入力した画面では新しいメッセージがリストに追加されますが、他方の画面にはメッセージが追加されません。

その状態でコンピューターのネットワークをONにするとどうでしょう。少し経って他方の画面にもメッセージが表示されるのが確認できるはずです。

ネットワークが正常

実はFirebaseデータベースの読み書きはいったんローカルDBを経由して行われています。そのためネットワーク接続が不通の場合もローカル側の処理は正常に完了し、ネットワークが回復すると自動的にデータがサーバーと同期されるのです。

ネットワーク異常発生

ネットワーク復旧

これによりアプリケーション開発者はネットワークの状態を一切意識することなくリアルタイムアプリケーションを作成することができます。

リアルタイムに状態を同期する必要がある場合、この機能だけでもFirebaseを採用する価値があるのではないかと私は思うのですが、みなさんはいかがでしょうか？

データベースの内容確認

サンプルアプリにメッセージをいくつか書き込んだらダッシュボードでデータベースがどうなっているか、内容を確認してみましょう。https://アプリケーションID.firebaseio.com/ にアクセスしてみてください。

データベース確認

ちゃんと登録されています。

ちなみにこのダッシュボードから値を変更することもでき、その場合ももちろんクライアント側のイベントハンドラが発火され、ブラウザ側の表示はリアルタイムに変更されます。

デプロイ

最後に、今回のアプリケーションをFirebaseにデプロイして実際に利用できるようにします。firebase initコマンドを実行したディレクトリでfirebase deployコマンドを実行してください。

% firebase deploy

=== Deploying to 'my-first-chat-app'...

i  deploying hosting
i  preparing public directory for upload...
✔  1 files uploaded successfully

✔  Deploy complete!

URL: https://my-first-chat-app.firebaseapp.com/
Dashboard: https://my-first-chat-app.firebaseio.com/

Visit the URL above or run firebase open

では、ブラウザで https://my-first-chat-app.firebaseapp.com/ を開いてみましょう。開発時と同じデータベースを参照しているので先ほど入力したメッセージがここでも表示されています。

ちなみにアプリのドメインは firebaseapp.com で、ダッシュボードのドメインは firebaseio.com です。うっかり打ち間違えないように気をつけましょう。

まとめ

いかがでしょう。Firebaseを使用すれば非常に簡単にリアルタイムアプリケーションが作成できるということが分かっていただけたのではないでしょうか。

今回はFirebaseの全体的な機能の概要を説明しました。次回はもう少し複雑なアプリケーションを作りながら、Firebaseのそれぞれの機能をより詳細に掘り下げていきたいと思います。お楽しみに。