mBaaSの大本命グーグルのFirebaseを試してみた！基本編

みなさん、Firebaseをご存知ですか？ Firebaseとは、すばやく高品質のモバイルアプリを開発することができるプラットフォームで、開発に役立つ数多くの機能が用意されています。

元々Firebaseという名前の企業が提供するサービスでしたが、Google が2014年に買収し、GCPに加わりました。Google は2017年の1月にTwitterのモバイル開発プラットフォームであるFabricの買収も行っており、Fabricの主要な機能であるクラッシュ報告ツール「Crashlytics」などは、Firebaseのメインクラッシュ報告ツールとしても採用する計画のようです。

本記事では、そんな着々と強化されているFirebaseの基本的な部分を紹介してみたいと思います！

※mBaaSとは、mobile backend as a Serviceの略で、モバイルアプリ開発のバックエンド側のインフラを提供するサービスのことです。開発で必要になる汎用的な機能があらかじめ備えられており、これを利用することでバックエンド側の開発コストを抑え、アプリ側の開発に集中することができます。Firebaseもその中の一つという位置づけです。

※本記事内での動作確認はMac (10.12.5)で行いました。

さくっと知るFirebase！
- A.開発系
- B.運用系
気になるFirebaseの料金！
試してみようFirebase！
おわりに

さくっと知るFirebase！

冒頭でも紹介しましたが、Firebaseとはモバイルアプリ開発のバックエンドの機能をすばやく、簡単に用意するためのいわゆるmBaaSです。そして数多くの機能を用意していることも特徴です。

下記は、Firebase公式TOPページにある機能の一覧（一部）になります。

機能がズラリ。一つ一つ紹介するには数が多いですね。

さて、Firebaseがどのようにアプリ開発に絡んでくるのでしょうか？
それをイメージするために、ユーザ向けのアプリケーション一式を用意する場合の構成をざっと考えてみます。

A.開発系
1.ユーザ向けのアプリケーション Webアプリやスマホアプリ(Android,iOS)
2.アプリ用のAPIサーバ
3.アプリに必要となる情報を保存するデータベースサーバ
4.アプリ紹介用のWEBページ

B.運用系
1.データ登録用管理画面
2.利用状況(ログ等)を記録する仕組み
3.収益化関連の仕組み

こんなところでしょうか。このうちどこがFirebaseの各機能で対応できるか？ということを考えてみたいと思います。

下記は全体のイメージ図になります。

それぞれについてコメントしていきます。

A.開発系

1.ユーザ向けのアプリケーション: これは開発するアプリそのものなので、Firebaseがメインを担当する部分ではありません。しかしFirebaseの各機能にSDKを通して簡単にアクセスすることができるので、開発効率がその分向上する面はあります。
2.アプリ用のAPIサーバ: 一番最初にサーバ側で必要になるのがAPIサーバですよね。Cloud Functions for Firebaseなら、node.jsで関数をちょろっと書くとそれがそのままAPIになります！認証が必要であればFirebase Authenticationという機能を噛ませることで楽に実現できます。
3.アプリに必要となる情報を保存するデータベースサーバ: データベースには、各クライアント間で即座に内容が同期されるKey-Value型DBのFirebase Realtime Databaseというものがあります！画像や動画など、大きめのファイルを扱いたい場合はCloud Storage for Firebaseを、設定などはFirebase Remote Configという機能で管理できます。
4.アプリ紹介のWebページ: 簡単な紹介ページや、利用規約等アプリに埋め込みたくないコンテンツを置いておくサーバをわざわざ用意する必要はありません。Firebase Hostingという機能で簡単にそれらコンテンツを展開することができます。

B.運用系

1.データ登録用管理画面: Firebaseサービス自体にFirebase Realtime Databaseや、Cloud Storage for Firebaseの内容を編集できるFirebase Consoleが用意されているため、凝ったものが必要でなければ最初から管理画面が付属していることになります！
2.利用状況(ログ等)を記録する仕組み: Firebase Analyticsという完全無料の分析機能を利用でき、代表的なイベントはSDKが自動的に収集してくれます。細かく解析したい場合は、Google Cloud Platform(GCP)の1サービスであるGoogle BigQueryにログをエクスポートする機能も備えています。
3.収益化関連の仕組み: 広告系のサービスである、AdMobやAdWordsも容易に連携できるようになっています。

それぞれの項目に対応するFirebaseの機能が用意されていることがわかると思います。

これらの機能のために、従来のようにOSイメージを選んでインスタンスを立ち上げたり、sshでインスタンスにログインして環境をセットアップしたり、スケーラビリティのための仕掛けを構築したりする必要はありません。Firebaseを利用すれば、コードを書いてデプロイすれば直ぐ利用可能になるものばかりで、スケーラビリティもFirebase任せでOKです。

モバイルアプリは作れるけどサーバはちょっと敷居が高いかな、と感じているアプリケーション開発者も多いでしょう。mBaaSであるFirebaseはそんな人々に大きな力をあたえるプラットフォームなのです！

気になるFirebaseの料金！

良いことずくめな紹介を見て「これはいい！でも料金は…？」と思ったそこのあなた。
Firebaseではシンプルに3つの料金プランを用意しています。
※各プラン内の詳しい数字はFirebase公式ページをご覧下さい。ここでは簡単な紹介に留めます。

Sparkプラン～趣味に熱中する人のための寛大な制限～

無料です。お金かかりません。すぐに気兼ねなく使い始められます。
殆どの機能がそれぞれの使用量/回数に制限があり、それを超えるとエラーになるような形となります。仮に超えてしまっても勝手に課金されることはありません。

例を挙げると、サーバAPIの代わりとなるCloud Functions for Firebaseの呼び出しは月に12.5万まで。日に平均4000件くらいは無料で捌ける計算になります。ただし、SparkプランではCloud Functions for FirebaseのアウトバウンドネットワーキングがGoogle専用なので、Cloud Functions for Firebase内から一般のAPIは利用できません！そこは注意が必要な点となります。

Flameプラン～アプリの拡大で予測可能な料金～

こちらは定額課金のプランで、月に$25(2017年9月現在)となっており、各機能の上限がSparkプランよりも増えた形になっています。Cloud Functions for Firebaseのアウトバウンドネットワーキングの制限が無くなる他、サービスの利用者数が事前にある程度予測がついているのであれば、後述する従量課金のBlazeプランと料金を比較した結果、このプランのほうがお得に活用できる可能性があります。

Blazeプラン～大規模なアプリ:計算できる明朗な価格で無制限に～

このプランは従量課金制となっています。その他、SparkプランおよびFlameプランでは利用できないFirebase Realtime Databaseの自動バックアップや、Google Analytics for FirebaseからデータをGoogle BigQueryにエクスポートするといった機能が利用できるようになります。Firebase Realtime Databaseの同時接続数は100,000となっており、これを上げたい場合はサポートに連絡が必要です。それ以外は完全従量課金＆無制限となっています。

試してみようFirebase！

Firebaseの概要はこれくらいにして、次は実際にFirebaseを試す手順を紹介します！
機能があまりにも多岐に渡るので、Firebaseの特徴的な機能でもあるFirebase Realtime Databaseの小さなサンプルに絞って試してみたいと思います。

サンプルは、テキストボックスが一つだけ配置されたWebアプリで、複数のウィンドウで開いている時にいずれかのウィンドウに入力した結果が、その他のウィンドウ全てで即座に反映される機能を持つものを作ります！

このサンプルには、最初に紹介したイメージ図のうち、赤枠で囲んだ部分の内容が含まれます。

ここに含まれない部分に関しては今後の記事で紹介予定です！

今回紹介するサンプルは無料でも試せますので、是非試してみましょう。

Firebaseプロジェクトを作成する

まずは、Firebaseのプロジェクトを作成するところを見てみたいと思います。
Firebaseのプロジェクトを作成するには、Googleアカウントが必要になります。
もしアカウントが無いのであれば、新しく作成してください。

Googleアカウントの作成
https://accounts.google.com/SignUp?hl=ja

アカウントの用意ができましたら、Firebaseのプロジェクトを作成するために、Firebase consoleにアクセスします。
https://console.firebase.google.com/?hl=ja

上記URLにアクセスすると、次のようなGoogleアカウントのログイン画面が表示されますので、メールアドレスとパスワードを入力してログインを行います。
※既にログイン済みであれば表示されません

ログインすると次のような画面が表示されますので、「プロジェクトを追加」をクリックします。

プロジェクト名と、国/地域を選択してプロジェクトを作成します。

次のような画面が表示されれば、プロジェクトの作成は完了です。

ウェブアプリにSDKを組み込む

Firebaseはモバイルのためのバックエンドサービスですが、ここでは簡単のため、ウェブアプリに組み込んで利用してみます。
アプリの本体となる、index.htmlを次のような内容で用意します。

index.html

コード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Firebase Sample</title>
  </head>
  <body>
    Hello, Firebase!
  </body>
</html>

用意できたら実行してみましょう。サーバとして動作させる方法はなんでも良いですが、今回は下記のコマンドで動かしてみています。

コード

cd <index.htmlがあるディレクトリ>
python -m SimpleHTTPServer 5000

サーバをhttp://localhost:5000で立ち上げました。早速アクセスしてみましょう。

アプリの実行が確認できましたので、次はindex.htmlを修正して、SDKの組み込みを行います。Firebase consoleの概要からWebを選択すると、組み込み方法が表示されます。

上記内容に従って、index.htmlを修正してください。

index.html

コード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Firebase Sample</title>
  </head>
  <body>
    Hello, Firebase!
  </body>
  <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
  <script>
    // Initialize Firebase
    var config = {
      apiKey: "<your api key>",
      authDomain: "<your domain>",
      databaseURL: "<your database url>",
      projectId: "<your project id>",
      storageBucket: "<your storage bucket>",
      messagingSenderId: "<user senderId>"
    };
    firebase.initializeApp(config);
  </script>
</html>

これでFirebaseにアクセスする準備は整いました。
次に、Firebaseの機能を利用するための実装を行っていきます。

Firebase Realtime DatabaseのAPIを利用してみる

Firebase Realtime Databaseはその名が示すとおり、各クライアント間でリアルタイムにデータが更新される動きを、簡単にサポートできるAPIとなります。

これは本記事の最初に記載したアプリケーション構成要素の、アプリに必要となる情報を保存するデータベースサーバとして利用できる部分となります！

Firebase consoleでDatabaseをクリックすると、Firebase Realtime Database用の画面が表示されます。「データ」タブで表示されているJSON形式のデータが、Firebase Realtime Databaseの実際のデータになります。

このデータベースの値は、Firebase consoleにて直接編集できます。
この編集機能は運用系のデータ登録用管理画面に相当する機能になります！

早速、今回のサンプルで利用する形になるよう編集してみたいと思います。

トップレベルのオブジェクトにカーソルを当てると、Addアイコンが表示されますのでそれをクリックします。

Addアイコンをクリックすると、名前(Key)と値(Value)を入力する項目が現れますので、Keyには”sampleKey”と、値はなんでもかまいません。

Enterキーか、「追加」ボタンをクリックすると、データの更新が行われます。

これで、データの追加が完了しました。

次に、「ルール」タブを選択します。ここで表示されているJSON形式のデータが、Firebase Realtime Databaseの書き込みと読み込みの権限を設定する条件を示したものとなっています。デフォルトでは認証されているユーザのみ読み書きができる設定となっていますが、ここでは簡単のため次のように誰でも読み書き可の設定を行っておきます。

ここまで設定した後は、index.htmlの修正に戻ります。
今回のサンプルでは、データベースに用意した値をリアルタイムに取得する部分と、その値を変更する部分までを扱います。
以下、ウェブアプリのソースになります。

index.html

コード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Firebase Sample</title>
  </head>
  <body>
    SampleKey :
    <input type="text" id="valueInput" placeholder="Message">
    <input type="button" id="updateButton" value="更新"/>
  </body>
  <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
  <script>
    // Initialize Firebase
    var config = {
      apiKey: "<your api key>",
      authDomain: "<your domain>",
      databaseURL: "<your database url>",
      projectId: "<your project id>",
      storageBucket: "<your storage bucket>",
      messagingSenderId: "<user senderId>"
    };
    firebase.initializeApp(config);
  </script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
  </script>
  <script>
  var db = firebase.database();
  var root = db.ref("/");
  root.on("value", function(snapshot) {
    $('#valueInput').val(snapshot.val().sampleKey);
  });
  $('#updateButton').click(function(){
    root.set({sampleKey:$('#valueInput').val()});
  });
  </script>
</html>

※Initialize Firebaseの項目は、Firebase console上で表示されたものを設定してください。

データを取得/監視する

データの取得、およびリアルタイムの変更監視は以下の部分で行っています。

コード

 var db = firebase.database();
  var root = db.ref("/");
  root.on("value", function(snapshot) {
    $('#valueInput').val(snapshot.val().sampleKey);
  });

Firebase RealtimeDatabaseへアクセスするためのオブジェクトを取得し、データへのリファレンスオブジェクトを取得します。ここではパスとしてルート”/”を指定しているので、すべてのデータの変更を監視していることになります。
リファレンスオブジェクトに対してonメソッドを設定しておくと、変更があった際にfunction(snapshot)がコールされます。また、初回実行時に必ず1回呼び出されるようになっているため、このように書いておくだけで初回の取得、およびこれ以降の変更をこのメソッド一つで検知することができます。snapshotオブジェクトに対してval()メソッドを呼び出すと、監視対象のJSONオブジェクトが取得できます。
今回は、Firebase consoleで設定した次のようなオブジェクトが取得できることになります。

コード

{ sampleKey: “sampleValue” }

データを更新する

データの更新処理は以下の部分で行っています。

コード

$('#updateButton').click(function(){
    root.set({sampleKey:$('#valueInput').val()});
  });

rootは先程のリファレンスオブジェクトです。このオブジェクトのset関数を呼び出し、引数に更新内容のJSONオブジェクトを指定します。

動作を確認する

更新がすぐに反映されることを確かめるために、ブラウザのウィンドウを2つ用意して、ローカルサーバにアクセスしましょう。
片方のウェブアプリで任意の文字列を入れ、「更新」ボタンを押してください。
もう片方のウェブアプリにも、すぐ内容が反映されることが確認できるかと思います。

また、更新内容はFirebase consoleにも反映されます。

もちろん、Firebase console側の値を直接編集した結果も、ブラウザに即反映されます！！
これといって同期感のあるコードを書かずにこの動きが作れるのは壮快ですね！
データはFirebase上に保存されているので、ブラウザを再度立ち上げてももちろん前回入力したデータが残っています。

おわりに

Firebaseって何？mBaaSってどういうもの？と思っていた方、イメージが湧きましたでしょうか？スマートフォンアプリ開発者の方、Firebaseを触ってみる気になりましたでしょうか？
肝心のスマホ側のSDKの紹介までは長さの関係で省きましたが、AndroidでもiOSでも、Firebase Realtime DatabaseSDKの使い方は今回紹介したJavaScriptのSDKと同じようなコードになります。一通り全部一人で作りたいんだよネなんていう人には学習コスト的に非常にオススメです！
Firebaseを入り口に、GCPに興味をもって構築できるシステムの選択肢を広げる楽しさもあると思います！今すぐ始めましょう！

apps-gcpでは今回紹介しきれなかったFirebaseの各機能についての記事も続々リリース予定です。ぜひチェックしてみてください！

弊社ではクラウドエース(Cloud Ace)というGCPの導入・運用支援サービスを提供しております。お悩み・ご相談がある場合はこちらまでお問い合わせください。

さくっと知るFirebase！

A.開発系

B.運用系

気になるFirebaseの料金！

Sparkプラン ～趣味に熱中する人のための寛大な制限～

Flameプラン ～アプリの拡大で予測可能な料金～

Blazeプラン ～大規模なアプリ:計算できる明朗な価格で無制限に～

試してみようFirebase！

Firebaseプロジェクトを作成する

ウェブアプリにSDKを組み込む

Firebase Realtime DatabaseのAPIを利用してみる

データを取得/監視する

データを更新する

動作を確認する

おわりに

Sparkプラン～趣味に熱中する人のための寛大な制限～

Flameプラン～アプリの拡大で予測可能な料金～

Blazeプラン～大規模なアプリ:計算できる明朗な価格で無制限に～