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

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

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

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

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

本記事ではAndroid StudioでiOSアプリに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で開発しているiOSアプリにFirebaseを導入していくよ!

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

firebase&Android1

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

firebase&iOS1

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

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

ティファ

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

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

STEP
firebase&iOS2

「アプリの登録」で開発しているiOSアプリの「iOS バンドル ID」が必要なので、iOSアプリを開発しているIDEを開き「iOS バンドル ID」を確認していきます。

ティファ

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

STEP
firebase&iOS3

「Project > ios」からRunnerのコンテキストメニューから「Reveal in Finder」でiosフォルダを開きます。

STEP
firebase&iOS3−2

iosフォルダで「Runner.xcodeproj」を開きます。

STEP
firebase&iOS4

「Runner」を開くと「Bundle indetifier」に「iOS バンドル ID」が記載されているのでコピーします。

STEP
firebase&iOS5

Firebaseの登録画面に戻って「iOS バンドル ID」をコピペします。「アプリのニックネーム」と「デバッグ用の署名証明書」は省略して大丈夫なので「アプリを登録」をクリックします。

ティファ

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

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

STEP
firebase&iOS6

「設定ファイルのダウンロード」から「GoogleService-Info.plist」をダウンロードして「Xcode」からダウンロードしたファイルを所定の位置に移動させます。

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

STEP
firebase&iOS7

先ほど開いたXcodeの「Runnerフォルダ」にダウンロードしたGoogleService-Info.plistファイルを移動させます。

STEP
firebase&iOS8

ファイルを移動させると確認画面が出てくるので「Copy items if needed」と「Runner」の2つにチェックマークを入れ「Finish」をクリックし、Firebaseの設定画面に戻り「設定ファイルのダウンロード」で「次へ」をクリックします。

ティファ

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

ステップ3:Firebase SDK の追加

firebase&iOS9

Flutterでは「CocoaPods」は既にインストールされているので「次へ」をクリックします。

ステップ4:初期化コードの追加

firebase&iOS10

Flutterでは「初期化コードの追加」をする必要がないので「次へ」をクリックします。

FirebaseをiOSアプリに導入完了

firebase&iOS11

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

ティファ

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

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

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

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

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

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

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

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