【ReactNative】react-native-firebaseセットアップと機能一覧

FirebaseはスマホやWebアプリのバックエンドとして非常に優秀で、認証や通知、分析にストレージ・DBなど幅広い用途で使用することができます。 ReactNativeアプリでもライブラリであるreact-native-firebaseが提供されているため比較的簡単に組み込むことができます。 今回はそのセットアップ手順をご紹介します。

前提条件

  • react-native@0.63.3
  • Firebaseプロジェクトは作成済み

ライブラリ

以下に公式サイトがあります。

現在はv6系が最新となります。

インストール

react-native-firebaseにはいくつも機能があるため、ライブラリが分かれています。 基本となるのは@react-native-firebase/appで、これはいかなる機能を使う場合もインストールする必要があります。

yarn add @react-native-firebase/app

iOSで利用する場合はpod installを行います。

cd ios && pod install

プロジェクトの構成ファイルの組み込み

既にFirebase側でプロジェクトは作成済みだと思いますので、【プロジェクトの概要】アプリの追加からandroidiosアプリを作成しましょう。 その過程で、google-service.jsonGoogleService-Info.plistという2種類のファイルをダウンロードしたと思います。

それぞれgoogle-service.jsonandroid/appの直下、GoogleService-Info.plistXCodeから/ios/{プロジェクト名}.xcworkspaceの直下へ追加しましょう。

これで準備は完了です。

機能一覧

以下にreact-native-firebaseで利用できる機能を紹介します。

AdMob

アプリ内広告に関する機能です。 広告の表示位置等を調整できます。

Analytics

アプリログ解析に関する機能です。 本家GoogleAnalyticsのように各画面の表示回数や操作傾向などを、ログを埋め込むことで解析できます。

Authentication

認証に関する機能です。 一般的なメールアドレス登録や、Google等の外部サイトのOAuth認証を行うことができます。

Cloud Firestore

NoSQLのクラウドデータベース機能です。 ユーザー情報や、アプリで使用するデータの格納等で使用します。

Cloud Functions

サーバーレスで実行できる関数です。 アプリ側から事前に定義した処理を呼び出すことができます。

Cloud Messaging

いわゆるプッシュ通知の機能です。

Cloud Storage

クラウドストレージ機能です。 例えば、プロフィール画像等を格納することができます。

Crashlytics

クラッシュレポート機能です。 どういった操作でクラッシュしたかの追跡等に便利です。

Dynamic Links

特定のURLが実行された場合、アプリを呼び出す機能です。 Webサービスを既に持っており、アプリがインストールされている場合のみアプリで表示させたい場合などに便利です。

In-app Messaging

特定の条件下でポップアップやバナーを表示させる機能です。 期間限定のキャンペーン通知などを、アプリに変更を加えることなく表示できます。

Instance ID

デバイスを一意に紐づけるインスタンスIDの機能です。 他の様々な機能のベースとして使われることが多いです。

ML Kit Natural Language

テキスト認識(OCR)や翻訳、顔識別など機能です。 カメラやマイク機能と組み合わせて使用します。

ML Kit Vision

画像認識に関する機能です。 上記のML Kit Natural Language同様、カメラ機能や写真機能と組み合わせて使用します。

Performance Monitoring

アプリのパフォーマンス解析機能です。 起動時間やリクエスト、パフォーマンスが悪い箇所の解析に使用します。

Realtime Database

クラウドデータベースです。 今後は、先のCloud Firestoreを推していくようです。

Remote Config

アプリの設定機能です。 今までアプリにconfigとして組み込んでいたデータをクラウドにおく事で、アプリの更新をすることなく変更を加えることができます。

まとめ

今回はreact-native-firebaseのセットアップと、利用できる機能一覧についてご紹介しました。 個別の機能についてはボリュームも大きいため、別記事に起こしていく予定です。

Firebaseはサーバサイドに欲しい機能のほとんどをカバーしているため、フロントはReactNativeでサーバーサイドはFirebaseだけで済んでしまうことも多いです。 そのため今後利用機会が多くなることが予想されるので、その際の導入の手引きになれば幸いです。

SNSでシェアする