この記事では前回のセクション２での機能の選定を基に実際にFirebase Studioで実践していく内容になっています。
前回のおさらい：以下の機能を2×3回の順序で【時計ログアプリ】に追加していきます。
- 匿名利用（auth認証とデータ分離)
- 日本語化（日本語化と日時フォーマット）
+α: Offline Persistence (Firestoreのオフライン対応を明示的にONにする) - 集中（没入モード：Big Button + Hide Time）
- ログの操作（編集機能：ログの修正）
- プロジェクト管理（簡易管理：タグ付け）
- ダッシュボード機能（シンプルな集計と可視化）
前回の記事が気になる方はこちらから
ここからはアプリの「アーキテクチャの根幹」を変える重要なフェーズです！
Session 1:匿名利用と日本語化の追加
簡単に、今は「全員が同じノートに書き込んでいる状態」ですが、これを「一人一冊、自分だけのノートを持つ状態」にします。
Firebaseでの準備：Authentication(認証)の有効化
- Firebase Console(ホーム画面）の左メニューの【構築】からAuthentication(認証)をクリック
- 「始める (Get started)」 をクリック。
- Sign-in method (ログイン方法) タブで 「匿名 (Anonymous)」 を探す。
- 有効 (Enable) にして保存。
- Authentication(認証)の【ログイン方法】タブで「匿名」が有効になっているか確認する。
プロンプトの挿入
1と2（匿名利用と日本語化）の目的と具体的な変更の指示を含めたプロンプトをFirebase StudioのAIエージェントに送信して作成を依頼します。
Firebase Auth(匿名)機能の導入を明記して目的：データの保存場所とユーザーを個別管理する事を記入した。日本語のUIへの変更と日時の表示を「例：(1月27日(火) 14:30)」を用いて具体的に明記した。
私の場合は、一度行う事と目的のイメージをGeminiに伝え、それをAIエージェントが理解できるようにプロンプトを作成してもらっている。いわゆるAIとの協同でアプリに向き合っている開発方法です。
機能が追加された作成された【時計ログアプリ】
確認と調整：追加された内容は目的に沿っているか？
- 確認１：日本語と日時のフォーマットはどうか？ → 悪くはない、しかし少しの修正が必要。
-
- 日本語のフォーマットに変わっているのを確認。
- 日時のフォーマットはあまり馴染みのない表示に感じたので修正が必要と判断した。
- 確認２：実際にAuthentication(認証)とデータベースが対応しているか？ → 問題あり。
-
- Firebase AuthenticationとDatabaseを見ても匿名IDとデータベースが作成されていない。
- AIエージェントに依頼しても連携はできていると返信され、利用してみるが変わらない。
- プレビューでは利用できないのかもと思ってGeminiに聞いてみましたが、そんなことはなく開発中でも機能する事がわかりました。
この情報からコードから原因を調査していきます。
原因の解明：連携先が間違っていた。
Firebaseのコードモードで原因を調査するとfirebase/config.ts(Firebaseと連携する核となるファイル）に連携されていたのはAIエージェント側が新たに作成した別のプロジェクトであったため、何回利用しても作成されていませんでした。
対処方法：本命のMy-Firebase-Compプロジェクトの情報を/config.tsに連携する事で
Authentication(認証)機能に匿名IDが作成されFirestore Databaseに匿名IDに対応したログが作成されたのを確認できました。
AI側で作成された別プロジェクトの削除のやり方。
Firebaseに２つもプロジェクトは必要ないのでAI側で作成した別プロジェクトを削除していきます。
流れは以下の順で行います。
- Firebase Console(ホーム画面) にアクセスし、削除したい（間違った）プロジェクトを開きます。
- 左上のメニューの横にある 歯車アイコン（設定） をクリックし、「全般」 を選択します。
- 「全般」タブを一番下までスクロールします。「プロジェクトを削除」 というリンクをクリックします。
- 確認画面が出るので、全てのチェックボックスにチェックを入れ、「プロジェクトを削除」ボタンを押します。
※削除しても30日間は保留状態になり、完全に消える前に復元可能です（もし間違えても安心してください）。
日時のフォーマットの修正
日時フォーマットがまだ見やすい形になっていなかったのでプロンプトを入力して修正していきます。
今回は、年号「2026/令和8年」は、別の枠に表示し日時は、「1月27日(火) 14:30」のような馴染みのある表示に修正を依頼しました。
変更点まとめ：
- 日時の表示：馴染みやすい形式を意識した。
- 年号の別枠表示：何回も表示されるより一つにまとまっている方が見やすいと感じたため。
オフライン対応：生成してもらったコードが古い問題が発生。
オフラインでも利用が可能にするためにFirestore DatabaseのOffline Persistenceを利用していきます。
AIエージェントにプロンプトで依頼して作成してもらいます。
AIに作成してもらった「enableMultiTabIndexedDbPersistence(オフライン用コード)」に打消し線が表示されてしまいました。こちらではコードが古いようなので自身でFirebase Documentにアクセスし最新のオフライン化情報を調べ、その情報を伝えて最新に対応した方法で再度修正を行ってもらいました。
※最新の Cloud Firestore Web SDK (v9 / v10 以降) では、より洗練されたモジュール形式の関数（enableMultiTabIndexedDbPersistence 自身を含む）が推奨されているようです。
以下が変更したfirebase/config.tsのファイル内容です。これによって複数タブ間でキャッシュを同期できる、より堅牢なオフライン設定になったと思います。
※キャッシュサイズ（最大保存容量）の設定は行っていない。
参考にしたドキュメント：Firebase | Firestore Document
Cloud Firestore はオフライン データの永続性をサポートしています。この機能により、アプリが使用している Cloud Firestore データのコピーがキャッシュに保存されるため、デバイスがオフラインの場合でも、アプリはデータにアクセスできます。
initializeFirestoreで一括設定することで、データベースが動き出す前に「オフライン永続化」の状態が確定し、エラーハンドリングがよりシンプルになります。
まとめ
今回は、Session 1:匿名利用と日本語化の追加の実装とそこで発生した問題と解決策を記事にしました。
次回は、Session2:没入と補正 (Flow & Correction)について実装した記事を上げていきます。
たった２つの機能を実装するだけでも問題が発生したりとスムーズには進まないなと身を持って体感しています。次回もそんな予感を感じさせつつもAIエージェントがいるおかげで楽しんで行えているかなと思います。そして徐々にアプリが良くなってきていると感じさせられているのも要因だと思います。
今回の問題では、AIエージェントに頼んでまさかFirebaseプロジェクトが新たに作成されているとは思いもしませんでした。前回データが残っていたように見えたのは何だったのでしょうか？そんな疑問を抱えつつも徐々に進んでいるのが面白いなと感じます。
Auth機能の実装は、既に主流の機能で無くてはならないものなので無事実装できてホッとしています。
今回できた事としてオフラインでも利用可能になったのは良い収穫だったかなと思います。
次回は、この「時計ログアプリ」の核となる機能を実装していくので楽しみにしていてください。波乱を呼びそうな予感を感じさせてきます。
ここまで読んでいただきありがとうございました。
コメント