Firebase と Flutter を使ってみる

このドキュメントは Flutter アプリを持っていて、それに Firebase を追加したい場合や、Firebase をすでに使用していて、Flutter を使用したネイティブモバイルアプリのビルド方法を学習したい場合に役立ちます。

前提条件

Flutter

Flutter に次のソフトウェアがインストールされている必要があります。

Flutter SDK とサポートライブラリ。
エディタ（好きなエディタを使用できます）。

既存の Flutter アプリがない場合は、使ってみる: テストドライブに従って、新しい Flutter アプリを作成します。手順はエディタによって異なります。IDE を使用している場合、新しいアプリは通常、プロジェクトと呼ばれます。

Firebase

Firebase アカウントに登録する必要があります。開発には無料プランで十分です。

Firebase プロジェクトを作成

Flutter アプリを接続するための Firebase プロジェクトを作成する必要があります。

Firebase コンソールに移動して、[プロジェクトを追加] をクリックします。
プロジェクトに名前を付け（「My Firebase Flutter App」など）、国 / 地域を会社または組織の場所に設定します。[プロジェクトを作成] をクリックします。
1 分後にプロジェクトの準備が整います。[続行] をクリックします。

プラットフォーム固有の Firebase 構成

Firebase プロジェクトを作成したら、そのプロジェクトを使用するようにアプリ（1 つまたは複数）を構成できます。これを行うには、アプリのプラットフォーム固有の ID を Firebase に登録し、アプリ用の構成ファイルを生成します。

Flutter アプリを iOS と Android の両方でリリースする場合は、iOS と Android の両方のバージョンを同じ Firebase プロジェクトに登録してください。そうでない場合は、不要なセクションをスキップしてください。

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

iOS の構成

Firebase コンソールの左側のナビゲーションで、[Project Overview] が選択されていることを確認します。[iOS アプリに Firebase を追加] をクリックします。ダイアログが表示されます。まず、次の 2 つの手順に記載されているように、必須の [iOS バンドル ID] を入力します。（バンドル ID の詳細）。
ターミナルウィンドウで、Flutter アプリの最上位ディレクトリに移動し、open ios/Runner.xcworkspace コマンドを実行して Xcode を開きます。（Xcode プロパティリストの詳細）。
Xcode で、左ペインの最上位の Runner ラベルをクリックすると、下の図に示すように、右ペインに [General] タブが表示されます。[Bundle Identifier] の値をコピーします。"yourcompany" と "yourproject" の実際の値は、Flutter アプリの作成時に指定した値によって異なります。コピーした [Bundle Identifier] の値を Firebase コンソールの [iOS バンドル ID] フィールドに貼り付け、[アプリを登録] をクリックします。
次のページで、指示に沿って GoogleService-Info.plist ファイルをダウンロードします。
上の図に示すように、Xcode では、Runner に Runner というサブフォルダがあることがわかります。GoogleService-Info.plist ファイルを（ダウンロードした場所から）その Runner サブフォルダにドラッグします。
Firebase コンソールに戻って、[次へ] をクリックし、残りの手順をスキップして Firebase コンソールのメインページに戻ります。

Android の構成

Firebase コンソールの左側のナビゲーションで、[Project Overview] が選択されていることを確認します。[Android アプリに Firebase を追加] をクリックします。すでにアプリ（前のセクションの iOS アプリなど）を追加している場合は、[別のアプリを追加] をクリックしてそれにアクセスします。ダイアログが表示されます。
Flutter アプリのディレクトリで、android/app/src/main/AndroidManifest.xml ファイルを開きます。manifest 要素の package 属性の文字列値は、Android パッケージ名（com.yourcompany.yourproject など）です。この値をコピーします。Firebase で、コピーしたパッケージ名を [Android パッケージ名] フィールドに貼り付けます。（パッケージ ID とアプリケーション ID の詳細）。
オプション: Google ログインまたは Firebase Dynamic Links を使用する予定の場合は、[デバッグ用の署名証明書 SHA-1] フィールドに値を入力する必要があります。クライアントの認証ガイドの指示に沿って、デバッグ証明書フィンガープリントの値を取得して貼り付けます。
[アプリを登録] をクリックします。
次のページで、指示に従って google-services.json ファイルをダウンロードします。google-services.json ファイルを Flutter アプリの android/app ディレクトリに移動します。
Firebase で、残りの手順をスキップしてメインの Firebase コンソールに戻ることができます。
最後に、Firebase によって生成された google-services.json ファイルを読み取るには、Google Services Gradle プラグインが必要です。IDE またはエディタで、android/app/build.gradle を開き、次の行をファイルの最後の行として追加します。
```
apply plugin: 'com.google.gms.google-services'
```
android/build.gradle で、buildscript タグの中に新しい依存関係を追加します。
```
buildscript {
    repositories {
        // ,,,
    }
    dependencies {
        // ...
        classpath 'com.google.gms:google-services:3.2.1'   // new
    }
}
```
"new" コメントは、追加された行を示しているにすぎません。新しい依存関係が他の classpath と正確に一致するようにしてください。この行は、プラグインのバージョン 3.2.1 を指定します（この時点でバージョン 3.3.0 または 3.3.1 は使用しないでください）。詳細については、Android プロジェクトに Firebase を追加する方法に関するドキュメントの「SDK を追加する」をご覧ください（ただし、Flutter の手順とは異なるため、これらの手順は使用しないでください）。

これで、Flutter アプリが Firebase に接続されるようになります。

FlutterFire プラグインを追加する

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

Firebase は、Firebase プロダクト（データベース、認証、アナリティクス、ストレージなど）ごとに 1 つずつの複数のライブラリからアクセスできます。Flutter は、各 Firebase プロダクトにアクセスするためのプラグインを提供しています。このプラグインのセットは FlutterFire と総称されています。FlutterFire プラグインの最新リストについては、FlutterFire GitHub のページをご覧ください。

アナリティクスの追加（オプション）

このドキュメントの後半は省略可能です。Firebase 向け Google アナリティクスを追加するためにアプリを変更する方法について説明します。アナリティクスを追加することにより、Firebase が Flutter で正常に動作していることの確認が比較的容易になります。また、アナリティクスは開発やデバッグだけでなく、公開したアプリが正常かどうかの追跡にも非常に役立つため、Flutter アプリに追加することをおすすめします。

firebase_analytics プラグインを pubspec.yaml ファイルに追加します。

dependencies:
  flutter:
    sdk: flutter
  firebase_analytics: ^0.3.3     # new

flutter packages get を実行します。パッケージとプラグインの管理の詳細については、パッケージの使用をご覧ください。

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

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

firebase_analytics サンプルプログラムリポジトリから、main.dart ファイルと tabs_page.dart ファイルを Flutter アプリの lib ディレクトリにコピーし、既存の main.dart ファイルを置き換えます。
Flutter アプリを実行します。
プロジェクトの Firebase コンソールを開きます。[アナリティクス] で、[Dashboard] をクリックします。ダッシュボードの [過去 30 分間のユーザー] パネルにアクティブユーザーが表示されます（この処理にはしばらく時間がかかる場合があります）。これにより、アナリティクスが機能していることを確認できます。DebugView を有効にすることによって、サンプルプログラムによって生成されたすべてのイベントを表示することもできます。アナリティクスの設定の詳細については、iOS と Android のスタートガイドをご覧ください。

Firebase と Flutter の詳細

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

最終更新日: 9月 13, 2018