Zenn
😀

FlutterでFirebaseサービスを使用する方法

2023/08/24に公開2件
Firebase
Flutter
tech

Flutterでアプリを開発する際に、開発スピードが早いことからFirebaseを選択するケースが多いみたいです。
そこで今回はFlutterとFirebaseの連携について解説していきたいと思います💪

環境

  • PC:macOS Ventura ver13.5
  • 開発ツール:VSCode

Firebaseとは

Firebaseは、Googleが提供するプラットフォームであり、モバイルアプリケーションおよびウェブアプリケーションの開発を支援するさまざまなツールとサービスの統合セットです。Firebaseは、アプリケーションの開発、データベースの管理、認証、ストレージ、リアルタイム通知、パフォーマンスモニタリングなど、幅広い機能を提供しています。以下にFirebaseの主な機能をいくつか説明します。

  1. Firestore: FirebaseのクラウドベースのNoSQLデータベース。リアルタイムデータ同期やクエリ機能を提供し、モバイルアプリケーションのために最適化されています。
  2. Realtime Database: Firebaseのリアルタイムデータベース。リアルタイムのデータ同期を実現し、リアルタイムアプリケーションの構築に適しています。
  3. Authentication: ユーザー認証とセキュリティ管理を提供するサービス。ソーシャルメディアアカウントやEメール・パスワードを使用した認証を簡単に統合できます。
  4. Cloud Storage: クラウド上でのファイルストレージを提供。画像、動画、ドキュメントなどのファイルを保存・管理できます。
  5. Cloud Functions: サーバーレスコンピューティングを実現する機能。特定のトリガーに対して自動的に実行される処理を記述できます。
  6. Cloud Firestore: Firestoreの進化版で、より高度なクエリ機能やスケーラビリティを提供。
  7. Hosting: ウェブアプリケーションを簡単にホスティングできるサービス。HTTPSで安全にウェブアプリケーションを公開できます。
  8. Cloud Messaging: ユーザーに対してプッシュ通知を送信するためのサービス。
  9. Remote Config: アプリの動作をリモートから制御する機能。特定のパラメータや機能をリアルタイムに変更できます。
  10. Performance Monitoring: アプリケーションのパフォーマンスを監視し、問題箇所を特定するためのツール。
  11. Crashlytics: アプリのクラッシュレポートとデバッグツール。クラッシュ原因の特定と修正を支援します。
  12. Analytics: アプリの利用状況やユーザー行動を追跡し、洞察を得るためのツール。

これらを組み合わせて利用することで、自前でサーバーを用意することなく、フロント側の開発だけでアプリを作ることができます。

Firebaseプロジェクトを作成しよう

Firebaseの概要がわかったところで、早速FlutterとFirebaseを接続したいと思います。
まずこの章では、Firebaseのプロジェクトを作成する手順を解説します。

  1. Firebaseを開いて、コンソールへ移動をクリックしましょう。
    （ログインしていない方は先にログインが必要なのでログインしましょう）

  2. コンソール画面にあるプロジェクトを追加をクリックしましょう。

  3. プロジェクト名を決め、指示に従ってプロジェクトを作成しましょう。

FirebaseCLIを設定しよう

Firebaseのプロジェクトを作成したら、Flutterと接続するためにFirebaseCLIをインストールする手順を解説します。
FirebaseCLIとは、Firebaseプロジェクトの管理や表示、デプロイを行う様々なツールを提供しています。
https://firebase.google.com/docs/cli?hl=ja
1.次のcURLコマンドを実行します。

curl -sL https://firebase.tools | bash

パスワードの入力を求められるのでパスワードを入力してください。
インストールが完了すると、firebaseコマンドが有効になります。

Firebaseアカウントにログインする

CLIをインストールしたら、認証する必要があります。
次のコマンドを実行してみましょう。

firebase login

このコマンドにより、Firebaseに接続され、Firebaseプロジェクトへのアクセスが許可されます。

FlutterFireCLIをインストールしよう

Firebaseに接続できたところで、次はFlutterFireCLIをインストールする手順を解説します。
FlutterFireCLIとは、コマンド一つでFlutterとFirebaseのセットアップが可能となるツールです。これによりFlutterでのアプリ開発のハードルが大きく下がる要因となったと言われています。

  1. 次のコマンドを実行します。
dart pub global activate flutterfire_cli

インストールされると、flutterfireコマンドはグローバルに利用できるようになります。

ワーニングが発生した場合

上記のコマンドを実行した結果、以下のワーニングが発生する可能性があります。

Warning: Pub installs executables into $HOME/.pub0cache/bin, which is not on your path.
You can fix that by adding this to your shell's config file(.bashrc, .bash_profile, etc.):

	export PATH="$PATH:$HOME/.pub-cache/bin"

これはパスが通っていなときに発生するエラーで、この場合、Flutter のプロジェクトファイルのルートでflutterfireコマンドを実行しても、zsh: command not found: flutterfireとなり、実行できません。
.zshrcファイルを編集し、下のコードを追加（シェルにbashを使ってる人は.bashrc）して下さい。

.zshrc
  export PATH="$PATH":"$HOME/.pub-cache/bin"

Firebaseを初期化しよう

Flutterプロジェクトのディレクトリで、次のコマンドを実行しfirebase_coreをインストールします。

  flutter pub add firebase_core

flutterfire configureを実行しましょう

flutterfireを使用することができるようになったら、次のコマンドを実行してプロジェクトと連携させていきましょう。

  flutterfire configure

実行すると、

  1. Firebaseのプロジェクトを選択してくださいと求められると思うので、作成したプロジェクトを選択してください。(今回はsampleAppsプロジェクトを作成したので、これを選択する)
  2. どのプラットフォーム(例:Android、iOS、macOS、web)を選択するかが表示されます。spaceキーでチェックを入れて、enterキーで決定をしましょう。
? Which platforms should your configuration support (use arrow keys & space to select)? ›                                                    
✔ android
✔ ios                 
✔ macos                   
✔ web
  1. 下記の問いにはyを選択する
The files android/build.gradle & android/app/build.gradle will be updated to apply Firebase configuration and gradle build plugins. Do you want to continue? (y/n) › yes

下記のメッセージが表示されれば、設定ファイルの生成が完了します。

Firebase configuration file lib/firebase_options.dart generated successfully with the following Firebase apps:

Flutterで使うためのFirebaseの初期化処理をしよう

上記が全てうまくいけば、FlutterとFirebaseの接続はほぼ完了しました。
最後に以下のファイルを編集して設定を完了させましょう。

  1. main.dartの編集
main.dart
// main.dartの一部抜粋

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform
  );
  runApp(MyApp());
}

最後に

これで全ての設定が完了してのでFirebaseの機能が使えるようになります。
以前はFirebaseにへ接続が難しかったようですが、かなり設定方法が簡単になっているみたいです！
自分はワーニングのところで少し詰まりましたが、自分と同じところで詰まった方もこの記事を参考にFirebaseへの接続を行ってみて、アプリを開発していただければと思います！
次回は接続したFirabaseを活用してFirestoreの登録やAuthenticationを活用した認証について記事にしていきたいと思います。
ここまでこの記事を読んでいただき、ありがとうございました。🥹

Discussion

yKesamaruyKesamaru

素晴らしい記事をありがとうございます。
自分にとってとてもタイムリーな記事でした！