はじめに
初めまして、プロトソリューションの前原と申します。
2022年に入社し、AIテクノロジー推進室という部署でAIやアプリ開発などに携わっています。
現在は、スマホアプリの開発に奮闘中です。
開発で使っているFirebaseがとても便利でしたので、
この記事では、Firebaseの機能のひとつであるFirestoreをローカルで立ち上げて、Flutterと連携するまでを紹介していきます。
Firebaseをローカル環境で実行してみよう
早速ですが、手順を紹介していきます。
注意点として、Flutterの環境構築はこの記事で解説していません。
外部の記事にやり方はたくさんあるので、この記事では割愛させていただきます。
最初のステップとして、Firebaseのプロジェクトを作成します。
名前は任意で大丈夫ですが、この記事では「firebase-demo」とします。
Google アナリティクスは扱いませんのでオフに設定して、プロジェクトを作成します。
Firebaseプロジェクトが作成できました。
次に以下のコマンドを実行して、Flutterプロジェクトを作成します。
アプリ名は任意で大丈夫です。
flutter create firebase_demoFirebase CLIをインストールして、コマンドラインからFirebaseを実行できるようにします。
npm install -g firebase-toolsFirebaseにログインします。
ログインには、Googleアカウントが必要になります。
firebase login次にFlutterFireをコマンドラインで実行できるようにします。
dart pub global activate flutterfire_cliFlutterにFirebaseの構成を追加するため、以下のコマンドを実行します。
flutterfire configure今回は、ios を選択して進めますが、
Flutterは、android、macos、webにも対応しているので、ぜひ他のプラットフォームでも試してください。
? Which platforms should your configuration support (use arrow keys & space to select)? ›
android
✔ ios
macos
webFlutterでFirebaseを使うためのプラグインを追加します。
flutter pub add firebase_coreFirebaseに追加したプラグインの構成を反映するため、再度コマンドを実行します。
プラットフォームの選択は、上記と同じiosにします。
flutterfire configureFlutterにFirebaseの構成ファイルをインポートします。
lib/main.dartに、Firebaseを初期化するコードを加えます。
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
main() async {
// Firebaseを初期化
WidgetsFlutterBinding.ensureInitialized()
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
)
runApp(const MyApp())
}アプリを起動します。
正常に起動できたら、FlutterとFirebaseを連携する手順は完了です。
flutter run
次のステップは、ローカル環境でFirestoreを立ち上げるまでを紹介します。
Firebaseに、Firestoreを追加します。
以下のコマンドから、FirestoreとEmulatorsを追加します。
firebase initFirestoreとEmulatorsを選択して進めます。
? Which Firebase features do you want to set up for this directory? Press Space to select features, then ? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. (Press <space> to select,
<a> to toggle all, <i> to invert selection, and <enter> to proceed)
◯ Authentication Emulator
◯ Functions Emulator
◉ Firestore Emulator
◯ Database Emulator
◯ Storage Emulatorエミュレータで使用するFirebaseの機能を追加します。
この記事では、Firestoreを選択します。
エミュレータを立ち上げます。
firebase emulators:startコマンドラインのリンクからアクセスして、エミュレータが表示されたら成功です。
選択したFirestoreが、Onになっていることが確認できます。
データを追加してみます。
Start collectionをクリックして、項目を入力後にSaveします。
データが追加されました。
Firestoreのエミュレータはデータの保持ができないため、停止するとデータが消えてしまいます。
データを残したい場合は、エミュレータのデータをエクスポートして次の起動時に読み込む必要があります。
エミュレータを実行したまま、別ターミナルを開きます。
以下のコマンドを実行し、データをエクスポートします。
firebase emulators:export ./emulators_data次の起動時に、エクスポートしたデータを読み込むときは以下のコマンドを実行します。
firebase emulators:start --import ./emulators_dataここで上記2つのコマンドを毎回やるのは大変ですので、インポートとエクスポートを同時に実行できるようにします。
以下のコマンドを実行することで、エクスポートとインポートが同時にできるので、データ保持を意識せずFirestoreを使えます。
firebase emulators:start --import ./emulators_data --export-on-exit最後はFlutterに、ローカルのFirestoreを読み込む処理を追加します。
void main() async {
// Firebaseを初期化
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
// ローカルのFirestoreを読み込む
if (kDebugMode) {
try {
FirebaseFirestore.instance.useFirestoreEmulator('localhost', 8080);
debugPrint('Use local emulator.'); } catch(e) {
print(e); }
}
runApp(const MyApp());
}lib/main.dartに、エミュレータ起動時のコードを加えます。
firebase initFlutterを起動すると、ローカルのFirestoreを読み込みます。
flutter run
まとめ
FlutterとFirebaseを連携させ、ローカルのFirestoreを起動するまでを紹介しました。
Firebaseは使いやすくFirestore以外にもプッシュ通知やストレージ、機械学習など幅広く活用できるので、ぜひ使ってみてください。
