views4GCPのストレージサービスについてまとめてみた。Exp:36854お酒とゲームが大好きエンジニア。TweetShareHatena注意この記事は2017年10月3日に更新されたもので、内容が古い可能性がありますのでご注意ください。Firebaseとは、すばやく高品質のモバイルアプリを開発することができるプラットフォームで、開発に役立つ数多くの機能が用意されています。2014年に買収し、GCPに加わりました。2017年の1月にTwitterのモバイル開発プラットフォームであるFabricの買収も行っており、Fabricの主要な機能であるクラッシュ報告ツール「Crashlytics」などは、Firebaseのメインクラッシュ報告ツールとしても採用する計画のようです。Serviceの略で、モバイルアプリ開発のバックエンド側のインフラを提供するサービスのことです。開発で必要になる汎用的な機能があらかじめ備えられており、これを利用することでバックエンド側の開発コストを抑え、アプリ側の開発に集中することができます。Firebaseもその中の一つという位置づけです。(10.12.5)で行いました。DatabaseのAPIを利用してみるデータを取得/監視するデータを更新する動作を確認するおわりにさくっと知る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サーバですよね。Authenticationという機能を噛ませることで楽に実現できます。Configという機能で管理できます。4.アプリ紹介のWebページ簡単な紹介ページや、利用規約等アプリに埋め込みたくないコンテンツを置いておくサーバをわざわざ用意する必要はありません。Hostingという機能で簡単にそれらコンテンツを展開することができます。Analyticsという完全無料の分析機能を利用でき、代表的なイベントはSDKが自動的に収集してくれます。BigQueryにログをエクスポートする機能も備えています。3.収益化関連の仕組み広告系のサービスである、AdMobやAdWordsも容易に連携できるようになっています。それぞれの項目に対応するFirebaseの機能が用意されていることがわかると思います。これらの機能のために、従来のようにOSイメージを選んでインスタンスを立ち上げたり、sshでインスタンスにログインして環境をセットアップしたり、スケーラビリティのための仕掛けを構築したりする必要はありません。Firebaseを利用すれば、コードを書いてデプロイすれば直ぐ利用可能になるものばかりで、スケーラビリティもFirebase任せでOKです。モバイルアプリは作れるけどサーバはちょっと敷居が高いかな、と感じているアプリケーション開発者も多いでしょう。mBaaSであるFirebaseはそんな人々に大きな力をあたえるプラットフォームなのです!気になるFirebaseの料金!良いことずくめな紹介を見て「これはいい!でも料金は...?」と思ったそこのあなた。Firebaseではシンプルに3つの料金プランを用意しています。※各プラン内の詳しい数字はFirebase公式ページをご覧下さい。ここでは簡単な紹介に留めます。~趣味に熱中する人のための寛大な制限~無料です。気兼ねなく使い始められます。殆どの機能がそれぞれの使用量/回数に制限があり、それを超えるとエラーになるような形となります。仮に超えてしまっても勝手に課金されることはありません。Firebaseの呼び出しは月に12.5万まで。日に平均4000件くらいは無料で捌ける計算になります。Firebase内から一般のAPIは利用できません!そこは注意が必要な点となります。~アプリの拡大で予測可能な料金~こちらは定額課金のプランで、月に$25(2017年9月現在)となっており、各機能の上限がSparkプランよりも増えた形になっています。Firebaseのアウトバウンドネットワーキングの制限が無くなる他、サービスの利用者数が事前にある程度予測がついているのであれば、後述する従量課金のBlazeプランと料金を比較した結果、このプランのほうがお得に活用できる可能性があります。~大規模なアプリ:計算できる明朗な価格で無制限に~このプランは従量課金制となっています。BigQueryにエクスポートするといった機能が利用できるようになります。Databaseの同時接続数は100,000となっており、これを上げたい場合はサポートに連絡が必要です。それ以外は完全従量課金&無制限となっています。Databaseの小さなサンプルに絞って試してみたいと思います。サンプルは、テキストボックスが一つだけ配置されたWebアプリで、複数のウィンドウで開いている時にいずれかのウィンドウに入力した結果が、その他のウィンドウ全てで即座に反映される機能を持つものを作ります!このサンプルには、最初に紹介したイメージ図のうち、赤枠で囲んだ部分の内容が含まれます。ここに含まれない部分に関しては今後の記事で紹介予定です!今回紹介するサンプルは無料でも試せますので、是非試してみましょう。Firebaseプロジェクトを作成するまずは、Firebaseのプロジェクトを作成するところを見てみたいと思います。Firebaseのプロジェクトを作成するには、Googleアカウントが必要になります。アカウントが無いのであれば、新しく作成してください。consoleにアクセスします。https://console.firebase.google.com/?hl=ja上記URLにアクセスすると、次のようなGoogleアカウントのログイン画面が表示されますので、メールアドレスとパスワードを入力してログインを行います。※既にログイン済みであれば表示されませんログインすると次のような画面が表示されますので、「プロジェクトを追加」をクリックします。プロジェクト名と、国/地域を選択してプロジェクトを作成します。次のような画面が表示されれば、プロジェクトの作成は完了です。ウェブアプリにSDKを組み込むFirebaseはモバイルのためのバックエンドサービスですが、ここでは簡単のため、ウェブアプリに組み込んで利用してみます。アプリの本体となる、index.htmlを次のような内容で用意します。</body></html>用意できたら実行してみましょう。サーバとして動作させる方法はなんでも良いですが、今回は下記のコマンドで動かしてみています。5000サーバをhttp://localhost:5000で立ち上げました。アクセスしてみましょう。アプリの実行が確認できましたので、次はindex.htmlを修正して、SDKの組み込みを行います。consoleの概要からWebを選択すると、組み込み方法が表示されます。上記内容に従って、index.htmlを修正してください。</script></html>これでFirebaseにアクセスする準備は整いました。次に、Firebaseの機能を利用するための実装を行っていきます。Databaseはその名が示すとおり、各クライアント間でリアルタイムにデータが更新される動きを、簡単にサポートできるAPIとなります。Database用の画面が表示されます。Databaseの実際のデータになります。consoleにて直接編集できます。この編集機能は運用系のデータ登録用管理画面に相当する機能になります!早速、今回のサンプルで利用する形になるよう編集してみたいと思います。トップレベルのオブジェクトにカーソルを当てると、Addアイコンが表示されますのでそれをクリックします。Addアイコンをクリックすると、名前(Key)と値(Value)を入力する項目が現れますので、Keyには”sampleKey”と、値はなんでもかまいません。Enterキーか、「追加」ボタンをクリックすると、データの更新が行われます。これで、データの追加が完了しました。次に、「ルール」タブを選択します。Databaseの書き込みと読み込みの権限を設定する条件を示したものとなっています。デフォルトでは認証されているユーザのみ読み書きができる設定となっていますが、ここでは簡単のため次のように誰でも読み書き可の設定を行っておきます。ここまで設定した後は、index.htmlの修正に戻ります。今回のサンプルでは、データベースに用意した値をリアルタイムに取得する部分と、その値を変更する部分までを扱います。以下、ウェブアプリのソースになります。console上で表示されたものを設定してください。データを取得/監視するデータの取得、およびリアルタイムの変更監視は以下の部分で行っています。RealtimeDatabaseへアクセスするためのオブジェクトを取得し、データへのリファレンスオブジェクトを取得します。ここではパスとしてルート”/”を指定しているので、すべてのデータの変更を監視していることになります。リファレンスオブジェクトに対してonメソッドを設定しておくと、変更があった際にfunction(snapshot)がコールされます。初回実行時に必ず1回呼び出されるようになっているため、このように書いておくだけで初回の取得、およびこれ以降の変更をこのメソッド一つで検知することができます。snapshotオブジェクトに対してval()メソッドを呼び出すと、監視対象のJSONオブジェクトが取得できます。consoleで設定した次のようなオブジェクトが取得できることになります。}データを更新するデータの更新処理は以下の部分で行っています。});rootは先程のリファレンスオブジェクトです。このオブジェクトのset関数を呼び出し、引数に更新内容のJSONオブジェクトを指定します。動作を確認する更新がすぐに反映されることを確かめるために、ブラウザのウィンドウを2つ用意して、ローカルサーバにアクセスしましょう。片方のウェブアプリで任意の文字列を入れ、「更新」ボタンを押してください。片方のウェブアプリにも、すぐ内容が反映されることが確認できるかと思います。consoleにも反映されます。console側の値を直接編集した結果も、ブラウザに即反映されます!!これといって同期感のあるコードを書かずにこの動きが作れるのは壮快ですね!データはFirebase上に保存されているので、ブラウザを再度立ち上げてももちろん前回入力したデータが残っています。DatabaseSDKの使い方は今回紹介したJavaScriptのSDKと同じようなコードになります。一通り全部一人で作りたいんだよネなんていう人には学習コスト的に非常にオススメです!Firebaseを入り口に、GCPに興味をもって構築できるシステムの選択肢を広げる楽しさもあると思います!今すぐ始めましょう!apps-gcpでは今回紹介しきれなかったFirebaseの各機能についての記事も続々リリース予定です。Ace)というGCPの導入・運用支援サービスを提供しております。お悩み・ご相談がある場合はこちらまでお問い合わせください。