HTMLを加工して魚拓ファイルとして保存する方法

このガイドが役立つ場面

「HTMLを魚拓として保存」「WebページのHTMLをオフライン保存」「JavaScriptを削除してHTMLファイル化」と検索する用途に、静的保存の範囲と制限を説明します。

• 自分で用意したHTMLコードを日時・元URL付きの魚拓ファイルへ加工したい
• 保存済み.htmlファイルからJavaScriptや外部リンクを無効化したい
• CORSが許可されたURLのHTMLを取得し、相対URLを絶対URLへ変換したい

URL取得に制限がある理由

ブラウザから別サイトのHTMLを取得できるのは、対象サイトがCORSで許可している場合だけです。取得できない場合は、ブラウザでページのソースを保存し、HTMLファイルとして読み込みます。

魚拓HTMLを作る手順

1. HTMLを貼り付けるか、.htmlまたは.htmファイルを読み込みます。
2. 魚拓タイトル、取得元URL、保存ファイル名を入力します。
3. 保存日時、元URL、JavaScript削除、外部リンク無効化を選びます。
4. PC幅とスマートフォン幅でプレビューし、問題がなければダウンロードします。

保存後も外部資源は変化する

• 外部CSS、画像、Webフォントは元サイトの削除で表示できなくなる
• JavaScript実行後に生成された内容は元HTMLだけでは保存されない
• iframe内の別ドメインページは取得されない
• ログイン状態や個人情報を含むHTMLの扱いに注意する

保存するページの著作権と利用規約を確認し、第三者へ公開する場合は権利や個人情報にも配慮してください。

具体例：受け取ったHTMLを安全な確認用コピーにする

HTMLファイルを読み込み、保存日時と元URLを設定します。初期状態のJavaScript削除を有効にし、script要素、イベント属性、javascript: URL、自動リダイレクトを除去します。

画像やCSSは外部URLを参照したままの場合があります。魚拓HTMLだけで将来も完全再現できるわけではないため、保存後にネットワークを切った状態でも確認します。

1. HTMLコード、HTMLファイル、CORS対応URLのいずれかから内容を読み込みます。
2. 魚拓タイトル、元URL、保存日時、ファイル名を設定します。
3. JavaScript削除と外部リンク無効化の設定を確認します。
4. PC幅・スマートフォン幅でプレビューし、保存したHTMLを再度開いて確認します。

URLだけで任意サイトを完全保存するツールではありません。ログイン後DOM、JavaScript実行結果、別ドメインiframe、外部資源の完全保存には対応しません。

よくある質問

URLを入力しても取得できないのはなぜですか？

対象サイトがブラウザからのCORS取得を許可していない可能性があります。ページソースをHTMLファイルとして保存して読み込んでください。

保存した魚拓は将来も同じ見た目になりますか？

外部画像、CSS、フォントが削除・変更されると見た目も変わります。完全な長期保存が必要な場合は専用アーカイブ手段を検討してください。