この記事では、前回の続きのセクション2の機能追加実践の第三弾、Session3(カテゴリ機能とダッシュボード機能の追加)を行っていく内容になっています。
Session3では以下の２つを実装します。
- プロジェクト管理（簡易管理：タグ付け）
- ダッシュボード機能（シンプルな集計と可視化）
前回の記事をご覧になっていない方は、こちらのリストが今回【時計ログアプリ】で実装する機能です。
匿名利用（auth認証とデータ分離)日本語化（日本語化と日時フォーマット）
+α: Offline Persistence (Firestoreのオフライン対応を明示的にONにする)集中（没入モード：Big Button + Hide Time）ログの操作（編集機能：ログの修正）- プロジェクト管理（簡易管理：タグ付け）
- ダッシュボード機能（シンプルな集計と可視化）
なぜこの機能を選択したのかは、以下の記事をご覧ください。
意味づけと可視化という事で自分だけのログは取れたが「その後はどうすればいいのか？」の悩みに寄り添う形の機能が必要だと思い【カテゴリとダッシュボード】を追加する事としました。
これによって「何のログなのか？」を把握する事ができ記録してきたログを可視化する事でデータに意味を付けられるようにしました。
思い描くイメージを伝え、具体的なプロンプトを構築していく
自分の思い描く機能をGeminiに伝えていきます。
- プロジェクト管理（簡易管理：タグ付け）：３つのカテゴリ(仕事・学校/学習/生活)のシンプルな管理を意識して実装していきたい。
- ダッシュボード機能（シンプルな集計と可視化）：ここは、特にポイントとなる機能で意味のある可視化にしていきたい。各カテゴリーごとに「積み上げヒストグラム」を導入したいと思っています。又は、棒グラフ。
① カテゴリ選択機能の追加
何を追加する？
計測前に「何の時間か」を選べる仕組みに対応した。
- カテゴリは3つだけ（固定）
- 仕事 / 学習 / 生活
- タイマー画面でワンタップ選択
- 選んだカテゴリをログに保存
これで何ができる？
- 「何にどれくらい時間を使ったか」が後からわかる
- ログが数字だけでなく意味を持つ
② ダッシュボード画面の追加（Dashboard新規）
何を追加する？
時間の使い方をグラフで見る画面
- 日付 × カテゴリ別に集計
- 積み上げ棒グラフで表示
- 別ページ（/dashboard）として用意
- スムーズな切り替えもできるようにアイコンを取り付け。
これで何ができる？
- 1日・1週間の時間配分が一目でわかる
- 「仕事が多い」「学習が増えている」など傾向が見える（可視化）
疑問に答える
- 「なぜ3カテゴリだけなのか？」
-
このアプリでやりたいのは、
時間を細かく管理することではなく
「何に使っていたか」を振り返ることです。カテゴリを増やすと考えることが増え、
結果的に使わなくなりがちです。
だからあえて 仕事・学習・生活の3つに固定しました。考えずに選べて、あとから思い出しやすい。
続けるための最小構成です。 - 「なぜ積み上げグラフなのか？」
-
1日の時間を
合計だけでなく中身ごと見たかったからです。積み上げグラフなら、
- どのカテゴリに一番時間を使ったか
- 全体の中での割合
が一目でわかります。
振り返って次の行動を考えるための可視化として、
この形が一番しっくりきました。
２つの機能が動くのか確認する
- 確認①： カテゴリ選択機能は機能しているのか？→機能している！
-
- 仕事・学習・生活の３つのカテゴリが作成されそれぞれクリックすると反応する。
- 測定後も「記録/Log List」にカテゴリが付与され何のログかが一目でわかる。
- 直感的に選択して始められるようにボタンの上に配置してあるのは良いと感じた。
- 確認②： ダッシュボード画面は表示されるのか？→ダッシュボードページ遷移時にエラー発生
-
- 「タイマー」と「ダッシュボード」がスムーズ移動できるようにスイッチャーになっているのは良いと思った。
- 「ダッシュボード」に遷移後に上手く立ち上がらず「Invalid Time Value 」エラーが発生して表示されなかった。
問題：ダッシュボードページへ遷移したらエラー発生。
これに対処するためにFirebase StudioのAIエージェントのFix機能を使って修正を依頼しました。
無事に修正されてスイッチャーにて「ダッシュボード」ページにスムーズな遷移した後に「積み上げヒストグラム」の表示と1日・1週間の時間配分が一目でわかるようになりました。
最後に今回のエラーをAIエージェントから学習して以下のような形でまとめました。
- ■ 現状と原因
-
/dashboardを開くと「Invalid time value」エラーで画面が表示されなかった。- 原因は、Firestoreの日付形式とJavaScriptの日付形式の違い。
- Firestoreの
TimestampをDateに変換しないまま日付処理（format）に渡していた。 - JavaScript側が解釈できず、エラーが発生していた。
- ■ 行った対応
-
- Firestoreから取得したログデータを一度加工してから使う処理を追加
Timestamp型のstartTime / endTimeを.toDate()で Date オブジェクトに変換- 変換済みデータをグラフ用の集計処理で使用するように統一
- ■ 改善結果
-
- 日付エラーが発生しなくなった
- ダッシュボードのグラフが正常に表示されるようになった
- Firestoreデータの扱い方が統一され、コード全体の安定性が向上
まとめと今後(セクション3）について
今回は、スムーズな修正で機能を追加する事が出来ました。
これでセクション２の機能追加の実践記事は完了です。
機能の追加では、プロジェクトの連携ミスからAIエージェントの引継ぎ問題と機能的な問題以外が多かったように思います。ここまで追っていただいた方はメイン(機能面)での問題発生よりも「意外と身近な所で問題が起きている」と感じていただいたのかなと思います。バイブコーディングでアプリ開発を行っていく際は、内容よりも根本から気を付けて行っていただきたいなと思います。私自身行ってみて、そう実感しています。
次のセクション3では、バックエンド機能の実装を行っていきます。具体的には、Google Analyticsの導入やApp Hosting(公開)の導入とFirebaseでの使いたい機能を選択し実装してく形になります。
ここまで読んでいただきありがとうございました。次回もお楽しみに！
コメント