More than 1 year has passed since last update.

ピープルソフトウェア株式会社

【Mac不要】FlutterアプリにFirebase SDKを組み込んでiOSとAndroidに実機配備する手順 - Codemagic編

Last updated at 2021-12-30Posted at 2020-05-10

はじめに

※この記事は、以下の記事の続編の一つです。

【Mac不要】開発中のFlutter製アプリをiOSとAndroidに実機配備する手順 - Codemagic編

この記事ではその後、FlutterにFirebase SDKを組み込み、iOS, Androidの両端末からFirebaseコンソールに疎通できるまでの手順を説明します。

Firebase SDKの組み込みを終わらせておくと、以下のようなメリットがあります。

アプリがいつ、どこで、実行されているかの情報がFirebaseコンソールで確認できる。
Firebase API(FlutterFire)との連携コードの組み込みがスムーズに行える。
利用者のGoogleアカウントを利用するための実装(例:Build a Photo Sharing app with Google Photos and Flutter)の組み込みがスムーズに行える。

上記から、この手順が開発の土台になるケースが結構あるかと思い、手順にまとめておくことにしました。では早速始めてみましょう。

謝辞

Codemagic Practical guide

この記事は、Codemagicで提供されている以下の手順を、Macを使わずWindows10で実施した記録です。丁寧なガイドを提供してくださり、ありがとうございます。

前提

この記事は、以下に当てはまる人向けの iOS/Android 対応アプリにFirebase SDkを組み込む手順を紹介します。

開発機はWindowsだ
Macを持っていない
Flutterで開発したい
Apple Developer Programに既に登録している。

開発環境の前提

以下の記事の手順に沿って、FlutterアプリをCodemagicでビルドし、自身のiOS端末/Android端末にアプリを配備できる状態にしておいてください。

【Mac不要】開発中のFlutter製アプリをiOSとAndroidに実機配備する手順 - Codemagic編

ソースコードの公開

この記事の手順で作成したソースコードはGithubで公開しています。併せてご参照ください。
https://github.com/atsuteru/flutter_firebase_0507/tree/Qiita-FirebaseSDK-v1.0

本文

1) Firebase consoleにAppを登録する

Firebase consoleにアクセスし、Firebase プロジェクトを追加します。
※アカウントがない場合は、作成してください。

プロジェクト名を入力します。
Googleアナリティクスは有効にしておきます。
Googleアナリティクスアカウントは既定のものを選択します。

2) Firebase AppにAndroidアプリを追加し、FlutterのAndroidプロジェクトにSDKを組み込む

Flutter consoleの作成したAppのページで、Androidアプリを追加します。

その前に1つ、情報が必要です。

この後の手順で、Androidアプリを署名している証明書の「フィンガプリント(SHA1)」を入力する必要があります。以下のコマンドを実行して、Codemagicに登録してあるキーストア(*.jks)の「フィンガプリント(SHA1)」を調べておきましょう。

powershell

keytool -v -list -keystore flutter_firebase_0503.jks
キーストアのパスワードを入力してください:
キーストアのタイプ: PKCS12
キーストア・プロバイダ: SUN
キーストアには1エントリが含まれます
別名: flutter_firebase_0503_key
...省略...
証明書のフィンガプリント:
         SHA1: 59:F2:64:83:A9:12:E8:44:02:58:45:73:B7:41:1A:77:8D:32:13:B0
...省略...

追加するには、Androidのアイコンをクリックします。
アプリの情報を入力します。Androidパッケージ名はandroid/ap/src/profile/AndroidManifest.xmlのpackage属性と同じ値にします。デバッグ用の署名証明書 SHA-1には、調べておいた「フィンガプリント(SHA1)」を入力します。入力後は「アプリを登録」をクリックしましょう。
次のページでは、設定ファイルgoogle-services.jsonをダウンロードします。
ダウンロードしたファイルは、プロジェクトルート/android/app/google-services.jsonに保存します。保存できたら「次へ」をクリックしましょう。
Firebase SDKをAndroidプロジェクトに組み込みます。このページの指示に従って、組み込みましょう。なお「プロジェクトレベルのbuild.gradle」はandroid/build.gradleで、「アプリレベルのbuild.gradle」はandroid/app/build.gradleです。「Add this line」の箇所を「それぞれのブロックの末尾に」追加する形です。また手順「最後に、IDE に表示されるバーの [Sync now] をクリックします。」はスキップして大丈夫です。できたら「次へ」をクリックしましょう。
最後に、アプリケーションとの疎通確認のページが表示されます。
疎通確認は後で行うので、ここでは「このステップをスキップ」を選択してください。

４の手順で、私が編集した結果を下に貼り付けておきます。

android/build.gradle

buildscript {
    ...省略...
    dependencies {
        classpath 'com.android.tools.build:gradle:3.5.0'
        classpath 'com.google.gms:google-services:4.3.3'
    }
}

android/app/build.gradle

apply plugin: 'com.android.application'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
apply plugin: 'com.google.gms.google-services'

android {
   ...(省略)...
}

...(省略)...

dependencies {
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
    implementation 'com.google.firebase:firebase-analytics:17.2.2'
}

また、プロジェクトに追加したgoogle-services.jsonは、リポジトリに追加されるべきではない情報が含まれています。
以下のように、除外する設定をandroid/.gitignoreに追加します。

android/.gitignore

app/google-services.*

その代わり、google-services.jsonは別途、Codemagicに登録する必要があります。ここでは以下のコマンドを実行し、google-services.jsonをbase64形式のファイルgoogle-services.base64に変換しておきましょう。

powershell

cd $Env:userprofile\source\repos\flutter_firebase\flutter_firebase_0503
openssl enc -base64 -in android/app/google-services.json -out android/app/google-services.base64

Android向けの組み込み手順は以上です。次はiOS向けの組み込み手順を行いましょう。

3) Firebase AppにiOSアプリを追加し、FlutterのiOSプロジェクトにSDKを組み込む

Flutter consoleの作成したAppのページで、iOSアプリを追加します。

追加するには、iOSのアイコンをクリックします。
アプリの情報を入力します。iOSバンドルIDはandroid/ap/src/profile/AndroidManifest.xmlのpackage属性と同じ値にします。App Store IDは、Apple Store Connectの手順を実施済みの方のみ入力してください。（記事：【Mac不要】開発中のFlutter製アプリを仲間のiOS端末に実機配備する手順 - Codemagic&TestFlight編）省略しても、本記事の目的には影響ありません。入力できたら、「アプリを登録」をクリックしましょう。
次のページでは、設定ファイルGoogleService-Info.plistをダウンロードします。ダウンロードしたファイルは、プロジェクトルート/ios/Runner/GoogleService-Info.plistに保存します。できたら、「次へ」をクリックしましょう。
次のFirebase SDKの組み込み手順は、iOSの場合は不要です。ビルド時にFlutterが自動的に行ってくれるからです。このページでは何もせず、「次へ」をクリックしましょう。
次の初期化コードの追加は必要です。ios/Runner/AppDelegate.mに@import Firebaseと[FIRApp configure];を追加しましょう。画面で示される例と、Flutterで作成されたコードは少し違いますので、私が作業した結果を後に貼り付けておきます。参考にしてください。できたら、「次へ」をクリックしましょう。
最後に、アプリケーションとの疎通確認のページが表示されます。疎通確認は後で行うので、ここでは「このステップをスキップ」を選択してください。

私が初期化コードを追加した結果を、以下に貼り付けておきます。

ios/Runner/AppDelegate.m

#import "AppDelegate.h"
#import "GeneratedPluginRegistrant.h"

@import Firebase;

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];
  [FIRApp configure];
  // Override point for customization after application launch.
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end

あと、iOSの場合は追加でもうひと手間が必要です。実は、設定ファイルGoogleService-Info.plistの追加は、本来はMacを使ってXCode上で行わなければなりません。ios/Runner.xcodeproj/project.pbxprojにGoogleService-Info.plistを認識させるためです。

そこで、そのためのコードを以下に貼り付けておきます。Macを持たない我々は、手作業で追加しましょう。ここが本記事の最大難易度です。集中して乗り越えましょう。

GoogleService-Info.plistとコメントがついている行を、該当するsectionに追加します。追加する行は全部で4行だけです。各ブロックの一番最後に追加してください。特に3番目の行は紛らわしいブロックが近くにあるので、ちゃんと目印97C146E51CF9000F007C117Dを見つけて追記しましょう。もしわかりにくければ、このコミットも参考にしてください。

ios/Runner.xcodeproj/project.pbxproj


/* Begin PBXBuildFile section */
        C402FAF4F184B60574825BEF /* GoogleService-Info.plist in Resources */ = {isa = PBXBuildFile; fileRef = C402FD7E9DA6F279205D8C27 /* GoogleService-Info.plist */; };
/* End PBXBuildFile section */

/* Begin PBXFileReference section */
        C402FD7E9DA6F279205D8C27 /* GoogleService-Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.info; path = "GoogleService-Info.plist"; sourceTree = "<group>"; };
/* End PBXFileReference section */

/* Begin PBXGroup section */
        97C146E51CF9000F007C117D = {
            children = (
                C402FD7E9DA6F279205D8C27 /* GoogleService-Info.plist */,
            );
        };
/* End PBXGroup section */

/* Begin PBXResourcesBuildPhase section */
        97C146EC1CF9000F007C117D /* Resources */ = {
            files = (
                C402FAF4F184B60574825BEF /* GoogleService-Info.plist in Resources */,
            );
        };
/* End PBXResourcesBuildPhase section */

最後に、プロジェクトに追加したGoogleService-Info.plistは、リポジトリに追加されるべきではない情報が含まれています。以下のように、除外する設定をios/.gitignoreに追加します。

ios/.gitignore

Runner/GoogleService-Info.*

その代わり、GoogleService-Info.plistは別途、Codemagicに登録する必要があります。ここでは以下のコマンドを実行し、GoogleService-Info.plistをbase64形式のファイルGoogleService-Info.base64に変換しておきましょう。

powershell

cd $Env:userprofile\source\repos\flutter_firebase\flutter_firebase_0503
openssl enc -base64 -in iOS/Runner/GoogleService-Info.plist -out iOS/Runner/GoogleService-Info.base64

iOS向けの組み込み手順も以上です。

次に、FlutterアプリにもFirebase SDKの組み込みを行いましょう。

4) FlutterアプリにFirebase SDKを組み込む

と言っても、ライブラリを依存関係に追加するだけです。pubspec.yamlのdependenciesにfirebase_coreを追加しましょう。flutterよりも前に挿入するようにしてください。

pubspec.yaml

dependencies:
  firebase_core: ^0.4.4+3
  flutter:
    sdk: flutter

これでFlutterに対する組み込みもできました。

では、ソースコードの修正をpushするその前に・・・！

Codemagicのビルドの設定を修正しましょう。

5) CodemagicにFirebase SDKの組み込みに必要な設定を追加する

Codemagicのビルドの設定を編集する

Codemagicのビルドの設定ページに移動し、以下の設定を追加します。

Environment variables

以下の環境変数を追加します。ファイルの内容は、*.base64ファイルをエディタで開き、全選択＆コピーしたものを貼り付けます。改行もそのまま貼り付けてください。ADDボタンを押すこと、SAVEボタンを押すことを忘れないように。

GOOGLE_SERVICE_INFO_ANDROID : android/app/google-services.base64ファイルの内容
GOOGLE_SERVICE_INFO_IOS : iOS/Runner/GoogleService-Info.base64ファイルの内容

Pre-build script

Pre-build scriptは、Buildの上の「＋」をクリックすると現れます。そこに以下のスクリプトを追加します。SAVEボタンを押すことを忘れないように。よく似たPost-test scriptに騙されないように。

#!/bin/bash
echo $GOOGLE_SERVICE_INFO_ANDROID | base64 -d -o android/app/google-services.json
echo $GOOGLE_SERVICE_INFO_IOS | base64 -d -o ios/GoogleService-Info.plist

これでCodemagic上のビルドの設定ができました。

ここまで出来たら、ソースコードの修正をコミットし、pushしましょう。Codemagicで自動的にビルドが開始します。

ビルドが完了し、インストール用のメールが届いたら、Firebase consoleとの疎通を確認していきましょう。

6) Firebaseコンソールとの疎通を確認する

Firebase consoleのAndroidアプリのアイコンをクリックし、SDKの設定を続けるを選択します。
設定画面で「次へ」を押下して進み、アプリを実行してインストールを確認まで進みます。
この状態で、Androidアプリをインストールし、起動、操作、終了を数回繰り返してみてください。
設定画面が以下のように切り替わったら、疎通成功です。
もしうまくいかない場合は、Android端末のアプリの再インストールも試してみてください。
続けて、Firebase consoleのiOSアプリのアイコンをクリックし、SDKの設定を続けるを選択します。
設定画面で「次へ」を押下して進み、アプリを実行してインストールを確認まで進みます。
この状態で、iOSアプリをインストールし、起動、操作、終了を数回繰り返してみてください。
設定画面が以下のように切り替わったら、疎通成功です。
もしうまくいかない場合は、iOS端末のアプリの再インストールも試してみてください。

※Androidアプリは、以前のバージョンをアンインストールしないとインストールに失敗するかもしれません。
※iOSアプリは、TestFlightの手順（記事：【Mac不要】開発中のFlutter製アプリを仲間のiOS端末に実機配備する手順 - Codemagic&TestFlight編）を実施している場合は、TestFlightから「Update」することでこのバージョンをインストールしましょう。それ以外はの方はCodemagicから届くメールからインストールしてください。

以上で疎通確認は完了です。

7) Firebaseコンソールでアプリの利用状況を確認する。

疎通が終われば、アプリのページは次のように「アナリティクスデータを待機しています...」と表示されるようになります。これはアナリティクスの集計が１日おきに行われるためです。

一日待つと、このようにAnalyticsが表示されるようになります。

さらにAnalyticsのページでは、こんな情報も見ることができます。

おわりに

これで、本記事の目的は達成できました。しかし、これだけではまだ何もできませんね。

この記事の続編として、次の２本を予定しているので、乞うご期待！

Firebase crashlyticsを組み込み、実機で発生したクラッシュ情報をFirebaseコンソールで見れるようにする。
2020/5/11 公開しました→ 【Mac不要】FlutterアプリにFirebase Crashlyticsを組み込んでiOSとAndroidに実機配備する手順 - Codemagic編
Google Photo APIと連携し、利用者のフォトアルバムにアクセスする

最後に、この記事がFlutterを始められる方にとって少しでも助けになれば、幸いです。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up