next2d-development-mcp 1.0.0 → 1.0.2

package/README.md

@@ -113,7 +113,7 @@ Edit the configuration file:
 ```json
 {
   "mcpServers": {
-    "next2d": {
+    "next2d-development-mcp": {
       "command": "npx",
       "args": ["-y", "next2d-development-mcp"]
     }
@@ -132,7 +132,7 @@ Create `.mcp.json` at the project root:
 ```json
 {
   "mcpServers": {
-    "next2d": {
+    "next2d-development-mcp": {
       "command": "npx",
       "args": ["-y", "next2d-development-mcp"]
     }
@@ -155,7 +155,7 @@ Create `.codex/mcp.json` at the project root:
 ```json
 {
   "mcpServers": {
-    "next2d": {
+    "next2d-development-mcp": {
       "command": "npx",
       "args": ["-y", "next2d-development-mcp"]
     }
@@ -175,7 +175,7 @@ Create `.gemini/settings.json` at the project root:
 ```json
 {
   "mcpServers": {
-    "next2d": {
+    "next2d-development-mcp": {
       "command": "npx",
       "args": ["-y", "next2d-development-mcp"]
     }
@@ -196,7 +196,7 @@ Add the MCP server from Cline settings:
 ```json
 {
   "mcpServers": {
-    "next2d": {
+    "next2d-development-mcp": {
       "command": "npx",
       "args": ["-y", "next2d-development-mcp"]
     }
@@ -215,7 +215,7 @@ Add to Cursor settings:
 ```json
 {
   "mcpServers": {
-    "next2d": {
+    "next2d-development-mcp": {
       "command": "npx",
       "args": ["-y", "next2d-development-mcp"]
     }
@@ -233,7 +233,7 @@ Add to Windsurf MCP configuration:
 ```json
 {
   "mcpServers": {
-    "next2d": {
+    "next2d-development-mcp": {
       "command": "npx",
       "args": ["-y", "next2d-development-mcp"]
     }

package/dist/references/develop-specs.md

@@ -1033,6 +1033,154 @@ export class YourMolecule extends ButtonAtom
 }
 ```
 
+## Button Enable/Disable Pattern (連打防止)
+
+`ButtonAtom` は `enable()` / `disable()` メソッドを持ち、ボタンの連続タップを防止できる。
+
+### ButtonAtom の enable/disable API
+
+```typescript
+// src/ui/component/atom/ButtonAtom.ts
+export class ButtonAtom extends Sprite {
+    constructor() {
+        super();
+        this.buttonMode = true;
+    }
+
+    // ボタンを有効化 (mouseEnabled/mouseChildren = true)
+    enable(): void {
+        this.mouseEnabled  = true;
+        this.mouseChildren = true;
+    }
+
+    // ボタンを無効化 (mouseEnabled/mouseChildren = false)
+    disable(): void {
+        this.mouseEnabled  = false;
+        this.mouseChildren = false;
+    }
+}
+```
+
+### パターン1: 通常ボタン (PointerEvent.POINTER_UP で再有効化)
+
+ボタン押下時に `disable()` し、`POINTER_UP` のタイミングで `enable()` を呼ぶ。
+
+```typescript
+import { ButtonAtom } from "../atom/ButtonAtom";
+import { PointerEvent } from "@next2d/events";
+
+export class YourBtnMolecule extends ButtonAtom {
+    onPointerDown(): void {
+        this.disable(); // 押下時に無効化して連打防止
+        // ... 処理
+    }
+
+    onPointerUp(): void {
+        // ... 処理
+        this.enable(); // POINTER_UP 時に再有効化
+    }
+}
+
+// View でのイベント登録例
+btn.addEventListener(PointerEvent.POINTER_DOWN, () => btn.onPointerDown());
+btn.addEventListener(PointerEvent.POINTER_UP,   () => btn.onPointerUp());
+```
+
+### パターン2: Tween アニメーションあり (Job の COMPLETE イベントで再有効化)
+
+アニメーション完了まで操作不可にする場合は、`Job` の `Event.COMPLETE` で `enable()` を呼ぶ。
+
+```typescript
+import { ButtonAtom } from "../atom/ButtonAtom";
+import { Tween, Easing, type Job } from "@next2d/ui";
+import { Event } from "@next2d/events";
+
+export class YourBtnMolecule extends ButtonAtom {
+    onPointerUp(): Promise<void> {
+        this.disable(); // アニメーション開始前に無効化
+        return new Promise<void>((resolve) => {
+            new YourBtnPointerUpAnimation(this, resolve).start();
+            // アニメーション側の Job.COMPLETE で enable() を呼ぶ
+        });
+    }
+}
+
+// Animation クラス側での実装例
+export class YourBtnPointerUpAnimation {
+    private readonly _job: Job;
+
+    constructor(sprite: Sprite, callback?: () => void) {
+        this._job = Tween.add(sprite,
+            { "scaleX": 1.0, "scaleY": 1.0 },
+            { "scaleX": 0.9, "scaleY": 0.9 },
+            0.2, 0, Easing.outQuad
+        );
+
+        this._job.addEventListener(Event.COMPLETE, () => {
+            (sprite as unknown as ButtonAtom).enable(); // アニメーション完了時に有効化
+            if (callback) callback();
+        });
+    }
+
+    start(): void { this._job.start(); }
+}
+```
+
+### 実装例 (NormalPlayBtnMolecule より)
+
+```typescript
+// src/ui/component/molecule/NormalPlayBtnMolecule.ts
+export class NormalPlayBtnMolecule extends ButtonAtom {
+    onPointerDown(): void {
+        new HomeNormalPlayBtnPointerDownAnimation(this).start();
+    }
+
+    onPointerUp(): Promise<void> {
+        this.disable(); // 押下時に無効化
+        return new Promise<void>((resolve) => {
+            // アニメーション完了時に resolve → 呼び出し側でチェーン処理
+            new HomeNormalPlayBtnPointerUpAnimation(this, resolve).start();
+            // Animation の Job.COMPLETE 内で enable() を呼ぶ
+        });
+    }
+}
+```
+
+### 判断基準
+
+| ケース | `enable()` のタイミング |
+|--------|----------------------|
+| 通常ボタン（アニメーションなし） | `PointerEvent.POINTER_UP` |
+| Tween アニメーションあり | `Job` の `Event.COMPLETE` |
+| 非同期処理後に有効化したい | `Promise` の `resolve` 後または `await` 後 |
+
+### Anti-Patterns
+
+```typescript
+// NG: disable のみで enable し忘れる → ボタンが永遠に操作不可になる
+onPointerDown(): void {
+    this.disable();
+    // enable() の呼び忘れ
+}
+
+// NG: アニメーション完了前に enable() を呼ぶ → 連打防止が無効
+onPointerUp(): void {
+    this.disable();
+    new SomeAnimation(this).start();
+    this.enable(); // NG: アニメーション開始直後に有効化してしまう
+}
+
+// OK: Job の COMPLETE イベント内で enable()
+constructor(sprite: Sprite) {
+    this._job = Tween.add(sprite, { alpha: 0 }, { alpha: 1 }, 0.3);
+    this._job.addEventListener(Event.COMPLETE, () => {
+        (sprite as unknown as ButtonAtom).enable(); // OK
+    });
+}
+```
+
+---
+
 ## Anti-Patterns
 
 ```typescript
@@ -1396,6 +1544,85 @@ npm run generate
 
 `routing.json`のトッププロパティ値を分解し、`view`ディレクトリ直下に対象ディレクトリがなければ作成。View/ViewModelが存在しない場合のみ新規クラスを生成。
 
+---
+
+# Security Configuration
+
+## Content-Security-Policy (CSP) 設定時の注意事項
+
+Next2D Player は WebGL/WebGPU による描画、Web Worker、Blob URL を内部で使用するため、CSP の設定には制約がある。
+誤った設定を行うとアプリが動作しなくなる。
+
+### 必須ディレクティブ
+
+```
+Content-Security-Policy:
+  default-src 'self' data: blob:;
+  script-src 'self';
+  style-src 'self' 'unsafe-inline';
+  connect-src 'self' https://{{ドメイン}};
+  worker-src 'self' blob: data:;
+```
+
+| ディレクティブ | 必要な値 | 理由 |
+|------------|---------|------|
+| `default-src` | `'self' data: blob:` | Blob URL・Data URI を Player 内部で使用するため |
+| `script-src` | `'self'` | インラインスクリプト不要。`'unsafe-inline'` は不要 |
+| `style-src` | `'self' 'unsafe-inline'` | Next2D が動的にスタイルを挿入するため `'unsafe-inline'` が必須 |
+| `connect-src` | `'self' https://{{ドメイン}}` | API・コンテンツエンドポイントへの通信を許可 |
+| `worker-src` | `'self' blob: data:` | Web Worker を Blob/Data URI で生成するため |
+
+### 使用禁止の設定
+
+```
+# NG: frame-ancestors を設定するとエラーになる
+frame-ancestors 'none';   # ← 追加してはいけない
+```
+
+`frame-ancestors 'none'` を追加するとアプリケーションがエラーになる。設定しないこと。
+
+### Vite での設定例 (vite.config.ts)
+
+```typescript
+import { defineConfig } from "vite";
+
+export default defineConfig({
+    server: {
+        headers: {
+            "Content-Security-Policy": [
+                "default-src 'self' data: blob:",
+                "script-src 'self'",
+                "style-src 'self' 'unsafe-inline'",
+                "connect-src 'self' https://example.com",
+                "worker-src 'self' blob: data:"
+            ].join("; ")
+        }
+    }
+});
+```
+
+### nginx での設定例
+
+```nginx
+add_header Content-Security-Policy "default-src 'self' data: blob:; script-src 'self'; style-src 'self' 'unsafe-inline'; connect-src 'self' https://example.com; worker-src 'self' blob: data:";
+```
+
+### Anti-Patterns
+
+```
+# NG: frame-ancestors を追加する
+Content-Security-Policy: default-src 'self' data: blob:; ... frame-ancestors 'none';
+
+# NG: worker-src に blob: を含めない → Web Worker が動作しない
+worker-src 'self';
+
+# NG: default-src に blob: を含めない → Player の内部処理が失敗する
+default-src 'self';
+
+# NG: style-src に 'unsafe-inline' を含めない → スタイルが適用されない
+style-src 'self';
+```
+
 ## Anti-Patterns
 
 ```typescript

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "next2d-development-mcp",
   "displayName": "Next2D Development MCP",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "MCP server for Next2D application development assistance",
   "type": "module",
   "author": "Toshiyuki Ienaga <ienaga@next2d.app>",
@@ -48,16 +48,16 @@
     ]
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.26.0"
+    "@modelcontextprotocol/sdk": "^1.27.1"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@types/node": "^25.3.0",
-    "@types/vscode": "^1.99.0",
-    "@typescript-eslint/eslint-plugin": "^8.56.0",
-    "@typescript-eslint/parser": "^8.56.0",
-    "@vscode/vsce": "^3.0.0",
-    "eslint": "^10.0.1",
+    "@types/vscode": "^1.109.0",
+    "@typescript-eslint/eslint-plugin": "^8.56.1",
+    "@typescript-eslint/parser": "^8.56.1",
+    "@vscode/vsce": "^3.7.1",
+    "eslint": "^10.0.2",
     "eslint-plugin-unused-imports": "^4.4.1",
     "globals": "^17.3.0",
     "typescript": "^5.9.3",
@@ -65,6 +65,6 @@
   },
   "engines": {
     "node": ">=22.0.0",
-    "vscode": "^1.99.0"
+    "vscode": "^1.109.0"
   }
 }