Firebase Extensionsをサクッと試してみた　〜Firebase Extensions機能一覧、Translate Textの使い方〜

2019/09/26にFirebase Summitで発表されたFirebase Extensionsをサクッと試しみたので書きます

# Firebase Extensions とは？
https://firebase.google.com/products/extensions

Firebaseコンソールでポチポチと設定するだけで、既存のFirebaseの機能を補助するCloud Functionsを作成出来る機能です。
Firestorageでの画像リサイズや、Firestoreに保存されたタイミングで任意の言語に翻訳できる機能など以下の9つのExtensionが発表されています。

![screencapture-firebase-google-products-extensions-2019-09-27-06_38_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/e8e753bf-ec0d-b3a3-28c4-9595fcd431a1.png)

簡単に各Extensionsの紹介です。（間違っていたらコメントいただけると嬉しいです :pray: ）

| 名称      |    サポート対象    |    機能    |
|:---:|------|-----|------------------|
|[![スクリーンショット 2019-09-27 7.09.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/39e7398e-2440-1be5-1d81-2e77d7d82a22.png) <br/> Resize Images](https://firebase.google.com/products/extensions/storage-resize-images/)   |   Cloud storage | Storegeに画像が追加された際に、任意のサイズにリサイズして元画像と一緒に保存するFunctionを追加します|
|[![スクリーンショット 2019-09-27 7.09.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/407a89a2-8914-f6bd-a3d6-92098d2489ee.png)<br/> Translate Text](https://firebase.google.com/products/extensions/firestore-translate-text/)  |   Firestore | Firestoreにデータが追加された際に、任意の言語に翻訳して、元データと一緒に保存するFunctionを追加します |
|[![スクリーンショット 2019-09-27 7.09.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/8fec276d-8dca-f2cf-1b93-940fbac42475.png)<br/> Sync with Mailchimp](https://firebase.google.com/products/extensions/auth-mailchimp-sync/)  | Authentication | Authenticationのメールアドレスを Mailchimp（メルマガ配信サービス）とSyncさせるFunctionを追加します。Firebase上でユーザーが追加されたら、Mailchimpでも追加。削除されたらMailchimp上でも削除が自動で行われます |
|[![スクリーンショット 2019-09-27 7.09.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/97e861f9-bdff-1b00-fa5e-6b61e3e32531.png)<br/> Trigger Email](https://firebase.google.com/products/extensions/firestore-send-email/)  |  Firestore | Firestoreに `to`や`message`など特定の名称のフィールドを持つドキュメントを追加すると、そのタイミングで、記載情報を元にメールを送信するFunctionを追加します  |
|[![スクリーンショット 2019-09-27 7.09.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/f2251708-3c5d-e09b-feda-af62b9dd1608.png)<br/> Export Collections to BigQuery](https://firebase.google.com/products/extensions/firestore-bigquery-export/)| Firestore |  FirestoreのドキュメントをBigqueryに自動的にエクスポートするFunctionを追加します。さらにドキュメントの変更履歴の生データを保存するテーブル、ドキュメント操作のログも表示するviewも自動的に追加されます  
|[![スクリーンショット 2019-09-27 7.08.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/3e7b8859-4ff7-2e7d-ffee-ced81e528e1f.png)<br/> Shorten URLs](https://firebase.google.com/products/extensions/firestore-shorten-urls-bitly/)  |   Firestore |  Firestoreの任意のフィールドに書き込まれたURLから短縮URLを作成するFunctionを追加します。元データが変更された際には自動的に更新されます。  |
|[![スクリーンショット 2019-09-27 7.12.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/436a7d2b-280d-2ea8-f3a3-e121cfac6677.png)<br/> Distributed Counter](https://firebase.google.com/products/extensions/firestore-counter/)       |  Firestore |  View数や、Like数などのカウントに最適なカウンターを実現するFunctionを追加します。ここで追加されるFirestoreのデータは、Firestoreの持続書き込み制限を回避して高速に動作します。 |
|[![スクリーンショット 2019-09-27 7.08.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/29488e64-37b5-bc00-0576-ca766577bfc1.png)<br/> Limit Child Nodes](https://firebase.google.com/products/extensions/rtdb-limit-child-nodes/)         | Realtime Database | Realtime Databaseに保存されるノードの最大数を制御するFunctionを追加します。ノード数が指定の数を超えた場合は、自動的に古いデータから削除されるようになります   |
|[![スクリーンショット 2019-09-27 7.08.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/66ad13a9-5189-654a-965d-c630759846a0.png)<br/> Delete User Data ](https://firebase.google.com/products/extensions/delete-user-data/)    | Firestore,<br/>  Realtime Database,<br/>  Cloud Storage | Authentificationで管理しているユーザーが削除された際に、それに紐づくFirestore, Realtime Database, Cloud Storageのデータ（ドキュメントIDがユーザーのkeyのもの）を削除するFunctionsを追加します。  |



# 使い方（例: Translate Text）

実際に、[こちらの記事](https://qiita.com/ryo2132/items/2881d8223eb2ad3050a1) で作ったチャットアプリに、Translate Textを追加してみたのでそのやり方を記載します。
こんなイメージのチャットを作りました。

日本語を投稿すると、同時に英語と中国語に翻訳されたメッセージが表示されます。

![Sep-27-2019 07-32-57.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/0587f967-4746-9407-6418-234a01fbb37a.gif)



## Extensionsのinstallと設定

まず追加したいプロジェクトのコンソールから、Extensionsをインストールします。

![スクリーンショット 2019-09-27 7.17.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/1f97815e-5734-a4f0-a581-4b0702a93dce.png)

次の画面でリソースの確認や、支払情報の確認、アクセス権の確認が行われるのでポチポチ押して確認してください。
（支払い情報の登録がないと利用できません。事前に登録してください）

![スクリーンショット 2019-09-27 7.17.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/1b641249-db63-e77f-c9ab-752ee720c640.png)

そして、最後にTranslateの設定を行います。

![スクリーンショット 2019-09-27 7.18.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/33d3f67e-8426-67b7-f745-fd4211d715bf.png)

各入力して「拡張機能をインストール」で、少し時間をおいて機能が追加されます。

![スクリーンショット 2019-09-27 7.25.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/008f2ef1-16d1-3f3d-364c-5568b3205158.png)

完了すると、Cloud Functionsに新しいFunctionsが追加されます

![スクリーンショット 2019-09-27 7.27.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/160660a6-a418-c4e5-4d7c-8b9d084102ba.png)

これで設定完了です！！

## Client SDK経由でのデータ追加

これでクライアントから、先程設定したドキュメントにデータを追加すると、、

```js
db.collection('comments').add({
   content: this.inputComment,
   avatar: 'https://picsum.photos/50?image=' + (Math.floor(Math.random() * 400) + 1),
   createdAt: now
})
```

以下赤枠のように、自動的に翻訳結果が保存されています！！！すごい！！

![スクリーンショット 2019-09-27 7.30.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114396/8d46e2df-b191-1414-858f-caebc4f2a5a7.png)


## 注意
通常のFirestoreフックのFunctionsと同じで、Admin SDK経由、コンソール上での変更では起動しません。
なので、かならずClient SDK経由での追加更新を行ってください。

# おわりに
以上 Firebase Extensionを試してみたでした。
Firebaseどんどん機能が追加されて本当に魅力的ですね。
他の機能も今後の個人開発で生かして行きたいです！！