HTMLをBrowser内で加工して安全にPreviewする
HTMLコードまたは1件のHTMLファイルを読み込み、元URL、JavaScript、Linkの扱いを設定して、sandbox付きPreviewを確認してから.htmlとして保存できます。
HTML魚拓作成・保存ツールを開く結論：目的に合うHTMLを用意し、Previewと外部参照を確認してから保存する
静的なPageならPage sourceまたは保存済みHTML Fileを利用できます。JavaScriptで内容が追加されるPageは、初期HTMLではなく実行後DOMを取得する必要があります。
現行DevelopToolsはResource crawlerではありません。HTML内のURLを整えますが、CSS・画像・Fontを1ファイルへ収集しません。
「保存できた」と「将来も同じ見た目で完全再現できる」は別の判定です。
保存対象をHTMLソース・現在DOM・ページ完全保存に分ける
| 方式 | 保存するもの | 残りやすいもの | 別途必要なもの |
|---|---|---|---|
| HTMLソース保存 | サーバーが返したHTML文字列 | 静的なタグ・属性・本文 | JavaScript実行後に追加された内容 |
| 現在DOM保存 | ブラウザが構築・更新したDOMの直列化 | SPAが追加した要素 | Canvas画素、閉じたShadow DOM、すべての実行状態 |
| ページ完全保存 | HTMLと参照Resource一式 | CSS・画像・Font等を収集できた範囲 | CORS・認証・動的通信・権利上の確認 |
「HTMLを保存した」は、外部CSS、画像、Font、動画、iframe先までファイル内へ入ったことを意味しません。まず何を後から確認したいかを決め、保存方式と不足情報を記録します。
保存前に目的と入力元を決める
本文・構造を残すのか、画面の見た目を残すのか、操作後の状態を残すのかで方法が変わります。
原本URL、取得日時、Browser、Login状態、JavaScript実行有無も作業記録へ残すと再確認しやすくなります。
| 確認項目 | 確認方法 | 判断 |
|---|---|---|
| 本文とTag | HTMLソースを表示して確認 | 静的Sourceで足りる |
| 操作後のContent | DOM inspectorで確認 | 現在DOMが必要 |
| 見た目だけ | Screenshot/PDFと比較 | HTML以外も候補 |
| Offline再現 | Networkを切って確認 | 外部Resource収集が必要 |
HTML魚拓を作る基本手順
- 保存対象のHTMLソースまたはHTMLファイルを用意します。
- 元URLを入力し、相対URLの基準とMetadataを設定します。
- JavaScript削除を有効にし、必要なら外部Linkを無効化します。
- PC幅・Smartphone幅でPreviewし、本文・画像・Linkを確認します。
- 別名でDownloadし、再度開いてNetwork依存を確認します。
CORSでURL取得できない場合は失敗ではなく、貼り付けまたはFile読込へ切り替えます。
保存方式を目的別に選ぶ
| 目的 | 第一候補 |
|---|---|
| Tagと本文を調査 | HTMLソース |
| SPAの表示後Content | 現在DOM |
| 見た目の記録 | ScreenshotまたはPDF |
| Offlineで近く再現 | Resourceを含む専用保存方式 |
| 改ざん耐性が必要 | 信頼できるArchive・Timestamp基盤 |
外部Resourceと相対URLを保存前に確認する
| 記述 | HTML単体に含まれるか | 確認点 |
|---|---|---|
| <link rel="stylesheet" href="/app.css"> | 含まれない | 元Serverへ接続できるか、CSS内url()も解決できるか |
| <img src="../images/a.png"> | 含まれない | 元URL基準で絶対URLへ変換されているか |
| <img src="data:image/png;base64,..."> | 含まれる | 容量増加、MIME type、生成元の権利を確認 |
| <canvas> | 描画命令・Bitmapは通常含まれない | 必要なら同一Origin条件で画像化する別工程が必要 |
| blob: URL | 実体は含まれない | 作成元Pageの寿命を越えて利用できない |
絶対URL化やbase要素の追加は参照先を直す処理であり、Resource本体をHTMLへ埋め込む処理ではありません。元ServerからResourceが削除されると、保存HTMLの見た目も変わる可能性があります。
DevelopToolsでできること・できないこと
| 項目 | 現行ツールの対応 |
|---|---|
| 入力 | HTMLコード貼り付け、.html/.htm 1ファイル、CORSを許可したURLからの取得 |
| URL処理 | 元URLを基準にhref・src・srcset・poster・actionを絶対URL化し、必要ならbaseを追加 |
| 安全化 | 初期設定でscript、on*属性、javascript: URL、meta refreshを除去。リンク無効化は選択式 |
| Metadata | 魚拓Title、Local保存日時、元URLを本文先頭へ追加 |
| Preview | script権限を与えないsandbox付きiframeでPC幅・Smartphone幅を確認 |
| 出力 | DOCTYPEとUTF-8 metaを含むHTMLを、Windows禁止文字を置換したFile名でDownload |
| 未対応 | 閲覧中PageからのDOM直接取得、外部Resourceのinline化、ZIP、Canvas/Shadow DOM状態、完全Offline化 |
URL欄は任意サイトを回避取得するProxyではありません。取得先がCORSで許可しない場合は、HTMLソースまたは現在DOMを利用者自身で用意して貼り付けます。
保存HTMLは信頼できないActive Contentとして扱う
DOMParserでtext/htmlとして解析したDocumentは処理中は概ねinertですが、未加工NodeをActive DOMへ挿入すればevent handler等が動く可能性があります。parseしただけで安全になったとは判断できません。
- 初回はNetworkと機密Dataを切り離した環境で確認する
- script、onerror等のevent属性、javascript: URL、meta refreshを確認する
- iframe、object、embed、form、外部Resource、Download linkの遷移先を確認する
- Previewではallow-scriptsやallow-same-originを安易に付けずsandboxで隔離する
- 保存日時は利用端末のLocal時刻であり、改ざん耐性のあるTimestampや法的証拠ではない
仕様確認に使用した一次資料
- MDN: DOMParser.parseFromString()
- MDN: Element.outerHTML
- MDN: Same-origin policy
- MDN: iframe要素とsandbox
- MDN: base要素
- MDN: data URL
- MDN: ShadowRoot.getHTML()
- WHATWG HTML: HTML fragment serialization
CORS、sandbox、HTML直列化、Shadow DOM等はBrowser実装が更新されます。保存手順を固定する場合は対象Browserの対応状況と、利用時点のMDN・HTML Standardも確認してください。
具体例：公開仕様PageのHTMLを日付付きで保存する
静的な仕様PageのSourceを保存し、取得元URLと保存日時を魚拓上部へ記録します。
本文とLink構造は残りますが、外部CSSと画像は元Serverへ接続するため、Offline確認結果も記録します。
- Page sourceをUTF-8でCopy
- DevelopToolsへ貼り付け
- 元URLとTitleを入力
- 安全Previewを確認
- archive日付付きFile名で保存
第三者Pageを保存・共有する場合は著作権、利用規約、個人情報を確認してください。
よくある質問
- URLを入力すれば、どのWebページでも保存できますか？
- できません。Browserのcross-origin readは取得先ServerのCORS許可に依存します。許可されない場合はHTMLソース保存、現在DOMのコピー、保存済みHTMLファイルの読込へ切り替えます。
- 生成したHTMLは完全なオフライン保存ですか？
- いいえ。現行ツールは外部CSS、画像、Font、動画等をファイル内へ埋め込みません。絶対URLへ変換しても参照先Serverへの通信は残ります。
- 入力したHTMLはDevelopToolsへ送信されますか？
- 貼り付け・File読込・加工・DownloadはBrowser内で処理します。URL取得を実行した場合だけ、利用者のBrowserから入力した取得先URLへ直接通信します。