Firebaseとは? 提供サービスと活用事例をエンジニアが解説|東京のWEB制作会社・ホームページ制作会社|株式会社GIG

Firebaseとは? 提供サービスと活用事例をエンジニアが解説

2018-06-29 勉強会

こんにちは!GIG社員のじきるです!

先日、会社の先輩にカラオケへと誘われました。私は普段ほとんどカラオケに行かないのですが(直近で行ったのが2年前)せっかくの機会なので同行することに。

……そしたらもう、驚愕です。GIGの社員、みんな歌上手すぎ!!普段声の低めな先輩はめちゃめちゃハイトーンな曲を歌い出すし、先日25歳の誕生日を迎えた先輩はやたらコブシの効いた演歌を披露するし。いずれもプロ級。仕方がないので私はデスボイスとシャウトで対抗しておきました。歌を極めた社員がいるWeb制作会社、それがGIGです。

さて、今回は第17回社内勉強会として行われたLT(ライトニングトーク)の様子をご紹介します!

今回登壇したのは、フロントエンドエンジニアの†黒神†(こくしん)さんこと、石黒雄介さん。

Googleが提供するモバイルアプリ開発者向けサービス「Firebase」の説明と、それを利用した実際のWebサービス、現場での活用シーンについて分かりやすく解説してくれました。

石黒 雄介(いしぐろ ゆうすけ):フロントエンドエンジニア。Web系の専門学校を卒業後、地元・名古屋のWeb制作会社に新卒で入社。約4年間、マークアップエンジニアとして従事し、小規模なものから大規模なものまで数多くの案件に携わる。2018年4月に上京し、フロントエンドエンジニアとしてGIGにジョイン。

  当日使用したスライドは以下からご覧いただけます。 

Firebaseとは?

Firebaseは、Googleが提供する「mBaaS(Mobile Backend as a service)」と呼ばれるモバイルアプリ開発者向けのサービスです。

インフラ環境構築やサーバーサイドの処理はすべてFirebaseが行ってくれるので、フロント側だけ実装すれば誰でも簡単にアプリが作れます。

石黒:
Firebaseは無料プラン/定額プラン/従量課金プランの3種類の料金形態があり、使用状況によって柔軟に変更できます。

Firebaseの提供サービス5選

現在提供されているサービスには、以下があります(一部のみ抜粋)。

1. Authentication

安全な認証システムを簡単に構築できるサービス。認証は主要SNSやメール・電話などに対応しており、ユーザー管理も容易に行えます。

2. Realtime Database/Cloud Firestore

NoSQLデータベース。多端末情報の即時同期が可能で、チャット等のサービスも作れます。 

3. Cloud Storage

ファイルストレージ。ユーザーの写真や音楽データ等を安全にアップロード/ダウンロードできます。

4. Hosting

レンタルサーバーのようなもの。単一ページ型のWebアプリ、モバイルアプリのLP、プログレッシブWebアプリなどを簡単にデプロイできます。

5. Cloud Functions

イベントを監視してバックグラウンドで任意のプログラムを実行させることができるサービス。Node.jsを動かすこともできます。

石黒:
Firebaseには従来型の『Realtime Database』と次世代型の『Cloud Firestore』の2種類のデータベースがあります。

石黒:
『Realtime Database』はシンプルかつ頻繁に書き込みが行われるプロダクトに、『Cloud Firestore』は複雑な処理が発生するプロダクトに向いています。データ同期が頻繁に発生しない限り、基本的には『Cloud Firestore』がおすすめです。

Firebaseで作ったWebサービス

石黒さんはFirebaseを使って、実際にWebサービスを一つ作ってくれました。

それがこの「Tapbox」です。

tapbox

Tapboxは「決められた回数タップしないと開かない箱」を簡単に作成することができるサービスです。

箱の中にはメッセージ、画像、動画などのメディアを「ご褒美」として仕込み、指定の回数だけ箱をタップしたら閲覧できる仕組みとなっています。

なお、タップ数は全国のユーザーの累計がカウントされます。タップ数はリアルタイムで同期されるため、同時刻にみんなでタップしまくるなんてことも可能です。

石黒:
今回使ったFirebaseのサービスは、Authentication、Firestore、Cloud Storage、Hostingです。

石黒:
クライアントアプリの構築はVue.js、Vuex、Vue-routerで行いました。FirebaseはJSとの相性が非常にいいです。

Firebaseの活用方法は?

石黒さんはFirebaseを実際に使ってみて、フロント実装だけに集中できるため、開発が爆速で行えると述べました。

石黒:
セキュリティルールを理解するのにはやや時間がかかりましたが、公式の日本語ドキュメントが充実しているので読めばだいたい解決できました。

石黒:
データベースが単独のツリー構造なので大規模なアプリケーション実装には向いていませんが、プロトタイプ開発にはかなり使えそうです。

また、石黒さんは実際の現場での活用シーンを教えてくれました。

石黒:
リアルタイム動機やプッシュ通知、ログイン状態の管理なども可能なので、オンラインチャットや簡易的なブログシステムの開発には最適です。

石黒:
Cloud Functionsを使えばNode.jsも動かせるので、Nuxt.jsなどのSSR(サーバーサイドレンダリング)も可能です。 

なおこの勉強会の直後、石黒さんは弊社代表の岩上さんからFirebaseを使った新規案件を依頼されたとのこと!

スピード感がすごい……! スタートアップ企業の長所が発揮された瞬間でした。 

勉強会後は毎度恒例、ピザパーティー!

勉強会が終わると、みなさんお待ちかねのピザパーティー! 各々お好きなお酒・ソフトドリンクを持ち、乾杯です! 毎回ちゃんとカメラに向かって乾杯してくれてありがとうございます!

一部にめちゃめちゃ高速移動している社員さんもいますが、彼女はとても優秀なWebディレクターです。仕事ができすぎるあまり、動作が異常にスピーディになってしまったとか。

やたら動きの素早い社員がいる会社、それがGIGです。

GIGでは、一緒に働く仲間を募集しています

現在GIGでは、「一緒に学びながら成長していきたい!」と意欲のある仲間を募集しています。

詳しくは下記サイトをご覧ください。

話を聞いてみたい方も歓迎です。お気軽にご連絡ください!

内田 一良(じきるう)

早稲田大学および同大学院卒。株式会社GIG メディア事業部長。日本最大級のフリーランス・副業メディア『Workship MAGAZINE』のほか、数々のメディアのプロデュースを担当。メディア運営、コンテンツ制作、SEO、SNSに詳しい。AI、ウイスキー、ストリートダンスが好き。