GDG DevFest 2020 2019 年に発表された Firebase Extensions を使うことで、Firebase で実装しているアプリやサービスに様々な機能を従来よりもはるかに簡単に追加できるようになりました。 どんな機能が用意されているかや、導入方法などを紹介します。

1. Firebase
Extensions
はじめの一歩

2. Firebase
Extensions
はじめの一歩
Kenichi Tatsuhama
GDG Shikoku / Sansan, Inc.

3. About me

4. Kenichi Tatsuhama
GDG Shikoku Organizer
Sansan, Inc.
徳島県神山町在住
Android, Firebase,
BigQuery, DataPortal
tatsuhama50
About me

5. GDG Shikoku
四国で Go, Android, Firebase 等の
イベントを開催しています。
高松で開催したら、うどんツアーも実施！
https://gdgshikoku.connpass.com/
GDGShikoku

6. 1. Firebase とは
2. Firebase Extensions とは
3. Firebase Extensions の導入・管理方法
4. 各 Firebase Extensions の紹介
5. まとめ
Agenda

7. Firebase とは

8. Google が提供する、優れたアプリを開発し、ユー
ザーベースを拡大し、収益を高めるためのツール。
インフラ構築に手間取ることなくビジネスを収益化
し、ユーザーにとっての利便性に集中できます。
Firebase とは
https://firebase.google.com/

9. Firebase’s mission is to
Help app developers succeed

10. Build better apps
Auth
Cloud
Functions
Cloud
Firestore
Hosting
ML Kit
Realtime
Database
Cloud
Storage
Grow and engage users
Analytics
Predictions
Cloud
Messaging
Remote
Config
A/B Testing
Dynamic
Links
In-app
Messaging
Improve app quality
Crashlytics
Performance
Monitoring
Test Lab
App Distribution BETAExtensions

11. iOS Android C++Web Unity

12. ● Cloud Firestore
● Realtime Database
● Cloud Storage
● Authentication
● Firebase Functions
このセッションで使う用語の確認
クラウドでホストされている NoSQL データ
ベースを使用することで、グローバル スケー
ルでデータを保存し、ユーザーとデバイスの
間で同期します。Cloud Firestore は、効率
的なデータクエリとともに、ライブ同期とオフ
ライン サポートを提供します。他の Firebase
プロダクトとの統合を活かして、真にサー
バーレスなアプリを構築できます。

13. ● Cloud Firestore
● Realtime Database
● Cloud Storage
● Authentication
● Firebase Functions
このセッションで使う用語の確認
Realtime Database は従来からある
Firebase のデータベースです。これはリアル
タイムのクライアント間同期が必要なモバイ
ルアプリのための、効率的でレイテンシが低
いソリューションです。新しくプロジェクトを開
始する場合は、ほとんどのケースで
Realtime Database でなく Cloud Firestore
のご利用をおすすめします。

14. ● Cloud Firestore
● Realtime Database
● Cloud Storage
● Authentication
● Firebase Functions
このセッションで使う用語の確認
Google 規模で構築されたシンプルでコスト
効果の高い強力なオブジェクト ストレージに
画像、音声、動画など、ユーザーが生成した
コンテンツを格納して共有します。Cloud
Storage 用の Firebase SDK では、ネット
ワーク品質にかかわらず、Firebase アプリで
のファイルのアップロードとダウンロードに
Google のセキュリティが適用されます。

15. ● Cloud Firestore
● Realtime Database
● Cloud Storage
● Authentication
● Firebase Functions
このセッションで使う用語の確認
ユーザーを簡単かつ安全に管理します。
Firebase Auth では、メールとパスワード、
Google や Facebook などのサードパーティ
のプロバイダ、既存のアカウント システムを
直接使用するなど、複数の方法によって認
証を行います。独自のインターフェースを作
成することも、オープンソースの完全にカスタ
マイズ可能な UI を利用することもできます。

16. ● Cloud Firestore
● Realtime Database
● Cloud Storage
● Authentication
● Firebase Functions
このセッションで使う用語の確認
専用サーバーの管理や拡張を行うことなく、
カスタムのバックエンド コードでアプリを拡張
します。Functions は、webhook を使用して
Firebase 製品、Google Cloud サービス、
サードパーティによって出力されるイベントに
よってトリガーできます。

17. Firebase
Extensions とは

18. ● 2018 年に発表された新機能（まだβ版）
● 予めパッケージ化されたソリューション
● Firebase プロジェクトに機能を素早くデプロイ
● イベントトリガーに反応して、特定のタスクを実行できる
・Cloud Firestore 等の Firebase プロダクトのトリガー
・HTTPS リクエスト
● 利用するためには Blaze プラン（有料プラン）にする必
要がある（1 Extensions あたり、約0.01$/月 ＋ 利用分）
Firebase Extensions (拡張機能)とは

19. ● 画像をアップロードする機能を持つアプリを想定
● Cloud Storage に画像がアップロードされると、
自動でサムネイル画像を生成させることができる
● クライアント側（Web/Android/iOS）は元画像を
アップロードするだけ
例：サムネイル画像の生成で考える

20. ● demo

21. ● サムネイル画像の生成機能は、Extensions 発表前
から Firebase Functions のサンプルとして公
開されていた。
● ただし、導入は一手間かかった。
例：サムネイル画像の生成で考える
https://github.com/firebase/functions-samples/tree/master/generate-thumbnail

22. Caption
サムネイル画像の生成：従来の導入方法
https://github.com/firebase/functions-samples/tree/master/generate-thumbnail
ちょっと大変・・・

23. ● インストールや各種設定が簡単に行える
● Firebase Functions で実装されている
● Firebase Functions のメリットも継承
・コンピューティングリソースを自動でスケール
・実行環境のセキュリティアップデート等が不要
→ 作りたい機能に注力することができる
● ソースコードを確認することができる
Firebase Extensions は…

24. Firebase
Extensions の
導入・管理方法

25. インストール手順
● Firebase コン
ソールの一番左下の
「Extensions」か
ら使いたいものを選
んでインストール

27. 構成変更
● インストール後でも
UI から変更可能

28. 更新の適用
● 更新通知表示
● アップデートも容易

29. アンインストール
● UI からアンインス
トール可能
● 最下部にあります！

30. 各 Firebase
Extensions の紹介

31. ● 用途：サムネイル画像作成（や画像サイズの正規化）
● Cloud Storage にアップロードされた画像を
指定されたサイズにリサイズします。
Resize Images

32. ユーザーが構成可能な機能
● Cloud Functions location
● 画像の Cloud Storage バケット
● サイズ変更後の画像のサイズ
● 元画像を残すかどうか（＝削除するかどうか）
● サイズ変更後の画像の Cloud Storage パス
● サイズ変更後の画像の Cache-Control ヘッダー
Resize Images

33. ● 用途：ユーザへのメール送信
● 指定した Cloud Firestore コレクションに書き
込まれたドキュメントのコンテンツに基づいて、
メールを生成し送信します。
● Firebase は SMTP の機能を備えていないので、
他の SMTP サーバ（Send Grid など）を利用す
る必要があります。
Trigger Email

34. ● 呼び出し例
● 送信結果もドキュメント内に書き込まれる
Trigger Email

35. ユーザーが構成可能な機能
● Cloud Functions location
● SMTP 接続の URI
● メール ドキュメント コレクション
● デフォルトの FROM アドレス
● デフォルトの REPLY-TO アドレス
● ユーザー コレクション
● テンプレート コレクション
Trigger Email

37. ● 用途：投稿やコメントの翻訳表示
● Cloud Firestore コレクションに書き込まれた
文字列を複数の言語に翻訳します
（Cloud Translation API を使用）
Translate Text

38. ユーザーが構成可能な機能
● Cloud Functions location
● 翻訳のターゲット言語
（カンマ区切りリスト）
● コレクションのパス
● 入力フィールド名
● 翻訳出力フィールド名
Translate Text

39. input 言語は自動判定される

40. ● 用途：短縮 URL の生成
● 指定した Cloud Firestore コレクションに書き
込まれた URL を短縮します（Bitly を使用）
● Bitly のアクセストークンを取得する必要がありま
す
Shorten URLs

41. ユーザーが構成可能な機能
● Cloud Functions
location
● Bitly アクセス トークン
● コレクションのパス
● URL のフィールド名
● 短縮 URL のフィールド名
Shorten URLs

43. ● 用途：Top10 などの表示箇所
● 指定した Realtime Database パスで、ノードの
数を指定した最大数までに制限します。
● （2020/10 現在、Cloud Firestore 用には提供
されていません…）
Limit Child Nodes

44. ユーザーが構成可能な機能
● Realtime DB のパス
● 上限数
Limit Child Nodes

45. path 配下の子ノードは5個に限定されていることがわかる

46. ● 用途：退会ユーザのデータ削除
● ユーザーがアカウントを削除したときに、Cloud
Firestore、Realtime Database、Cloud
Storage の userId をキーとするデータを削除
します。
Delete User Data

47. ユーザーが構成可能な機能
● Cloud Functions location
● Cloud Firestore のパス
● Cloud Firestore delete mode
● Realtime Database のパス
● Cloud Storage のパス
Delete User Data

48. ● 用途：いいね数等のカウント表示
● Cloud Firestore への高速書き込みに対応する
ため、イベント カウンタを大規模に記録します。
Distributed Counter

49. Distributed Counter
背景
● Firestore の Document への書き込みは、
1回/s という上限がある。
https://firebase.google.com/docs/firestore/quotas
● 回避方法として、カウント値を書き込む node を分
散し、読み込み時に全て集計するという方法がある
● この回避方法を実装しなくて済む

50. ↓ドキュメントを分散させて回避

51. ユーザーが構成可能な機能
● Cloud Functions location
● 内部状態のドキュメント パス
Distributed Counter

52. ● 用途：ユーザへのメール配信、宛先管理
● 指定の Mailchimp オーディエンスに、Firebase
Authentication から新しいユーザーを追加しま
す。
● ユーザの削除にも追従する
※Mailchimp：メールマーケティング用のサービス
Sync with Mailchimp

53. ユーザーが構成可能な機能
● Mailchimp API Key
● Audience ID
● Contact status
Sync with Mailchimp

54. Authentications のユーザの増減が、MailChimp にも同期される

55. ● 指定した Cloud Firestore コレクションから
BigQuery に、リアルタイムな増分更新を送信しま
す。
※「リアルタイムな更新」が送信されるだけで、
Firestore のバックアップではありません
※git の commit のようなイメージ（？）
Export Collections to BigQuery

56. ユーザーが構成可能な機能
● Cloud Functions location
● コレクションのパス
● データセット ID
● テーブル ID
Export Collections to BigQuery

57. Caption
Export Collections to BigQuery
BigQuery
追加・変更・削除

58. ● 用途：定期購入商品の取り扱いや、購入状況の管理
● Stripe の商品の定期購入・解約を Firebase
Authenticationと同期し、有料コンテンツへのア
クセスを制御します
● Made by Stripe
● Web 向けです。Android / iOS はそれぞれの
In-App purchase の利用を。
Run Subscription Payments with Stripe

59. ユーザーが構成可能な機能
● Cloud Functions deployment
location
● Products and pricing plans
collection
● Customer details and
subscriptions collection
● Stripe API key with restricted
access
● Stripe webhook secret
Run Subscription Payments with Stripe

60. ユーザーが構成可能な機能
● Cloud Functions deployment
location
● Products and pricing plans
collection：商品
● Customer details and
subscriptions collection：契約
● Stripe API key with restricted
access
● Stripe webhook secret
Run Subscription Payments with Stripe

61. ※テスト環境、デモアカウント、データは仮

62. ● 用途：Stripe の請求管理
● Stripe の支払いプラットフォームを使用して、
顧客へ請求書を作成して送信します。
● Made by Stripe
Send Invoices using Stripe

63. ユーザーが構成可能な機能
● Cloud Functions deployment location
● Invoices collection：請求書コレクション
● Stripe API key with restricted access
● Days until payment is due
● Stripe webhook secret
Send Invoices using Stripe

64. ● 請求書の作成
● メールで送信
● 支払い状況の管理
ができる
Send Invoices using Stripe

65. まとめ

66. ● Firebase Extensions は、予めパッケージされ
た機能（サムネイル作成や短縮 URL 生成など）を
プロジェクトに簡単に組み込むことができる
● 有償プランにする必要がある
● 実体は Firebase Functions
● Firebase Extensions を使うことによって、開
発、メンテナンス、拡張にかかる時間を短縮できる
まとめ

67. 補足

68. ● https://firebase.google.com/support/tro
ubleshooter/report/features
● どのような拡張機能があったらよいかを Firebase
にフィードバックすることができます。
● 「こういった機能が欲しい！」という場合には、ぜ
ひここからリクエストを出してみて下さい。
リクエストフォーム

69. ● https://github.com/firebase/functions-samples
● 様々なサンプルがある
・アップロードされた画像の Exif を抽出
・DB の内容を Google Spread Sheet 出力
● これらをヒントに、Extensions でなくても
Functions で欲しい機能を実装してしまうのも手
かも知れません。
functions samples

70. Let’s Enjoy Firebase !!