Webページを「完全なページ」として保存すると、HTMLのほかに画像やCSSなどが入ったフォルダが作られることがあります。HTMLだけを別の場所へ移すと、画像が消えたり、レイアウトが崩れたりする場合があります。
Browser Kittyの「Offline Web Packager」は、手元に保存したHTML・ZIP・フォルダを調べ、対応する静的ページを1つのHTMLファイルにまとめるツールです。URLを貼り付けてサイトをダウンロードする機能はありません。元のファイル一式を用意してから使います。
「HTMLのみ」と「Webページ、完全」の違い
ブラウザにはHTML本体だけを保存する方法と、画像・スタイルシートなどを関連フォルダに保存する方法があります。Firefoxの「Web ページ、完全」は、HTMLのほかに表示に必要な画像などをフォルダへ保存します。「Web ページ、HTML のみ」は、画像を含めずHTMLを保存します。
後で1ファイルにまとめたい場合は、HTMLと関連ファイルがそろっている保存形式を選びます。保存メニューや形式の名前はブラウザによって異なります。既にHTMLと同名に近いフォルダが保存されているなら、両方を残してください。
HTMLと関連ファイルをそろえる
保存したHTMLが画像やCSSを参照している場合は、その参照先のファイルも必要です。画像が入ったフォルダだけを移動したり、フォルダ名を変えたりすると、HTMLから見つけられなくなることがあります。
Offline Web Packagerには、HTMLファイル、ZIPファイル、フォルダを読み込めます。複数のファイルやサブフォルダがあるときは、元の階層を保ってフォルダごと選ぶか、ZIPにまとめて読み込むと扱いやすくなります。
ツールへ読み込み、開始HTMLを選ぶ
Offline Web Packagerを開き、HTML・ZIP・フォルダのいずれかを追加します。パソコンではドラッグ＆ドロップでも読み込めます。読み込んだファイルはブラウザ内で解析され、元のHTMLやJavaScriptが解析中に実行されることはありません。
複数のHTMLファイルが入っている場合は、ツールが推定した「開始HTML」を確認します。たとえばトップページが`index.html`なら、そのファイルが選ばれているか見てください。別のHTMLから開きたい場合は選択を変更します。
変換できるかどうかの判定を確認する
解析が終わると「1つのHTMLにまとめられます」「確認が必要です」「このままでは1ファイルにできません」のいずれかが表示されます。「1つのHTMLにまとめられます」と表示された場合は、生成操作へ進めます。
「確認が必要です」は、ファイル名の大文字・小文字の違いなど、見直す項目がある状態です。「このままでは1ファイルにできません」は、必要なファイルが足りないか、対応していない仕組みが見つかった状態です。いずれの場合も「確認レポートを保存」で判定理由をテキストに残せます。
画像・CSSを埋め込めても、動的な機能は残らない場合がある
対応範囲の静的ページでは、ローカルのCSS、通常のJavaScript、画像、フォント、faviconなどをHTMLへ埋め込めます。CSSの`@import`や`url(...)`、画像の`srcset`などの参照も解析対象です。音声や動画もサイズ上限内の静的ファイルなら対象に含まれます。
一方、実行時に`fetch()`で別ファイルを読むページ、ES Modules、Web Worker、Service Worker、WASMの読み込み処理、ローカルiframeなどは自動変換しません。複数ページのサイトを1つのアプリへ統合する機能もありません。外部サイトにある画像やCSSをURLから自動取得することもできません。
1つのHTMLを作成して保存する
判定が「1つのHTMLにまとめられます」なら「1つのHTMLを作成」を選びます。生成後にもローカル参照やファイルの取り込み漏れを確認し、問題が残っているときは通常の保存を許可しません。完了したら「HTMLを保存」で端末へ保存します。
保存したHTMLを開き、画像・文字・レイアウトを確認してください。インターネット接続を切って開けば、オフラインでも必要な表示ができるか確かめられます。ただし、元のJavaScriptが外部通信を行う仕組みなら、生成したHTMLにもその依存が残る可能性があります。
ファイルサイズと安全性の注意
入力の上限は1ファイル50MB、合計100MB、最大2,000ファイルです。ZIPの展開方法やフォルダ選択はブラウザによって対応状況が異なります。サイズが大きいときやフォルダを選べないときは、入力方法を見直してください。
ツールへ追加したファイルはブラウザ内で処理され、変換のためにサーバーへアップロードされません。ただし、出力したHTMLの実行時の動作までは保証されません。知らない人から受け取ったHTMLを安全だと判定するためのツールではないので、内容が不明なファイルは慎重に扱ってください。
手順
- ブラウザのページ保存機能で、HTMLと画像・CSSなどの関連ファイルをそろえます。既に保存している場合は、フォルダ構成を変えずに用意します。
- Offline Web Packagerを開き、HTML・ZIP・フォルダを追加します。
- HTMLが複数ある場合は「開始HTML」を確認し、必要なら変更します。
- 解析結果を読みます。問題があれば内容を確認し、必要に応じて「確認レポートを保存」で記録します。
- 「1つのHTMLにまとめられます」と表示されたら「1つのHTMLを作成」を押します。
- 生成後の確認が終わったら「HTMLを保存」を選びます。
- 保存したHTMLを開き、可能ならネット接続を切って画像やレイアウトを確かめます。
Offline Web Packager
保存済みのHTMLやZIP、Webページのファイル一式を調べ、対応する静的ページを単体で開ける1つのHTMLファイルにまとめます。
注意点
- HTMLだけを保存して画像が欠けている場合、このツールは欠けた画像をWebから補いません。元の保存操作からやり直し、関連ファイルをそろえてください。
- 複数のHTMLが含まれるときは「開始HTML」を確認します。誤ったファイルから始めると、期待するページをまとめられません。
- 「確認が必要です」や「このままでは1ファイルにできません」と表示されたときは、判定理由を先に確認してください。
- 生成したHTMLを他人へ送る前に、埋め込まれた内容や元のスクリプトに問題がないか確認してください。変換できたことは安全性の証明にはなりません。
よくある質問
URLを貼り付けるだけでWebページを保存できますか？
できません。HTMLファイル、ZIP、フォルダとして保存済みのページ一式を読み込むツールです。外部URLからファイルを自動ダウンロードする機能はありません。
画像とCSSも1つのHTMLにまとめられますか？
対応範囲の静的ページなら、手元にそろっているローカル画像・CSS・フォントなどを埋め込めます。変換前と生成後の確認で、未解決の参照が残っていないか調べます。
作ったHTMLは必ずオフラインで動きますか？
必ず動くとは限りません。元のページがサーバーや外部APIに依存していると、その機能はオフラインで動かない場合があります。保存後にネット接続を切って確認してください。
ReactやVueのサイト全体を1ファイルにできますか？
ソースコードからのフレームワークビルドや複数ページの統合には対応していません。ES Modules、Worker、WASMローダーなども自動変換の対象外です。
読み込んだHTMLは外部へ送信されますか？
ツールに追加したHTMLや関連ファイルは端末のブラウザ内で解析・処理され、このツールから外部へアップロードされません。生成したHTMLを開いた後の通信は、そのHTML自身の内容によって異なります。
参考資料
- Mozilla Support ウェブページを保存する
- Offline Web Packager Offline Web Packager README（日本語）