Web Mock Editor

HTML 画面モックの 幅・高さ・余白・並び順・改行位置・gap・テーブル列順 を、ドラッグや数値入力で調整し、 変更した行だけ を元の HTML ドキュメントへ反映する VS Code 拡張機能です。

画面モック（静的な HTML）の見た目を、ブラウザで確認しながら直し、その結果をソースの最小差分として残せます。生成 AI にモックの修正内容を伝えるための 調整内容サマリ（Markdown） も出力できます。

特長

.html を右クリック →「モックエディタで開く」（エディタ右上のアイコン、コマンドパレット「Web Mock Editor: モックエディタで開く」でも可）
モック上の項目をクリックして選び、調整する
適用（または Ctrl+S）→ ドキュメントへ最小差分で反映される。ファイルへの保存はテキストエディタ側の Ctrl+S
別のファイルとして残すときは「名前を付けて保存」。「AI用に出力」で調整内容のサマリ（Markdown）をコピー／.md 保存

操作	内容
クリック／Ctrl+クリック	項目（label 単位）を選択／中の入力欄そのものを選択
右端・下端のハンドルをドラッグ	幅／高さを変更（Alt で細かく）
プロパティ欄に数値入力	幅・高さ・余白（小数可。↑↓ で ±1、Shift で ±10、Alt で ±0.1。Enter で確定、Esc で取り消し）
✥ グリップをドラッグ、`[` `]`、◀ ▶	項目の並び替え・テーブルの列順の変更（同じ親の中で）
「この項目の前で改行」	強制改行（改行用の空要素を 1 行追加）
「間隔（gap）」	`flex`／`grid` コンテナの行間・列間
「要素確認」モード	マウスオンで要素の情報（寸法・色・フォント・ボックスモデル）を見て、その場で幅を変更
変更履歴パネルの ↺	その変更だけを取り消す

幅・高さは、要素ごと（インライン）だけでなく、<style> 内の既存の CSS ルールや新規ルールへも反映できます（JS が後から生成する要素はルール単位で調整）。

設定	既定	内容
`webMockEditor.baseWidth`	1440	基準画面幅(px)の初期値
`webMockEditor.zoom`	1	表示倍率の初期値（0.5 / 0.75 / 1 / 1.25 / 1.5）
`webMockEditor.saveAs.dateSuffix`	true	別名保存の既定名に日付（`_YYYYMMDD`）を付ける
`webMockEditor.confirmApply`	false	適用の前に確認する（適用後は Ctrl+Z で戻せるため既定はオフ）
`webMockEditor.summary.fileNamePattern`	`{name}_調整内容.md`	サマリのファイル名（`{name}` = 元のファイル名・拡張子なし）
`webMockEditor.allowRemoteResources`	false	モックが外部(https)の画像・CSS・フォントを読むことを許可
`webMockEditor.runMockScripts`	true	モックの JavaScript を実行する。オフにするとスクリプトが動かない（JS が生成する要素は表示されず、プレビューでも動作を確認できない。画面に「JS停止中」と表示）。次にモックを開く（読み直す）ときから反映。ユーザー設定でのみ変更できる（ワークスペースの設定では上書きされない）

調整できるのは、幅・高さ・余白・並び順・改行位置・gap・テーブルの列順です。色・文字などの編集、複数選択、コンテナをまたぐ移動、行（tr）の並び替えは対象外です。
閉じタグを省略した HTML（<p> <li> の閉じ忘れなど）は、読み込み時にエラーを表示し、編集できません。
列順を変更できない表があります（列番号でセルを参照するスクリプトがある文書、行テンプレートを特定できない表）。無効な理由は画面に表示されます。
保存は UTF-8 のみ対応です。
信頼されていないワークスペース（制限モード）では無効です。モックのスクリプトを実行するためです。
現在の版は ローカルのファイルのみ（リモート・Web 版 VS Code は対象外）です。相対パスの画像・CSS を読み込むモックは、それらが表示されません（外部 https は設定で許可）。
元の HTML を読み込んだ後にソースが変更された場合は、適用時に「上書きして適用」「読み直す」「キャンセル」を選びます。
動作確認は VS Code 1.138.0 です。engines.vscode は ^1.90.0 ですが、下限側は検証していません。

モックの HTML は、スクリプトも含めて実行されます（JS が生成する表の編集や、プレビューで動作を確認するため）。出所の分からない HTML は開かないでください。

実行時の制限

モックは VS Code の Webview 内の iframe で動きます。Node.js・ファイル・拡張ホストへは直接触れません
CSP：default-src 'none'。fetch・XHR・WebSocket は使えません。画像・CSS・フォントは拡張のリソースと data:／blob: のみ（外部 URL は既定で不許可）
信頼されていないワークスペース（制限モード）では、拡張が無効になります
設定 webMockEditor.runMockScripts を オフにすると、モックのスクリプトを実行しません（信頼できない HTML を見るとき用）
モックのスクリプトが window.parent 経由で、エディタの API（クリップボード・保存・適用など）を直接呼べないようにしています。acquireVsCodeApi() は 1 回だけ取得（モックからは取得できない）。モックから届いたメッセージは破棄します
ホストは全メッセージを検証（型・サイズ）し、適用は Webview の結果を鵜呑みにせず、変更内容から再計算して照合します。ファイルへの保存はダイアログでユーザーが操作します

限界（既知）

モックはエディタと同じオリジンで表示するため（エディタがモックの DOM を直接操作するため）、悪意あるスクリプトは エディタ画面の DOM を操作できます（ボタンを押す、入力欄を書き換えるなど）。その結果、クリップボードへのコピーや、開いているドキュメントへの未保存の変更（Ctrl+Z で戻せます）を起こされる可能性があります。完全な隔離ではありません
信頼できない HTML は、runMockScripts をオフにして開いてください（スクリプトが動かないため、上記の影響は受けません）

MIT（同梱の LICENSE を参照）