ページのマークアップを、スクリプトやAPI・テストデータ向けのJSONに変える
必要なデータはすでにページ上にあることが多い——`<table>` の中、CMSプレビュー、ベンダーポータルから保存したHTML書き出し。足りないのはきれいなJSONです。fetchハンドラ用のオブジェクト配列、フィクスチャ用の設定ブロック、DBシード用の構造化行。 ブラウザウィンドウからテキストをコピーしても、ほとんどうまくいきません。見出しとセルが混ざり、結合が消え、結局エディターでオブジェクトを手組みします。HTML JSON変換の流れは、波括弧を1つコピーする前に構造を確認できるべきです。 このツールはタブ内でローカルに動きます。左にHTMLを貼り、右でグリッドとJSON出力の更新を見て、ずれがあればセルかソースマークアップを直し、`.json` をコピーまたはダウンロード。アップロード待ちもアカウントも不要——マークアップは端末から出ません。顧客名、社内価格、未公開の製品仕様がHTMLに含まれるときに効いてきます。
表とページ全文に対応したHTML JSON変換ツール
実際のHTMLが1枚の完璧な表だけであることは稀です。`colspan` 見出しの価格グリッドかもしれませんし、箇条書きと仕様表を1つのJSONにまとめたい商品ページかもしれません。どちらもここで完結——別サイトに移る必要はありません。 **テーブル抽出**は意味のある `<table>` マークアップを読み、本物の行列を組み立てます。`<th>` と `<td>` は別列に入り、`colspan` / `rowspan` はプレビュー上の結合セルとして見え——集計行がJSONでどう平坦化されるか把握できます。**全文抽出**は見出し・段落・リストをたどり、各ブロックを1列1行に置きつつ、埋め込み表は多列行に展開します。本文中心で途中に表があるページ、または読めるテキストと表データを1回の書き出しにまとめたいときに使います。 出力側では、見出し行をプロパティ名にしてオブジェクト配列が欲しいとき **先頭行をキーにする** をオンにします。コードレビュー向けに **整形表示** で「整形」タブを読みやすく、「圧縮」はpayloadをgzipする前提でサイズを抑えます。
アップロード専用の変換ツールの多くは、解析の段階を見せません。ファイルを送りJSONを受け取り、Postmanに貼って初めて列のズレに気づく——そういう体験をここでは避けます。HTMLエディター、グリッドプレビュー、JSONパネルが同じ画面を共有します。行が違う？ グリッドのセルをクリックして修正。構造が違う——`<thead>` 不足、余分なラッパー `div`、壊れたタグ——？ HTMLタブに戻り、その場でマークアップを編集。プレビューは入力に合わせて更新されます。 1回の貼り付けに複数のトップレベル表があると、ツールバー上で別シートになります。ブロックごとに確認し、必要なシートのJSONをコピーまたはダウンロード。後からマークアップが再び要れば、変換メニューの **Excel HTML変換** が同じ「先にプレビュー」の考え方で逆方向をカバーします。
変換ツールを試す表モードと全文モード
構造化データは `<table>` グリッドから、混在コンテンツはページ全体から——ツールを切り替えずに抽出。
書き出し前にHTMLやセルを編集
ソースパネルでタグを直すか、グリッドで値を調整。コピーするJSONは画面上で確認した内容と一致します。
オブジェクトキー付きの整形JSON
見出し→キーの任意マッピングと整形出力、コンパクトpayload用の圧縮表示も選択可能。
このHTML JSON変換ツールの違い
作業台レイアウト——HTMLが入り、構造化JSONが出る——コピー前に信頼できるプレビュー付き。
JSONになる前にデータを見る
JSONは容赦がありません。列が1つずれると、すべてのオブジェクトのフィールド名が狂います。グリッドプレビューは、HTMLが横に開いたまま見出しを読み、数値列を追い、重複行を拾うためのものです。 貼り付けは第一級の操作です。開発者は断片をすでに持っていることが多い——DevTools、保存済みエクスポート、メールテンプレ、Storybookのスナップショット。クリップボードに収まらないときだけ `.html` / `.htm` を読み込み。いずれにせよ解析はブラウザ内に留まります。 プレビューが合えば **JSONオプション** を開き、先頭行をキーにマップするか、素の2次元配列のままにします。「整形」タブはインデント付き出力で確認、「圧縮」はgzip前提のpayloadから空白を削ります。クリップボードへコピーするか `.json` をダウンロード——データは同じ、渡し方だけ選べます。
HTMLをJSONに変換する方法
HTMLを貼り付けまたは読み込む
左エディターにマークアップを入れます——多くはクリップボードから。保存済みページは「アップロード」で `.html` / `.htm` を読み込み。データが `<table>` タグ内なら **テーブル抽出**、見出し・段落・表が混在なら **全文抽出** を選びます。
グリッドを確認して直す
右パネルにJSONになる行が表示されます。見出し、数値、結合帯を確認。HTMLに表が複数あればツールバーでシートを選択。値が違えばセルをクリック。構造が違えばHTMLタブでその場編集——入力に合わせてグリッドが更新されます。
JSONオプションを設定
ツールバーから **JSONオプション** を開きます。名前付きフィールドのオブジェクト配列が欲しければ **先頭行をキーにする** を有効に。「整形」タブで読みやすくするなら **整形表示**、コンパクトな文字列なら「圧縮」タブを参照します。
コピーまたはダウンロード
エディターやPostmanへ素早く渡すなら **JSONをコピー**。ディスクに保存するなら **.jsonをダウンロード**——名前は読み込んだファイルに従います。後からHTMLが再び要れば、変換メニューのExcel HTML変換で逆方向へ。
HTML JSON変換：書き出し前のよくある質問
次のHTML断片を、そのまま使えるJSONに
貼り付け、グリッドを確認、マークアップやセルを直し、コピーまたはダウンロード——オブジェクトの手打ち不要。
HTML JSON変換
- テーブル抽出と全文抽出を1つのツールで
- HTMLをその場で編集、またはプレビューグリッドで値を修正
- 先頭行をキーにする・整形表示のJSONオプション
- ツールバーからJSONをコピーまたは `.json` をダウンロード
逆方向のマークアップが必要なら、変換メニューのExcel HTML変換をご利用ください。
手作業でのオブジェクト組み立てを減らす
JSONがブラウザを出る前に確認できるプレビュー付きで、Webマークアップから構造化データを取り出します。