スマート フィットネス アプリ: 段階的な実装計画と検証ロードマップ
アーティファクトこれは、エピソード 4「ノーコード アプリの実装計画」で使用されるアーティファクトです。このロードマップを使用すると、2 層の検証と Git ブランチ / タグゲートを使用して、マイルストーン主導の開発をオーケストレートできます。
このアーティファクトにアクセスするにはログインしてください
Google デベロッパー プロフィールでログインすると、Build It! シリーズで使用されているアーティファクト全体を表示してコピーできます。
デベロッパー プロフィールが必要です
デベロッパー プロフィールは無効です。この機能を有効にするよう、Workspace 管理者に連絡してください。
デベロッパー プロフィールを作成する
無料の Google デベロッパー プロフィールを作成して、Build It! のすべてのプロンプトとアーティファクトを利用できるようにしましょう。
Builder Central に参加してロックを解除
ワンクリックで無料の Builder メンバーシップ バッジを取得して、Build It! のすべてのプロンプトとアーティファクトにアクセスしましょう。
ステータス: 承認済み、実行準備完了
対象読者: 自律型 AI 開発者エージェント、人間のプロジェクト リード
関連ドキュメント: データ アーキテクチャ仕様、 クライアント アーキテクチャ仕様、 AI トレーナー エージェント仕様
エグゼクティブ サマリーと実行戦略
この実装計画は、基礎となるスキーマから本番環境の準備まで、Smart Fitness アプリケーションの完全なビルドをオーケストレートします。
実行パラダイム: マイルストーン主導と 2 層検証
エージェントの迅速な開発とアーキテクチャの正確性のバランスを取るため、この計画ではフェーズゲート マイルストーン フレームワークを採用しています。
- マイルストーン内の自律的な実行: 実装エージェントは、各マイルストーンのステップを継続的に実行し、コードの記述、ビルドの実行、コンパイラ エラーの修正、問題の自己修復を、人間によるマイクロマネジメントなしで行います。
- レイヤ 1 の検証 - 自律型エージェントの事前ゲートバリア: 人間による承認をリクエストする前に、エージェントはコンパイラ チェックを実行し、バックエンド テスト スクリプトを実行し、Google Antigravity Autonomous Browser Verification（Chrome DevTools を使用）を起動して、実際のモバイル ユーザーの操作をシミュレートし、平易な英語のテストケースを実行し、DOM 状態を検査し、スクリーンショットをキャプチャする必要があります。
- レイヤ 2 の検証 - 人間のゲートキーパーによるチェックポイント: エージェントの自動チェックに合格すると、人間のゲートキーパーが具体的な 2 分間のチェックリストを確認して、UX の操作感、ビジネスとの整合性、データの完全性を検証してから、次のマイルストーンに進む権限を付与します。
バージョン管理と Git タグ付けプロトコル
障害復旧、透過的なコードレビューの差分、マイルストーン全体での複合エラーのゼロ化を実現するために、実装エージェントは次の Git プロトコルを厳守する必要があります。
- ブランチ戦略:
main: 保護されたブランチ。人間が承認したマイルストーン リリースのみがここにマージされます。- マイルストーン機能ブランチ: マイルストーンごとに専用のブランチ（
feat/m1-scaffolding-types～feat/m6-pwa-production）。
- Pre-Gate Commit Ceremony:
git add -A git commit -m "feat(mX): complete milestone X tasks and pre-gate verifications" - Human Gatekeeper Diff Review:
git diff main..HEAD # or across gates: git diff gate-[N-1]-approved..HEAD - ゲート承認とマイルストーンのタグ付け:
git checkout main git merge --no-ff feat/mX-... -m "merge: approve milestone X" git tag -a gate-X-approved -m "Milestone X: Verified and approved by Gatekeeper" - ロールバックと障害復旧:
git checkout main git branch -D feat/mX-... git checkout -b feat/mX-... gate-[N-1]-approved
プライマリ アーキテクチャの依存関係グラフ
M1 [Milestone 1: Foundations, Types & Database Seed] ──> G1 {Gate 1 Sign-Off}
├──> M2 [Milestone 2: Server APIs & Gemini Coach Engine] ──> G2 {Gate 2 Sign-Off}
└──> M3 [Milestone 3: Client State & Gym-Floor Tracker] ──> G3 {Gate 3 Sign-Off}
├──> M4 [Milestone 4: Coach Chat & Staged Proposal Interface] ──> G4 {Gate 4 Sign-Off}
└──> M5 [Milestone 5: Schedule, Analytics & Profile Settings] ──> G5 {Gate 5 Sign-Off}
└──> M6 [Milestone 6: PWA Offline Sync & E2E Validation] ──> G6 {Gate 6: Final Production Acceptance}マイルストーン 1: プロジェクトの足場、コアタイプ、データベース レイヤ
目標: リポジトリの基盤、厳格な TypeScript ドメイン契約、Firebase SDK 接続を確立し、静的なエクササイズ百科事典をシードします。
- タスク 1.0: Git ブランチの初期化 -
feat/m1-scaffolding-typesを作成して切り替えます。 - タスク 1.1: プロジェクトのスキャフォールディングとツールチェーンのセットアップ - Next.js 19（App Router）を、TypeScript 厳格モード、Tailwind CSS v4、Tailwind Variants、Lucide React、Zustand、TanStack Query、Firebase SDK、Google 生成 AI SDK、Recharts、PWA ベースラインで初期化します。
- タスク 1.2: 標準的な TypeScript ドメインタイプ定義 - データ アーキテクチャ仕様に厳密に一致する
src/types/モジュール（exercise.ts、plan.ts、session.ts、profile.ts、chat.ts、pr.ts）を作成します。 - タスク 1.3: Firebase Client SDK と Firebase Admin SDK の設定 -
src/lib/firebase/client.tsとsrc/lib/firebase/admin.tsを実装します。 - タスク 1.4: エクササイズ百科事典シードスクリプト - 正規のスラッグとメタデータを含む
/exercisesをシードするscripts/seed-exercises.tsを作成します。 - タスク 1.5: Firestore のルールとインデックス -
firestore.rulesとfirestore.indexes.jsonをデプロイします。
レイヤ 1 とレイヤ 2 の検証（ゲート 1）: npx tsc --noEmit、npm run lint、npx ts-node scripts/seed-exercises.ts を実行します。git diff main..HEAD を検査し、gate-1-approved のタグ付けを行う前に、シードされた Firestore ドキュメントを検証します。
マイルストーン 2: バックエンド API ルート ハンドラと AI エンジン パイプライン
目的: ワークアウトの記録と Gemini AI コーチング パイプラインのサーバー ルート ハンドラを、コンテキスト キャッシュ、メモリ ミューテーション処理、段階的な提案とともに実装します。
- タスク 2.0: Git ブランチの初期化 -
feat/m2-backend-apisを作成し、mainから切り替えます。 - タスク 2.1: 認証ミドルウェア ヘルパー - Firebase ID トークンを検証する
src/lib/auth/server-auth.tsを実装します。 - タスク 2.2: ワークアウト記録エンドポイント（
POST /api/workouts/log） - セッション ボリュームを計算し、Brzycki 1RM 式を適用し、PR を upsert し、不変ログを保持し、スケジュールされた日をcompletedとしてマークします。 - タスク 2.3: Gemini コンテキスト キャッシュと動的プロンプト アセンブリ - プライマリ システム指示と動的ランタイム コンテキスト アセンブリを使用して
cachedContents.createを設定します。 - タスク 2.4: 統合チャット エンドポイント（
POST /api/coach/chat） - 構造化された JSON スキーマ出力を適用し、weekly_chatsにデュアル書き込みを行い、ステージングされたミューテーションの分離を適用します。 - タスク 2.5: 自律型メモリ ミューテーション プロセッサ -
memory_mutations（CREATE、UPDATE、DELETE）を/users/{userId}/profile/mainに適用します。 - タスク 2.6: 読み取り専用の分析クエリツール -
get_historical_exercise_logs、get_volume_trends、get_pr_recordsを実装します。
レイヤ 1 とレイヤ 2 の検証（ゲート 2）: npx ts-node scripts/test-api-routes.ts を実行し、ステージングされたミューテーションの分離を確認し、キャッシュされたレイテンシ（2.5 秒未満）を確認して、gate-2-approved にタグを付けます。
マイルストーン 3: クライアントの状態インフラストラクチャとコア Gym-Floor トラッカー
目標: アプリケーション シェル、永続的な下部ドック、ローカルの Zustand と TanStack Query の状態アーキテクチャ、重要な /workout/active ジムフロア実行ビューを構築します。
- タスク 3.0: Git ブランチの初期化 -
mainからfeat/m3-client-state-trackerを作成して切り替えます。 - タスク 3.1: アプリケーション シェルと永続的なナビゲーション - 5 つの 48 dp タップ ターゲットと動的な中央ボタンを使用して、
<AppContainer />と<BottomNavigationBar />を実装します。 - タスク 3.2: クライアントの状態管理とステップグラフのフラット化 -
useActiveSessionStore（Zustand +localStorage）とステップグラフのフラット化アルゴリズムを実装します。 - タスク 3.3: 再利用可能なワークアウト ブロック コンポーネント カタログ -
<WorkoutHeader />、<WorkoutExerciseSummary />、<WorkoutBlock />、<ExerciseCard />、<EmptyDayPlaceholder />、<ModifyWithCoachCard />を実装します。 - タスク 3.4: 毎日のワークアウトのプレビュー ビュー -
/todayと/workouts/:dayのDailyWorkoutViewを実装します。 - タスク 3.5: アクティブなワークアウト実行画面（
/workout/active） - ストップウォッチ ヘッダー、<CurrentSetTargetCard />（16 ミリ秒未満の楽観的 UI）、<ActiveRestTimerDock />、<ExerciseSetsTable />、<SwapExerciseModal />、<FinishConfirmationModal />を実装します。 - タスク 3.6: エクササイズの詳細百科事典ビュー（
/exercises/:exerciseId） - 自動ループのミュートされた<ExerciseVideoPlayer />、ターゲットの筋肉、ステップ、フォームのヒントを実装します。
レイヤ 1 とレイヤ 2 の検証（ゲート 3）: Chrome DevTools のモバイル ビューポート（390x844）でスイート 1、2、5、6 を実行し、localStorage の再読み込み復元とタグ gate-3-approved を検証します。
マイルストーン 4: AI コーチの会話ハブと段階的な提案インターフェース
目標: 音声入力、プロンプト チップの推奨事項、コンテキスト バナーの添付ファイル、インタラクティブな段階的提案カードを備えた会話型コーチング インターフェース（/coach）を実装します。
- タスク 4.0: Git ブランチの初期化 -
feat/m4-coach-chatを作成してmainから切り替えます。 - タスク 4.1: チャットの状態とリアルタイム同期 - Firestore の
onSnapshotサブスクリプションを使用してuseCoachChatStoreを実装します。 - タスク 4.2: コーチ チャット ビューのレイアウトとメッセージ ストリーム -
<CoachHeader />、<ChatMessageList />、<ChatBubble />、コーチの思考スピナーを実装します。 - タスク 4.3: コンテキストの添付とプロンプト チップ -
<ContextBanner />、<ContextualPromptsBar />、<ChatInputBar />、<SpeechToTextButton />を実装します。 - タスク 4.4: 段階的な提案カードの実装 -
UPDATE_DAYとUPDATE_WEEKの差分に<StagedProposalCard />を実装します。 - タスク 4.5: 人間参加型の提案の commit -
[Accept Plan]がタップされた場合にのみ、proposal.dataを Firestoreweekly_plansに commit します。
レイヤ 1 とレイヤ 2 の検証（ゲート 4）: Chrome DevTools でスイート 4 を実行し、ステージングされたミューテーションの分離と [Accept Plan] commit を検証し、gate-4-approved にタグを付けます。
マイルストーン 5: スケジュールの見直し、進捗状況の分析、プロフィール設定
目標: 残りのアプリケーション ビュー（1 週間のスケジュール（/week）、進捗状況と分析（/progress）、プロフィール / 設定（/settings））を 3 階層のメモリ管理で完成させます。
- タスク 5.0: Git ブランチの初期化 -
mainからfeat/m5-schedule-progress-settingsを作成して切り替えます。 - タスク 5.1: 1 週間のスケジュール ビュー（
/week） -<WeekHeader />、<WeeklyStatsSummary />、<DayScheduleCard variant="normal" />、<ModifyWeekWithCoachCard />を実装します。 - タスク 5.2: 進捗状況とアナリティクス ビュー（
/progress） -<PRShowcaseBanner />、Recharts<VolumeProgressChartCard />（4W | 3M | 1Y）、<AllTimeStatsGrid />、<WorkoutHistorySection />を実装します。 - タスク 5.3: プロフィール、設定、AI メモリビュー（
/settings） -<UserProfileCard />、<EquipmentSelectorCard />、<PreferencesGroup />、<MemoryTierViewerCard />を実装し、[🗑]の削除を可能にします。
レイヤ 1 とレイヤ 2 の検証（ゲート 5）: Chrome DevTools でスイート 3、7、8 を実行し、グラフの切り替えとメモリの削除を確認して、gate-5-approved をタグ付けします。
マイルストーン 6: 本番環境の強化、PWA オフライン バッファ、フルマトリックスの承認
目標: 実際のジム環境向けにアプリケーションを強化します。オフライン PWA アセット キャッシュを構成し、オフライン ワークアウト ログの同期を実装して、42 項目のテストからなるプレーンな英語の検証マトリックスをすべて実行します。
- タスク 6.0: Git ブランチの初期化 -
mainからfeat/m6-pwa-productionを作成して切り替えます。 - タスク 6.1: PWA Service Worker とアセット キャッシュ - Serwist / next-pwa Service Worker とスタンドアロン PWA マニフェストを完成させます。
- タスク 6.2: 地下のジムのオフライン同期バッファ - 自動再接続フラッシュを使用して、
POST /api/workouts/logの IndexedDB / localStorage にオフライン キューを実装します。 - タスク 6.3: エラー境界とフォールバック ビュー - 404 フォールバック、無効な日のフォールバック、無効なエクササイズのフォールバックを確認します。
- タスク 6.4: フルマトリックス実行とパフォーマンス監査 - スイート 1 ～ 8 の 42 個の平易な英語のテストケースをすべて実行し、Lighthouse 監査（パフォーマンス >90、LCP <2.5 秒、タップ ターゲット ≥48dp）を実行します。
レイヤ 1 とレイヤ 2 の検証（ゲート 6）: npm run build を実行し、Chrome DevTools でオフライン ネットワーク モードをシミュレートして、42/42 のテストスイートすべてに合格することを確認し、v1.0.0 をタグ付けします。
人間のゲートキーパーによる検証ゲートの概要
| ゲート | 分野 | Git ブランチとリリースタグ | エージェントの主な成果物 | 人間による確認の想定時間 |
|---|---|---|---|---|
| ゲート 1 | タイプ、DB スキーマ、シード | feat/m1-scaffolding-typesタグ: gate-1-approved |
src/types/、シード スクリプトが実行され、クリーン コンパイル |
約 2 分（差分とシードされた DB を検査） |
| ゲート 2 | バックエンド API と Gemini パイプライン | feat/m2-backend-apisタグ: gate-2-approved |
/api/workouts/log、/api/coach/chat、統合テスト |
約 3 分（API テスト スクリプトを実行してスキーマを確認する） |
| ゲート 3 | クライアントの状態とアクティブ トラッカー | feat/m3-client-state-trackerタグ: gate-3-approved |
シェル、/today、/workout/active、ブラウザテストに合格 |
約 3 分（ワークアウト コントロールをタップしてストップウォッチをテストする） |
| ゲート 4 | コーチチャットと段階的な提案 | feat/m4-coach-chatタグ: gate-4-approved |
/coach、<StagedProposalCard />、提案のコミット |
約 3 分（コーチとのチャット、[Accept Plan] のテスト） |
| ゲート 5 | スケジュール、アナリティクス、設定 | feat/m5-schedule-progress-settingsタグ: gate-5-approved |
/week、/progress、/settings、メモリ マネージャー |
約 3 分（グラフを確認してテストメモリを削除する） |
| ゲート 6 | PWA のオフライン同期と完全リリース | feat/m6-pwa-productionタグ: v1.0.0 |
本番環境ビルド、PWA キャッシュ、42/42 のテストに合格 | 約 5 分（最終的なレポートの確認とモバイルのサニティ チェック） |