diff --git a/docs/pg_task.md b/docs/pg_task.md
index f797e8e..76ac0d9 100644
--- a/docs/pg_task.md
+++ b/docs/pg_task.md
@@ -29,7 +29,7 @@ VSCode拡張機能「ImageMarkPengent」の実装タスク一覧です。
### 1. コマンド登録と右クリックメニュー対応
- [x] `package.json` にコマンドを登録する
- [x] `explorer/context` メニューに「Open in ImageMarkPengent」を追加
-- [ ] 対象拡張子を `.png` / `.jpg` / `.jpeg` に限定
+- [x] 対象拡張子を `.png` / `.jpg` / `.jpeg` に限定
### 2. WebViewで画像表示
- [ ] コマンド実行時にWebViewパネルを開く
diff --git a/examples/sample_640x480.png b/examples/sample_640x480.png
new file mode 100644
index 0000000..ec2318c
Binary files /dev/null and b/examples/sample_640x480.png differ
diff --git a/package.json b/package.json
index b9d49d3..7fa098f 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
"name": "imagemarkpengent",
"displayName": "ImageMarkPengent",
"description": "",
+ "license": "MIT",
"version": "0.0.1",
"engines": {
"vscode": "^1.99.0"
diff --git a/src/extension.ts b/src/extension.ts
index adde206..26c9f99 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -1,6 +1,8 @@
// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
import * as vscode from 'vscode';
+const path = require('path');
+import { getWebviewContent } from './webviewContent';
// This method is called when your extension is activated
// Your extension is activated the very first time the command is executed
@@ -22,12 +24,22 @@ export function activate(context: vscode.ExtensionContext) {
vscode.window.showWarningMessage('対応画像ファイル（.png, .jpg, .jpeg）を選択してください。');
return;
}
- vscode.window.showInformationMessage('画像編集コマンドが呼び出されました: ' + uri.fsPath);
+
+ 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());
});
context.subscriptions.push(disposable);
context.subscriptions.push(disposableOpenImageEditor);
}
-// This method is called when your extension is deactivated
-export function deactivate() {}
diff --git a/src/webviewContent.ts b/src/webviewContent.ts
new file mode 100644
index 0000000..63440ff
--- /dev/null
+++ b/src/webviewContent.ts
@@ -0,0 +1,29 @@
+export function getWebviewContent(imageSrc: string): string {
+ return `
+
+
+
+
+ ImageMarkPengent
+
+
+
+
+
+
+
+ `;
+}
\ No newline at end of file