Flutter

Flutter で Firebase Cloud Firestore を使ってみよう【準備編】

Cloud Firestore はクラウド上に NoSQL 型のベータベースを構築できる Firebase の一機能であり、一般的に mBaaS（mobile Backend as a Service）と呼ばれるものです。

オンプレミスな環境やAWS・GCP などのクラウドにデータベースを立てたり、APIなどのバックエンドプログラムを構築することなく、モバイルのフロント側だけでアプリケーションを完結させることができます。

特に、個人開発や予算や人員が少ない小規模なアプリ開発には大変ありがたいサービスです。

今回から複数回の記事を通して、簡易な投稿型のアプリ開発を例に取り、実際に動作するものを作ってみながら各プログラムを解説していきたいと思います。

【Flutter】Firebase の Cloud Firestore を使ってみよう【準備編】

【準備編】ということで、今回はコードを書く前に必要な前準備を中心に説明します。

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

先ずはアプリケーション自体のプロジェクトを作成するところからです。

「ここはわかるよ」という方は読み飛ばしてください。

Firebase Console にログインし、プロジェクトを追加をクリックします。

プロジェクトの名前を入力し、チェックボックスにチェックして続行を押します。

続いてGoogleアナリティクスの設定ですが、今回は必要ないので無効としました（実際のアプリ開発では有効化しておくと良いでしょう）。

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

しばらくするとプロジェクトが作成されます。

これで Firebase Authentication や Cloud Firestore をはじめとした様々な Firebase のサービスを利用できるようになります。

Firebase にアプリを追加しよう

Firebase プロジェクトにAndroidアプリ、またはiOSアプリを登録します（今回は Android アプリの例ですが iOS でもほとんど同じです）。

パッケージ名（iOSではバンドルID）とニックネーム（任意）を入力し「アプリを登録」を押します。

「google-services.json」（iOS では「GoogleService-Info.plist」 ）をダウンロードし次へ（Flutter プロジェクトへの追加手順については後述します）。

Firebase SDK の追加のコード修正については後述しますので「次へ」をクリックして一旦完了します。

データベースを作成しよう

メニューの Firestore Database から「データベースを作成」をクリック。

テストモードを選択し「次へ」をクリック

ロケーションを「asia-northeast1」（東京エリア）を選び「有効にする」をクリック。ちなみにロケーションの設定は後から変更できないため注意してください。

しばらくするとデータベースの構築が完了し、下記の画面が表示されるはずです。

設定ファイルの設置とセットアップ

Flutter プロジェクトに設定ファイルを設置

兎にも角にも、先ずは任意のフォルダに Flutter プロジェクトを作成しましょう。

$ flutter create cloud_firestore_sample

IDE は Android Studio か VSCode の好きな方を選んでください。今回のサンプルは VSCode で作成しています。

そして、先ほどダウンロードした google-services.json を Flutter プロジェクトに取り込みます。

android > app ディレクトリに配置します。

Firebase SDK の読み込み設定

android ディレクトリの build.gradle を開きます。

dependencies スコープに Firebase SDK のバージョンを追記します。

続いて、android/app ディレクトリの build.gradle を開き、以下のように２箇所追記します。

firebase_core と cloud_firestore のパッケージを取得

pubspec.yaml を開き dependencies: 以下にパッケージを追加します。

バージョンは 2022/4/20 現在の最新バージョンです。

pub get でパッケージの取り込みを忘れないようにしましょう。

$ flutter pub get

Firebase の初期化コード

main.dart の main() で Firebase の初期化を行います。

Firebase.initializeApp は非同期処理なので main() を async 修飾し、await で実行します。

また、WidgetsFlutterBinding.ensureInitialized() を事前に呼び出しておく必要もあります。Firebase とは直接関係ないため今回は特に触れません（取り急ぎ「おまじない」だと思ってください）。

import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

以上で Cloud Firestore を使用する準備が整いました。

次回以降の記事ではデータベースを操作する具体的なコードを紹介していきます。