【Flutter】Masamuneで超速アプリ開発②「Firestoreへの簡単接続」 - mathru.net | Flutter/Unityによるアプリ開発/楽曲・映像制作/素材配布
2023-06-30

【Flutter】Masamuneで超速アプリ開発②「Firestoreへの簡単接続」

こんにちは。広瀬マサルです。

Flutterでアプリケーションを安定して高速に開発することのできるMasamuneフレームワークを紹介しました。

その魅力と使い方を知っていただくためにこれから数回に分けて紹介記事を書きたいと思います。

Masamuneフレームワークを使いこなすことで超高速・安定・高品質なアプリを開発することができるでしょう。

前回は「プロジェクトの作成」についてお話しました。

第2回は「 Firestoreへの簡単接続 」です。

Firestoreの作成

まずはFirestoreを利用できるようにしましょう。

Firebaseのコンソールからプロジェクト作成を行います。

https://console.firebase.google.com https://console.firebase.google.com
title

ここで一緒に作成される プロジェクトID を覚えておきます。

今回は masamune-test で作成します。

image block

GoogleAnalyiticsはご自由にどうぞ。

image block

プロジェクトが作られます。

image block

Firestoreを新しく作成します。

image block

モードは TestMode にしておきます。

image block

リージョン を指定してください。

ここで指定した リージョン は覚えておきます。

ここでは asia-northeast1 を指定します。

image block

Firestoreが作成されました。

image block

FlutterプロジェクトでのFirebase設定

前回 作成したFlutterプロジェクトに戻りFirebaseの設定を反映させます。

katana.yaml を開きます。

project_id に先程作成したFirebaseプロジェクトIDを記述し firestore の enable を true に設定します。

# katana.yaml

# This section contains information related to Firebase.
# Firebase関連の情報を記載します。
firebase:
  # Set the Firebase project ID.
  # FirebaseのプロジェクトIDを設定します。
  project_id: masamune-test

  # Enable Firebase Firestore.
  # Set [generate_rules_and_indexes] to `true` to automatically generate Firestore security rules and indexes.
  # If [primary_remote_index] is set to `true`, indexes on the console are prioritized and automatic index import is enabled.
  # Firebase Firestoreを有効にします。
  # [generate_rules_and_indexes]を`true`にするとFirestoreのセキュリティルールとインデックスを自動生成します。
  # [primary_remote_index]を`true`にするとコンソール上のインデックスが優先されるため、インデックスの自動インポートが有効になります。
  firestore:
    enable: true # false -> true
    generate_rules_and_indexes: false
    primary_remote_index: false

ターミナルを開きFirebaseのプロジェクトを作成したアカウントにログインします。

※違うアカウントにログインしていたときは一旦ログアウトして再度ログインしてください。

firebase login

最後に katana apply のコマンドを実行します。

katana apply

これによりFirebaseプロジェクト内にプラットフォームに対応した設定が作成され、自動でFirebaseに接続するための設定がFlutterプロジェクト内に作成されます。

アダプターの入れ替え

adapter.dart を書き換えます。

modelAdapter を LocalModelAdapter から FirestoreModelAdapter に DefaultFirebaseOptions.currentPlatform を指定して入れ替えます。

import 'firebase_options.dart'; // 追加

~~~~~

final modelAdapter = FirestoreModelAdapter(
  options: DefaultFirebaseOptions.currentPlatform,
);
// final modelAdapter = LocalModelAdapter();
// final modelAdapter = RuntimeModelAdapter();

デバッグしてみるとカウンターアプリが立ち上がります。

image block

カウントアップしてみるとFirestoreに保存されているデータが変更されてるのがわかります。

image block

前回、データモデルで ModelCounter の型のフィールドを利用していることを説明しました。

ModelCounter を FirestoreModelAdapter で利用する場合、値を増減すると内部で FieldValue.increment が利用されます。

そのため、多数のユーザーが同じフィールドにアクセスした場合でも不整合なく値を増減することができます。

おわりに

わずか数行の変更で簡単にFirestoreへと接続することができました。

このようにMasamuneフレームワークはDart外の設定もコマンド一発で簡単に設定することができ、Dart内もアダプターを入れ替えることで簡単に設定を切り替えることが可能です。

次回から実際のアプリ開発を進めていこうと思います。お楽しみに!

Masamuneフレームワークは こちら にソースを公開しています。issueやPullRequestをお待ちしてます!

また仕事の依頼等ございましたら、私の Twitter や Webサイト で直接ご連絡をお願いいたします!

FlutterやUnityを使ったアプリ開発やアプリの紹介。制作した楽曲・映像の紹介。画像や映像素材の配布。仕事の受注なども行っています。
https://mathru.net https://mathru.net
title

GitHub Sponsors

スポンサーを随時募集してます。ご支援お待ちしております!

Developed the katana/masamune framework, which has dramatically improved the overall efficiency of Flutter-based application development.
https://github.com https://github.com
title
【Flutter】Masamuneで超速アプリ開発③「メモ帳アプリ作成 - メモの表示」

Development Flutter Dart pub Plugins Masamune

◀︎ Next
【Flutter】Masamuneで超速アプリ開発①「プロジェクトの作成」

Development Flutter Dart pub Plugins Masamune

▶︎ Previous