多機能・高品質なWebアプリのバックエンドサービス「Firebase」を試してみました

ブログ

Blog
  1. ホームページ制作・運営はアウラ:ホーム
  2. ブログ
  3. 多機能・高品質なWebアプリのバックエンドサービス「Firebase」を試してみました

多機能・高品質なWebアプリのバックエンドサービス「Firebase」を試してみました

多機能・高品質なWebアプリのバックエンドサービス「Firebase」を試してみました

こんにちは。Webエンジニアの仁木です。

Webアプリケーションの開発などで以前から耳にしていた「Firebase」を試してみました。
Webで調べるとデータベースだったりホスティングサービスだったりと色々な言葉が出てきて具体的に何ができるサービスなのか、アプリ開発に疎い僕はぼんやりとしかわかっていなかったので色々と勉強になりました。

Firebaseとはどういうサービス?

Firebaseは、Webアプリケーションで必要となるバックエンド側の機能を揃えたサービス(BaaS:[Backend as a Service])で、2014年にGoogleに買収されてからはGoogleが運営しています。


はじめにバックエンド側の機能とは何なのか、Twitterで例えるならば、

  • ツイートした内容やユーザー情報を保存・参照するデータベース
  • ユーザーの投稿した画像などを保存するストレージ
  • ユーザーのログイン・ログアウトなどを管理するユーザー認証
  • 作成したアプリケーションをWeb上に公開するホスティング
  • 新しい投稿やリプライがあった時にブラウザやモバイル端末に通知を表示するクラウドメッセージ(Push通知)

などの、サーバー側で実装する処理やデータベースなどのサービスのことを指します。

これらの実装処理の部分やサービスのセットアップをFirebaseに任せてしまい、開発者はフロントエンド(クライアントサイド)の開発やサービスの基盤となる部分の処理に集中することができます。
また既に作られたアプリケーションにもこれらを部分的に組み込むことも可能で、必要な機能を簡単に導入できます。

Firebaseの提供している代表的なサービス

リアルタイムデータベース(Realtime Database)

通常のデータベースがユーザーのアクションで能動的にデータを取得する(Pull型)のに対して、Firebaseの提供しているリアルタイムデータベースとは1人のユーザーがデータを変更すると即座に他のユーザーに変更を反映する(Push型)仕組みになっています。

またオフライン時にデータを変更しても、ネットワークに繋がった時にデータを自動更新しデータベースを修正するため、全てのユーザーのデータの整合性も保たれます。
これはモバイルでアプリケーションを利用しているユーザーなどが、常にネットワークに繋がった状態で利用しているとは限らない最近のWebアプリの事情にも適しています。

クラウドストレージ(Cloud Storage)

データベースとは別に、ユーザーのプロフィール画像や、投稿の写真などのファイルをアップロードするためのファイルストレージです。

ユーザー認証(Authentication)

代表的なソーシャルサービス(Facebook、Twitter、Github、Google)のアカウントでのログイン機能や、メールアドレス・パスワードを使ったユーザー登録(Sign up)機能です。

アプリを利用する上で、利用しているユーザーが誰であるのか認証する機能は必須と言えるでしょう。
Firebaseではそういった、ユーザー登録の機能や各種SNSでのログインの基盤が用意されています。

静的Webサイトホスティング(Hosting)

Webアプリケーションを実際に利用するためにはWeb上に公開しなければなりません。
FirebaseではHTML、Javascript、CSSのみで構成されたWebアプリケーションをFirebaseのクラウド上にホスティングできます。これにより自分でWebサーバーを用意する必要がなくなります。

アプリケーションの更新は開発環境からコマンドラインで本番へデプロイするようになります。

クラウドメッセージング(Firebase Cloud Messaging)

ブラウザやモバイル端末でユーザーにPush通知をします。アプリ内で新着のメッセージなどの通知をユーザーに知らせることができます。

各機能は制限付きで無料で利用できる

Firebaseはこれらバックエンドの機能をSparkプランという制限付きの無料プランで提供しています。

Sparkプランに含まれているものは以下のようになっています。

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

  • 同時接続数: 100まで
  • 1GBの容量
  • 10GBの転生量

クラウドストレージ

  • 5GBの容量
  • 1日のアップロード上限数は2万回
  • 1日のダウンロード上限数は5万回

ホスティング

  • 1GBの容量
  • 独自ドメインとSSL

その他の機能にも制限はあるので詳しくは料金ページをご覧ください。
Sparkプランでは規模の大きいアプリケーションでの利用は難しく、小規模や個人開発レベルで利用できそうです。

その他のプランに$25/月のFlameプラン、従量制(使った分だけ)のBlazeプランがあります。
SparkやFlameプランで利用制限を超える前にメールで通知がきます。また実際に制限を超えた時はFirebaseのAPIのレスポンスがエラーになり、アプリケーションが正常に利用できなくなります。

Webアプリを作ってみる

Firebaseのチュートリアルでは、簡単なチャットアプリを作り、Firebaseの各機能の組み込み方法を学べます。

チュートリアルで実際に作ってみたのがこちら


チャットアプリの画面

Googleアカウントでログインしてタイムラインにメッセージや画像をアップロードできるチャットアプリです。Googleアカウントがあれば誰でもログインしてチャットができます。

このアプリではリアルタイムデータベースユーザー認証クラウドストレージに加え、クラウドメッセージ機能の組み込み方法を学べます。

ユーザー認証

画面右上の「SIGN-IN WITH GOOGLE」からGoogleアカウントでログインし、メッセージを投稿するとタイムライン上にメッセージが反映されます。

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

メッセージはデータベースに保存され、他のユーザーにはリアルタイムでメッセージが反映されます。

クラウドストレージ

SEND」ボタン横の黄色いアイコンボタンでは画像をアップロードできます。画像ファイルはクラウドストレージに保存されます。

またWebアプリで利用しているこれらのバックエンドサービスの利用状況をFirebaseのコンソールから確認できます。


チャットアプリのプロジェクトのコンソール画面

Firebaseの感想

触りの部分だけ試してみましたが、Webアプリケーションを作る上で面倒になるサーバーの設定やバックエンドの機能の基盤を簡単に利用でき、アプリのサービスの根幹の部分の実装に集中できそうです。
思いついたアイデアをすぐにアプリとしてリリースしてみるなど、特に個人開発でアプリを作る敷居が下がるのではと思います。

お電話でのお問い合わせはこちら:06-6292-8577。受付時間は平日9:30~18:30 インターネットからは24時間受付中!お問い合わせフォームはこちら
Webデザイナー、Webプログラマ募集中!