コンソールへ移動

Flutter アプリに Firebase を追加する

このガイドの手順に沿って、Flutter アプリに Firebase プロダクトを追加してください。

ステップ 1: 環境を設定する

  • ご利用のオペレーティング システムに対応した Flutter をインストールし、続いて以下のコンポーネントもインストールします。

    • Flutter SDK
    • サポート ライブラリ
    • プラットフォーム固有のソフトウェアと SDK
  • お好みのエディタまたは IDE(Android Studio、IntelliJ、Xcode、VS Code など)をインストールします。

  • エディタまたは IDE で Flutter アプリを開きます。

    • iOS 向け開発 - アプリのターゲットは iOS 8 以降にしてください。
    • Android 向け開発 - アプリのターゲットは API レベル 16(Jelly Bean)以降にする必要があります。
  • アプリを実行するデバイスまたはエミュレータを設定します。

    • Android 向け開発 - エミュレータでは、Google Play のエミュレータ イメージを使用する必要があります。
  • Google アカウントを使って Firebase にログインします。

ステップ 2: Firebase プロジェクトを作成する

Flutter アプリに Firebase を追加する前に、アプリに接続する Firebase プロジェクトを作成します。Firebase プロジェクトの詳細については、Firebase プロジェクトについて理解するをご覧ください。

ステップ 3: Firebase を使用するようにアプリを構成する

アプリが Firebase プロジェクトに接続するための構成を行います。複数のアプリを構成できます。これを行うには、アプリのプラットフォーム固有の ID を Firebase プロジェクトに登録します。アプリの構成ファイルは Firebase によって自動的に生成されます。

アプリを構成する手順の詳細については、次のプラットフォーム固有の手順(iOS 用および Android 用)を使用します。

Flutter アプリの最上位ディレクトリ直下にある ios ディレクトリと android ディレクトリに iOS と Android のプラットフォーム固有の構成ファイルがそれぞれ保存されます。

iOS アプリを構成する

  1. Firebase コンソールの [Project Overview] ページの中央にある iOS アイコンをクリックして設定ワークフローを起動します。

    すでに Firebase プロジェクトにアプリまたはゲームを追加している場合は、[アプリを追加] をクリックするとプラットフォームのオプションが表示されます。

  2. アプリを Firebase プロジェクトに追加します。

    1. アプリのバンドル ID を [iOS バンドル ID] に入力します。

      • このバンドル ID を見つけるには、XCode でアプリを開き、最上位の Runner ディレクトリの [全般] タブにアクセスします。[バンドル ID] フィールドの値が iOS バンドル ID です(例: com.yourcompany.yourproject)。
    2. (省略可)設定ワークフローの指示に従って他のアプリ情報を入力します。

    3. [アプリの登録] をクリックします。

  3. Firebase iOS 構成ファイルをアプリに追加します。

    1. [Download GoogleService-Info.plist] をクリックして、Firebase iOS 構成ファイル(GoogleService-Info.plist)を入手します。

      Firebase iOS 構成ファイルはいつでも再ダウンロードできます。

    2. ダウンロードしたファイルを Flutter アプリの Runner/Runner ディレクトリに移動します。

  4. Firebase コンソールの設定ワークフローに戻り、[次へ] をクリックして残りの手順をスキップします。

  5. FlutterFire プラグインを追加するに進みます。

Android アプリを構成する

  1. Firebase コンソールの [Project Overview] ページの中央にある Android アイコンをクリックして設定ワークフローを起動します。

  2. アプリを Firebase プロジェクトに追加します。

    1. アプリのアプリケーション ID をフィールド [Android パッケージ名] に入力します。

      • アプリケーション ID はパッケージ名と呼ばれることもあります。

      • このアプリケーション ID はモジュール(アプリレベル)の Gradle ファイル(通常は android/app/build.gradle)内に記載されています(アプリケーション ID の例: com.yourcompany.yourproject)。

    2. (省略可)設定ワークフローの指示に従って他のアプリ情報を入力します。

    3. [アプリの登録] をクリックします。

  3. Firebase Android 構成ファイルをアプリに追加します。

    1. [Download google-services.json] をクリックして、Firebase Android 構成ファイル(google-services.json)を入手します。

      Firebase Android 構成ファイルはいつでも再ダウンロードできます。

    2. 構成ファイルを Flutter アプリの android/app ディレクトリに移動します。

  4. Android アプリで Firebase サービスを有効にするには、Gradle ファイルに google-services プラグインを追加します。

    1. ルートレベル(プロジェクト レベル)の Gradle ファイル(android/build.gradle)に、Google サービス プラグインを含めるためのルールを追加します。Google の Maven リポジトリがあることも確認してください。

      buildscript {
      
        repositories {
          // Check that you have the following line (if not, add it):
          google()  // Google's Maven repository
        }
      
        // ...
        dependencies {
          // ...
      
          // Add the following line:
          classpath 'com.google.gms:google-services:3.2.1'  // Google Services plugin
        }
      }
      allprojects {
        // ...
      
        repositories {
          // Check that you have following line (if not, add it):
          google()  // Google's Maven repository
          // ...
        }
      }
      
    2. モジュール(アプリレベル)の Gradle ファイル(通常は android/app/build.gradle)で、ファイルの末尾に以下の行を追加します。

      dependencies {
        // ...
      }
      
      // ...
      
      // Add the following line to the bottom of the file:
      apply plugin: 'com.google.gms.google-services'  // Google Play services Gradle plugin
      
    3. flutter packages get を実行します。

      パッケージとプラグインの管理の詳細については、パッケージの使用をご覧ください。

  5. FlutterFire プラグインを追加するに進みます。

ステップ 4: FlutterFire プラグインを追加する

Flutter はプラグインを使用して、Firebase API などの幅広いプラットフォーム固有サービスへのアクセスを提供します。プラグインには、各プラットフォームのサービスと API にアクセスするためのプラットフォーム固有のコードが含まれています。

Firebase にはさまざまなライブラリを通してアクセスします。Firebase プロダクトごと(Database、Authentication、アナリティクス、Storage など)に個別のライブラリが存在します。Flutter が提供する Firebase プラグインのセットは、FlutterFire と総称されています。

Flutter はマルチプラットフォームの SDK であるため、各 FlutterFire プラグインは iOS と Android の両方に適用できます。つまり、Flutter アプリに追加した FlutterFire プラグインは、iOS と Android の両方のバージョンの Firebase アプリで使用されます。

FlutterFire プラグインの最新リストについては、FlutterFire のドキュメントをご覧ください。

  1. エミュレータまたはデバイス上で、アプリが実行されていないことを確認します。

  2. Flutter アプリのルート ディレクトリから、pubspec.yaml ファイルを開きます。

  3. Firebase Core SDK 用の FlutterFire プラグインを追加します。

    dependencies:
      flutter:
        sdk: flutter
      firebase_core: ^0.2.5  # add dependency for Firebase Core
    
  4. 特定の Firebase プロダクトを使用するための FlutterFire プラグインを追加します。

    次のセクションのアナリティクスを追加するでは、FlutterFire プラグインをアプリに追加する方法を例示しています。

  5. アプリを実行してインストールが正常に実施されたことを確認します。

これで設定は完了です。Flutter アプリは Firebase を使用するように登録され、構成されました。

アナリティクスを追加する(省略可)

Firebase 向け Google アナリティクスを Flutter アプリに追加することは任意ですが、この方法により、Firebase と Flutter が正常に動作していることを比較的簡単に確認できます。また、アナリティクスは開発やデバッグだけでなく、本番環境用アプリの正常性を追跡するのにも非常に役立ちます。

  1. エミュレータまたはデバイス上で、アプリが実行されていないことを確認します。

  2. pubspec.yaml ファイルに、Firebase 向け Google アナリティクス用の FlutterFire プラグインを追加します。

    dependencies:
      flutter:
        sdk: flutter
      firebase_core: ^0.2.5       # This dependency was added during initial configuration.
      firebase_analytics: ^1.0.4  # add dependency for Google Analytics for Firebase
    
  3. flutter packages get を実行します。

    パッケージとプラグインの管理の詳細については、パッケージの使用をご覧ください。

アナリティクス アプリの例

すべてのパッケージと同様に、firebase_analytics プラグインにはサンプル プログラムが付属しています。

  1. Firebase を使用するように構成した Flutter アプリを開きます。

  2. アプリの lib ディレクトリにアクセスして、既存の main.dart ファイルを削除します。

  3. Firebase 向け Google アナリティクスのサンプル プログラム リポジトリから、次の 2 つのファイルをコピーしてアプリの lib ディレクトリに貼り付けます。

    • main.dart
    • tabs_page.dart
  4. Flutter アプリを実行します。

  5. Firebase コンソールでアプリの Firebase プロジェクトに移動し、左側のナビゲーションで [アナリティクス] をクリックします。

    • [Dashboard] をクリックします。アナリティクスが正常に動作している場合、ダッシュボードの [過去 30 分間のユーザー] パネルにアクティブなユーザーが表示されます(この処理にはしばらく時間がかかる場合があります)。

    • [DebugView] をクリックします。この機能を有効にすると、サンプル プログラムによって生成されたすべてのイベントが表示されます。

アナリティクスの設定の詳細については、iOSAndroid のスタートガイドをご覧ください。

次のステップ