SingleFileの使い方｜ページを1つのHTMLで残す
「フォルダに画像とHTMLが散らばって、どれが本体か分からない」「保存したはずのページを開いたら、レイアウトが崩れていた」。
Webページを手元に残そうとして、こう感じたことはないでしょうか。ブラウザの「名前を付けて保存」は、HTMLファイルと同じ名前のフォルダを一緒に作ります。ファイルが2つに分かれるため、片方を移動しただけで表示が壊れます。
しかし、ページ全体を1つのファイルに畳んでしまう方法があります。SingleFile という拡張機能です。
この記事では、SingleFile の使い方と、1つのHTMLで残す方式が得意なこと・苦手なことを整理します。「保存したページを、あとで確実に開きたい」人に向けて書きました。読み終えると、自分の目的にこの方式が合うかどうかを判断できます。
SingleFileの使い方
SingleFile は、公式のREADMEで「完全なWebページを1つのHTMLファイルに保存する」と説明されている拡張機能です。手順は3つだけです。
- 拡張機能をブラウザに追加します。
- 残したいページを開きます。
- ツールバーのアイコンをクリックします。
これだけで、.html ファイルが1つダウンロードされます。フォルダは作られません。保存したファイルをダブルクリックすれば、ブラウザで開けます。
対応しているブラウザは公式READMEに列挙されており、Chrome・Firefox（デスクトップとモバイル）・Microsoft Edge・Safari・Vivaldi・Brave・Waterfox・Yandex・Opera が挙げられています。ライセンスは AGPL で、第三者のコードに由来する部分は MIT とされています。無料で使えます。
保存の細かい挙動は設定で変えられますが、まずは既定のまま1回試して、開き直せることを確かめるのが早道です。
何が1つのファイルに入るのか
「1つのファイル」と聞くと、テキストだけが残るように思えるかもしれません。実際は違います。
公式READMEによれば、SingleFile は HTML と スタイルを圧縮し、使われていないCSSを取り除いたうえで、画像などのバイナリを埋め込みます。つまり見た目を作っている材料ごと、1つのファイルに畳み込みます。
| 保存の方法 | できるファイル | 移動したとき |
|---|---|---|
| ブラウザの「名前を付けて保存」 | HTML＋同名フォルダ | 片方だけ動かすと崩れる |
| SingleFile | HTMLファイル1つ | そのまま動かせる |
ファイルが1つで完結していることが、この方式のいちばんの利点です。メールに添付する、別のパソコンへ移す、外付けドライブに置く——どれも1ファイルを動かすだけで済みます。
HTMLで残す方式が苦手なこと
一方で、この方式にも向かない場面があります。
- 動きのある要素：動画や埋め込み枠は、保存後に再生できないことがあります。中身が別のサーバーにあるためです
- ログインが必要なページ：表示できていれば保存できますが、開いたあとに再度読み込みが走る作りのページでは、内容が入らないことがあります
- 保存したことの記録：いつ保存したか、どのURLだったかは、ファイル名や自分のメモで管理することになります
3つ目は地味ですが、あとから効いてきます。保存が10件を超えたあたりから、「これはいつのページか」が分からなくなります。ファイル名に日付を入れる、フォルダを月ごとに分けるなど、自分で決まりを作っておくと後が楽です。
注意
保存したファイルは、開くたびに元のページを見に行くわけではありません。元のページが更新されても、手元のファイルは保存した時点のままです。これは利点でもあり、注意点でもあります。
画像だけで残す方法との違い
Webページを残す方法は、大きく2つに分かれます。見た目を画像として残すか、中身をファイルとして残すかです。
SingleFile は後者で、ページを構成しているものを1ファイルに畳みます。テキストは文字として残るので、開いたあとにブラウザの検索機能で語を探せます。
これに対して、画面をそのまま撮る方式は、見た目の再現に強い代わりに、残るのは画像です。画像として残したものは、あとから文字で探せません。10枚なら目で追えますが、100枚になると「どれだったか」を思い出せなくなります。
どちらが良いという話ではなく、あとで何をしたいかで分かれます。読み返すだけなら画像で足ります。引用元として使う、記録として残すなら、文字が残る方式が向いています。
目的で選ぶ
ここまでを、目的の側から整理します。
- 1ファイルで持ち運びたい → SingleFile のような、1つのHTMLにまとめる方式
- 見た目をそのまま残したい → 画面を画像として撮る方式
- いつ・どのURLを残したかも一緒に管理したい → 保存の記録を持つ道具
3つ目について補足します。ArchiveSeal は、画面の見た目をそのまま画像として残し、あわせてページの本文テキスト・URL・保存日時を取得して残す方式です。印刷用の再レイアウトを介さないため、崩れが起きにくくなります。残した PDF のヘッダーには URL と日時が入ります。動画や埋め込み枠は空白になります。
基本の保存・グループ整理・画像 PDF（A4 縮小）の出力と、保存したページの本文の閲覧は無料で使えます。Pro 版では、ページの HTML を保存して管理画面で元のまま開いて閲覧（オフライン可）／保存した HTML を1つのファイルとしてダウンロード／範囲を指定して PDF 出力（テキスト検索に対応）／PDF の連結・一括・A4 分割出力／PDF のテキスト検索対応ができます。
Pro の機能は 10 日間無料で試せます。登録も決済情報の入力も不要で、期間が終わると自動的に Free に戻ります。
保存の手段は1つに絞らなくてかまいません。用途ごとの向き不向きはWebページ保存ツールの比較・選び方で並べて整理しています。
SingleFileは無料で使えますか？
公式のREADMEによれば、ライセンスはAGPLで、第三者のコードに由来する部分はMITとされています。ブラウザの公式ストアから無料で入手できます。商用のサービスや製品での利用については、作者が問い合わせを受け付けている旨がREADMEに書かれています。
保存したHTMLファイルは、オフラインでも開けますか？
開けます。画像などの材料がファイルの中に埋め込まれているため、インターネットに接続していなくても、保存した時点の見た目で表示できます。ただし動画や埋め込み枠のように、中身が別のサーバーにある要素は再生できないことがあります。
保存したページの文字を検索できますか？
できます。テキストが文字として残るため、ファイルを開いたあとにブラウザの検索機能で語を探せます。画像として残す方式では、この探し方はできません。
ブラウザの「名前を付けて保存」と何が違いますか？
「名前を付けて保存」はHTMLファイルと同名のフォルダを作り、画像などをそのフォルダに置きます。片方だけを移動すると表示が崩れます。SingleFileはそれらを1つのHTMLファイルに埋め込むため、ファイルを1つ動かすだけで済みます。
保存したファイルは、元のページが更新されたら変わりますか？
変わりません。保存した時点の内容がそのまま残ります。最新の状態を見たい場合は、元のページを開き直すか、改めて保存し直すことになります。
まとめ
SingleFile は、ページを1つのHTMLファイルに畳んで残す拡張機能です。ファイルが分かれないため持ち運びやすく、テキストが文字として残るので、開いたあとに語を探せます。
苦手なのは、動きのある要素と、保存そのものの記録です。何をいつ残したかを管理したい場合は、その仕組みを持つ道具と組み合わせるか、自分でファイル名の決まりを作ることになります。
まずは1ページ保存して、開き直せることを確かめてみてください。