52 lines
1.7 KiB
Markdown
52 lines
1.7 KiB
Markdown
# ImageMarkPengent 実装タスク
|
||
|
||
## 0. チュートリアル：現状の拡張機能をビルド・実行する
|
||
|
||
1. 依存パッケージのインストール（初回のみ）
|
||
```sh
|
||
yarn install
|
||
```
|
||
2. ビルド
|
||
```sh
|
||
yarn compile
|
||
```
|
||
3. VSCodeでこのプロジェクト（imagemarkpengent）を開く
|
||
4. F5キー（または「実行とデバッグ」→「拡張機能のデバッグ」）で新しいVSCodeウィンドウが起動し、拡張機能が有効化される
|
||
5. コマンドパレット（Ctrl+Shift+P）で `Hello World` コマンドを実行できる
|
||
|
||
|
||
|
||
|
||
---
|
||
|
||
## 概要
|
||
VSCode拡張機能「ImageMarkPengent」の実装タスク一覧です。
|
||
|
||
---
|
||
|
||
## 実装ステップ
|
||
|
||
### 1. コマンド登録と右クリックメニュー対応
|
||
- [x] `package.json` にコマンドを登録する
|
||
- [x] `explorer/context` メニューに「Open in ImageMarkPengent」を追加
|
||
- [x] 対象拡張子を `.png` / `.jpg` / `.jpeg` に限定
|
||
|
||
### 2. WebViewで画像表示
|
||
- [x] コマンド実行時にWebViewパネルを開く
|
||
- [x] 画像ファイルを `<img>` または `<canvas>` で表示
|
||
- [x] 画像の上に描き込み可能な `canvas` を重ねる
|
||
|
||
|
||
|
||
### 3. 赤丸マーク描画機能
|
||
- [x] WebView内でJavaScriptにより `<canvas>` へ赤丸を描画
|
||
- [x] クリック座標を取得し、赤丸を描画・保持
|
||
- [x] 複数マークの描画・再描画に対応
|
||
|
||
### 4. 加工画像の保存機能
|
||
- [ ] WebViewに「保存」ボタンを設置
|
||
- [ ] `canvas.toDataURL()` で画像データを取得
|
||
- [ ] `vscode.postMessage()` で拡張機能側に送信
|
||
- [ ] 拡張機能側でファイル保存（別名保存も対応）
|
||
|