LoginSignup
202
134

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-09-26

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

Firebase Extensions とは?

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

screencapture-firebase-google-products-extensions-2019-09-27-06_38_46.png

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

名称 サポート対象 機能
スクリーンショット 2019-09-27 7.09.14.png
Resize Images
Cloud storage Storegeに画像が追加された際に、任意のサイズにリサイズして元画像と一緒に保存するFunctionを追加します
スクリーンショット 2019-09-27 7.09.23.png
Translate Text
Firestore Firestoreにデータが追加された際に、任意の言語に翻訳して、元データと一緒に保存するFunctionを追加します
スクリーンショット 2019-09-27 7.09.27.png
Sync with Mailchimp
Authentication Authenticationのメールアドレスを Mailchimp(メルマガ配信サービス)とSyncさせるFunctionを追加します。Firebase上でユーザーが追加されたら、Mailchimpでも追加。削除されたらMailchimp上でも削除が自動で行われます
スクリーンショット 2019-09-27 7.09.10.png
Trigger Email
Firestore Firestoreに tomessageなど特定の名称のフィールドを持つドキュメントを追加すると、そのタイミングで、記載情報を元にメールを送信するFunctionを追加します
スクリーンショット 2019-09-27 7.09.05.png
Export Collections to BigQuery
Firestore FirestoreのドキュメントをBigqueryに自動的にエクスポートするFunctionを追加します。さらにドキュメントの変更履歴の生データを保存するテーブル、ドキュメント操作のログも表示するviewも自動的に追加されます
スクリーンショット 2019-09-27 7.08.59.png
Shorten URLs
Firestore Firestoreの任意のフィールドに書き込まれたURLから短縮URLを作成するFunctionを追加します。元データが変更された際には自動的に更新されます。
スクリーンショット 2019-09-27 7.12.36.png
Distributed Counter
Firestore View数や、Like数などのカウントに最適なカウンターを実現するFunctionを追加します。ここで追加されるFirestoreのデータは、Firestoreの持続書き込み制限を回避して高速に動作します。
スクリーンショット 2019-09-27 7.08.48.png
Limit Child Nodes
Realtime Database Realtime Databaseに保存されるノードの最大数を制御するFunctionを追加します。ノード数が指定の数を超えた場合は、自動的に古いデータから削除されるようになります
スクリーンショット 2019-09-27 7.08.53.png
Delete User Data
Firestore,
Realtime Database,
Cloud Storage
Authentificationで管理しているユーザーが削除された際に、それに紐づくFirestore, Realtime Database, Cloud Storageのデータ(ドキュメントIDがユーザーのkeyのもの)を削除するFunctionsを追加します。

使い方(例: Translate Text)

実際に、こちらの記事 で作ったチャットアプリに、Translate Textを追加してみたのでそのやり方を記載します。
こんなイメージのチャットを作りました。

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

Sep-27-2019 07-32-57.gif

Extensionsのinstallと設定

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

スクリーンショット 2019-09-27 7.17.03.png

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

スクリーンショット 2019-09-27 7.17.23.png

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

スクリーンショット 2019-09-27 7.18.36.png

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

スクリーンショット 2019-09-27 7.25.31.png

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

スクリーンショット 2019-09-27 7.27.04.png

これで設定完了です!!

Client SDK経由でのデータ追加

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

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

注意

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

おわりに

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

202
134
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
202
134