この記事は前回のセクション2の続きでSession2(没入と補正)の実装とそこで発生した問題と解決についての内容になっています。
Session2では以下の２つを実装します。
- 集中（没入モード：大きなボタン + 時間を隠す）
- ログの操作（編集機能：ログの修正）
前回の記事をご覧になっていない方は、こちらのリストが今回【時計ログアプリ】で実装する機能です。
匿名利用（auth認証とデータ分離)日本語化（日本語化と日時フォーマット）
+α: Offline Persistence (Firestoreのオフライン対応を明示的にONにする)- 集中（没入モード：大きなボタン + 時間を隠す）
- ログの操作（編集機能：ログの修正）
- プロジェクト管理（簡易管理：タグ付け）
- ダッシュボード機能（シンプルな集計と可視化）
なぜこの機能を選択したのかは、以下の記事をご覧ください。
今回は、アプリの核となる結構重要な機能だと感じています。実際に使ってもらう段階で触れる機会が多いと思われるのが、この集中と編集機能です。ここは少し力を入れて行っていきたいと思っています。ではご覧ください。
集中（没入モード：大きなボタン + 時間を隠す）
ここの集中モードは少し自分の「一回押してしまえば気にならない、しかし終了後は気づいて止める」こんな理想を体現するようなものにしたいなと考えています。
イメージとしては、大きなボタンで押しやすく、押した後に時計を隠してカフェのシーン(コーヒーと机）に切り替わりゆったりと時間の経過を感じさせる。終わった後は、画面をタップする事で落ち着いた音と感触を実感できるようにしたいと思っています。
プロンプトの作成とAIエージェントへ依頼
リファクタリング時にAIエージェントでエラーが発生して固まってしまったので、新規チャットでAIエージェントに依頼をして進めていきます。
目的
計測中は集中でき、あとからでも正しく直せるアプリにするため
- 計測中 → 余計な情報を消して没入
- 計測後 → ミスは後から修正できる
① 構造整理（リファクタリング）：ここは都度行っていきたいと思っています。
何をする？
画面の役割ごとにコンポーネントを分離して管理しやすいようにする。
- Timer：時間計測と没入表示
- LogList：記録一覧と編集
- page：配置だけのシンプル構成
② 集中(Zenモード)
操作や時間に追われず作業に集中できるような体験を追求。
何を追加する？
計測中だけ「集中専用の画面」に切り替わる仕組み
- 大きなスタートボタンから開始
- 計測中は気にならない画像を表示
- 時間表示は隠す。
- 画面のどこを押しても終了する。
③ ログ編集機能（補正）
計測ミスを前提にした押し忘れ・止め忘れを修正でき、ログが現実の行動に近づく事を追求。
何を追加する？
記録した時間を後から直せる機能
- ログをクリックすると編集画面が開く
- 開始・終了時刻を修正可能
- 保存時に経過時間も自動更新
【問題発生】：コードモードで作成した時に問題が発生
Firebase StudioでAIエージェントと開発中、Firebaseとの連携が突然機能しなくなった。
具体的には：
- 匿名IDやユーザーデータがFirebaseに記録されなくなった。
- データの再読み込みが無限ループ状態に
- 機能自体は動作しているのにゴール(Firebaseへの記録)に到達できない
原因の推測
新規チャットでプロジェクトを進めた際、AIエージェントが既存ファイルを無視して【ゼロから】構築し直してしまったと推測します。
- 見落とした点
-
新規チャットでは、AIは過去のやり取りやファイル構成を把握していない状態からスタートする。
- AIの挙動
-
指示を受けたAIは、既存のFirebase設定ファイルを参照せず、独自に「正しそうな」コードを推測して生成してしまった。
- 結果
-
既存のFirebase設定と新規生成されたコードの間で不整合が発生。接続設定やデータ構造がズレてしまった。
反省と教訓
自分の過信があった事によって「ファイルを事前に読み込むものだと」解釈していたのが、落ち度だったと感じています。詳細な指示や提案を行わないといけないと感じました。
- できるだけ同一チャット内で継続する
- 文脈を理解している状態を維持する
- 難しい場合は、関連ファイルを事前に読み込ませてから作業を依頼する。
- 新規チャットでの引き継ぎを徹底する
- 現状のファイル構成を巡回・確認させて整合性をチェックする。
- これまでの実装内容を正確に伝える
- 引き継ぎ直後は必ずバックアップを取る
- 最初の変更でいつでも戻せる状態にしておく
修正されなかった没プロンプトと迷っているイメージのスパイラル図形を使って表現。
解決に至った経緯：前回のチャットが機能するようになった。
Prototypeモードでの前回のチャットのエラーが解消されて元に戻っていたので発生していた「Runtime Error」の修正を依頼して解決に至りました。
具体的には「アプリが正しいFirebaseプロジェクトに接続し、全てのユーザーに『匿名の会員証（UID）』を発行して、その会員証を使って個人のデータ保管庫（Firestoreの専用パス）に記録を出し入れするようにした」という一貫性のあるシステムに直ったので解決に至りました。
AIエージェントに何が原因だったのかを明確にしてもらい、行った対処と結果を学習しました。以下にまとめた内容を記載しておきます。
- ■ 現状と原因
-
- Firebaseが正しいプロジェクトに安定接続できていなかった
- ユーザー識別がなく、データが全員分混在していた
- DB構造と取得処理の不整合によりエラーが発生していた
- ■ 行った対応
-
- Firebase初期化処理を整理し、正しいProject（my-firebase-comp）へ確実に接続
- Firebase匿名認証を導入し、全ユーザーに一意なIDを付与
- DB構造を
users/{userId}/logsに変更しユーザー単位管理へ移行 - ログ取得処理を最適化し無限再読み込みエラーを修正
- モジュールのimportパスミスを修正
- ■ 改善結果
-
- Firebase接続が安定
- ユーザーごとの安全なデータ管理が可能に
- ログ表示・保存が正常動作
※AIエージェントが行った内容を学習のためにまとめたものです。
ログの操作（編集機能：ログの修正）
集中モードの実装での問題がひと段落して、もう一つの追加機能である【編集機能】を実装しました。
まとめ
今回はセクション2の集中機能と編集機能を追加していきました。その過程で思わぬ問題が発生しましたがこれも学習だと思って、次はそうならないように教訓を胸に進めていきたいと思います。
次回は第三弾のプロジェクト管理（簡易管理：タグ付け）とダッシュボード機能（シンプルな集計と可視化）を追加していきます。
ここまで読んでいただきありがとうございました。読者の方も新規チャットでプロジェクトを引き継ぐ際はくれぐれもご注意してください。
コメント