Web Creators MeetUp 新年！ビアバッシュLT大会 #8

1. フロントエンドエンジニアが知るべき
Firebaseの世界
Web Creators MeetUp 新年！ビアバッシュLT会 #8

2. Profile.
~ 2015/08 istyle.inc
テクノロジー本部 R&D 部技術開発グループ チーフエンジニア
久保田 賢二朗
● PHP(Laravel/Phalcon)
● JavaScript(Vue.js/Svelte)
● Golang
● HHVM/Hack
kenjiro kubota

3. PR.
株式会社アイスタイル
istyle Inc.
インターネットのコスメ情報ポータルサイト
「＠ｃｏｓｍｅ（アットコスメ）」
の開発・運営
コスメだけではなくビューティ全般、日本だけではなく世界で"Beauty"に係る人や
企業、個人事業主が活躍できるプラットフォームを作る。
アイスタイルは、「Beauty×IT」の世界ナンバーワンを目指します。

4. フロントエンドエンジニアが知るべき
Firebaseの世界

5. Firebaseとは
2014年にGoogleに買収されたモバイル・Webアプリケーション向
けのバックエンドサービス。
いわゆるMBaaS,BaaSと呼ばれるもの。(FaaSもあります)
● サーバーの用意・構築が不要
● サーバーサイドアプリケーションが不要（後述する
Functionsを利用することで独自のサーバーサイド処理を組
み込むことも可能）
● 開発速度の向上

6. 豊富なSDKや便利なCLI
Android 、iOS 、Flutter、Web 、Unity 、C++用のSDKや
firebase-toolsというCLIツールも公式で用意されています。

7. Webで利用する際の主な機能

8. パスワード、電話番号認証の他に一般的なプロバイダ認証
（Google、Facebook、Twitter、Github等）を簡単に実装できるサービス。
Webであれば一旦Firebase側の認証に遷移し、認証後に自分のアプリケーションに
戻ってくるフローになる。
認証部分の実装は不要
匿名認証もあり、後述するデータベースルールなどで未ログインユーザーに権限を
与える際に利用したり、匿名認証しているユーザーがアプリに登録した際はセッ
ションを引き継ぐこともできる。

9. 静的ファイル（HTML, CSS, JavaScript, 画像等）のホスティングサービス
ホスティングされたファイルはCDN（Fastly）にキャッシュされるため高速に配信
ドメインはLet’s EncryptによりSSLの証明書が提供され、3ヶ月毎の更新も自動で
行われる。
画像、音声、動画などのファイルを格納するオブジェクトストレージ
ルールを追加することが可能なので、閲覧者の制限やアップロード容量の制限など
も行える

10. クライアント全体で同期できるリアルタ
イムなNoSQLデータベース
データを一つの大きなJSONとして扱う
設計がちょっと難しい（と思う）
1つのデータベースで約10万件の同時接
続と毎秒1,000件の書き込みまでスケー
ル。それ以上はシャーディングが必要
データベースルールを作成することで読
み書きに制限を設けることができる。

11. Realtime Databeseの欠点を補う後継にあたるサービス
Realtime Databese同様にリアルタイムなデータベース
Realtime Databeseより高速なクエリの実行、スケールが可能
コレクション、ドキュメントという単位でデータを保存
スケーリングは自動
2019年1月現在はまだベータ版

12. 紹介してきたAuthentication、Storage、Realtime Database(Firestore)の追加や
変更を検知し、それをトリガーとしてサーバーサイド処理を行えるサービス
現状ではNode.jsのみ（フロントエンドエンジニアなら親しみやすい）
例えばユーザー登録されたらメールを送信する、画像が投稿されたらリサイズした
ものを別途保存するなどの処理が作ることができます。
更新！ 検知 メール送信

13. スマホアプリエンジニアには馴染みが深い通称FCM
プッシュ通知を配信するサービス
ServiceWorkerを利用することでブラウザ向けにもプッシュ通知を配信することが
できます。
Functionsと組み合わせることで、データベースが更新された際にプッシュ通知を配
信することも可能です。
https://developers.google.com/web/fundamentals/codelabs/push-notifications/?hl=ja

14. Firebase ML Kit
Crashlitycs
Firebase Performance Monitoring
Firebase Test Lab
In-App Messageng
Firebase Google Analytics
Predictions
A/B Testing
Firebase Remote Config
Firebase Dynamic Links
Firebase App Indexing
その他モバイル向けにも以下のような
サービスがあります
豊富！

15. 個人で使う分には
無料枠でも結構使えます

16. Firebaseを使うことで、フロントエンドとちょっとしたサーバーサイドJavaScript
の知識だけである程度のサービスは作れてしまう。
簡単なものを作って公開するのもいいし、ユーザー認証も簡単に導入できるので会
員登録が必要なサービスも作れる！
★ レンタルサーバーを借りてデプロイする必要もないし
★ VPSで自分自身でサーバー環境を作る必要もない
★ AWSなどのクラウドサービスより簡易的でフロントエンド
の知識だけでもなんとかなる（個人比）
どんなサービスが作れるか、私が作ってきたプロダクトを紹介！

17. 1)AR.jsを利用した
リアルタイムシューティングゲーム
弊社テクノロジー本部の年末に行う社内イベントで
実施
ARマーカーを持った部長人が会場を練り歩き、
ゲーム参加者がFirebaseにホスティングされた
Webアプリを利用することで3Dの的が表示され、
それに対してタップをすることでポイントを獲得
する
会場に用意されたスクリーンにはリアルタイムで
ポイント集計された表を表示

18. 要件
● 同時に遊ぶ人数は約200人
● ARをタップする毎にポイント加
● ARは10種類、それぞれどのARをタップした
かは判別される
● クライアントは10秒のインターバルで獲得し
たポイントをRealtimeDatabaseに保存

19. 利用した技術・サービス

20. Firebaseの使い所
約200人が結構な頻度（各端末10秒毎）更新しても全く問題なし！
サーバー処理は一切なし
（ポイント集計処理はスクリーンアプリ側）

21. 2)応募フォーム付きイベントLP

22. 要件
● 申し込みフォームから応募
● 応募があると応募者に確認のメールと管理者にメールを送信
● 定員に達すると応募不可表記に変わる

23. 利用した技術・サービス

24. Firebaseの使い所
Cloud Functionsを利用して、Firestoreに応募情報が
追加された際に応募者と管理者にメールを送信

25. 3)スマートフォンカメラを利用した
リアルタイム写真投稿アプリ
弊社の全社イベントで行った催しで利用
約1,000人が同時に利用し、スマホWebアプリで表
情認識により笑顔を検知するとシャッターを切る
ゲーム
より多くの笑顔の撮影者、または被写体となった人
を表彰

26. ゲームの説明
笑顔を撮る人 笑顔になって撮られる
人
撮られる人のQRコードを
読み取ると
アプリ内のカメラが起動
表情認識により閾値を超え
た笑顔が検出されると
シャッターが切られ、サー
バーに送られる

27. 要件
● 参加人数は約1,000人
● 表情認識で笑顔を検知して撮影
● ↑の写真をサーバーに保存
● 誰が誰を撮影したのかを判別しサーバーに保存
● ↑をリアルタイムに集計
● 会場のスクリーンにリアルタイムに集計されたデータと撮影された写真が
次々に表示される

28. 利用した技術・サービス
clmtracker

29. Firebaseの使い所
画像の保存にCloud Storageを利用
画像のサーバー保存・取得が簡単にできる
誰が誰を撮影したのかをRealtimeDatabaseに保存
リアルタイムに集計

30. 4)Laravelクイズアプリ
PHPConference2018でスポンサーブースで提供し
たクイズアプリ
PHPフレームワーク「Laravel」に関するクイズを
Webアプリで提供

31. 要件
● 回答をサーバーに保存
● 問題はデータベースから変更可能
（提供直前まで変更がありえたため）

32. 利用した技術・サービス

33. Firebaseの使い所
匿名ログインを使うことで重複回答をできるだけ避けること
ができた
匿名ログインさせたユーザーのみFirestoreを参照できる
ルールにしたのでセキュア
データベースが簡単に用意・利用できる

34. ちなみにほぼ業務外対応・・・

35. Firebaseを使うことで得られたもの
● サーバーを用意する必要がないのでアプリケーションを
作ることに注力できた
● リアルタイムなデータベースはアプリケーションの幅を
広げた
● 同時接続数などに余裕があり、安心して利用できた
● 無料枠でもかなり利用できる上、従量課金にしてもさほ
ど高くない
（高負荷なアプリは利用期間が短いため）

36. Attention
● 今回紹介したのは趣味レベルのアプリケーションでの利
用事例です
● ビジネスロジックを含むシステムとFirebaseを組み合わ
せるのは検討が必要
● リアルタイムDBは魅力的です。何か活用方法はあるかと
思います。
● セキュリティ周りの設計・設定はしっかりやろう

37. thanks:)