CLAUDE.md

Claude Project Settings

言語設定

すべての回答は日本語で行ってください。

開発サーバー実行方法

開発サーバーを起動する際は、以下のコマンドを使用してください：

npm run dev:restart

このコマンドは自動的に：

1. ポート3200で動作中のプロセスをkill
2. 開発サーバーを起動
3. ログをdev.logファイルとコンソール両方に出力

コード編集時の自動フォーマット

ファイルを編集した後は、必ずPrettierでフォーマットしてください：

• npx prettier --write <編集したファイル> - Prettierによる自動フォーマット（import順序の整理も含む）

ハルシネーション禁止

特別な指示がない限り、推測や憶測に基づいたコード生成は禁止します。不明な点がある場合は必ず確認を求めてください。

TypeScriptにおけるany型の使用禁止

TypeScriptコードにおいて、any型の使用を固く禁じます。型安全性を保つため、必ず適切な型定義を行ってください。

インポート時のパス指定ルール

相対パスでのインポートを禁止します。必ず以下のパスエイリアスを使用してください：

• @/ - プロジェクトルートからのパス（例：@/components/ui/button）
• 相対パス禁止例：../../../components/ui/button、./utils/helper

正しい例：

import { Button } from '@/components/ui/button';
import { useGlobalStore } from '@/store/global';
import type { SwotData } from '@/schema/pox';

誤った例（使用禁止）：

import { Button } from '../../../components/ui/button';
import { useGlobalStore } from './store/global';
import type { SwotData } from '../../schema/pox';

開発の流れ

開発フロー

1. コード修正

   • 必要な機能追加やバグ修正を実施
   • TypeScript型定義を正確に行う（any型禁止）

2. 自動フォーマット

   • 修正したファイルをPrettierでフォーマット

   npx prettier --write <編集したファイル>
   

3. 動作確認

   • 下記の「動作確認手順」に従ってPlaywriteMCPやCurlで動作を確認
   • エラーや不具合が発生した場合は修正

4. エラー対応

   • ログを確認して問題を特定
   • 修正後、再度動作確認を実施
   • 正常動作するまで3-4を繰り返す

5. ビルド確認

   • コミット前に必ずビルドを実行

   npm run build
   

   • ビルドエラーがある場合は修正してから再度ビルド
   • ビルドが成功したことを確認してからコミット

HTML生成機能の基本動作確認

画面リンク集

メイン機能ページ

• トップページ: http://localhost:3200/
• リフレッシュモーメンツ選択: http://localhost:3200/refresh-moments
• 改善案生成結果: http://localhost:3200/refresh-moments/improvement-result
• ダミーモード改善案生成結果: http://localhost:3200/refresh-moments/improvement-result?dummyMode=true

その他のページ

• 新UIプレビュー: http://localhost:3200/updatedui

動作確認手順

1. 開発サーバー起動

   npm run dev:restart
   

2. 画面アクセス

   • ブラウザで http://localhost:3200/refresh-moments にアクセス
   • モーメントを選択してから http://localhost:3200/refresh-moments/improvement-result に遷移
   • ダミーモード: http://localhost:3200/refresh-moments/improvement-result?dummyMode=true で直接アクセス可能
   • PlaywriteMCPで確認
   • APIのみの修正の場合はCurlでAPI打鍵確認

3. モーメント選択操作

   • refresh-moments画面でモーメントを選択
   • 改善案生成ボタンをクリックして improvement-result 画面に遷移

4. ログ確認

   tail -f dev.log
   

動作確認ポイント

正常な処理フロー

1. スクリーンショット取得完了
2. FV HTML生成開始
3. Adobe Firefly画像生成開始（バックグラウンド）
4. gpt-image-1パイプライン試行（組織未認証の場合失敗）
5. 簡易版gpt-image-1フォールバック（403エラーの場合失敗）
6. 最終フォールバック：モックHTML表示

エラーパターン

• gpt-image-1エラー: 403 Forbidden - 組織未認証
• セグメンテーションエラー: TypeError: Cannot read properties of undefined
• 画像フォーマットエラー: 400 Bad Request - PNG変換で解決済み

成功判定

• 画面に「FVとコンテンツを生成中...」が表示される
• Adobe Fireflyバッチ処理が開始される
• ログに [CONTENTS HTML] Images generated successfully が出力される（2分程度）

重要な指示のリマインダー

要求されたことだけを実行してください。それ以上でも以下でもありません。 目的達成のために絶対に必要でない限り、ファイルを作成しないでください。 新規ファイルを作成するよりも、既存ファイルの編集を常に優先してください。 ドキュメントファイル（*.md）やREADMEファイルを自発的に作成しないでください。ユーザーから明示的に要求された場合のみドキュメントファイルを作成してください。

Serena MCP使用ガイドライン

• 既存コード解析やアーキテクチャ理解が必要な場面では原則Serena MCPを使用してコードの解析を行う
• Serena推奨場面：
  • コードベース全体の構造理解
  • シンボル間の参照関係調査
  • クラス・関数・変数の使用箇所特定
  • ファイル間の依存関係分析
  • リファクタリングや機能追加の影響範囲調査
  • 設計パターンの実装箇所探索
  • バグの原因となる関連コード特定
• 通常ツール推奨場面：
  • 単純なファイル読み込み・編集
  • 既知のファイル・関数への直接的な変更
  • シンプルな文字列検索・置換
• Serena MCPの機能を活用して効率的で正確なコード分析を心がける

Gradio API打鍵方法

Gradio APIのエンドポイントを直接確認する場合は、以下の方法を使用してください：

const { Client } = require('@gradio/client');

async function testGradioAPI() {
  try {
    const client = await Client.connect('dentsudigital/mugenAILP_dev', {
      hf_token: process.env.GRADIO_TOKEN, // .envファイルのトークンを使用
    });

    // 例: get_proposal_prediction_dummyエンドポイントの呼び出し
    const result = await client.predict('/get_proposal_prediction_dummy', {});
    console.log(JSON.stringify(result.data, null, 2));
  } catch (error) {
    console.error('Error:', error.message);
  }
}

testGradioAPI();

注意事項：

• Gradio APIのレスポンスは通常result.dataに配列形式で格納される
• 配列の最初の要素が実際のレスポンスデータであることが多い
• HuggingFaceのトークン（hf_で始まる）が必要な場合がある