HTML テーブルから JSON への変換 — HTML テーブルを JSON に抽出
HTML テーブルから構造化 JSON にデータを抽出します。ヘッダーの自動検出、ネストされたテーブルの処理に対応し、完全にブラウザ内で動作します。アップロードや制限はありません。
HTML Table to JSON
Extract data from HTML tables and convert to JSON. Auto-detects <thead> headers and <tbody> rows. Works entirely in your browser.
HTML テーブルは、ウェブがもつユニバーサルデータグリッドに最も近いものです。あらゆるスプレッドシートのエクスポートが生成でき、あらゆるメールクライアントがレンダリングし、あらゆる CMS が保存し、あらゆるブラウザは予測可能な形で描画します。JSON は、ソフトウェアがもつユニバーサルデータ交換フォーマットに最も近いものです。あらゆるウェブ API が返し、あらゆるモダンな言語がネイティブにパースし、あらゆるデータベースが取り込みます。この 2 つの間の変換は、ウェブページから表形式のデータを抽出し、データベース、スプレッドシート、チャートライブラリ、テストフィクスチャなど、プログラムで扱えるものに取り込む標準的な方法です。
変換は見た目ほど単純ではありません。HTML テーブルには豊富な構造機能——<thead>、<tbody>、<tfoot>、<th>、colspan、rowspan、スコープ属性——があり、JSON の出力ではこれらを意図的にフラット化または保持する必要があります。素朴な変換（行を順に歩いてセルのテキストを出力する）は、ヘッダー構造を失い、結合されたセルを予測不能な位置にマージします。良い変換は、ヘッダー行を検出し、適切な出力形式を選び、結合されたセルをパースエラーではなく意図的なシグナルとして扱います。本ツールはこれら 3 つすべてを扱います。ヘッダー検出、出力形式の選択、結合されたセルの方針は、単一のモードにまとめ上げるのではなく、設定として公開されています。
最後に受け渡しについてまとめます。出力先が JavaScript のデータパイプライン（チャートライブラリ、データグリッドコンポーネント、テストフィクスチャ）である場合、オブジェクトの配列が自然な形式です。各行が型付きのオブジェクトになり、ダウンストリームのコードが反復処理できます。出力先がスプレッドシートや CSV インポートである場合、配列の配列、または CSV コンバーターがより良い選択です。スプレッドシートの JSON オブジェクトは追加のインポート手順を必要とします。ソースが複雑なヘッダー、複数レベルの行、視覚的なスタイルが意味を持つテーブルである場合、自動変換は意味論を完全に保つことはできません。手作業のレビューがワークフローの一部です。
使い方
HTML テーブルを貼り付ける
完全な `<table>...</table>` ブロック、または 1 つ以上のテーブルを含む HTML フラグメントを貼り付けます。パーサーは `<thead>`、`<tbody>`、`<th>`、`colspan`、`rowspan` を自動的に処理します。
出力形式を選ぶ
オブジェクトの配列（各行がヘッダーでキー付けされた JSON オブジェクト）、配列の配列（ヘッダー依存なし）、またはカラムインデックスでキー付けされた単一オブジェクトから選択します。デフォルトは、見つかった最初のテーブルに対してオブジェクトの配列です。
JSON をコピーまたはダウンロードする
JSON をクリップボードにコピーするか、.json ファイルとしてダウンロードできます。複数テーブル入力の場合、構造化モードが選択されていると、各テーブルが出力オブジェクトのトップレベルキーになります。
よくある質問
結合されたセルはどのように処理されますか？
`colspan` または `rowspan` を持つセルは、出現する位置に値を一度だけ出力し、スパンされた位置には空文字を出力します。結合されたセルが意味を持つテーブル（複数データ行にまたがるカテゴリなど）の場合、空の位置に前の非空の値を埋めるように出力を後処理してください。
テーブルが複数ある場合、最初のテーブルを選びますか？
はい。デフォルトでは入力内の最初の `<table>` 要素が出力の最初の項目になります。「すべてのテーブル」モードに切り替えると、ドキュメント内のすべてのテーブルが、インデックスまたは検出された見出しでキー付けされてキャプチャされます。
ヘッダー行のないテーブルではどうなりますか？
パーサーはまず `<thead>` を探し、次に `<th>` セルだけを含む行を探し、どれも存在しない場合は最初の `<tr>` をヘッダーとします。いずれも存在しない場合、配列の配列モードがより安全な出力です。キー付けするためのヘッダーがありません。
インラインスタイルとクラスを取り除きますか？
はい。セルのテキスト内容のみが抽出されます。インラインスタイル、クラス、ID、その他の属性は破棄されます。これらを保持する必要がある場合（例：スタイル対応の移行）、HTML-to-JSON 汎用抽出ツールが適しています。
ネストされたテーブルを扱えますか？
ネストされたテーブルはデフォルトではフラット化されます。内側のテーブルのテキストは、子オブジェクトまたはセルの値にシリアライズされた HTML 文字列になります。「ネストを保持」モードに切り替えると、内側のテーブルをセル内のネストされた JSON 配列として保持でき、複雑なデータエクスポートに便利です。
制限事項
- CSS ベースの抽出には非対応本ツールは HTML マークアップからのテーブル構造のみを読み取ります。CSS Grid や flexbox（テーブルのように見える意味的に `<div>` 要素）で構築されたテーブルは検出されません。基礎となるマークアップを貼り付けるか、レイアウトを実際の `<table>` に変換してください。
- 画像抽出には非対応画像セルは alt テキストに変換され、alt がない場合は空文字列になります。チャートやサムネイルを含むテーブルで画像データが必要な場合は、画像処理に対応したツールで出力を後処理してください。
- エンコーディングの前提が 1 つパーサーは UTF-8 入力を前提としています。Latin-1 や Windows-1252 として提供された HTML ページは文字化けを起こす可能性があります。ソースに文字の破損が見られる場合は、文字セット検出ツールを先に通してください。
プラットフォーム別の注意点
- macOS
- Safari のリーダービューはテーブルの内容を抽出しますが、構造を失います。ブラウザツールは、メール、CMS エクスポート、スクレイピングしたページからコピーした HTML テーブルで、構造をパース可能な JSON にする必要がある場合に適しています。
- Windows
- Microsoft Edge の「PDF として保存」や「PDF に印刷」はテーブルのセマンティクスを失います。ブラウザツールは、メールや CMS エクスポートの HTML がソースで、データパイプライン用の JSON ファイルが目的の場合に適しています。
- Linux
- コマンドラインで作業する場合は、`python3 -c 'from bs4 import BeautifulSoup; ...'` が抽出を行います。ブラウザツールは、チャットやメール、ドキュメンテーションページから貼り付けた HTML を Python に入力し直すのが現実的でない場合に適しています。
- Web
- 完全にクライアントサイドで動作します。ページの読み込み後はオフラインでも動作します。コマンドラインツールや Python が利用できない制限のある環境でアドホック抽出を行うのに便利です。