Open16
話題のCline+Claude3.7で筋トレアプリを作る
shooooori0128まずClaude3.7のAPIキーからかな
shooooori0128以下のURLからできた。チャットサービスの方とは別の模様。
shooooori0128API Keyの管理は以下で。
shooooori0128プロンプトを考える
shooooori0128たぶん一気に完璧なプロンプト組めないので、Planモードで壁打ちしてもらってそこからActモードで作り上げてもらう。
shooooori0128っとその前に料金も確認しておく。
shooooori0128ActがTrt&Errorモードなので、やっぱりPlanモードで妥当な実行計画立ててからの方が料金的にはお安そう。
shooooori0128不要ならMCPモードはOff
MCPってなんやねん。
shooooori0128Protocolと名前に含まれている通り規格。
データソースの構造に関わらず、統一の規格でAIにデータを提供することでより精度の高い回答が期待できますよってこと。
なので自社のデータソースもMCPの規格に沿ってデータ提供することで精度を高められますよってこと。
shooooori0128ということなので、今回のような0からアプリケーション生成をするなら不要なので、今回はOFFで良さそう。
shooooori0128一旦一般的な筋トレ記録アプリを作りたいので、一般的な筋トレアプリの持っている機能の仕様をGPTに吐かせる。
shooooori0128最終的なプロンプト
あなたは優秀なプロのWebエンジニアです。以下の要件に基づいて、筋力トレーニング記録アプリ「IronTrack」の詳細な実装計画を作成してください。
## 依頼内容
筋力トレーニングを記録するためのWebアプリケーションの詳細な実装計画を作成してください。
## 機能要件
1. ユーザー認証
- Firebase Authenticationを利用したGoogleアカウントログインのみ
2. トレーニング記録
- 種目選択（カテゴリ別に整理）
- セットごとの重量・回数の入力
- トレーニングのメモ機能（自由入力）
- ネイティブアプリのような感覚で登録できるよう、極力ローディングを表示しない
3. トレーニング履歴の確認
- 日別のトレーニング履歴をリスト表示
- 特定の種目の履歴を確認
## 技術要件
- フロントエンド: React (Next.js App Router), shadcn UI, Tailwind CSS
- バックエンド: Next.js API Routes
- データベース: PostgreSQL (Docker)
- 認証: Firebase Authentication (Googleログインのみ)
- PWA対応必須
- パフォーマンス最適化: React Query/SWR, Zustand, IndexedDB, Service Worker
## デザイン要件
- 黒をベースにしたスタイリッシュなダークテーマ
- アクセントカラー: #ff6347 (トマト色)
- モバイルファーストのレスポンシブデザイン
## トレーニング種目マスターデータ
以下のカテゴリと種目を初期データとして使用：
### 胸（Chest）
- バーベルベンチプレス
- インクラインバーベルベンチプレス
- デクラインバーベルベンチプレス
- フロアプレス
- ダンベルベンチプレス
- インクラインダンベルベンチプレス
- デクラインダンベルベンチプレス
- ダンベルフライ
- インクラインダンベルフライ
- ダンベルプルオーバー
### 背中（Back）
- デッドリフト
- バーベルベントオーバーロー
- バーベルTバーロウ
- グッドモーニング
- バーベルシュラッグ
- ワンハンドダンベルローイング
- ダンベルデッドリフト
- ダンベルベントオーバーロー
- ダンベルプルオーバー
- ダンベルシュラッグ
- ダンベルリバースフライ
### 脚（Legs）
- バーベルスクワット
- フロントスクワット
- ハックスクワット
- バーベルルーマニアンデッドリフト
- グッドモーニング
- バーベルカーフレイズ
- ダンベルスクワット
- ゴブレットスクワット
- ダンベルステップアップ
- ダンベルブルガリアンスクワット
- ダンベルルーマニアンデッドリフト
- ダンベルカーフレイズ
### 腕（Arms）
- バーベルカール
- EZバーカール
- リバースバーベルカール
- バーベルフレンチプレス
- クローズグリップバーベルベンチプレス
- バーベルリバースカール
- ダンベルカール
- インクラインダンベルカール
- ハンマーカール
- コンセントレーションカール
- ダンベルフレンチプレス
- ダンベルキックバック
### 肩（Shoulders）
- バーベルショルダープレス
- ミリタリープレス
- バーベルハイプル
- バーベルフロントレイズ
- バーベルシュラッグ
- ビハインドネックプレス
- ダンベルショルダープレス
- ダンベルサイドレイズ
- ダンベルフロントレイズ
- ダンベルリアレイズ
- ダンベルアーノルドプレス
- ダンベルシュラッグ
## 特別要件
- セット間の休憩時間記録は不要
- 身長・体重の記録は不要
- デプロイ先はGoogle Cloud (Cloud Run + Cloud SQL)
以下の内容を含む詳細な実装計画を作成してください：
1. プロジェクト概要
2. 技術スタックの詳細
3. データベース設計（ERD図）
4. アプリケーション構成図
5. UI/UXデザイン概要
6. パフォーマンス最適化戦略
7. 認証フローとトレーニング記録フロー
8. フェーズ別実装計画
9. ディレクトリ構成
10. 主要コンポーネント例（コード）
11. PWA設定
12. Docker設定
可能な限り、mermaid記法を使用して図表を含めてください。
もとになったプロンプト
## 役割
あなたは優秀なプロのWebエンジニアです。
## 依頼事項
筋力トレーニングを記録するためのWebアプリケーションを作ってください。
## 仕様
## **1. ユーザー登録 & ログイン**
**目的:** 記録データを保持し、複数デバイスで同期可能にする
**必要な機能:**
- **Googleアカウントログイン**
- **簡単なプロフィール登録（ニックネーム、身長、体重）**
## **2. トレーニング記録**
**目的:** シンプルに「何を・どれだけ」やったかを記録する
**必要な機能:**
- **種目選択**
- **セットごとの重量・回数の入力**
- **トレーニングのメモ機能（自由入力）**
- **トレーニング履歴の一覧表示**
## **3. トレーニング履歴の確認**
**目的:** 自分の進捗を確認し、モチベーションを維持する
**必要な機能:**
- **日別のトレーニング履歴をカレンダー or リストで表示**
- **特定の種目（例: ベンチプレス）の履歴を確認**
## 技術
- 各技術領域毎に指定された技術を利用してください。
- ライブラリは可能な限り最新のバージョンを利用するようにしてください。
- UIは可能な限りUIフレームワークを使用し、CSSはCSSフレームワークを使用してください。
### リポジトリ構成
- Next.jsに準拠し、srcディレクトリを利用してください。
### フロントエンド
- Reactを利用してください。
- UIフレームワークはshadcn、CSSフレームワークはtailwindを利用してください。
### バックエンド
- Next.jsのAPI Routeを利用してください。
### データベース
- PostgreSQLを利用してください。
- Dockerコンテナ化してください。
### デプロイ
- アプリケーションはGoogle CloudのCloud Run、データベースはCloud SQLを利用してください。
雰囲気は良さそうなので一旦Actモードで吐いてみる。