next2d-development-mcp 0.0.2 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -11
- package/dist/references/develop-specs.md +11 -163
- package/dist/references/framework-specs.md +195 -117
- package/dist/references/player-specs.md +7 -22
- package/dist/resources/index.d.ts.map +1 -1
- package/dist/resources/index.js +10 -2
- package/dist/resources/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
# next2d-development-mcp
|
|
2
2
|
|
|
3
3
|
<div align="center">
|
|
4
|
-
<img src="https://next2d.app/assets/img/logo.svg" width="180" alt="Next2D">
|
|
4
|
+
<img src="https://next2d.app/assets/img/top-logo.svg" width="180" alt="Next2D">
|
|
5
5
|
</div>
|
|
6
6
|
|
|
7
|
+
[](https://github.com/Next2D/next2d-development-mcp/actions/workflows/integration.yml)
|
|
8
|
+
[](https://github.com/Next2D/next2d-development-mcp/actions/workflows/github-code-scanning/codeql)
|
|
9
|
+
[](https://github.com/Next2D/next2d-development-mcp/actions/workflows/lint.yml)
|
|
10
|
+
|
|
11
|
+
[](https://github.com/Next2D/next2d-development-mcp/releases)
|
|
12
|
+
|
|
7
13
|
[Next2D](https://next2d.app) アプリケーション開発を支援する **MCP (Model Context Protocol) サーバー**です。
|
|
8
14
|
[framework-typescript-template](https://github.com/Next2D/framework-typescript-template) を使った **MVVM + Clean Architecture + Atomic Design** パターンに従ったコード生成、アーキテクチャ検証、API リファレンスを提供します。
|
|
9
15
|
|
|
@@ -66,7 +72,7 @@ Create `.vscode/mcp.json` at the project root:
|
|
|
66
72
|
"servers": {
|
|
67
73
|
"next2d": {
|
|
68
74
|
"command": "npx",
|
|
69
|
-
"args": ["next2d-development-mcp"]
|
|
75
|
+
"args": ["-y", "next2d-development-mcp"]
|
|
70
76
|
}
|
|
71
77
|
}
|
|
72
78
|
}
|
|
@@ -97,7 +103,7 @@ Edit the configuration file:
|
|
|
97
103
|
"mcpServers": {
|
|
98
104
|
"next2d": {
|
|
99
105
|
"command": "npx",
|
|
100
|
-
"args": ["next2d-development-mcp"]
|
|
106
|
+
"args": ["-y", "next2d-development-mcp"]
|
|
101
107
|
}
|
|
102
108
|
}
|
|
103
109
|
}
|
|
@@ -116,7 +122,7 @@ Create `.mcp.json` at the project root:
|
|
|
116
122
|
"mcpServers": {
|
|
117
123
|
"next2d": {
|
|
118
124
|
"command": "npx",
|
|
119
|
-
"args": ["next2d-development-mcp"]
|
|
125
|
+
"args": ["-y", "next2d-development-mcp"]
|
|
120
126
|
}
|
|
121
127
|
}
|
|
122
128
|
}
|
|
@@ -126,7 +132,7 @@ Create `.mcp.json` at the project root:
|
|
|
126
132
|
Or add directly via CLI:
|
|
127
133
|
|
|
128
134
|
```bash
|
|
129
|
-
claude mcp add next2d -- npx next2d-development-mcp
|
|
135
|
+
claude mcp add next2d -- npx -y next2d-development-mcp
|
|
130
136
|
```
|
|
131
137
|
|
|
132
138
|
### OpenAI Codex (ChatGPT CLI)
|
|
@@ -139,12 +145,16 @@ Create `.codex/mcp.json` at the project root:
|
|
|
139
145
|
"mcpServers": {
|
|
140
146
|
"next2d": {
|
|
141
147
|
"command": "npx",
|
|
142
|
-
"args": ["next2d-development-mcp"]
|
|
148
|
+
"args": ["-y", "next2d-development-mcp"]
|
|
143
149
|
}
|
|
144
150
|
}
|
|
145
151
|
}
|
|
146
152
|
```
|
|
147
153
|
|
|
154
|
+
> `npm` キャッシュ権限エラー (`EPERM`, `~/.npm/_npx`) が出る場合はキャッシュ先を明示してください。
|
|
155
|
+
> If npm cache permission errors occur, set a writable cache path:
|
|
156
|
+
> `"args": ["-y", "--cache", "/tmp/next2d-mcp-npm-cache", "next2d-development-mcp"]`
|
|
157
|
+
|
|
148
158
|
### Gemini CLI
|
|
149
159
|
|
|
150
160
|
プロジェクトルートに `.gemini/settings.json` を作成します。
|
|
@@ -155,7 +165,7 @@ Create `.gemini/settings.json` at the project root:
|
|
|
155
165
|
"mcpServers": {
|
|
156
166
|
"next2d": {
|
|
157
167
|
"command": "npx",
|
|
158
|
-
"args": ["next2d-development-mcp"]
|
|
168
|
+
"args": ["-y", "next2d-development-mcp"]
|
|
159
169
|
}
|
|
160
170
|
}
|
|
161
171
|
}
|
|
@@ -176,7 +186,7 @@ Add the MCP server from Cline settings:
|
|
|
176
186
|
"mcpServers": {
|
|
177
187
|
"next2d": {
|
|
178
188
|
"command": "npx",
|
|
179
|
-
"args": ["next2d-development-mcp"]
|
|
189
|
+
"args": ["-y", "next2d-development-mcp"]
|
|
180
190
|
}
|
|
181
191
|
}
|
|
182
192
|
}
|
|
@@ -195,7 +205,7 @@ Add to Cursor settings:
|
|
|
195
205
|
"mcpServers": {
|
|
196
206
|
"next2d": {
|
|
197
207
|
"command": "npx",
|
|
198
|
-
"args": ["next2d-development-mcp"]
|
|
208
|
+
"args": ["-y", "next2d-development-mcp"]
|
|
199
209
|
}
|
|
200
210
|
}
|
|
201
211
|
}
|
|
@@ -213,7 +223,7 @@ Add to Windsurf MCP configuration:
|
|
|
213
223
|
"mcpServers": {
|
|
214
224
|
"next2d": {
|
|
215
225
|
"command": "npx",
|
|
216
|
-
"args": ["next2d-development-mcp"]
|
|
226
|
+
"args": ["-y", "next2d-development-mcp"]
|
|
217
227
|
}
|
|
218
228
|
}
|
|
219
229
|
}
|
|
@@ -227,7 +237,7 @@ MCP uses the standard **stdio** transport protocol. Configure the following comm
|
|
|
227
237
|
|
|
228
238
|
```
|
|
229
239
|
command: npx
|
|
230
|
-
args: next2d-development-mcp
|
|
240
|
+
args: -y next2d-development-mcp
|
|
231
241
|
```
|
|
232
242
|
|
|
233
243
|
---
|
|
@@ -1,17 +1,16 @@
|
|
|
1
|
-
# Next2D Framework TypeScript Template -
|
|
1
|
+
# Next2D Framework TypeScript Template - 開発仕様
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## 目次
|
|
4
4
|
|
|
5
|
-
1. [
|
|
6
|
-
2. [CLI
|
|
7
|
-
3. [
|
|
8
|
-
4. [
|
|
9
|
-
5. [Model
|
|
10
|
-
6. [UI
|
|
11
|
-
7. [View / ViewModel (MVVM
|
|
5
|
+
1. [概要](#next2d-framework-typescript-template---overview)
|
|
6
|
+
2. [CLIコマンドリファレンス](#cli-commands-reference)
|
|
7
|
+
3. [設定ファイル](#configuration-files)
|
|
8
|
+
4. [インターフェース定義](#interface-definitions)
|
|
9
|
+
5. [Modelレイヤー (Application / Domain / Infrastructure)](#model-layer-application--domain--infrastructure)
|
|
10
|
+
6. [UIレイヤー (Components / Animation / Content)](#ui-layer-components--animation--content)
|
|
11
|
+
7. [View / ViewModel (MVVMパターン)](#view--viewmodel-mvvm-pattern)
|
|
12
12
|
|
|
13
13
|
---
|
|
14
|
-
|
|
15
14
|
# Next2D Framework TypeScript Template - Overview
|
|
16
15
|
|
|
17
16
|
## Project Summary
|
|
@@ -903,50 +902,6 @@ ui/
|
|
|
903
902
|
|
|
904
903
|
---
|
|
905
904
|
|
|
906
|
-
## DisplayObject 配置の基本方針(中心基準点パターン)
|
|
907
|
-
|
|
908
|
-
Next2D の座標系は画面左上 (0, 0) が基準点。Shape や Sprite をそのまま配置すると、スケールや回転アニメーション時に座標がずれる。
|
|
909
|
-
**基本方針として、子要素を親 Sprite に中心配置する。**
|
|
910
|
-
|
|
911
|
-
### パターン: Shape を Sprite に中心配置
|
|
912
|
-
|
|
913
|
-
```typescript
|
|
914
|
-
const sprite = new Sprite();
|
|
915
|
-
const shape = new Shape();
|
|
916
|
-
|
|
917
|
-
// 画像の場合、Retina対応でスケールを設定
|
|
918
|
-
shape.scaleX = shape.scaleY = 0.5;
|
|
919
|
-
|
|
920
|
-
// スケール設定後に中心配置
|
|
921
|
-
shape.x = -shape.width / 2;
|
|
922
|
-
shape.y = -shape.height / 2;
|
|
923
|
-
|
|
924
|
-
sprite.addChild(shape);
|
|
925
|
-
```
|
|
926
|
-
|
|
927
|
-
### パターン: Sprite を Sprite に中心配置
|
|
928
|
-
|
|
929
|
-
```typescript
|
|
930
|
-
const parent = new Sprite();
|
|
931
|
-
const child = new Sprite();
|
|
932
|
-
|
|
933
|
-
// 子要素のサイズ確定後に中心配置
|
|
934
|
-
child.x = -child.width / 2;
|
|
935
|
-
child.y = -child.height / 2;
|
|
936
|
-
|
|
937
|
-
parent.addChild(child);
|
|
938
|
-
```
|
|
939
|
-
|
|
940
|
-
### なぜ中心配置が必要か
|
|
941
|
-
|
|
942
|
-
- スケール・回転は DisplayObject の (0, 0) を基点に実行される
|
|
943
|
-
- 中心配置しないと、回転・拡縮時に意図しない位置ずれが発生する
|
|
944
|
-
- 中心配置により、親 Sprite の (x, y) がそのまま表示上の中心座標になる
|
|
945
|
-
|
|
946
|
-
**注意:** すべてのケースで必須ではないが、アニメーション対象の要素には基本的にこのパターンを適用する。
|
|
947
|
-
|
|
948
|
-
---
|
|
949
|
-
|
|
950
905
|
## Atomic Design Hierarchy
|
|
951
906
|
|
|
952
907
|
### Atom (原子) - 最小単位
|
|
@@ -954,7 +909,7 @@ parent.addChild(child);
|
|
|
954
909
|
最も基本的なUI要素。これ以上分割できない。
|
|
955
910
|
|
|
956
911
|
```typescript
|
|
957
|
-
// ButtonAtom: ボタンの基本機能
|
|
912
|
+
// ButtonAtom: ボタンの基本機能
|
|
958
913
|
import { Sprite } from "@next2d/display";
|
|
959
914
|
|
|
960
915
|
export class ButtonAtom extends Sprite
|
|
@@ -964,34 +919,6 @@ export class ButtonAtom extends Sprite
|
|
|
964
919
|
super();
|
|
965
920
|
this.buttonMode = true;
|
|
966
921
|
}
|
|
967
|
-
|
|
968
|
-
/**
|
|
969
|
-
* @description ボタンを有効化する
|
|
970
|
-
* Enable button
|
|
971
|
-
*
|
|
972
|
-
* @return {void}
|
|
973
|
-
* @method
|
|
974
|
-
* @public
|
|
975
|
-
*/
|
|
976
|
-
enable (): void
|
|
977
|
-
{
|
|
978
|
-
this.mouseEnabled = true;
|
|
979
|
-
this.mouseChildren = true;
|
|
980
|
-
}
|
|
981
|
-
|
|
982
|
-
/**
|
|
983
|
-
* @description ボタンを無効化する
|
|
984
|
-
* Disable button
|
|
985
|
-
*
|
|
986
|
-
* @return {void}
|
|
987
|
-
* @method
|
|
988
|
-
* @public
|
|
989
|
-
*/
|
|
990
|
-
disable (): void
|
|
991
|
-
{
|
|
992
|
-
this.mouseEnabled = false;
|
|
993
|
-
this.mouseChildren = false;
|
|
994
|
-
}
|
|
995
922
|
}
|
|
996
923
|
```
|
|
997
924
|
|
|
@@ -1014,86 +941,6 @@ export class TextAtom extends TextField implements ITextField
|
|
|
1014
941
|
}
|
|
1015
942
|
```
|
|
1016
943
|
|
|
1017
|
-
### ボタン連続押下防止パターン
|
|
1018
|
-
|
|
1019
|
-
ボタン押下後に処理が完了するまで連続押下を防止したい場合に使えるパターン。`ButtonAtom` の `disable()` / `enable()` を利用して `mouseEnabled` と `mouseChildren` を制御する。
|
|
1020
|
-
|
|
1021
|
-
連続押下を防止するかどうかはユースケースに応じて判断する。画面遷移やAPI通信など多重実行を避けたい処理では有効。
|
|
1022
|
-
|
|
1023
|
-
#### View でのイベント登録パターン
|
|
1024
|
-
|
|
1025
|
-
```typescript
|
|
1026
|
-
// View: ボタン押下時にViewModelのハンドラを呼び出す
|
|
1027
|
-
async initialize (): Promise<void>
|
|
1028
|
-
{
|
|
1029
|
-
const btn = new YourBtnMolecule();
|
|
1030
|
-
btn.addEventListener(PointerEvent.POINTER_DOWN, (event) => {
|
|
1031
|
-
this.vm.handleButtonTap(event);
|
|
1032
|
-
});
|
|
1033
|
-
this.addChild(btn);
|
|
1034
|
-
}
|
|
1035
|
-
```
|
|
1036
|
-
|
|
1037
|
-
#### ViewModel での連続押下防止パターン
|
|
1038
|
-
|
|
1039
|
-
```typescript
|
|
1040
|
-
// ViewModel: disable → 処理 → enable で連続押下を防止
|
|
1041
|
-
handleButtonTap (event: PointerEvent): void
|
|
1042
|
-
{
|
|
1043
|
-
// ボタンを即座に無効化して連続押下を防止
|
|
1044
|
-
const button = event.currentTarget as unknown as ButtonAtom;
|
|
1045
|
-
button.disable();
|
|
1046
|
-
|
|
1047
|
-
// 処理実行 (画面遷移、API呼び出し、アニメーション等)
|
|
1048
|
-
this.someUseCase.execute();
|
|
1049
|
-
|
|
1050
|
-
// 処理完了後にボタンを再有効化 (画面遷移の場合は不要)
|
|
1051
|
-
button.enable();
|
|
1052
|
-
}
|
|
1053
|
-
```
|
|
1054
|
-
|
|
1055
|
-
#### 非同期処理での連続押下防止パターン
|
|
1056
|
-
|
|
1057
|
-
```typescript
|
|
1058
|
-
// ViewModel: 非同期処理の完了を待ってから再有効化
|
|
1059
|
-
async handleButtonTap (event: PointerEvent): Promise<void>
|
|
1060
|
-
{
|
|
1061
|
-
const button = event.currentTarget as unknown as ButtonAtom;
|
|
1062
|
-
button.disable();
|
|
1063
|
-
|
|
1064
|
-
try {
|
|
1065
|
-
await this.fetchDataUseCase.execute();
|
|
1066
|
-
} finally {
|
|
1067
|
-
// エラー時も必ず再有効化
|
|
1068
|
-
button.enable();
|
|
1069
|
-
}
|
|
1070
|
-
}
|
|
1071
|
-
```
|
|
1072
|
-
|
|
1073
|
-
#### アニメーション完了後に再有効化するパターン
|
|
1074
|
-
|
|
1075
|
-
```typescript
|
|
1076
|
-
// ViewModel: アニメーション完了コールバックで再有効化
|
|
1077
|
-
handleButtonTap (event: PointerEvent): void
|
|
1078
|
-
{
|
|
1079
|
-
const button = event.currentTarget as unknown as ButtonAtom;
|
|
1080
|
-
button.disable();
|
|
1081
|
-
|
|
1082
|
-
new SomeAnimation(button, () => {
|
|
1083
|
-
// アニメーション完了後に再有効化
|
|
1084
|
-
button.enable();
|
|
1085
|
-
}).start();
|
|
1086
|
-
}
|
|
1087
|
-
```
|
|
1088
|
-
|
|
1089
|
-
#### 連続押下を許可するケース
|
|
1090
|
-
|
|
1091
|
-
以下のケースでは `disable()` / `enable()` を使わず、連続押下を許可する:
|
|
1092
|
-
|
|
1093
|
-
- **インクリメント/デクリメントボタン**: 数量の増減など、連打を前提とした操作
|
|
1094
|
-
- **連射系ゲーム操作**: 連続タップがゲームメカニクスの一部である場合
|
|
1095
|
-
- **トグルボタン**: ON/OFF を素早く切り替える必要がある場合
|
|
1096
|
-
|
|
1097
944
|
### Molecule (分子) - Atomの組み合わせ
|
|
1098
945
|
|
|
1099
946
|
複数のAtomを組み合わせた、特定の用途向けコンポーネント。
|
|
@@ -1574,3 +1421,4 @@ homeContentPointerDownEvent(event: PointerEvent): void {
|
|
|
1574
1421
|
this.startDragUseCase.execute(target);
|
|
1575
1422
|
}
|
|
1576
1423
|
```
|
|
1424
|
+
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
# Next2D Framework Specs -
|
|
1
|
+
# Next2D Framework Specs - 統合リファレンス
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## 目次
|
|
4
4
|
|
|
5
5
|
1. [Index - フレームワーク概要](#index---フレームワーク概要)
|
|
6
6
|
2. [AnimationTool連携](#animationtool連携)
|
|
@@ -9,23 +9,22 @@
|
|
|
9
9
|
5. [View と ViewModel](#view-と-viewmodel)
|
|
10
10
|
|
|
11
11
|
---
|
|
12
|
+
# Next2D Framework
|
|
12
13
|
|
|
13
|
-
|
|
14
|
+
Next2D Frameworkは、Next2D Playerを用いたアプリケーション開発のためのMVVMフレームワークです。シングルページアプリケーション(SPA)のためのルーティング、View/ViewModel管理、環境設定管理などの機能を提供します。
|
|
14
15
|
|
|
15
|
-
|
|
16
|
+
## 主な特徴
|
|
16
17
|
|
|
17
|
-
|
|
18
|
+
- **MVVMパターン**: Model-View-ViewModelパターンによる関心の分離
|
|
19
|
+
- **クリーンアーキテクチャ**: 依存性の逆転と疎結合な設計
|
|
20
|
+
- **シングルページアプリケーション**: URLベースのシーン管理
|
|
21
|
+
- **Animation Tool連携**: Animation Toolで作成したアセットとの連携
|
|
22
|
+
- **TypeScriptサポート**: 型安全な開発が可能
|
|
23
|
+
- **アトミックデザイン**: 再利用可能なコンポーネント設計を推奨
|
|
18
24
|
|
|
19
|
-
|
|
20
|
-
- **Clean Architecture**: Dependency inversion and loosely coupled design
|
|
21
|
-
- **Single Page Application**: Scene management based on URLs
|
|
22
|
-
- **Animation Tool Integration**: Integration with assets created in Animation Tool
|
|
23
|
-
- **TypeScript Support**: Type-safe development capability
|
|
24
|
-
- **Atomic Design**: Component design promoting reusability
|
|
25
|
+
## アーキテクチャ概要
|
|
25
26
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
This project combines clean architecture with the MVVM pattern.
|
|
27
|
+
このプロジェクトはクリーンアーキテクチャとMVVMパターンを組み合わせて実装されています。
|
|
29
28
|
|
|
30
29
|
```mermaid
|
|
31
30
|
graph TB
|
|
@@ -63,53 +62,53 @@ graph TB
|
|
|
63
62
|
InfraLayer -.->|accesses| ExternalAPI
|
|
64
63
|
```
|
|
65
64
|
|
|
66
|
-
###
|
|
65
|
+
### レイヤーの責務
|
|
67
66
|
|
|
68
|
-
|
|
|
67
|
+
| レイヤー | パス | 役割 |
|
|
69
68
|
|----------|------|------|
|
|
70
|
-
| **View** | `view/*`, `ui/*` |
|
|
71
|
-
| **ViewModel** | `view/*` |
|
|
72
|
-
| **Interface** | `interface/*` |
|
|
73
|
-
| **Application** | `model/application/*/usecase/*` |
|
|
74
|
-
| **Domain** | `model/domain/*` |
|
|
75
|
-
| **Infrastructure** | `model/infrastructure/repository/*` |
|
|
69
|
+
| **View** | `view/*`, `ui/*` | 画面の構造と表示を担当 |
|
|
70
|
+
| **ViewModel** | `view/*` | ViewとModelの橋渡し、イベントハンドリング |
|
|
71
|
+
| **Interface** | `interface/*` | 抽象化レイヤー、型定義 |
|
|
72
|
+
| **Application** | `model/application/*/usecase/*` | ビジネスロジックの実装(UseCase) |
|
|
73
|
+
| **Domain** | `model/domain/*` | コアビジネスルール |
|
|
74
|
+
| **Infrastructure** | `model/infrastructure/repository/*` | データアクセス、外部API連携 |
|
|
76
75
|
|
|
77
|
-
###
|
|
76
|
+
### 依存関係の方向
|
|
78
77
|
|
|
79
|
-
|
|
78
|
+
クリーンアーキテクチャの原則に従い、依存関係は常に内側(Domain層)に向かいます。
|
|
80
79
|
|
|
81
|
-
- **View
|
|
82
|
-
- **Application
|
|
83
|
-
- **Domain
|
|
84
|
-
- **Infrastructure
|
|
80
|
+
- **View層**: インターフェースを通じてApplication層を使用
|
|
81
|
+
- **Application層**: インターフェースを通じてDomain層とInfrastructure層を使用
|
|
82
|
+
- **Domain層**: 何にも依存しない(純粋なビジネスロジック)
|
|
83
|
+
- **Infrastructure層**: Domain層のインターフェースを実装
|
|
85
84
|
|
|
86
|
-
##
|
|
85
|
+
## ディレクトリ構造
|
|
87
86
|
|
|
88
87
|
```
|
|
89
88
|
my-app/
|
|
90
89
|
├── src/
|
|
91
|
-
│ ├── config/ #
|
|
92
|
-
│ │ ├── stage.json #
|
|
93
|
-
│ │ ├── config.json #
|
|
94
|
-
│ │ ├── routing.json #
|
|
95
|
-
│ │ └── Config.ts #
|
|
90
|
+
│ ├── config/ # 設定ファイル
|
|
91
|
+
│ │ ├── stage.json # ステージ設定
|
|
92
|
+
│ │ ├── config.json # 環境設定
|
|
93
|
+
│ │ ├── routing.json # ルーティング設定
|
|
94
|
+
│ │ └── Config.ts # 設定の型定義とエクスポート
|
|
96
95
|
│ │
|
|
97
|
-
│ ├── interface/ #
|
|
98
|
-
│ │ ├── IDraggable.ts #
|
|
99
|
-
│ │ ├── ITextField.ts #
|
|
100
|
-
│ │ ├── IHomeTextResponse.ts # API
|
|
101
|
-
│ │ └── IViewName.ts #
|
|
96
|
+
│ ├── interface/ # インターフェース定義
|
|
97
|
+
│ │ ├── IDraggable.ts # ドラッグ可能なオブジェクト
|
|
98
|
+
│ │ ├── ITextField.ts # テキストフィールド
|
|
99
|
+
│ │ ├── IHomeTextResponse.ts # APIレスポンス型
|
|
100
|
+
│ │ └── IViewName.ts # 画面名の型定義
|
|
102
101
|
│ │
|
|
103
102
|
│ ├── view/ # View & ViewModel
|
|
104
103
|
│ │ ├── top/
|
|
105
|
-
│ │ │ ├── TopView.ts #
|
|
106
|
-
│ │ │ └── TopViewModel.ts #
|
|
104
|
+
│ │ │ ├── TopView.ts # 画面の構造定義
|
|
105
|
+
│ │ │ └── TopViewModel.ts # ビジネスロジックとの橋渡し
|
|
107
106
|
│ │ └── home/
|
|
108
107
|
│ │ ├── HomeView.ts
|
|
109
108
|
│ │ └── HomeViewModel.ts
|
|
110
109
|
│ │
|
|
111
110
|
│ ├── model/
|
|
112
|
-
│ │ ├── application/ #
|
|
111
|
+
│ │ ├── application/ # アプリケーション層
|
|
113
112
|
│ │ │ ├── top/
|
|
114
113
|
│ │ │ │ └── usecase/
|
|
115
114
|
│ │ │ │ └── NavigateToViewUseCase.ts
|
|
@@ -119,7 +118,7 @@ my-app/
|
|
|
119
118
|
│ │ │ ├── StopDragUseCase.ts
|
|
120
119
|
│ │ │ └── CenterTextFieldUseCase.ts
|
|
121
120
|
│ │ │
|
|
122
|
-
│ │ ├── domain/ #
|
|
121
|
+
│ │ ├── domain/ # ドメイン層
|
|
123
122
|
│ │ │ └── callback/
|
|
124
123
|
│ │ │ ├── Background.ts
|
|
125
124
|
│ │ │ └── Background/
|
|
@@ -127,53 +126,53 @@ my-app/
|
|
|
127
126
|
│ │ │ ├── BackgroundDrawService.ts
|
|
128
127
|
│ │ │ └── BackgroundChangeScaleService.ts
|
|
129
128
|
│ │ │
|
|
130
|
-
│ │ └── infrastructure/ #
|
|
129
|
+
│ │ └── infrastructure/ # インフラ層
|
|
131
130
|
│ │ └── repository/
|
|
132
131
|
│ │ └── HomeTextRepository.ts
|
|
133
132
|
│ │
|
|
134
|
-
│ ├── ui/ # UI
|
|
135
|
-
│ │ ├── animation/ #
|
|
133
|
+
│ ├── ui/ # UIコンポーネント
|
|
134
|
+
│ │ ├── animation/ # アニメーション定義
|
|
136
135
|
│ │ │ └── top/
|
|
137
136
|
│ │ │ └── TopBtnShowAnimation.ts
|
|
138
137
|
│ │ │
|
|
139
|
-
│ │ ├── component/ #
|
|
140
|
-
│ │ │ ├── atom/ #
|
|
138
|
+
│ │ ├── component/ # アトミックデザイン
|
|
139
|
+
│ │ │ ├── atom/ # 最小単位のコンポーネント
|
|
141
140
|
│ │ │ │ ├── ButtonAtom.ts
|
|
142
141
|
│ │ │ │ └── TextAtom.ts
|
|
143
|
-
│ │ │ ├── molecule/ #
|
|
142
|
+
│ │ │ ├── molecule/ # Atomを組み合わせたコンポーネント
|
|
144
143
|
│ │ │ │ ├── HomeBtnMolecule.ts
|
|
145
144
|
│ │ │ │ └── TopBtnMolecule.ts
|
|
146
|
-
│ │ │ ├── organism/ #
|
|
147
|
-
│ │ │ ├── template/ #
|
|
148
|
-
│ │ │ └── page/ #
|
|
145
|
+
│ │ │ ├── organism/ # 複数Moleculeの組み合わせ
|
|
146
|
+
│ │ │ ├── template/ # ページテンプレート
|
|
147
|
+
│ │ │ └── page/ # ページコンポーネント
|
|
149
148
|
│ │ │ ├── top/
|
|
150
149
|
│ │ │ │ └── TopPage.ts
|
|
151
150
|
│ │ │ └── home/
|
|
152
151
|
│ │ │ └── HomePage.ts
|
|
153
152
|
│ │ │
|
|
154
|
-
│ │ └── content/ # Animation Tool
|
|
153
|
+
│ │ └── content/ # Animation Tool生成コンテンツ
|
|
155
154
|
│ │ ├── TopContent.ts
|
|
156
155
|
│ │ └── HomeContent.ts
|
|
157
156
|
│ │
|
|
158
|
-
│ ├── assets/ #
|
|
157
|
+
│ ├── assets/ # 静的アセット
|
|
159
158
|
│ │
|
|
160
|
-
│ ├── Packages.ts #
|
|
161
|
-
│ └── index.ts #
|
|
159
|
+
│ ├── Packages.ts # パッケージエクスポート
|
|
160
|
+
│ └── index.ts # エントリーポイント
|
|
162
161
|
│
|
|
163
|
-
├── file/ # Animation Tool
|
|
162
|
+
├── file/ # Animation Tool出力ファイル
|
|
164
163
|
│ └── sample.n2d
|
|
165
164
|
│
|
|
166
|
-
├── mock/ #
|
|
167
|
-
│ ├── api/ # API
|
|
168
|
-
│ ├── content/ #
|
|
169
|
-
│ └── img/ #
|
|
165
|
+
├── mock/ # モックデータ
|
|
166
|
+
│ ├── api/ # APIモック
|
|
167
|
+
│ ├── content/ # コンテンツモック
|
|
168
|
+
│ └── img/ # 画像モック
|
|
170
169
|
│
|
|
171
170
|
└── package.json
|
|
172
171
|
```
|
|
173
172
|
|
|
174
|
-
##
|
|
173
|
+
## フレームワークフローチャート
|
|
175
174
|
|
|
176
|
-
|
|
175
|
+
gotoView関数による画面遷移の詳細なフローを示します。
|
|
177
176
|
|
|
178
177
|
```mermaid
|
|
179
178
|
graph TD
|
|
@@ -246,28 +245,28 @@ graph TD
|
|
|
246
245
|
style GlobalData fill:#f5f5f5,stroke:#666666
|
|
247
246
|
```
|
|
248
247
|
|
|
249
|
-
###
|
|
248
|
+
### フローの主要ステップ
|
|
250
249
|
|
|
251
|
-
|
|
|
250
|
+
| ステップ | 説明 |
|
|
252
251
|
|----------|------|
|
|
253
|
-
| **gotoView** |
|
|
254
|
-
| **Loading** |
|
|
255
|
-
| **Request Type** |
|
|
256
|
-
| **Cache** |
|
|
257
|
-
| **View/ViewModel Bind** |
|
|
258
|
-
| **onEnter** |
|
|
252
|
+
| **gotoView** | 画面遷移のエントリーポイント |
|
|
253
|
+
| **Loading** | ローディング画面の表示/非表示制御 |
|
|
254
|
+
| **Request Type** | JSON、CONTENT、CUSTOMの3種類のリクエスト |
|
|
255
|
+
| **Cache** | レスポンスデータのキャッシュ制御 |
|
|
256
|
+
| **View/ViewModel Bind** | 新しいView/ViewModelのバインド処理 |
|
|
257
|
+
| **onEnter** | 画面表示完了後のコールバック |
|
|
259
258
|
|
|
260
|
-
##
|
|
259
|
+
## 主要な設計パターン
|
|
261
260
|
|
|
262
261
|
### 1. MVVM (Model-View-ViewModel)
|
|
263
262
|
|
|
264
|
-
- **View**:
|
|
265
|
-
- **ViewModel**:
|
|
266
|
-
- **Model**:
|
|
263
|
+
- **View**: 画面の構造と表示を担当。ビジネスロジックは持たない
|
|
264
|
+
- **ViewModel**: ViewとModelの橋渡し。UseCaseを保持し、イベントを処理
|
|
265
|
+
- **Model**: ビジネスロジックとデータアクセスを担当
|
|
267
266
|
|
|
268
|
-
### 2. UseCase
|
|
267
|
+
### 2. UseCaseパターン
|
|
269
268
|
|
|
270
|
-
|
|
269
|
+
各ユーザーアクションに対して、専用のUseCaseクラスを作成:
|
|
271
270
|
|
|
272
271
|
```typescript
|
|
273
272
|
export class StartDragUseCase
|
|
@@ -279,12 +278,12 @@ export class StartDragUseCase
|
|
|
279
278
|
}
|
|
280
279
|
```
|
|
281
280
|
|
|
282
|
-
### 3. Dependency Inversion
|
|
281
|
+
### 3. 依存性の逆転 (Dependency Inversion)
|
|
283
282
|
|
|
284
|
-
|
|
283
|
+
具象クラスではなく、インターフェースに依存:
|
|
285
284
|
|
|
286
285
|
```typescript
|
|
287
|
-
//
|
|
286
|
+
// 良い例: インターフェースに依存
|
|
288
287
|
import type { IDraggable } from "@/interface/IDraggable";
|
|
289
288
|
|
|
290
289
|
function startDrag(target: IDraggable): void
|
|
@@ -293,9 +292,9 @@ function startDrag(target: IDraggable): void
|
|
|
293
292
|
}
|
|
294
293
|
```
|
|
295
294
|
|
|
296
|
-
### 4. Repository
|
|
295
|
+
### 4. Repositoryパターン
|
|
297
296
|
|
|
298
|
-
|
|
297
|
+
データアクセスを抽象化し、エラーハンドリングも実装:
|
|
299
298
|
|
|
300
299
|
```typescript
|
|
301
300
|
export class HomeTextRepository
|
|
@@ -316,9 +315,9 @@ export class HomeTextRepository
|
|
|
316
315
|
}
|
|
317
316
|
```
|
|
318
317
|
|
|
319
|
-
##
|
|
318
|
+
## クイックスタート
|
|
320
319
|
|
|
321
|
-
###
|
|
320
|
+
### プロジェクトの作成
|
|
322
321
|
|
|
323
322
|
```bash
|
|
324
323
|
npx create-next2d-app my-app
|
|
@@ -327,34 +326,34 @@ npm install
|
|
|
327
326
|
npm start
|
|
328
327
|
```
|
|
329
328
|
|
|
330
|
-
###
|
|
329
|
+
### View/ViewModelの自動生成
|
|
331
330
|
|
|
332
331
|
```bash
|
|
333
332
|
npm run generate
|
|
334
333
|
```
|
|
335
334
|
|
|
336
|
-
|
|
335
|
+
このコマンドは`routing.json`のトッププロパティを解析し、対応するViewとViewModelクラスを生成します。
|
|
337
336
|
|
|
338
|
-
##
|
|
337
|
+
## ベストプラクティス
|
|
339
338
|
|
|
340
|
-
1.
|
|
341
|
-
2.
|
|
342
|
-
3.
|
|
343
|
-
4.
|
|
344
|
-
5.
|
|
339
|
+
1. **インターフェース優先**: 具象型ではなく、常にインターフェースに依存
|
|
340
|
+
2. **単一責任の原則**: 各クラスは1つの責務のみを持つ
|
|
341
|
+
3. **依存性注入**: コンストラクタで依存を注入
|
|
342
|
+
4. **エラーハンドリング**: Repository層で適切にエラーを処理
|
|
343
|
+
5. **型安全性**: `any`型を避け、明示的な型定義を使用
|
|
345
344
|
|
|
346
|
-
##
|
|
345
|
+
## 関連ドキュメント
|
|
347
346
|
|
|
348
|
-
###
|
|
349
|
-
- View/ViewModel -
|
|
350
|
-
-
|
|
351
|
-
-
|
|
352
|
-
- Animation Tool
|
|
347
|
+
### 基本
|
|
348
|
+
- [View/ViewModel](/ja/reference/framework/view) - 画面表示とデータバインディング
|
|
349
|
+
- [ルーティング](/ja/reference/framework/routing) - URLベースの画面遷移
|
|
350
|
+
- [設定ファイル](/ja/reference/framework/config) - 環境設定とステージ設定
|
|
351
|
+
- [Animation Tool連携](/ja/reference/framework/animation-tool) - Animation Toolアセットの活用
|
|
353
352
|
|
|
354
|
-
### Next2D Player
|
|
355
|
-
- Next2D Player -
|
|
356
|
-
- MovieClip -
|
|
357
|
-
-
|
|
353
|
+
### Next2D Player連携
|
|
354
|
+
- [Next2D Player](/ja/reference/player) - レンダリングエンジン
|
|
355
|
+
- [MovieClip](/ja/reference/player/movie-clip) - タイムラインアニメーション
|
|
356
|
+
- [イベントシステム](/ja/reference/player/events) - ユーザーインタラクション
|
|
358
357
|
|
|
359
358
|
---
|
|
360
359
|
|
|
@@ -495,9 +494,9 @@ Animation ToolのJSONファイルは`routing.json`の`requests`で読み込み
|
|
|
495
494
|
|
|
496
495
|
## 関連項目
|
|
497
496
|
|
|
498
|
-
- View/ViewModel
|
|
499
|
-
- ルーティング
|
|
500
|
-
- 設定ファイル
|
|
497
|
+
- [View/ViewModel](/ja/reference/framework/view)
|
|
498
|
+
- [ルーティング](/ja/reference/framework/routing)
|
|
499
|
+
- [設定ファイル](/ja/reference/framework/config)
|
|
501
500
|
|
|
502
501
|
---
|
|
503
502
|
|
|
@@ -612,7 +611,7 @@ if (config.platform === "ios") {
|
|
|
612
611
|
|
|
613
612
|
## routing.json
|
|
614
613
|
|
|
615
|
-
ルーティングの設定ファイルです。詳細は[ルーティング](
|
|
614
|
+
ルーティングの設定ファイルです。詳細は[ルーティング](/ja/reference/framework/routing)を参照してください。
|
|
616
615
|
|
|
617
616
|
```json
|
|
618
617
|
{
|
|
@@ -830,8 +829,8 @@ npm run build -- --platform=android
|
|
|
830
829
|
|
|
831
830
|
## 関連項目
|
|
832
831
|
|
|
833
|
-
- [ルーティング](
|
|
834
|
-
- [View/ViewModel](
|
|
832
|
+
- [ルーティング](/ja/reference/framework/routing)
|
|
833
|
+
- [View/ViewModel](/ja/reference/framework/view)
|
|
835
834
|
|
|
836
835
|
---
|
|
837
836
|
|
|
@@ -986,6 +985,12 @@ Animation ToolのJSONを取得:
|
|
|
986
985
|
### キャッシュの利用
|
|
987
986
|
|
|
988
987
|
`cache: true`を設定すると、データがキャッシュされます。キャッシュしたデータは画面遷移しても初期化されません。
|
|
988
|
+
`app.getCache()`は`Map<string, unknown>`を返し、`requests`の`name`をキーにアクセスできます。
|
|
989
|
+
|
|
990
|
+
キャッシュ利用時のポイント:
|
|
991
|
+
|
|
992
|
+
- 同じキーのデータが既にある場合は、リクエスト処理側がキャッシュ値を優先利用できます。
|
|
993
|
+
- キャッシュは自動クリアされないため、不要なデータは`delete`/`clear`で明示的に管理します。
|
|
989
994
|
|
|
990
995
|
```json
|
|
991
996
|
{
|
|
@@ -1053,7 +1058,24 @@ export class HomeDataCallback
|
|
|
1053
1058
|
|
|
1054
1059
|
### app.gotoView()
|
|
1055
1060
|
|
|
1056
|
-
`app.gotoView()
|
|
1061
|
+
`app.gotoView(name?: string)`で画面遷移を行います。戻り値は`Promise<void>`で、遷移先`requests`の完了、View/ViewModelの再バインド、`onEnter()`まで待機できます。
|
|
1062
|
+
|
|
1063
|
+
`gotoView`のポイント:
|
|
1064
|
+
|
|
1065
|
+
- `name`の型は`string`です(省略可能、デフォルト値は`""`)。
|
|
1066
|
+
- `name`には`routing.json`のキー(例: `home`、`quest/list`)を指定します。
|
|
1067
|
+
- `?id=123`のようなクエリ文字列を含めて渡せます。
|
|
1068
|
+
- 引数を省略した場合は、現在のURLから遷移先が解決されます(SPAの`popstate`時)。
|
|
1069
|
+
- 遷移開始時に前回の`response`マップはクリアされます。
|
|
1070
|
+
|
|
1071
|
+
`gotoView`実行シーケンス(詳細):
|
|
1072
|
+
|
|
1073
|
+
1. 前回遷移で保持していた`response`マップを初期化します。
|
|
1074
|
+
2. `name`または現在URLから遷移先ルートを解決し、クエリを分解します。
|
|
1075
|
+
3. `all.spa: true`かつ通常遷移時はHistory API(`pushState`)でURL履歴を更新します。
|
|
1076
|
+
4. 遷移先`requests`を実行し、`name`キー単位で`response`/`cache`へ格納します。
|
|
1077
|
+
5. `requests.callback`と`gotoView.callback`を順次実行します。
|
|
1078
|
+
6. 旧Viewの`onExit`/unbind後に新View/ViewModelをbindし、`initialize`完了後に`onEnter`を呼び出します。
|
|
1057
1079
|
|
|
1058
1080
|
```typescript
|
|
1059
1081
|
import { app } from "@next2d/framework";
|
|
@@ -1104,9 +1126,26 @@ export class TopViewModel extends ViewModel
|
|
|
1104
1126
|
}
|
|
1105
1127
|
```
|
|
1106
1128
|
|
|
1129
|
+
### app.getContext()
|
|
1130
|
+
|
|
1131
|
+
`app.getContext()`で実行中の`Context`を取得できます。`root`(ルート`Sprite`)、`view`、`viewModel`への参照を持ち、遷移中は`view`/`viewModel`が`null`の場合があります。
|
|
1132
|
+
|
|
1133
|
+
```typescript
|
|
1134
|
+
import { app } from "@next2d/framework";
|
|
1135
|
+
|
|
1136
|
+
const context = app.getContext();
|
|
1137
|
+
const root = context.root;
|
|
1138
|
+
```
|
|
1139
|
+
|
|
1107
1140
|
## レスポンスデータの取得
|
|
1108
1141
|
|
|
1109
|
-
`
|
|
1142
|
+
`app.getResponse()`は`Map<string, unknown>`を返します。`requests`で`name`を設定したレスポンスを、現在の画面遷移単位で取得できます。
|
|
1143
|
+
|
|
1144
|
+
`getResponse`のポイント:
|
|
1145
|
+
|
|
1146
|
+
- 1回の`gotoView`で取得したデータの一時ストアです。
|
|
1147
|
+
- 次の`gotoView`開始時に内容は初期化されます。
|
|
1148
|
+
- 値の型は`unknown`なので、型ガードまたは型アサーションを行って利用します。
|
|
1110
1149
|
|
|
1111
1150
|
```typescript
|
|
1112
1151
|
import { app } from "@next2d/framework";
|
|
@@ -1221,8 +1260,8 @@ npm run generate
|
|
|
1221
1260
|
|
|
1222
1261
|
## 関連項目
|
|
1223
1262
|
|
|
1224
|
-
- [View/ViewModel](
|
|
1225
|
-
- [設定ファイル](
|
|
1263
|
+
- [View/ViewModel](/ja/reference/framework/view)
|
|
1264
|
+
- [設定ファイル](/ja/reference/framework/config)
|
|
1226
1265
|
|
|
1227
1266
|
---
|
|
1228
1267
|
|
|
@@ -1523,7 +1562,15 @@ export class HomeView extends View<HomeViewModel>
|
|
|
1523
1562
|
|
|
1524
1563
|
## 画面遷移
|
|
1525
1564
|
|
|
1526
|
-
画面遷移には`app.gotoView()
|
|
1565
|
+
画面遷移には`app.gotoView(name?: string)`を使用します。戻り値は`Promise<void>`で、遷移先の`requests`実行、View/ViewModelの再バインド、`onEnter()`実行までの非同期処理を待機できます。
|
|
1566
|
+
|
|
1567
|
+
`gotoView`のポイント:
|
|
1568
|
+
|
|
1569
|
+
- `name`の型は`string`です(省略可能、デフォルト値は`""`)。
|
|
1570
|
+
- `name`には`routing.json`のキー(例: `home`、`quest/list`)を渡します。`?id=123`のようなクエリ文字列も付与できます。
|
|
1571
|
+
- 引数を省略した場合は現在のURLから遷移先を解決します(SPAの`popstate`時など)。
|
|
1572
|
+
- 遷移開始時に前画面の`response`マップは初期化され、遷移先の`requests`結果が`name`キーで再格納されます。
|
|
1573
|
+
- `config.json`で`all.spa: true`の場合、通常遷移ではHistory API(`pushState`)でURL履歴が更新されます。
|
|
1527
1574
|
|
|
1528
1575
|
```typescript
|
|
1529
1576
|
import { app } from "@next2d/framework";
|
|
@@ -1549,9 +1596,34 @@ export class NavigateToViewUseCase
|
|
|
1549
1596
|
}
|
|
1550
1597
|
```
|
|
1551
1598
|
|
|
1599
|
+
## コンテキストの取得
|
|
1600
|
+
|
|
1601
|
+
`app.getContext()`は現在の実行コンテキスト(`Context`)を返します。`Context`には次の参照が含まれます。
|
|
1602
|
+
|
|
1603
|
+
- `root`: Stage配下のルート`Sprite`
|
|
1604
|
+
- `view`: 現在バインドされているView(遷移中や起動直後は`null`の場合あり)
|
|
1605
|
+
- `viewModel`: 現在バインドされているViewModel(遷移中や起動直後は`null`の場合あり)
|
|
1606
|
+
|
|
1607
|
+
```typescript
|
|
1608
|
+
import { app } from "@next2d/framework";
|
|
1609
|
+
|
|
1610
|
+
const context = app.getContext();
|
|
1611
|
+
const root = context.root;
|
|
1612
|
+
|
|
1613
|
+
if (context.view && context.viewModel) {
|
|
1614
|
+
// 現在表示中のView / ViewModelにアクセス
|
|
1615
|
+
}
|
|
1616
|
+
```
|
|
1617
|
+
|
|
1552
1618
|
## レスポンスデータの取得
|
|
1553
1619
|
|
|
1554
|
-
`
|
|
1620
|
+
`app.getResponse()`は`Map<string, unknown>`を返します。`routing.json`の`requests`で`name`を設定したレスポンスが、現在の画面遷移単位で格納されます。
|
|
1621
|
+
|
|
1622
|
+
`getResponse`のポイント:
|
|
1623
|
+
|
|
1624
|
+
- 1回の`gotoView`で取得したデータの一時ストアです。
|
|
1625
|
+
- 次の`gotoView`開始時に前回の内容はクリアされます。
|
|
1626
|
+
- 値の型は`unknown`なので、利用側で型ガードまたは型アサーションを行います。
|
|
1555
1627
|
|
|
1556
1628
|
```typescript
|
|
1557
1629
|
import { app } from "@next2d/framework";
|
|
@@ -1569,7 +1641,13 @@ async initialize(): Promise<void>
|
|
|
1569
1641
|
|
|
1570
1642
|
## キャッシュデータの取得
|
|
1571
1643
|
|
|
1572
|
-
`
|
|
1644
|
+
`app.getCache()`は`Map<string, unknown>`を返します。`requests`で`cache: true`を設定したデータが遷移を跨いで保持されるため、マスターデータなどの再利用に向いています。
|
|
1645
|
+
|
|
1646
|
+
`getCache`のポイント:
|
|
1647
|
+
|
|
1648
|
+
- `requests`の`cache: true`かつ`name`キーを持つデータが保存対象です。
|
|
1649
|
+
- 同じキーが存在する場合、リクエスト処理側はキャッシュ値を優先利用できます。
|
|
1650
|
+
- キャッシュは自動クリアされないため、不要になったら`delete`や`clear`で明示的に管理します。
|
|
1573
1651
|
|
|
1574
1652
|
```typescript
|
|
1575
1653
|
import { app } from "@next2d/framework";
|
|
@@ -1683,5 +1761,5 @@ export class YourViewModel extends ViewModel
|
|
|
1683
1761
|
|
|
1684
1762
|
## 関連項目
|
|
1685
1763
|
|
|
1686
|
-
- [ルーティング](
|
|
1687
|
-
- [設定ファイル](
|
|
1764
|
+
- [ルーティング](/ja/reference/framework/routing)
|
|
1765
|
+
- [設定ファイル](/ja/reference/framework/config)
|
|
@@ -1,21 +1,20 @@
|
|
|
1
|
-
# Next2D Player - API
|
|
1
|
+
# Next2D Player - APIリファレンス
|
|
2
2
|
|
|
3
|
-
##
|
|
3
|
+
## 目次
|
|
4
4
|
|
|
5
|
-
1. [
|
|
5
|
+
1. [概要](#next2d-player)
|
|
6
6
|
2. [DisplayObject](#displayobject)
|
|
7
|
-
3. [
|
|
7
|
+
3. [イベントシステム](#イベントシステム)
|
|
8
8
|
4. [MovieClip](#movieclip)
|
|
9
9
|
5. [Shape](#shape)
|
|
10
|
-
6. [
|
|
10
|
+
6. [サウンド](#サウンド)
|
|
11
11
|
7. [Sprite](#sprite)
|
|
12
12
|
8. [TextField](#textfield)
|
|
13
|
-
9. [Tween](#tweenアニメーション)
|
|
13
|
+
9. [Tweenアニメーション](#tweenアニメーション)
|
|
14
14
|
10. [Video](#video)
|
|
15
|
-
11. [
|
|
15
|
+
11. [フィルター](#フィルター)
|
|
16
16
|
|
|
17
17
|
---
|
|
18
|
-
|
|
19
18
|
# Next2D Player
|
|
20
19
|
|
|
21
20
|
Next2D Playerは、WebGL/WebGPUを用いた高速2Dレンダリングエンジンです。Flash Playerのような機能をWeb上で実現し、ベクター描画、Tweenアニメーション、テキスト、音声、動画など、さまざまな要素をサポートしています。
|
|
@@ -24,7 +23,6 @@ Next2D Playerは、WebGL/WebGPUを用いた高速2Dレンダリングエンジ
|
|
|
24
23
|
|
|
25
24
|
- **高速レンダリング**: WebGL/WebGPUを活用した高速2D描画
|
|
26
25
|
- **マルチプラットフォーム**: デスクトップからモバイルまで対応
|
|
27
|
-
- **Flash互換API**: swf2jsから派生した馴染みやすいAPI設計
|
|
28
26
|
- **豊富なフィルター**: Blur、DropShadow、Glow、Bevelなど多数のフィルターをサポート
|
|
29
27
|
|
|
30
28
|
## レンダリングパイプライン
|
|
@@ -217,7 +215,6 @@ stage.addChild(mc);
|
|
|
217
215
|
- [サウンド](/ja/reference/player/sound) - 音声再生とサウンドエフェクト
|
|
218
216
|
- [Tweenアニメーション](/ja/reference/player/tween) - プログラムによるアニメーション
|
|
219
217
|
|
|
220
|
-
|
|
221
218
|
---
|
|
222
219
|
|
|
223
220
|
# DisplayObject
|
|
@@ -385,7 +382,6 @@ displayObject.clearGlobalVariable(); // 全てクリア
|
|
|
385
382
|
- [MovieClip](/ja/reference/player/movie-clip)
|
|
386
383
|
- [Sprite](/ja/reference/player/sprite)
|
|
387
384
|
|
|
388
|
-
|
|
389
385
|
---
|
|
390
386
|
|
|
391
387
|
# イベントシステム
|
|
@@ -681,7 +677,6 @@ child.addEventListener(PointerEvent.POINTER_DOWN, handler, false);
|
|
|
681
677
|
- [DisplayObject](/ja/reference/player/display-object)
|
|
682
678
|
- [MovieClip](/ja/reference/player/movie-clip)
|
|
683
679
|
|
|
684
|
-
|
|
685
680
|
---
|
|
686
681
|
|
|
687
682
|
# MovieClip
|
|
@@ -930,7 +925,6 @@ labels.forEach((label) => {
|
|
|
930
925
|
- [Sprite](/ja/reference/player/sprite)
|
|
931
926
|
- [イベントシステム](/ja/reference/player/events)
|
|
932
927
|
|
|
933
|
-
|
|
934
928
|
---
|
|
935
929
|
|
|
936
930
|
# Shape
|
|
@@ -1375,7 +1369,6 @@ stage.addChild(shape);
|
|
|
1375
1369
|
- [Sprite](/ja/reference/player/sprite)
|
|
1376
1370
|
- [フィルター](/ja/reference/player/filters)
|
|
1377
1371
|
|
|
1378
|
-
|
|
1379
1372
|
---
|
|
1380
1373
|
|
|
1381
1374
|
# サウンド
|
|
@@ -1669,7 +1662,6 @@ SoundMixer.volume = 0.5; // 50%
|
|
|
1669
1662
|
|
|
1670
1663
|
- [イベントシステム](/ja/reference/player/events)
|
|
1671
1664
|
|
|
1672
|
-
|
|
1673
1665
|
---
|
|
1674
1666
|
|
|
1675
1667
|
# Sprite
|
|
@@ -1913,7 +1905,6 @@ stage.addChild(container);
|
|
|
1913
1905
|
- [MovieClip](/ja/reference/player/movie-clip)
|
|
1914
1906
|
- [Shape](/ja/reference/player/shape)
|
|
1915
1907
|
|
|
1916
|
-
|
|
1917
1908
|
---
|
|
1918
1909
|
|
|
1919
1910
|
# TextField
|
|
@@ -2281,7 +2272,6 @@ stage.addChild(inputField);
|
|
|
2281
2272
|
- [DisplayObject](/ja/reference/player/display-object)
|
|
2282
2273
|
- [イベントシステム](/ja/reference/player/events)
|
|
2283
2274
|
|
|
2284
|
-
|
|
2285
2275
|
---
|
|
2286
2276
|
|
|
2287
2277
|
# Tweenアニメーション
|
|
@@ -2660,7 +2650,6 @@ stopButton.addEventListener("pointerDown", () => {
|
|
|
2660
2650
|
- [DisplayObject](/ja/reference/player/display-object)
|
|
2661
2651
|
- [イベントシステム](/ja/reference/player/events)
|
|
2662
2652
|
|
|
2663
|
-
|
|
2664
2653
|
---
|
|
2665
2654
|
|
|
2666
2655
|
# Video
|
|
@@ -2890,7 +2879,6 @@ stage.addChild(video);
|
|
|
2890
2879
|
- [DisplayObject](/ja/reference/player/display-object)
|
|
2891
2880
|
- [イベントシステム](/ja/reference/player/events)
|
|
2892
2881
|
|
|
2893
|
-
|
|
2894
2882
|
---
|
|
2895
2883
|
|
|
2896
2884
|
# フィルター
|
|
@@ -3287,6 +3275,3 @@ sprite.filters = [
|
|
|
3287
3275
|
- [DisplayObject](/ja/reference/player/display-object)
|
|
3288
3276
|
- [MovieClip](/ja/reference/player/movie-clip)
|
|
3289
3277
|
|
|
3290
|
-
|
|
3291
|
-
---
|
|
3292
|
-
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/resources/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/resources/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,yCAAyC,CAAC;AAoEzE,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,SAAS,GAAG,IAAI,CAmFzD"}
|
package/dist/resources/index.js
CHANGED
|
@@ -6,11 +6,19 @@ const __dirname = path.dirname(__filename);
|
|
|
6
6
|
function loadReference(filename) {
|
|
7
7
|
// Search locations (in priority order):
|
|
8
8
|
// 1. Bundled with package: dist/references/ (works after npm publish)
|
|
9
|
-
// 2. Development:
|
|
10
|
-
// 3.
|
|
9
|
+
// 2. Development submodule: next2d-development-assistant/skills/next2d-development-assistant/references/
|
|
10
|
+
// 3. Development submodule (legacy layout): next2d-development-assistant/.github/skills/references/
|
|
11
|
+
// 4. Development (legacy): .github/skills/references/ (relative to project root)
|
|
12
|
+
// 5. User's project submodule: cwd/next2d-development-assistant/skills/next2d-development-assistant/references/
|
|
13
|
+
// 6. User's project submodule (legacy layout): cwd/next2d-development-assistant/.github/skills/references/
|
|
14
|
+
// 7. User's project (legacy): cwd/.github/skills/references/
|
|
11
15
|
const candidates = [
|
|
12
16
|
path.join(__dirname, "..", "references", filename),
|
|
17
|
+
path.join(__dirname, "..", "..", "next2d-development-assistant", "skills", "next2d-development-assistant", "references", filename),
|
|
18
|
+
path.join(__dirname, "..", "..", "next2d-development-assistant", ".github", "skills", "references", filename),
|
|
13
19
|
path.join(__dirname, "..", "..", ".github", "skills", "references", filename),
|
|
20
|
+
path.join(process.cwd(), "next2d-development-assistant", "skills", "next2d-development-assistant", "references", filename),
|
|
21
|
+
path.join(process.cwd(), "next2d-development-assistant", ".github", "skills", "references", filename),
|
|
14
22
|
path.join(process.cwd(), ".github", "skills", "references", filename)
|
|
15
23
|
];
|
|
16
24
|
for (const candidate of candidates) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/resources/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAC9B,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClD,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;AAE3C,SAAS,aAAa,CAAC,QAAgB;IACnC,wCAAwC;IACxC,sEAAsE;IACtE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/resources/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,SAAS,CAAC;AAC9B,OAAO,KAAK,IAAI,MAAM,WAAW,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClD,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;AAE3C,SAAS,aAAa,CAAC,QAAgB;IACnC,wCAAwC;IACxC,sEAAsE;IACtE,yGAAyG;IACzG,oGAAoG;IACpG,iFAAiF;IACjF,gHAAgH;IAChH,2GAA2G;IAC3G,6DAA6D;IAC7D,MAAM,UAAU,GAAG;QACf,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,CAAC;QAClD,IAAI,CAAC,IAAI,CACL,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,8BAA8B,EAC9B,QAAQ,EACR,8BAA8B,EAC9B,YAAY,EACZ,QAAQ,CACX;QACD,IAAI,CAAC,IAAI,CACL,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,8BAA8B,EAC9B,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,QAAQ,CACX;QACD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,CAAC;QAC7E,IAAI,CAAC,IAAI,CACL,OAAO,CAAC,GAAG,EAAE,EACb,8BAA8B,EAC9B,QAAQ,EACR,8BAA8B,EAC9B,YAAY,EACZ,QAAQ,CACX;QACD,IAAI,CAAC,IAAI,CACL,OAAO,CAAC,GAAG,EAAE,EACb,8BAA8B,EAC9B,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,QAAQ,CACX;QACD,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,CAAC;KACxE,CAAC;IAEF,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;QACjC,IAAI,EAAE,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE,CAAC;YAC3B,OAAO,EAAE,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAC/C,CAAC;IACL,CAAC;IAED,OAAO,mBAAmB,QAAQ,0BAA0B,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;AACxF,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,MAAiB;IAC/C,MAAM,CAAC,gBAAgB,CACnB,cAAc,EACd,uBAAuB,EACvB;QACI,aAAa,EACT,oFAAoF;YACpF,gFAAgF;YAChF,4CAA4C;QAChD,UAAU,EAAE,eAAe;KAC9B,EACD,KAAK,IAAI,EAAE,CAAC,CAAC;QACT,UAAU,EAAE;YACR;gBACI,KAAK,EAAE,uBAAuB;gBAC9B,UAAU,EAAE,eAAe;gBAC3B,MAAM,EAAE,aAAa,CAAC,iBAAiB,CAAC;aAC3C;SACJ;KACJ,CAAC,CACL,CAAC;IAEF,MAAM,CAAC,gBAAgB,CACnB,iBAAiB,EACjB,0BAA0B,EAC1B;QACI,aAAa,EACT,mEAAmE;YACnE,uEAAuE;YACvE,sFAAsF;QAC1F,UAAU,EAAE,eAAe;KAC9B,EACD,KAAK,IAAI,EAAE,CAAC,CAAC;QACT,UAAU,EAAE;YACR;gBACI,KAAK,EAAE,0BAA0B;gBACjC,UAAU,EAAE,eAAe;gBAC3B,MAAM,EAAE,aAAa,CAAC,oBAAoB,CAAC;aAC9C;SACJ;KACJ,CAAC,CACL,CAAC;IAEF,MAAM,CAAC,gBAAgB,CACnB,eAAe,EACf,wBAAwB,EACxB;QACI,aAAa,EACT,4EAA4E;YAC5E,qEAAqE;YACrE,uFAAuF;QAC3F,UAAU,EAAE,eAAe;KAC9B,EACD,KAAK,IAAI,EAAE,CAAC,CAAC;QACT,UAAU,EAAE;YACR;gBACI,KAAK,EAAE,wBAAwB;gBAC/B,UAAU,EAAE,eAAe;gBAC3B,MAAM,EAAE,aAAa,CAAC,kBAAkB,CAAC;aAC5C;SACJ;KACJ,CAAC,CACL,CAAC;IAEF,MAAM,CAAC,gBAAgB,CACnB,uBAAuB,EACvB,uBAAuB,EACvB;QACI,aAAa,EACT,0EAA0E;YAC1E,2CAA2C;QAC/C,UAAU,EAAE,eAAe;KAC9B,EACD,KAAK,IAAI,EAAE,CAAC,CAAC;QACT,UAAU,EAAE;YACR;gBACI,KAAK,EAAE,uBAAuB;gBAC9B,UAAU,EAAE,eAAe;gBAC3B,MAAM,EAAE,qBAAqB;aAChC;SACJ;KACJ,CAAC,CACL,CAAC;AACN,CAAC;AAED,MAAM,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwG7B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "next2d-development-mcp",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4",
|
|
4
4
|
"description": "MCP server for Next2D application development assistance",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "Toshiyuki Ienaga <ienaga@next2d.app>",
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"main": "./dist/index.js",
|
|
14
14
|
"scripts": {
|
|
15
15
|
"build": "tsc && npm run copy-refs",
|
|
16
|
-
"copy-refs": "node -e \"const fs=require('fs');const p=require('path');const
|
|
16
|
+
"copy-refs": "node -e \"const fs=require('fs');const p=require('path');const roots=[p.join('next2d-development-assistant','skills','next2d-development-assistant','references'),p.join('next2d-development-assistant','.github','skills','references'),p.join('.github','skills','references')];const src=roots.find((dir)=>fs.existsSync(dir));if(!src){throw new Error('Reference directory not found. Expected next2d-development-assistant/skills/next2d-development-assistant/references');}const dst=p.join('dist','references');fs.mkdirSync(dst,{recursive:true});fs.readdirSync(src).filter((f)=>f.endsWith('.md')).forEach((f)=>fs.copyFileSync(p.join(src,f),p.join(dst,f)));console.log('Copied references from '+src+' to dist/references/');\"",
|
|
17
17
|
"start": "node dist/index.js",
|
|
18
18
|
"dev": "tsc --watch",
|
|
19
19
|
"lint": "eslint src/ --ignore-pattern '*.test.ts'",
|