Gデプロイ用

README.jp.md

@@ -0,0 +1,97 @@
+# ImageMarkPengent
+
+VSCodeで画像に赤丸マークや注釈を直感的に描き込める拡張機能です。
+
+---
+
+## 主な特徴
+
+- PNG/JPG画像をVSCode上で直接開いて赤丸マークを描画
+- マークの色・太さ変更、移動、拡大縮小、削除、Undo/Redo
+- 画像として保存（元画像サイズで赤マーク合成）
+- 直感的なUI・ショートカット
+
+---
+
+## スクリーンショット
+
+![トップ画面](readme/images/top.png)
+
+---
+
+## 使い方
+
+### 1. 画像を開く
+- エクスプローラーでPNG/JPG画像を右クリック → `Open in ImageMarkPengent`
+- またはコマンドパレットで `ImageMarkPengent: Open in ImageMarkPengent` を実行
+
+### 2. マークを描く
+- 「マーク追加」ボタンを押す（またはCtrlを押しながらドラッグ）
+- 画像上でドラッグして赤丸を描画
+
+### 3. マークの編集
+- 「選択モード」ボタンでマークを選択
+- 選択したマークは：
+    - ドラッグで移動
+    - 四隅のハンドルをドラッグで拡大縮小
+    - 色・太さをツールバーで変更
+    - Deleteキーで削除
+- Undo（Ctrl+Z）、Redo（Ctrl+Y）も可能
+
+### 4. 画像の保存
+- 「保存」ボタンを押す
+- ファイル名・保存先を選択し、元画像サイズで赤マーク付き画像をPNGで保存
+
+---
+
+## ツールバーの説明
+
+- **移動モード**：画像のスクロールやズーム
+- **選択モード**：マークの選択・編集
+- **マーク追加**：赤丸マークを新規追加
+- **太さ・色**：マークの線の太さ・色を変更
+- **保存**：加工画像を保存
+
+---
+
+## ショートカット
+
+- Ctrl+ドラッグ：一時的にマーク追加
+- Delete/Backspace：選択中マーク削除
+- Ctrl+Z：Undo（元に戻す）
+- Ctrl+Y：Redo（やり直し）
+- Esc：移動モードに戻る
+
+---
+
+## よくある質問
+
+- **Q. 元画像は上書きされますか？**
+  - A. 保存時は新しいファイル名を指定できます。元画像は変更されません。
+- **Q. 複数のマークを同時に編集できますか？**
+  - A. 複数選択には未対応ですが、今後拡張予定です。
+
+---
+
+## サンプル画像
+
+![サンプル画像](examples/sample_640x480.png)
+
+---
+
+## インストール・ビルド
+
+1. 依存パッケージインストール
+   ```sh
+   yarn install
+   ```
+2. ビルド
+   ```sh
+   yarn compile
+   ```
+3. F5キーでデバッグ実行
+
+---
+
+## ライセンス
+MIT License

README.md

@@ -1,74 +1,99 @@
-# imagemarkpengent 
+[日本語のREADMEはこちら](./README.jp.md)
-
+
-
+# ImageMarkPengent
-![alt text](./readme/images/top.png)
+
-
+A VSCode extension for intuitively drawing red circle marks and annotations directly on images.
-This is the README for your extension "imagemarkpengent". After writing up a brief description, we recommend including the following sections.
+
-
+---
-## Features
+
-
+## Features
-Describe specific features of your extension including screenshots of your extension in action. Image paths are relative to this README file.
+
-
+- Draw red circle marks directly on PNG/JPG images in VSCode
-For example if there is an image subfolder under your extension project workspace:
+- Change mark color/line width, move, resize, delete, Undo/Redo
-
+- Save as image (red marks merged at original image size)
-\!\[feature X\]\(images/feature-x.png\)
+- Intuitive UI and keyboard shortcuts
-
+
-> Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow.
+---
-
+
-## Requirements
+## Screenshot
-
+
-If you have any requirements or dependencies, add a section describing those and how to install and configure them.
+![Top Screen](readme/images/top.png)
-
+
-## Extension Settings
+---
-
+
-Include if your extension adds any VS Code settings through the `contributes.configuration` extension point.
+## How to Use
-
+
-For example:
+### 1. Open an Image
-
+- Right-click a PNG/JPG image in the Explorer → `Open in ImageMarkPengent`
-This extension contributes the following settings:
+- Or run `ImageMarkPengent: Open in ImageMarkPengent` from the Command Palette
-
+
-* `myExtension.enable`: Enable/disable this extension.
+### 2. Draw a Mark
-* `myExtension.thing`: Set to `blah` to do something.
+- Click the "Add Mark" button (or Ctrl+drag)
-
+- Drag on the image to draw a red circle
-## Known Issues
+
-
+### 3. Edit Marks
-Calling out known issues can help limit users opening duplicate issues against your extension.
+- Click the "Select Mode" button to select a mark
-
+- For the selected mark:
-## Release Notes
+    - Drag to move
-
+    - Drag the corner handles to resize
-Users appreciate release notes as you update your extension.
+    - Change color/line width from the toolbar
-
+    - Delete with the Delete key
-### 1.0.0
+- Undo (Ctrl+Z) and Redo (Ctrl+Y) are available
-
+
-Initial release of ...
+### 4. Save the Image
-
+- Click the "Save" button
-### 1.0.1
+- Choose a file name and location; the image will be saved as PNG with red marks at the original size
-
+
-Fixed issue #.
+---
-
+
-### 1.1.0
+## Toolbar Guide
-
+
-Added features X, Y, and Z.
+- **Move Mode**: Scroll/zoom the image
-
+- **Select Mode**: Select and edit marks
----
+- **Add Mark**: Add a new red circle mark
-
+- **Line Width/Color**: Change the mark's line width and color
-## Following extension guidelines
+- **Save**: Save the edited image
-
+
-Ensure that you've read through the extensions guidelines and follow the best practices for creating your extension.
+---
-
+
-* [Extension Guidelines](https://code.visualstudio.com/api/references/extension-guidelines)
+## Keyboard Shortcuts
-
+
-## Working with Markdown
+- Ctrl+drag: Temporarily add a mark
-
+- Delete/Backspace: Delete selected mark
-You can author your README using Visual Studio Code. Here are some useful editor keyboard shortcuts:
+- Ctrl+Z: Undo
-
+- Ctrl+Y: Redo
-* Split the editor (`Cmd+\` on macOS or `Ctrl+\` on Windows and Linux).
+- Esc: Return to Move Mode
-* Toggle preview (`Shift+Cmd+V` on macOS or `Shift+Ctrl+V` on Windows and Linux).
+
-* Press `Ctrl+Space` (Windows, Linux, macOS) to see a list of Markdown snippets.
+---
-
+
-## For more information
+## FAQ
-
+
-* [Visual Studio Code's Markdown Support](http://code.visualstudio.com/docs/languages/markdown)
+- **Q. Will the original image be overwritten?**
-* [Markdown Syntax Reference](https://help.github.com/articles/markdown-basics/)
+  - A. You can specify a new file name when saving. The original image is not changed.
-
+- **Q. Can I edit multiple marks at once?**
-**Enjoy!**
+  - A. Multi-selection is not supported yet, but is planned for future updates.
+
+---
+
+## Sample Image
+
+![Sample Image](examples/sample_640x480.png)
+
+---
+
+## Install & Build
+
+1. Install dependencies
+   ```sh
+   yarn install
+   ```
+2. Build
+   ```sh
+   yarn compile
+   ```
+3. Press F5 to launch in debug mode
+
+---
+
+## License
+MIT License 

package.json

@@ -3,7 +3,7 @@
   "displayName": "ImageMarkPengent",
   "description": "",
   "license": "MIT",
-  "version": "0.0.1",
+  "version": "1.0.0-alpha",
   "engines": {
     "vscode": "^1.99.0"
   },