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！

冒頭でも紹介しましたが、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 に興味をもって構築できるシステムの選択肢を広げる楽しさもあると思います！
今すぐ始めましょう！

クラウドエースは、 Google Cloud™ を専門としたクラウドインテグレーターです。Google Cloud アプリケーション開発において国内初で唯一の全世界パートナーアワードを受賞していますので、アプリケーション開発 でお困りの際は一度お気軽にお問い合わせください！

その他、Firecaseをはじめとした Google Cloud プロダクトやクラウドエースについて詳しく知りたいという方は、こちらの無料資料も合わせてぜひ御覧ください。