ミニマルなプロトタイプの最強タッグ Flutter & Firebase

Googleが開発し、存在感を発揮して来たクロスプラットフォームのFlutter。
同じくGoogleが提供するFirebaseと連携させる事で非常にミニマルにネイティブアプリのプロトタイプが作れます。

最近では企業でも利用される事例が増えて来ました。個人開発でもFlutter x Firebaseは面倒なバックエンドを簡略化しながら、iOS、Android双方をワンソースで作る事が出来るので、非常に遊びがいがあります。

今日はその初歩の初歩、Flutterプロジェクトを立ち上げ、Firebaseと連携する所をささっと案内していきます。

話さない事

XCode、Android Studioとシュミレータなどの動かし方

作業手順

手順はシンプルです。
①Flutterプロジェクトを作る
②Firebaseプロジェクトを作る
③FlutterプロジェクトとFirebaseプロジェクトをSDKをインストールさせて繋げる
といった手順になります。

①Flutterプロジェクトを作る

まずFlutterのプロジェクトを作りましょう

1. Flutterをローカルにgit clone

zsh

$ git clone https://github.com/flutter/flutter.git
$ export PATH="$PATH:`pwd`/flutter/bin" //パスを通しましょう

2. XCodeとAndroid Studioをインストール

下記よりXCodeとAndroid Studio両方をダウンロード・インストールしましょう
XCode: https://apps.apple.com/us/app/xcode/id497799835
Android Studio: https://developer.android.com/studio

下記コマンドを叩き、問題がなければ設定終了です。

zsh

$ flutter doctor

3. Flutterプロジェクトを作る

任意のディレクトリにて下記コマンドでFlutterプロジェクトを作りましょう

zsh

$ flutter create <アプリ名>

4. Flutterプロジェクトを立ち上げる

$ cd <アプリ名>
$ open -a Simulator // iOSシミュレーターの立ち上げ
$ flutter run

コレで正常に立ち上がれば、デフォルトのアプリがiOSシミュレータ上に立ち上がります。

②Firebaseプロジェクトを作る

さて次はFlutterのバックエンドとして使うFirebaseの準備をしましょう
firebaseコンソールをポチポチするだけです。

1.「プロジェクトの追加」

2. プロジェクトの名前を付ける

3. Googleアナリティクスの設定をする

ここからはオプショナルです。テストアプリを作りたいだけなら設定無しでも良いでしょう。

4. プロジェクトの作成

「プロジェクトの作成」を押せばプロジェクトの完成です。

③FirebaseとFlutterを繋ぐ

iOSとAndroid両方を用意する場合は、それぞれのアプリをfirebaseプロジェクトに登録しなくてはいけません。

「＋アプリを追加」から追加していきましょう。

iOSもAndroidも手順は大体同じです。

アプリ名を記入
▼
GoogleService-Info.plistをダウンロード、所定の場所に配置
▼
読み込み用のコードを追加
▼
アプリを起動、通信させてインストールされているかを確認

iOS, Android共通

まず始めにflutterプロジェクトのpubspec.ymlの依存関係にfirebase-coreを追加しましょう

pubspec.yml

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^0.5.0+1 <--コイツを追加

FirebaseとFlutterを繋ぐ【iOS編】

1. アプリ名を記入

今回私はtime-tracker-xという名前のアプリを作っていきたいと思います。

iOSバンドルIDはflutterプロジェクトのiOS/Runner.xcodeproj/project.pbxprojファイル内に既に記載されているので、そちらを指定しましょう。エディタでPRODUCT_BUNDLE_IDENTIFIERを検索すれば見つかるはずです。

2. GoogleService-Info.plistをダウンロード、所定の場所に配置

次は指示通り、GoogleService-Info.plistをダウンロードし、flutterプロジェクト内のiOS/Runnerディレクトリに配置してあげましょう。

!!注意!!： 配置の際の最大の注意点は単純にダウンロードしたファイルをプロジェクトファイルにコピペするのではなく、必ずXCodeを使用してください。

XcodeからFlutterプロジェクトのRunnerディレクトリを選択した状態で、Add Files to "Runner"でダウンロードしたGoogleService-Info.plistを選択してくダサい。この手順を踏まないとファイルを認識せずエラーになってしまいます。

3. `pod install`でアプリの `.xcworkspace`を作成

今度はiOSディレクトリに移動し、依存関係のインストールと管理を行います。
Googleアナリティクスを使う場合は下記をPodfileに追記しましょう。

Podfile

pod 'Firebase/Analytics'

配置後にpod installをする事で依存関係のインストールと.xcworkspaceが作成されます。

4. 初期化コードを追加

初期化コードをiOS/Runner/AppDelegateに追加します。

iOS/Runner/AppDelegate.swift

import UIKit
import Flutter
import Firebase // <--コレを追記

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    FirebaseApp.configure() // <--コレを追記
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

**!!注意!!：**ちなみにFirebaseApp.configure()をGeneratedPluginRegistrant.register(with: self)の後に記述するとアプリがクラッシュしますので注意してください。
参考： https://stackoverflow.com/questions/63204172/errors-launching-flutter-app-in-ios-simualtor

5. アプリを立ち上げて、インストールを確認

諸々の設定が正しく反映されているかをアプリを立ち上げて、firebaseと通信させる事で確認します。今一度プロジェクトのルートに戻り、flutter runをしましょう。

zsh

$ open -a Simulator // iOSシミュレータを起動
$ flutter run // アプリを起動

FirebaseとFlutterを繋ぐ【Android編】

1. アプリ名を記入

iOSと同様にアプリ名を記入します。Androidの場合はandroid/app/build.gradle内24行目に記載されています。

2. google-services.jsonをダウンロード、所定の場所に配置

指示通りgoogle-services.jsonをダウンロードし、所定の場所に配置します。Androidの場合は、android/appに配置します。

3. Firebase SDKを追加

androidのプロジェクトレベルのbuild.gradle、アプリレベルのbuild.gradleにそれぞれFirebase SDKを読み込む為のコードを追記します。

プロジェクトレベルのbuild.gradle

android/build.gradle

buildscript {
    ext.kotlin_version = '1.3.50'
    repositories {
        google() // <--コレを追加
        jcenter()
    }

    dependencies {
        classpath 'com.google.gms:google-services:4.3.4'　// <--コレを追加
        classpath 'com.android.tools.build:gradle:3.5.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

allprojects {
    repositories {
        google()　// <--コレを追加
        jcenter()
    }
}

アプリレベルのbuild.gradle

android/app/build.gradle

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply plugin: 'com.google.gms.google-services'　// <--コレを追加 
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

dependencies {
    implementation platform('com.google.firebase:firebase-bom:25.12.0')　// <--コレを追加 
    implementation 'com.google.firebase:firebase-analytics'　// <--コレを追加 
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
}

5. アプリを立ち上げて、インストールを確認

Androidのシミュレーターを立ち上げ、flutter runでアプリを起動しましょう。

zsh

$ emulator -avd <avd_name> // androidシミュレータを起動
$ flutter run // アプリを起動

完了！

コレで無事flutterプロジェクトをiOS、Android両方でfirebaseを使う準備が出来ました。

そこまで複雑ではないネイティブアプリならflutter x firebaseで爆速で作る事も可能です。ジャンジャンプロトタイプ作ってアイデアを形にしていきましょう！！

参考

Flutter公式 : https://flutter.dev/
Firebase公式 : https://firebase.google.com/>