【Fluter】AndroidアプリにFirebaseを導入する方法 | Android Studioによる環境構築

【Fluter】AndroidアプリにFirebaseを導入する方法 | Android Studioによる環境構築

「AndroidアプリにFirebaseを導入する方法が分からない」

「Android StudioでFlutterアプリにFirebaseを導入する方法を知りたい」

このような方には本記事はおすすめです。

本記事ではAndroid StudioでAndroidアプリにFirebaseを導入する方法を画像を使いながらわかりやすく紹介していきます。

目次

Firebaseでプロジェクトを作成する方法

STEP
firebase新規プロジェクト1

>> Firebase公式サイト

FlutterアプリにFirebaseを導入するためにまずはFirebaseの新規プロジェクトを作成します。上記のリンクを開き「プロジェクトを作成」をクリックします。

STEP
firebase新規プロジェクト2

Firebaseのプロジェクト名をつけます。(公開されないので気軽に名前をつけて大丈夫です)

STEP
firebase新規プロジェクト3

Googleアナリティクスを有効にするかどうか選択します。Googleアナリティクスを有効にすれば様々な機能が使えるようになります。(今回は有効にしますが有効にしなくても問題ありません)

STEP
Googleアナリティクスを有効にした場合
firebase新規プロジェクト4

Googleアナリティクスを有効にした場合、アカウントを選択します。わざわざアカウントを作成しなくても「Default Account for Firebase」を選択すれば大丈夫です。

STEP
firebase新規プロジェクト5

最後に「続行」をクリックすればFirebaseプロジェクトが作成されます。

firebase&Android1
ティファ

これでFirebaseの新規プロジェクトが作成できたから、Flutterで開発しているAndroidアプリにFirebaseを導入していくよ!

Flutterで開発しているAndroidアプリにFirebaseを導入する

firebase&Android1

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

firebase&Android2

Firebaseプロジェクトを開いたら、Firebaseを追加したいアプリを選択します。今回はAndroidアプリにFirebaseを導入したいので「Android」を選択します。

AndroidアプリにFirebaseを導入するためにこれから「アプリの登録」「設定ファイルのダウンロード」「Firebase SDK の追加」の3つのステップを行なっていきます。

ティファ

それでは一つ一つ画像を使いながらわかりやすくFirebaseの導入方法を紹介していくよ!

ステップ1:アプリの登録

STEP
firebase&Android3

「アプリの登録」で開発しているAndroidアプリのパッケージ名が必要なので、Androidアプリを開発しているIDEを開きパッケージ名を確認していきます。

ティファ

本記事ではAndroid Studioで解説していくよ!

STEP
firebase&Android4

「Project > android > app > build gradle」に記載されてある「applicationId」に記載されているのが「パッケージ名」なのでコピーしてFirebaseでペーストします。

STEP
firebase&Android5

「アプリのニックネーム」と「デバッグ用の署名証明書」は省略して大丈夫なので「アプリを登録」をクリックします。

ティファ

これで「アプリの登録」は完了だよ。次はステップ2の「設定ファイルのダウンロード」を行なっていこう!

ステップ2:設定ファイルのダウンロード

STEP
firebase&Android6

「設定ファイルのダウンロード」から「google-services.json」をダウンロードしてAndroidアプリ開発をしているIDEのプロジェクトにダウンロードしたファイルを定位置に移動させます。

複数回ダウンロードすると「google-services.json (1)」のように名前がオリジナルと変わってしまうので、必ず「google-services.json」を使用してください。

STEP
firebase&Android8

「Project > android > app」にgoogle-services.jsonファイルを移動させます。

STEP
firebase&Android9

ファイルを移動させると確認画面が出てくるので「Refactor」をクリックし、Firebaseの設定画面に戻り「設定ファイルのダウンロード」で「次へ」をクリックします。

ティファ

これで「設定ファイルのダウンロード」は完了だよ。次はステップ3の「Firebase SDK の追加」を行なっていこう!

ステップ3:Firebase SDK の追加

STEP
firebase&Android10

上画像の赤枠のコードをコピーして、IDEでコピーしたコードを貼り付けていきます。

STEP
firebase&Android11

「Project > android > gradle > build.gradle」のdependenciesのchildとしてコピーしたコードをペーストします。

ペーストする際、インデントの間違えに気をつけましょう。

STEP
firebase&Android12

「Firebase SDK の追加」画面に戻り少し下にスクロールすると上画像が表示されるので、赤枠のコードを別々に所定の位置に貼り付けていきます。(上の赤枠を「コード1」、下の赤枠を「コード2」とします)

「赤矢印マークのコード」はFirebaseのプロジェクトを作成するときにGoogleアナリティクスを有効していたら貼り受ける必要があります。(赤矢印のコードを「コード3」とします)

STEP
「コード1」の貼り付け場所
firebase&Android13

「project > android > app > src > build.gradle」を開くと「apply plugin: ‘com.android.application’」のコードがあるはずなので、その下に「コード1」をコピペします。

STEP
「コード2」と「コード3」の貼り付け場所
firebase&Android14

「コード2 と コード3」も「コード1」と同じ「build.gradle」にある「dependencies」に貼り付けます。

コードを貼り付け終えたら一度「Android Emulator」を起動させて、きちんと実行できるか確認してください。

STEP
firebase&Android15

Android Emulatorがきちんと実行できたら「コンソールに進む」をクリックします。

STEP
FirebaseをAndroidアプリに導入完了
firebase&Android16

全てのステップを終えると上記のように作成したFirebaseプロジェクトとAndroidアプリの連携が完了します。

ティファ

これでAndroidアプリにFirebaseの導入が完了したよ。iOSアプリにもFirebaseを導入したい方はこちらの記事をお読みください!

次にやること:FirebaseパッケージをFlutterに追加する

iOS、AndroidアプリにFirebaseを導入したら次にFirebaseのパッケージをFlutterに追加していきます。

Flutterを学ぶなら「Udemy」または「侍エンジニア塾」

  • 独学でFlutterを学ぶなら「Udemy」
  • プログラミングスクールで学ぶなら「侍エンジニア塾」

Flutterは2018年にリリースされたばかりの最新技術のため日本語ソースが圧倒的に少なく勉強方法が制限されています。ただ、英語が分からなくてもFlutterを先取りして勉強する方法はあります。

独学でFlutterを勉強するなら世界最大級のオンライン学習プラットフォーム「Udemy」、プログラミングスクールで講師からマンツーマンでFlutterを学習したい方は「侍エンジニア塾」がおすすめです。

よかったらシェアしてね!
目次
閉じる