#56 *.mdを更新

Author: ienaga

template/README.md

@@ -17,6 +17,7 @@ This project was bootstrapped with [Create Next2D App](https://github.com/Next2D
 - [ユニットテスト / Unit Test](#ユニットテスト--unit-test)
 - [ビルド / Build](#ビルド--build)
 - [ディレクトリ構成 / Directory Structure](#ディレクトリ構成--directory-structure)
+- [📚 詳細ドキュメント / Detailed Documentation](#-詳細ドキュメント--detailed-documentation)
 - [ライセンス / License](#ライセンス--license)
 
 ---
@@ -232,6 +233,46 @@ See the `README.md` in each directory for details.
 
 ---
 
+## 📚 詳細ドキュメント / Detailed Documentation
+
+各ディレクトリには、実装ガイドとなるREADME.mdが配置されています。AIエージェントやコード生成ツールは、これらのドキュメントを参照することで、アーキテクチャに沿った実装が可能です。
+
+Each directory contains a README.md that serves as an implementation guide. AI agents and code generation tools can reference these documents to implement code that follows the architecture.
+
+### アーキテクチャ層 / Architecture Layers
+
+| ドキュメント / Document | 説明 / Description |
+|------------------------|-------------------|
+| [src/model/README.md](./src/model/README.md) | Model層全体の概要、3層構造の説明 |
+| [src/model/application/README.md](./src/model/application/README.md) | Application層：UseCaseパターンの実装ガイド |
+| [src/model/domain/README.md](./src/model/domain/README.md) | Domain層：コアビジネスロジックの実装ガイド |
+| [src/model/infrastructure/README.md](./src/model/infrastructure/README.md) | Infrastructure層：Repositoryパターンの実装ガイド |
+
+### UIコンポーネント / UI Components
+
+| ドキュメント / Document | 説明 / Description |
+|------------------------|-------------------|
+| [src/ui/README.md](./src/ui/README.md) | UI層全体の概要、アトミックデザイン階層 |
+| [src/ui/component/README.md](./src/ui/component/README.md) | Atom/Molecule/Pageコンポーネントの実装ガイド |
+| [src/ui/content/README.md](./src/ui/content/README.md) | Animation Toolコンテンツの実装ガイド |
+| [src/ui/animation/README.md](./src/ui/animation/README.md) | アニメーション定義の実装ガイド |
+
+### View/ViewModel & 設定 / View/ViewModel & Configuration
+
+| ドキュメント / Document | 説明 / Description |
+|------------------------|-------------------|
+| [src/view/README.md](./src/view/README.md) | View/ViewModelのMVVMパターン実装ガイド |
+| [src/config/README.md](./src/config/README.md) | 設定ファイル（stage.json, config.json, routing.json）の詳細 |
+| [src/interface/README.md](./src/interface/README.md) | インターフェース定義と型安全性のガイド |
+
+### 静的アセット / Static Assets
+
+| ドキュメント / Document | 説明 / Description |
+|------------------------|-------------------|
+| [src/assets/README.md](./src/assets/README.md) | 画像・JSONなど静的ファイルの管理ガイド |
+
+---
+
 ## ライセンス / License
 
 MIT License

template/src/model/README.md

@@ -19,8 +19,8 @@ model/
 │           └── NavigateToViewUseCase.ts
 ├── domain/                                     # ドメイン層
 │   └── callback/
+│       ├── Background.ts                       # コールバッククラス本体
 │       └── Background/
-│           ├── Background.ts
 │           └── service/
 │               ├── BackgroundDrawService.ts
 │               └── BackgroundChangeScaleService.ts

template/src/ui/README.md

@@ -11,7 +11,10 @@ ui/
 ├── animation/                 # アニメーション定義
 ├── component/
 │   ├── atom/                  # 最小単位
-│   └── molecule/              # 複合コンポーネント
+│   ├── molecule/              # 複合コンポーネント
+│   ├── organism/              # 複数Moleculeの組み合わせ（将来の拡張用）
+│   ├── page/                  # ページコンポーネント
+│   └── template/              # ページテンプレート（将来の拡張用）
 └── content/                   # Animation Tool
 ```
 
@@ -83,15 +86,13 @@ export class HomeBtnMolecule extends ButtonAtom implements IDraggable {
         this.homeContent = new HomeContent();
         this.addChild(this.homeContent);
     }
-
-    startDrag(): void { ... }
-    stopDrag(): void { ... }
+    // IDraggableメソッド(startDrag/stopDrag)はMovieClipContentの親クラスから継承
 }
 ```
 
 **特徴 / Features:**
 - `ButtonAtom` を継承
-- `IDraggable` インターフェースを実装
+- `IDraggable` インターフェースを実装（メソッドは`MovieClipContent`親クラスから継承）
 - ドラッグ&ドロップ機能を提供
 
 #### component/molecule/TopBtnMolecule.ts
@@ -195,10 +196,10 @@ export class TextAtom extends TextField {
 Depend on abstractions, not concretions.
 
 ```typescript
-// ✅ 良い例: インターフェースを実装
+// ✅ 良い例: インターフェースを実装し、内部のContentに委譲
 export class HomeBtnMolecule extends ButtonAtom implements IDraggable {
-    startDrag(): void { ... }
-    stopDrag(): void { ... }
+    private readonly homeContent: HomeContent;
+    // IDraggableメソッド(startDrag/stopDrag)はMovieClipContentの親クラスから継承
 }
 ```
 

template/src/ui/component/README.md

@@ -11,9 +11,16 @@ component/
 ├── atom/                      # 最小単位
 │   ├── ButtonAtom.ts
 │   └── TextAtom.ts
-└── molecule/                  # 複合コンポーネント
-    ├── HomeBtnMolecule.ts
-    └── TopBtnMolecule.ts
+├── molecule/                  # 複合コンポーネント
+│   ├── HomeBtnMolecule.ts
+│   └── TopBtnMolecule.ts
+├── organism/                  # 複数Moleculeの組み合わせ（将来の拡張用）
+├── page/                      # ページコンポーネント
+│   ├── home/
+│   │   └── HomePage.ts
+│   └── top/
+│       └── TopPage.ts
+└── template/                  # ページテンプレート（将来の拡張用）
 ```
 
 ## アトミックデザイン階層 / Atomic Design Hierarchy
@@ -33,9 +40,30 @@ The most basic UI elements. The smallest components that cannot be divided furth
 
 Components with more complex functionality, combining multiple Atoms.
 
-- `HomeBtnMolecule` - Home画面用のボタン（ドラッグ機能付き）
+- `HomeBtnMolecule` - Home画面用のボタン（ドラッグ機能付き、`IDraggable`は内部の`HomeContent`経由で提供）
 - `TopBtnMolecule` - Top画面用のボタン（アニメーション付き）
 
+### Organism (有機体) - 将来の拡張用
+
+複数のMoleculeを組み合わせた、より大きな機能単位のコンポーネントです。現在は`.gitkeep`のみで、必要に応じて実装します。
+
+Larger functional unit components combining multiple Molecules. Currently contains only `.gitkeep`, to be implemented as needed.
+
+### Template (テンプレート) - 将来の拡張用
+
+ページのレイアウト構造を定義するテンプレートです。現在は`.gitkeep`のみで、必要に応じて実装します。
+
+Templates that define page layout structures. Currently contains only `.gitkeep`, to be implemented as needed.
+
+### Page (ページ)
+
+画面全体を構成するコンポーネントです。ViewからPageを配置し、PageがMoleculeやAtomを組み合わせて画面を構築します。
+
+Components that compose entire screens. Views place Pages, and Pages combine Molecules and Atoms to build screens.
+
+- `HomePage` - Home画面のページコンポーネント
+- `TopPage` - Top画面のページコンポーネント
+
 ## 設計原則 / Design Principles
 
 ### 1. 単一責任の原則 / Single Responsibility
@@ -61,10 +89,10 @@ export class TextAtom extends TextField {
 Depend on abstractions, not concretions.
 
 ```typescript
-// ✅ 良い例
-export class HomeBtnMolecule implements IDraggable {
-    startDrag(): void { ... }
-    stopDrag(): void { ... }
+// ✅ 良い例: IDraggableを実装し、内部のContentに委譲
+export class HomeBtnMolecule extends ButtonAtom implements IDraggable {
+    private readonly homeContent: HomeContent;
+    // IDraggableメソッドはMovieClipContent(HomeContent)の親クラスから継承
 }
 ```
 

template/src/ui/component/organism/.gitkeep

@@ -68,23 +68,10 @@ export class HomeContent extends MovieClipContent implements IDraggable
         return "HomeContent";  // Animation Toolで設定したシンボル名
     }
 
-    /**
-     * @description ドラッグを開始
-     *              Start dragging
-     */
-    startDrag (): void
-    {
-        // ドラッグ処理
-    }
-
-    /**
-     * @description ドラッグを停止
-     *              Stop dragging
-     */
-    stopDrag (): void
-    {
-        // ドラッグ停止処理
-    }
+    // IDraggableのメソッド(startDrag/stopDrag)は
+    // MovieClipContentの親クラス(MovieClip)から継承されます
+    // The IDraggable methods (startDrag/stopDrag) are inherited
+    // from MovieClipContent's parent class (MovieClip)
 }
 ```
 
@@ -154,8 +141,7 @@ Implement interfaces as needed to integrate with the business logic layer.
 
 ```typescript
 export class HomeContent extends MovieClipContent implements IDraggable {
-    startDrag(): void { ... }
-    stopDrag(): void { ... }
+    // IDraggableメソッドはMovieClipContentの親クラスから継承
 }
 ```