next2d-development-mcp 0.0.4 → 1.0.1

package/README.md

@@ -1,7 +1,7 @@
 # next2d-development-mcp
 
 <div align="center">
-  <img src="https://next2d.app/assets/img/top-logo.svg" width="180" alt="Next2D">
+  <img src="https://github.com/Next2D/next2d-development-mcp/raw/main/icon.png" width="180" alt="Next2D">
 </div>
 
 [![UnitTest](https://github.com/Next2D/next2d-development-mcp/actions/workflows/integration.yml/badge.svg?branch=main)](https://github.com/Next2D/next2d-development-mcp/actions/workflows/integration.yml)
@@ -62,6 +62,18 @@ This MCP server provides the following capabilities to AI agents:
 
 ## AI エージェントへの追加方法 / AI Agent Setup
 
+### VS Code Marketplace（推奨 / Recommended）
+
+VS Code Marketplace からワンクリックでインストールできます。
+Install with one click from the VS Code Marketplace:
+
+**[![Install in VS Code](https://img.shields.io/badge/Install%20in-VS%20Code-007ACC?logo=visual-studio-code)](https://marketplace.visualstudio.com/items?itemName=next2d.next2d-development-mcp)**
+
+インストール後、GitHub Copilot Chat で `@next2d` を入力すると MCP ツールが利用可能になります。
+After installation, MCP tools are available by typing `@next2d` in GitHub Copilot Chat.
+
+---
+
 ### GitHub Copilot (VS Code / VS Code Insiders)
 
 プロジェクトルートに `.vscode/mcp.json` を作成します。  
@@ -101,7 +113,7 @@ Edit the configuration file:
 ```json
 {
   "mcpServers": {
-    "next2d": {
+    "next2d-development-mcp": {
       "command": "npx",
       "args": ["-y", "next2d-development-mcp"]
     }
@@ -120,7 +132,7 @@ Create `.mcp.json` at the project root:
 ```json
 {
   "mcpServers": {
-    "next2d": {
+    "next2d-development-mcp": {
       "command": "npx",
       "args": ["-y", "next2d-development-mcp"]
     }
@@ -143,7 +155,7 @@ Create `.codex/mcp.json` at the project root:
 ```json
 {
   "mcpServers": {
-    "next2d": {
+    "next2d-development-mcp": {
       "command": "npx",
       "args": ["-y", "next2d-development-mcp"]
     }
@@ -163,7 +175,7 @@ Create `.gemini/settings.json` at the project root:
 ```json
 {
   "mcpServers": {
-    "next2d": {
+    "next2d-development-mcp": {
       "command": "npx",
       "args": ["-y", "next2d-development-mcp"]
     }
@@ -184,7 +196,7 @@ Add the MCP server from Cline settings:
 ```json
 {
   "mcpServers": {
-    "next2d": {
+    "next2d-development-mcp": {
       "command": "npx",
       "args": ["-y", "next2d-development-mcp"]
     }
@@ -203,7 +215,7 @@ Add to Cursor settings:
 ```json
 {
   "mcpServers": {
-    "next2d": {
+    "next2d-development-mcp": {
       "command": "npx",
       "args": ["-y", "next2d-development-mcp"]
     }
@@ -221,7 +233,7 @@ Add to Windsurf MCP configuration:
 ```json
 {
   "mcpServers": {
-    "next2d": {
+    "next2d-development-mcp": {
       "command": "npx",
       "args": ["-y", "next2d-development-mcp"]
     }
@@ -343,8 +355,6 @@ ViewModel.constructor
 - [Next2D Animation Tool](https://tool.next2d.app/) — アニメーション作成ツール
 - [MCP Specification](https://modelcontextprotocol.io/) — Model Context Protocol 仕様
 
----
-
 ## License
 
 MIT

package/dist/extension.d.ts

@@ -0,0 +1,4 @@
+import * as vscode from "vscode";
+export declare function activate(context: vscode.ExtensionContext): void;
+export declare function deactivate(): void;
+//# sourceMappingURL=extension.d.ts.map

package/dist/extension.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"extension.d.ts","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,QAAQ,CAAC;AAEjC,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,gBAAgB,GAAG,IAAI,CAoB/D;AAED,wBAAgB,UAAU,IAAI,IAAI,CAAgB"}

package/dist/extension.js

@@ -0,0 +1,16 @@
+import * as vscode from "vscode";
+export function activate(context) {
+    context.subscriptions.push(vscode.lm.registerMcpServerDefinitionProvider("next2d-development-mcp", {
+        provideMcpServerDefinitions() {
+            const serverPath = context.asAbsolutePath("dist/index.js");
+            return [
+                new vscode.McpStdioServerDefinition("Next2D Development MCP", process.execPath, [serverPath])
+            ];
+        },
+        resolveMcpServerDefinition(server) {
+            return server;
+        }
+    }));
+}
+export function deactivate() { }
+//# sourceMappingURL=extension.js.map

package/dist/extension.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extension.js","sourceRoot":"","sources":["../src/extension.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,QAAQ,CAAC;AAEjC,MAAM,UAAU,QAAQ,CAAC,OAAgC;IACrD,OAAO,CAAC,aAAa,CAAC,IAAI,CACtB,MAAM,CAAC,EAAE,CAAC,mCAAmC,CAAC,wBAAwB,EAAE;QACpE,2BAA2B;YACvB,MAAM,UAAU,GAAG,OAAO,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC;YAC3D,OAAO;gBACH,IAAI,MAAM,CAAC,wBAAwB,CAC/B,wBAAwB,EACxB,OAAO,CAAC,QAAQ,EAChB,CAAC,UAAU,CAAC,CACf;aACJ,CAAC;QACN,CAAC;QACD,0BAA0B,CACtB,MAAkC;YAElC,OAAO,MAAM,CAAC;QAClB,CAAC;KACJ,CAAC,CACL,CAAC;AACN,CAAC;AAED,MAAM,UAAU,UAAU,KAAuB,CAAC"}

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,17 +1,21 @@
 {
   "name": "next2d-development-mcp",
-  "version": "0.0.4",
+  "displayName": "Next2D Development MCP",
+  "version": "1.0.1",
   "description": "MCP server for Next2D application development assistance",
   "type": "module",
   "author": "Toshiyuki Ienaga <ienaga@next2d.app>",
+  "publisher": "next2d",
   "license": "MIT",
   "homepage": "https://next2d.app",
   "bugs": "https://github.com/Next2D/next2d-development-mcp/issues",
+  "icon": "icon.png",
   "bin": {
     "next2d-development-mcp": "./dist/index.js"
   },
-  "main": "./dist/index.js",
+  "main": "./dist/extension.js",
   "scripts": {
+    "vscode:prepublish": "npm run build",
     "build": "tsc && npm run copy-refs",
     "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/');\"",
     "start": "node dist/index.js",
@@ -30,25 +34,37 @@
     "development-tools",
     "code-generation"
   ],
+  "categories": [
+    "AI",
+    "Other"
+  ],
+  "activationEvents": [],
+  "contributes": {
+    "mcpServerDefinitionProviders": [
+      {
+        "id": "next2d-development-mcp",
+        "label": "Next2D Development MCP"
+      }
+    ]
+  },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1.26.0"
+    "@modelcontextprotocol/sdk": "^1.27.1"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@types/node": "^25.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.56.0",
-    "@typescript-eslint/parser": "^8.56.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",
     "vitest": "^4.0.18"
   },
   "engines": {
-    "node": ">=22.0.0"
-  },
-  "files": [
-    "dist",
-    "README.md"
-  ]
+    "node": ">=22.0.0",
+    "vscode": "^1.99.0"
+  }
 }