58
30

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

FlutterFire CLIを利用してFlutter×Firebaseの環境構築をする

Last updated at Posted at 2021-12-12

Flutter 2.8のアップデートと共に、Flutter×Firebaseの更新が多数なされました。

その中でも、Flutter×Firebaseの環境構築を自動化してくれる、
FlutterFire CLIの追加は目を引くアップデートだったのではないでしょうか。

今回は、FlutterFire CLIを利用してFlutter×Firebaseの環境構築をする方法について記載します。

参考にする公式ドキュメントはこちらです。

2022/1/26追記
Firebase Analytics, Crashlytics,Performance Monitoringを使う場合、
動作しない、または正常通り動作しないようで、従来の手法での環境構築が推奨されています。
また、google_sign_inを使ったFirebase_authを使う場合もGoogle services JSONの従来の手法でのセットアップが必要となります。
詳細は上記ドキュメントのUsageをご確認ください。

##前準備##

事前準備としてFirebase CLIがインストールされている必要があります。

以下のページを参考にインストールしてください。

##FlutterFire CLIのインストール##

以下のコマンドを、ターミナル(コマンドプロンプト)で実行してください。

dart pub global activate flutterfire_cli

公式ドキュメントには実行場所について記載されていません。
今回は念の為Root(ユーザー名のフォルダ)にて実行して確認しています。

###ワーニングが発生した場合###

上記の結果、以下のワーニングが発生する場合があります。

スクリーンショット 2021-12-12 18.16.24.png

この場合、Flutter のプロジェクトファイルのルートでflutterfireコマンドを実行しても、
zsh: command not found: flutterfireとなり、実行できません。

この場合、ワーニングに記載の処理を実行しましょう。
具体的には.bashrc,または.zshrc等のファイルに、以下のコードを追加します。

export PATH="$PATH":"$HOME/.pub-cache/bin"

追加の仕方については以下の記事が参考になりました。

以上でFlutterFire CLIのインストールは完了となります。

##FlutterFire CLI の利用##

実際にFlutterFire CLIを使い、Firebaseの環境構築をしてみましょう。

ターミナルからFlutter プロジェクトのルートで以下のコードを実行してください。

flutterfire configure

実行すると以下のようにFirebaseのProject選択画面に移ります。
(Firebase CLIのfirebase loginでログインしたアカウントのプロジェクトが表示されます。)

スクリーンショット 2021-12-12 19.12.39のコピー.png

今回はcreate a new projectで新しくプロジェクトを作成してみましょう。
Enterを押すと、プロジェクト名を入力するよう求められます。

スクリーンショット 2021-12-12 19.13.31.png

入力しプロジェクト作成が終わると、プラットフォームの選択肢が表示されます。
spaceキーでチェックを入れ、Enterキーで決定しましょう。
今回は、AndroidとiOSを選択してみます。

スクリーンショット 2021-12-12 19.14.25.png

Firebaseプロジェクトに対し、Androidのアプリ登録が実行されます。
Androidのbundle IDがFlutter Project内に既に記載されていれば、そのIDでアプリが登録されます。
今回は記載されていたので、そのまま登録されました。

スクリーンショット 2021-12-12 19.16.56のコピー.png

次にiOSのアプリ登録が実行されます。
同様に、iOSの bundle ID がFlutter Project内に既に記載されていれば、そのIDでアプリが登録されます。
今回は記載されていなかったため、 bundle IDの入力を求められました。

スクリーンショット 2021-12-12 19.18.26.png

入力が終わると、入力したbundle IDでアプリが登録されます。
登録が完了すると、libフォルダ内に、firebase_options.dartが生成され、CLIツールが終了します。

スクリーンショット 2021-12-12 19.19.04.png

以上で環境構築は完了です。

実際にFirebase Consoleを覗いてみると、
プロジェクトが作成され、設定したbundle IDのアプリが登録されていることがわかります。

###firebase_options.dartについて###

生成されたfirebase_options.dartがCLIツールを使った環境構築のキモです。
このファイルには、Firebaseを取り扱うのに必要なapiKey等の情報が盛り込まれています。
google-services.json等から必要な情報を抜き出したファイルのようです。

また、このファイル内のクラスのメソッドで、プラットフォームで条件分岐して必要な情報を取れるようになっています。
このメソッドを初期化時に呼び出すことで、Firebaseにアクセスし、Flutterプロジェクトを初期化する分けです。

実際に生成されたfirebase_options.dartが以下となります。
apiKey等は testに置き換えています)

// File generated by FlutterFire CLI.
// ignore_for_file: lines_longer_than_80_chars
import 'package:firebase_core/firebase_core.dart' show FirebaseOptions;
import 'package:flutter/foundation.dart'
    show defaultTargetPlatform, kIsWeb, TargetPlatform;

/// Default [FirebaseOptions] for use with your Firebase apps.
///
/// Example:
/// ```dart
/// import 'firebase_options.dart';
/// // ...
/// await Firebase.initializeApp(
///   options: DefaultFirebaseOptions.currentPlatform,
/// );
/// ```
class DefaultFirebaseOptions {
  static FirebaseOptions get currentPlatform {
    if (kIsWeb) {
      throw UnsupportedError(
        'DefaultFirebaseOptions have not been configured for web - '
        'you can reconfigure this by running the FlutterFire CLI again.',
      );
    }
    // ignore: missing_enum_constant_in_switch
    switch (defaultTargetPlatform) {
      case TargetPlatform.android:
        return android;
      case TargetPlatform.iOS:
        return ios;
      case TargetPlatform.macOS:
        throw UnsupportedError(
          'DefaultFirebaseOptions have not been configured for macos - '
          'you can reconfigure this by running the FlutterFire CLI again.',
        );
    }

    throw UnsupportedError(
      'DefaultFirebaseOptions are not supported for this platform.',
    );
  }

  static const FirebaseOptions android = FirebaseOptions(
    apiKey: 'test',
    appId: 'test',
    messagingSenderId: 'test',
    projectId: 'flutter-fire-cli-test-project',
    storageBucket: 'flutter-fire-cli-test-project.appspot.com',
  );

  static const FirebaseOptions ios = FirebaseOptions(
    apiKey: 'test',
    appId: 'test',
    messagingSenderId: 'test',
    projectId: 'flutter-fire-cli-test-project',
    storageBucket: 'flutter-fire-cli-test-project.appspot.com',
    iosClientId: 'test',
    iosBundleId: 'com.example.flutterfireclitest',
  );
}

###初期化処理###

flutter_coreパッケージをインストールしていない場合は、先にインストールしましょう。
初期化処理を記載する前に、記載するファイルで以下のimport文を記載します。

import 'firebase_options.dart';

初期化処理は以下の通りです。

await Firebase.initializeApp(
  options: DefaultFirebaseOptions.currentPlatform,
);

firebase_options.dartDefaultFirebaseOptions.currentPlatformを呼び出していることがわかります。

main.dartのrunAppより前で実行する場合は、Firebase.initializeより前で、
WidgetsFlutterBinding.ensureInitialized();
を実行してください。

##従来との比較##

環境構築の内容を比較してみます。
Firebase.initializeを記載する手前までの手順で比較します。

###従来###

  1. Firebase ConsoleからFirebase プロジェクトを作成
  2. Firebase プロジェクト でAndroid のアプリを作成
  3. google-services.jsonをダウンロードし、Flutterのプロジェクト内の適切な場所に配置
  4. build.gradleapply plugin: 'com.google.gms.google-services'等の文を追記
  5. Firebase プロジェクト でiOSのアプリを作成
  6. GoogleService-info.plistをダウンロードし、xcodeを立ち上げ、 Flutterのプロジェクト内の適切な場所に配置
  7. 完了!

###CLIを使用###

  1. ターミナルからFlutter Projectのルートでfirebase configureを実行
  2. プロジェクト選択画面でcreate a new project を選択、Project名を入力
  3. 作成するプラットフォーム(iOS,Androidなど)を選択
  4. iOSのBundle Nameを入力
  5. 完了!

CLIツールの方が、手順少なく環境構築を完了できます。
また、ファイルを行ったり来たりせず、ターミナル上で完結するのも良い点ですね。

##課題とまとめ##
このツールでできるのは、あくまでFirebaseの環境構築であり、
FirestoreやFirebaseAuthの初期設定を行なってくれるものではありません。
これらはConsole上から設定する必要があります。

とはいえ、Firebaseのプロジェクト作成から環境構築まで一つのツールでできるようになったのは、
本当に素晴らしいことだと思います。

従来と勝手が違うことに戸惑うかもしれませんが、積極的に使ってみることをお勧めします。

以上、読んでいただきありがとうございました。

58
30
0

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
58
30

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?