Creative Engineer Portfolio

Web Page Archiver / Bundler

指定したURLからHTML、スタイルシート、画像、フォントをすべてBase64エンコードし、オフライン動作する単一HTMLファイルにコンパイルします。

アーカイブ設定オプション

アーカイブ結果

💾

URLを入力して「保存する」ボタンを押すと、すべてのスタイル・画像をカプセル化したHTMLアーカイブを自動コンパイルします。

技術解説:Webアーカイブ・バンドラーの仕組み

通常のブラウザの「Webページを保存」では、HTMLとは別に「_files」などの関連フォルダが作成され、ファイル数が増大したり、絶対パス・相対パスの崩れによりオフラインで画像やスタイルが読み込めなくなる現象が多発します。

本ツールは、サーバーサイドで以下の処理を実行し、単一のファイルとしてまとめ上げます。

  • CSS/スタイルシートのインライン化: 外部に定義されているすべてのCSSファイルをフェッチし、HTML内部の <style> タグに埋め込みます。
  • 画像およびフォントのBase64エンコード: 画像(<img> やCSS背景画像)やカスタムフォントファイルをバイナリデータとしてロードし、data:image/png;base64,... というテキスト(Data URI)に置換します。これにより、インターネット接続がない環境でも画像が即座にレンダリングされます。
  • 相対URLの絶対URL化: アンカーリンクの相対パスをフェッチ時点の絶対URLにマッピングし直すため、アーカイブされたページから外部記事へのリンク遷移が保たれます。

※ アーカイブはサーバーのIPアドレスよりアクセスして取得されるため、IP制限やログイン情報が必要な会員限定ページ等はアーカイブできません。また、著作権や利用規約を遵守した上で、個人での学習・備忘録用途等にご利用ください。