Firebase+Flutterの導入

Firebase+Flutterの導入

Firebaseとは

Google提供しているモバイルのバックエンドサービスです。Baasと呼ばれています。firebaseを使うことである程度の機能であれば、すでに用意されており、自分でサーバサイドを実装することなく、アプリ開発が行えてしまいます。

本記事では、flutterを用いて作成しているアプリにfirebaseを使いたい時に必要な初期設定・導入方法を記載しようと思います。

導入方法(Android、iPhone共通)

1. Firebaseのサイトにアクセスする

firebaseのサイトのURLは以下になります。アクセスしてみましょう.

https://firebase.google.com/

2. コンソールに移動

  firebaseのサイトの右上の「コンソールへ移動」をクリックしましょう

3. プロジェクトの作成

プロジェクトの作成をクリックします。

4. プロジェクト名を入力

  プロジェクト名を入力し、規約に同意をチェックし、続行をクリックします。

5. 続行をクリック

このプロジェクトでgoogleアナリティクスを有効にするのチェックを外し、プロジェクトを作成をクリックします。アナリティクスを有効にする場合は次のページでアカウントの選択があります。

これでfirebaseのプロジェクトが作成されます。

以降の設定に関しては、

・Androidアプリでfirebaseを使いたい場合は、

 Androidアプリの設定→最後に と設定してみてください。

・iPhoneアプリでfirebaseを使いたい場合は、

 iPhoneアプリの設定→最後に と設定してみてください。

Androidアプリの設定

1. 作成したプロジェクトでAndroidマークをクリック

2. Androidアプリ情報を入力

androidパッケージ名はflutterで作成しているアプリの

プロジェクトフォルダ/android/app/build.gradle内の下記の「あなたのapp id」に記載のものになります。これはアプリストアでユニークなものである必要があります。このidは新規flutterアプリを作成する際に指定したcompany domainから作成されます。

後からでも下記の設定ファイルを直接変更することで変更ができるので他のアプリとかぶりそうな名前であれば変更してfirebaseに設定しましょう。

defaultConfig {
        (https://developer.android.com/studio/build/application-id.html).
        applicationId "{あなたのapp id}"

入力後、アプリを登録をクリックします。

3. google-services.jsonを取得

google-services.jsonをダウンロードをクリックします。

このファイルはファイル名がgoogle-services.jsonとなっている必要があるためファイル名の変更などは行わないようにしましょう。

4. google-services.jsonをflutterアプリに導入

flutterアプリのプロジェクトフォルダ/android/app/配下に配置し、firebaseサイトで次へをクリックします。

5.  google-services.json ファイルを読み込めるようにflutterアプリを設定

プロジェクトフォルダ/android/build.gradleとプロジェクトフォルダ/android/app/build.gradleにfirebaseサイトの指示に従い設定を追加します。

flutterではfirebaseサイトで記載の「<project>/build.gradle」が「プロジェクトフォルダ/android/build.gradle」、「<project>/<app-module>/build.gradle」が「/android/app/build.gradle」になります。

あとは、firebaseのサイトのボタンを指示に沿ってクリックをしてくことで、Androidアプリ用の設定は完了になります。

iPhoneアプリ用設定

1. 作成したプロジェクトでiOSをクリック

2. iOSアプリ情報を入力

firebaseサイトの「iOSバンドルID」はflutterアプリの

プロジェクトフォルダ/ios/Runner.xcode.projをxcodeで開きます。

Android Studioを使ってflutterアプリのファイルをみている場合は、プロジェクトフォルダ/ios/Runnderで右クリック、Reveal in Finderをクリックします。開いたFinderでRunnder.xcode.projをクリックし開きます。

開いたxcodeでRunnerをクリックし、設定のBundle Identifierの部分が「iOSバンドルID」に入力する情報になります。

このIDはAndroidのときと同じく他のアプリとかぶらないようにする必要があるため、必要であれば変更しましょう。

入力後、アプリを登録をクリックします。

3. GoogleService-Info.plistを取得

GoogleService-Info.plistをダウンロードをクリックします。

このファイルはファイル名がGoogleService-Info.plistとなっている必要があるためファイル名の変更などは行わないようにしましょう

4. GoogleService-Info.plistをflutterアプリに導入

GoogleService-Info.plistを2で開いたxcode画面のRunnerフォルダへドラッグ&ドロップでコピーします。

その際 下記の画像のようにDestinationのCopy tems if neededにチェック、Add to targetsのRunnerにチェックが入っていることを確認してFinishをクリックしましょう。

GoogleService-Info.plistのコピーが完了したら、firebaseサイトで次へをクリックしましょう。

次のFirebase SDKの追加と初期コードの追加に関してはflutterに導入する場合は何もしないで問題ないので、次へをクリックしましょう

以上でiPhoneアプリへのfirebaseの導入の初期設定は完了になります。

最後に(Android、iPhone共通)

firebaseのサービスをflutterで使うには、firebase_coreというパッケージを取り込む必要があります。

プロジェクトフォルダ/pubspec.yamlに「firebase_core: ^0.5.1」設定を追加します。

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  firebase_core: ^0.5.1

firebase_coreの^0.5.1はバージョン番号になりますが、この記事を書いているときの最新バージョンになります。

現在の最新バージョンを知りたい場合は、https://pub.dev/でfirebase_coreと検索し、検索で出てきたfirebase_coreをクリック

Installingタブをクリックし、下記の画像の部分をコピーすると最新バージョンの設定ができます。

設定が完了したら pub getを行いfirebaseを使うための全ての設定が完了になります。

firebaseには様々なサービスがあり、それぞれのサービスを利用する際に専用のパッケージを取り込む必要がありますが、それについてはまた別の記事で説明しようと思います。

補足

Warning: CocoaPods not installedエラーが出る場合

iphoneシミュレータを起動時に下記のエラーが出た場合は、エラーメッセージに従いterminalでsudo gem install cocoapodsとうってcocoapodsをインストールしましょう。


Warning: CocoaPods not installed. Skipping pod install.
  CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
  Without CocoaPods, plugins will not work on iOS or macOS.
  For more info, see https://flutter.dev/platform-plugins
To install:
  sudo gem install cocoapods

cocoapodインストール後は下記のコマンドをターミナルで入力し、

再度シミュレータ起動ビルドを行ってみてください。

pod setup

Firebaseカテゴリの最新記事