コンフィグの .yaml対応

sakastudio · sakastudio · commit a35fbebd8fe6 · 2025-12-06T20:09:10.000+09:00
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -1,35 +1,3 @@
-# CLAUDE.md
-
-## 【MUST GLOBAL】Gemini活用（プロジェクトのCLAUDE.mdより優先）
-
-### 三位一体の開発原則
-ユーザーの**意思決定**、Claudeの**分析と実行**、Geminiの**検証と助言**を組み合わせ、開発の質と速度を最大化する：
-- **ユーザー**：プロジェクトの目的・要件・最終ゴールを定義し、最終的な意思決定を行う**意思決定者**
-  - 反面、具体的なコーディングや詳細な計画を立てる力、タスク管理能力ははありません。
-- **Claude**：高度な計画力・高品質な実装・リファクタリング・ファイル操作・タスク管理を担う**実行者**
-  - 指示に対して忠実に、順序立てて実行する能力はありますが、意志がなく、思い込みは勘違いも多く、思考力は少し劣ります。
-- **Gemini**：深いコード理解・Web検索 (Google検索) による最新情報へのアクセス・多角的な視点からの助言・技術的検証を行う**助言者**
-  - プロジェクトのコードと、インターネット上の膨大な情報を整理し、的確な助言を与えてくれますが、実行力はありません。
-
-### 実践ガイド
-- **ユーザーの要求を受けたら即座に`gemini -p <質問内容>`で壁打ち**を必ず実施
-- Geminiの意見を鵜呑みにせず、1意見として判断。聞き方を変えて多角的な意見を抽出
-- Claude Code内蔵のWebSearchツールは使用しない
-- Geminiがエラーの場合は、聞き方を工夫してリトライ：
-  - ファイル名や実行コマンドを渡す（Geminiがコマンドを実行可能）
-  - 複数回に分割して聞く
-
-### 主要な活用場面
-1. **実現不可能な依頼**: Claude Codeでは実現できない要求への対処 (例: `今日の天気は？`)
-2. **前提確認**: ユーザー、Claude自身に思い込みや勘違い、過信がないかどうか逐一確認 (例: `この前提は正しいか？`）
-3. **技術調査**: 最新情報・エラー解決・ドキュメント検索・調査方法の確認（例: `Rails 7.2の新機能を調べて`）
-4. **設計検証**: アーキテクチャ・実装方針の妥当性確認（例: `この設計パターンは適切か？`）
-5. **コードレビュー**: 品質・保守性・パフォーマンスの評価（例: `このコードの改善点は？`）
-6. **計画立案**: タスクの実行計画レビュー・改善提案（例: `この実装計画の問題点は？`）
-7. **技術選定**: ライブラリ・手法の比較検討 （例: `このライブラリは他と比べてどうか？`）
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
 ## Project Overview
 
 CommandForgeEditor is a visual scripting tool designed for game developers to create and manage scenario scripts (called "skits") without writing code. It provides an intuitive drag-and-drop interface for assembling sequences of commands that control game flow, dialogue, character actions, and other game events.
diff --git a/frontend/src/utils/configLoader.ts b/frontend/src/utils/configLoader.ts
@@ -18,8 +18,10 @@ const configSchema = {
 
 const validateConfig = ajv.compile(configSchema);
 
+const CONFIG_FILE_NAMES = ['commandForgeEditor.config.yml', 'commandForgeEditor.config.yaml'];
+
 /**
- * Loads and validates the commandForgeEditor.config.yml file
+ * Loads and validates the commandForgeEditor.config.yml or .yaml file
  * @param projectPath The project path
  * @returns Promise with the configuration
  */
@@ -30,10 +32,17 @@ export async function loadConfigFile(projectPath: string): Promise<CommandForgeC
       throw new Error('Running in web environment, Tauri API not available');
     }
 
-    const configPath = await join(projectPath, 'commandForgeEditor.config.yml');
-    
-    if (!(await exists(configPath))) {
-      throw new Error(`Configuration file not found at ${configPath}`);
+    let configPath: string | null = null;
+    for (const fileName of CONFIG_FILE_NAMES) {
+      const path = await join(projectPath, fileName);
+      if (await exists(path)) {
+        configPath = path;
+        break;
+      }
+    }
+
+    if (!configPath) {
+      throw new Error(`Configuration file not found. Searched for: ${CONFIG_FILE_NAMES.join(', ')}`);
     }
 
     const configContent = await readTextFile(configPath);
diff --git a/frontend/src/utils/devFileSystem.ts b/frontend/src/utils/devFileSystem.ts
@@ -46,25 +46,39 @@ export async function loadSampleSkit(): Promise<Record<string, Skit>> {
   }
 }
 
+const CONFIG_FILE_NAMES = ['commandForgeEditor.config.yml', 'commandForgeEditor.config.yaml'];
+
 /**
- * 開発環境用: サンプルcommandForgeEditor.config.ymlファイルを読み込む
+ * 開発環境用: サンプルcommandForgeEditor.config.yml または .yaml ファイルを読み込む
  * @returns Promise with the configuration
  */
 export async function loadSampleConfig(): Promise<CommandForgeConfig> {
   try {
-    console.log('Loading commandForgeEditor.config.yml for web environment');
-    
-    // Web環境でfetchを使用してファイルをロード
-    const response = await fetch('/src/sample/commandForgeEditor.config.yml');
-    if (!response.ok) {
-      throw new Error(`Failed to fetch commandForgeEditor.config.yml: ${response.status}`);
+    console.log('Loading commandForgeEditor.config for web environment');
+
+    // Web環境でfetchを使用してファイルをロード (.yml, .yaml の順で試行)
+    let response: Response | null = null;
+    let loadedFileName: string | null = null;
+
+    for (const fileName of CONFIG_FILE_NAMES) {
+      const res = await fetch(`/src/sample/${fileName}`);
+      if (res.ok) {
+        response = res;
+        loadedFileName = fileName;
+        break;
+      }
+    }
+
+    if (!response || !response.ok) {
+      throw new Error(`Failed to fetch config file. Searched for: ${CONFIG_FILE_NAMES.join(', ')}`);
     }
+
     const content = await response.text();
     const config = parse(content) as CommandForgeConfig;
-    console.log('Successfully loaded commandForgeEditor.config.yml');
+    console.log(`Successfully loaded ${loadedFileName}`);
     return config;
   } catch (error) {
-    console.error('Failed to load commandForgeEditor.config.yml:', error);
+    console.error('Failed to load commandForgeEditor.config:', error);
     throw error;
   }
 }
diff --git a/memory-bank/activeContext.md b/memory-bank/activeContext.md
@@ -15,6 +15,7 @@
 - コピーとカット処理の共通化を実施
 - 変数機能の仕様書を作成
 - ベクター型プロパティの追加とUI更新
+- i18n 仕様書を作成
 
 ## 現在の課題
 - コマンドエディターの詳細機能の把握
@@ -52,4 +53,4 @@
 - コマンド編集のユーザーエクスペリエンス改善
 - バリデーション機能の拡張
 - スキット管理の効率化
-- コマンドテンプレート機能の検討
+- コマンドテンプレート機能の検討
diff --git a/memory-bank/doc/11-i18n-spec.md b/memory-bank/doc/11-i18n-spec.md
@@ -0,0 +1,145 @@
+# i18n 仕様書（Moore's Command Editor）
+
+本仕様はエディタ UI とプロジェクト（コマンド定義）で利用する翻訳データの構造、配置パス、読み込み規約を定義します。既存実装（frontend/src/i18n 配下）に準拠しています。
+
+## 目的と適用範囲
+- エディタ UI 固定文言（アプリ内に同梱。必要に応じて上書き可能）
+- プロジェクト側のコマンド／プロパティ名・説明・プレースホルダー・列挙値
+- 実行時の読み込み元と優先順位、ファイル命名規則
+
+## 実行時の挙動（概要）
+- 初期化: `frontend/src/i18n/config.ts` で i18next を初期化。
+  - 既定言語: 日本語（`lng: 'ja'`）／フォールバック: 英語（`fallbackLng: 'en'`）
+  - React: Suspense 無効（`useSuspense: false`）
+- 動的ロード: `frontend/src/i18n/translationLoader.ts` の `loadTranslations()` がプロジェクト翻訳を追加ロード。
+  - Tauri 以外（開発／テスト）: `frontend/src/sample/i18n/*.json` をフェッチ
+  - Tauri 実行時: `projectPath/i18n/*.json` をファイル I/O で読み込み
+- マージ優先度: アプリ内固定リソース → プロジェクト翻訳で上書き（同一キー）
+
+## 置き場所（JSON パス）
+- 開発・テスト用サンプル
+  - `frontend/src/sample/i18n/english.json`
+  - `frontend/src/sample/i18n/japanese.json`
+- プロダクション（Tauri 実行時のプロジェクト）
+  - `<projectPath>/i18n/english.json`
+  - `<projectPath>/i18n/japanese.json`
+  - `<projectPath>/i18n/chinese.json`
+  - `<projectPath>/i18n/spanish.json`
+
+備考:
+- 実際に言語コードとして使用されるのは各 JSON の `locale` フィールドです（ファイル名は検出対象の候補）。
+- `projectPath` はアプリのストアで選択されたプロジェクトルートです（`useSkitStore.getState().projectPath`）。
+
+## JSON フォーマット（厳密定義）
+TypeScript による型定義（参考）:
+
+```ts
+// 言語コードは BCP 47 推奨（例: 'en', 'ja', 'zh', 'es' など）
+export type LocaleCode = string;
+
+export interface TranslationFile {
+  locale: LocaleCode;            // 必須: 使用する言語コード
+  name: string;                  // 必須: 言語表示名（例: "English", "日本語"）
+  translations: Record<string, string>; // 必須: 翻訳キー → 文字列
+}
+```
+
+必須キー:
+- `locale`: 例 `"en"`, `"ja"`
+- `name`: 例 `"English"`, `"Japanese"`
+- `translations`: 平坦（フラット）なキーの辞書。値はすべて文字列。
+
+## 翻訳キー設計（命名規則）
+- UI 固定文言（アプリ同梱; プロジェクトで上書き可）
+  - `editor.*`（メニュー、ツールバー、パネル、ダイアログ、バリデーション、共通ラベル）
+  - `language.*`（言語 UI 用のラベル群）
+  - `skitList.*`
+- コマンド関連（プロジェクト側が提供）
+  - 基本:
+    - `command.{commandId}.name`
+    - `command.{commandId}.description`
+  - プロパティ:
+    - `command.{commandId}.property.{propKey}.name`
+    - `command.{commandId}.property.{propKey}.description`
+    - `command.{commandId}.property.{propKey}.placeholder`
+  - 列挙値（enum がある場合）:
+    - `command.{commandId}.property.{propKey}.enum.{EnumValue}`
+
+生成ヘルパー: `generateCommandTranslationKeys(command)` が上記パターンのキー一覧を生成。
+
+注意:
+- キーはドット区切りのフラット文字列。入れ子 JSON は使用しません。
+- `{EnumValue}` は元定義の値と完全一致（大文字小文字・スペース含む）。
+
+## 文字列の書式と補間
+- 補間（i18next 互換 Mustache 形式）: `{{name}}`, `{{count}}` など
+  - 例: `editor.toolbar.commandAdded: "{{command}} added"`
+- HTML は原則含めない（エスケープに依存しない安全な表現を推奨）
+- 改行が必要な場合は `\n` を利用
+
+## 言語の検出・選択
+- 既定: 日本語（`ja`）
+- フォールバック: 英語（`en`）
+- 開発モードでは `localStorage.i18nextLng` を `ja` に設定（`src/main.tsx`）
+- 利用可能言語の一覧はロード済みリソースから算出（`getAvailableLanguages()`）
+
+## マージと優先度
+1. アプリ内固定翻訳（`config.ts` の `editorTranslations`）が初期ロード
+2. プロジェクト翻訳（`translationLoader.ts`）を同一 `namespace: 'translation'` に追加入力
+3. 同一キーが存在する場合、プロジェクト側で上書き
+
+## バリデーション・品質チェック
+- JSON が妥当（コメント不可・UTF-8 推奨）
+- `locale` が正しい（BCP 47 準拠を推奨、例: `en`, `ja`）
+- `translations` の値はすべて非空文字列
+- 重複キーなし（同一ファイル内）
+- 列挙値キーの末尾 `{EnumValue}` は元データ定義と完全一致
+- 必要キー（`name`, `description` 等）が網羅されていること（`generateCommandTranslationKeys` で検出可）
+
+## 拡張と追加言語
+- 新しい言語を追加するには `<projectPath>/i18n/{languageName}.json` を作成し、`locale` に適切なコードを設定
+- ローダーはファイル名 `english|japanese|chinese|spanish` を探索しますが、実際の適用言語は JSON 内の `locale` に従います
+- 追加の言語ファイル拡張を行う場合は、ローダー側の探索リスト拡張が必要です
+
+## 例（最小）
+`english.json`
+```json
+{
+  "locale": "en",
+  "name": "English",
+  "translations": {
+    "command.text.name": "Text",
+    "command.text.description": "Display dialogue",
+    "command.text.property.body.name": "Body",
+    "command.text.property.body.description": "Dialogue content",
+    "command.text.property.body.placeholder": "Enter dialogue text"
+  }
+}
+```
+
+`japanese.json`
+```json
+{
+  "locale": "ja",
+  "name": "日本語",
+  "translations": {
+    "command.text.name": "テキスト",
+    "command.text.description": "セリフを表示",
+    "command.text.property.body.name": "本文",
+    "command.text.property.body.description": "セリフ内容",
+    "command.text.property.body.placeholder": "セリフを入力"
+  }
+}
+```
+
+## 関連ソース
+- 設定: `frontend/src/i18n/config.ts`
+- ローダー: `frontend/src/i18n/translationLoader.ts`
+- 初期化: `frontend/src/main.tsx`
+- サンプル: `frontend/src/sample/i18n/*.json`
+
+## 運用メモ
+- プロジェクト翻訳で UI 固定キー（`editor.*` 等）を定義すると同梱文言を上書き可能。ただし、推奨はコマンド関連キーの提供。
+- JSON 変更の反映にはアプリの再読み込みが必要。
+- 型の観点から、`translations` は `Record<string, string>` を維持し、曖昧な `any` の使用は避けること。
+
diff --git a/memory-bank/progress.md b/memory-bank/progress.md
@@ -10,6 +10,7 @@
 - ✅ コピーとカット処理の共通化を実施
 - ✅ 変数機能の仕様書を作成
 - ✅ ベクター型プロパティの実装とUIへの入力フィールド追加
+- ✅ i18n 仕様書を作成
 
 ## 現在の状態
 プロジェクトはまだ分析段階にあります。Moore's Command Editorのコードベースと機能を理解し、ドキュメント化している段階です。メモリバンクの基本構造が確立され、今後の開発のための基盤が整いました。
@@ -50,4 +51,4 @@
 1. コードベースの詳細理解
 2. 主要機能の動作確認
 3. 改善点の特定
-4. 開発ロードマップの作成
+4. 開発ロードマップの作成
