# ImageMarkPengent拡張機能の設計書 * 画像に赤い印や注釈を描ける * いちいちEXECLなどを開いて画像を加工するのも面倒 ## 機能一覧 | 分類 | 機能 | 説明 | | ------ | ----------- | ---------------------------------------- | | ビュー | WebView表示 | `.png/.jpg`ファイルを開くとWebViewで表示 | | 機能 | マーク描画 | クリックしたところに記号を描画 | | | 保存機能 | 加工後に保存する(別名保存も対応) | 最初は記号は丸のオブジェクトのみとする ※ 番号付きマーカーや矢印 も将来的に追加できるようにする ## 仕様について ### フォルダの構成 ```txt imagemarkpengent/ ├── src/ │ └── extension.ts # 拡張機能のメインエントリ ├── package.json # 拡張機能の定義（コマンド、設定など） ├── tsconfig.json # TypeScript設定 ├── vsc-extension-quickstart.md # チュートリアル的なREADME └── .vscode/ ``` --- ## 開発ステップ 1. コマンドを登録し.png/.jpgファイルに対して有効にする - package.json に explorer/context のコマンドメニュー追加 - 対象拡張子を`.png/.jpg`に限定する 2. WebView で画像を表示する処理を追加 - コマンドからWebviewPanelを作成し画像を``として読み込む - canvas上に画像を描画してユーザーが上から描き込めるようにする 3. クリック位置に赤丸を描画できるようにする - WebView内でJavaScriptを使い``に描画する - 座標はクリックイベントで取得、再描画用に保持 4. 加工画像の保存機能を追加 - 「保存」ボタンをWebView内に用意 - `canvas.toDataURL()`を取得し、拡張機能に`vscode.postMessage()`で送信 - 拡張機能側でファイル保存（別名保存もサポート） ### 完璧なスタートです！ 以下に続きの「**開発ステップ**」とそれぞれの **具体的な手順** を設計書スタイルで追記します。 --- ## 開発ステップ ### ステップ 1. コマンドを登録し `.png/.jpg` ファイルに対して有効にする - `package.json` に `explorer/context` のコマンドメニュー追加 - 対象拡張子を `.png` / `.jpg` に限定 ### ステップ 2. WebView で画像を表示する処理を追加 - コマンドから `WebviewPanel` を作成し画像を `` として読み込み - `canvas` 上に画像を描画して、ユーザーが上から描き込めるようにする ### ステップ 3. クリック位置に赤丸を描画できるようにする - WebView内で JavaScript を使い `` に赤丸描画 - 座標はクリックイベントで取得、再描画用に保持 ### ステップ 4. 加工画像の保存機能を追加 - 「保存」ボタンをWebView内に用意 - `canvas.toDataURL()` を取得し、拡張機能に `vscode.postMessage()` で送信 - 拡張機能側でファイル保存（別名保存もサポート） --- ## 各ステップの具体的な手順 ### コマンド登録（右クリックメニューに表示） **package.json** ```json "activationEvents": [ "onCommand:imagemarkpengent.openImageEditor" ], "contributes": { "commands": [ { "command": "imagemarkpengent.openImageEditor", "title": "Open in ImageMarkPengent" } ], "menus": { "explorer/context": [ { "command": "imagemarkpengent.openImageEditor", "when": "resourceExtname =~ /\\.(png|jpg|jpeg)$/", "group": "navigation" } ] } } ``` --- ### WebViewに画像表示 **extension.ts** ```ts vscode.commands.registerCommand('imagemarkpengent.openImageEditor', (uri: vscode.Uri) => { const panel = vscode.window.createWebviewPanel( 'imageEditor', 'ImageMarkPengent', vscode.ViewColumn.One, { enableScripts: true, localResourceRoots: [vscode.Uri.file(path.dirname(uri.fsPath))] } ); const imageSrc = panel.webview.asWebviewUri(uri); panel.webview.html = getWebviewContent(imageSrc.toString()); }); ``` **getWebviewContent()** ```ts function getWebviewContent(imageSrc: string): string { return ` `; } ``` --- ### 保存処理（vscode拡張から保存） - WebView内に「保存」ボタン追加 - `canvas.toDataURL()` を取得し、`vscode.postMessage()` で送信 - `extension.ts` で受け取ってバイナリ化し、`fs.writeFile()` で保存