広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象(通称:ステマ規制)にならないよう配慮して記事を作成しています(記事はこちら、消す方法はこちら

【SingleFile】ウェブサイトを1つのHTMLとして保存する拡張機能

Chrome拡張機能

「SingleFile」拡張機能のアイコン画像

この記事では、ウェブサイトを単一のHTMLとして保存してくれるChrome拡張機能「SingleFile」について書きます。

画像やCSSのレイアウトも全て1つのファイルにまとめてくれます。後で見返す用に便利です。

【SingleFile】ウェブサイトを1つのHTMLとして保存する拡張機能

PC版「Google Chrome」のデフォルトの「名前を付けて保存」だと、HTMLファイルとは別で素材を保管する用のフォルダーが生成されてしまいます。

PC版「Chrome」で開いたページを「名前を付けて保存」する手順画像

HTMLファイルを移動すると自動的にフォルダーもセットで移動され、HTMLファイルを削除したら自動的にフォルダーも削除されますが、見た目上は2つある状態です。ちょっとごちゃごちゃします。

PC版「Chrome」で開いたページを名前を付けて保存した時に生成されたHTMLと素材フォルダー画像

ファイル保存時にファイルの種類を「ウェブページ、完全」ではなく「ウェブページ、1つのファイル」にすることでmhtmlファイルとして保存してくれます。

mhtmlだと1つのファイルにしてくれますが、画像を読み込んでくれなかったり、レイアウト(CSS)が崩れて元のページ通りには表示されないことが多いです。

PC版「Chrome」でウェブサイトをmhtmlで保存したけど一部レイアウトが崩れている画像

本記事で紹介する拡張機能を使って保存することで、1つのHTMLファイルにまとめてくれて、かつ画像やCSSのレイアウトもちゃんと維持してくれます。

独自の拡張子ではなく、画像などのデータを埋め込んだ状態のHTMLファイルで保存してくれるので、仮に本拡張機能を削除しても一度保存したHTMLファイルはいつでも完全な状態で見れます。

「今見ているサイトをまた後から見返したいなぁ~。いつサイトが見れなくなるか分からないからローカルに保存しておきたい!」って時に便利です。

リリース元:Gildas LormeauGitHubBluesky
記事執筆時のバージョン:1.22.81(2025年4月2日)

インストール方法

Chromeウェブストアからインストールできます。Edge版Safari版(iOS)もあります。

Firefoxをご利用の場合

Firefoxをご利用の方は、以下のFirefoxアドオンストアからインストールできます。Android版も用意されています。

「Firefoxへ追加」をクリックします。

「Chromeに追加」をクリックします。

「SingleFile」拡張機能をインストールする手順画像1

「拡張機能を追加」をクリックします。

「SingleFile」拡張機能をインストールする手順画像2

拡張機能のオーバーフローメニュー内に拡張機能ボタンが追加されればOKです。

使い方

HTMLファイルを保存

HTMLファイルとして保存したいウェブページを開きます。拡張機能インストール前に既に開いていた場合は一度ページをリロードします。

ウェブサイトの空いている場所を右クリック→「SingleFile」→「SingleFileでページを保存」をクリックします。

「SingleFile」拡張機能を使ってウェブサイトをHTMLで保存する手順画像
【ポイント】拡張機能アイコンクリックでもOK

右クリックメニューからではなく、拡張機能アイコンを左クリックしても実行できます。

「SingleFile」拡張機能をアイコンクリックから利用する手順画像

左下に進行状況が表示されるので終わるまで待ちます。

「SingleFile」拡張機能でウェブページを1つの完全HTMLファイルで保存している画像

ステップ3/3になればOKです。ウェブサイトによって差があると思いますが、大体30秒もあれば完了すると思います。

「SingleFile」拡張機能の保存完了画像

一つにまとめたHTMLファイルが保存されます。

「SingleFile」拡張機能で生成されたHTMLファイルがダウンロードされている画像

保存したHTMLを確認

ブラウザ既定の保存場所に保存されています。拡張子はhtml、名前は保存したサイトの名前+日時になっています。

本拡張機能の特徴として、HTMLファイルの容量が大きいです。

「SingleFile」拡張機能で保存したHTMLファイル画像

フォルダーを別途作成せず、レイアウトや画像などのデータを全て埋め込んでいるので、その分通常の方法で保存するより大きいです。まぁとはいえ、大きくても20MBとかのレベルで数百MBや何GBの話ではないので大したことはないと思います。

任意のブラウザで開いて確認します。ちゃんと配置も正しく、画像も全て読み込まれていました。

「SingleFile」拡張機能で保存したレイアウトや画像が正しく配置されているHTMLファイル画像

一度保存したらデータは全てHTMLファイルに保存されるので、拡張機能を後から削除したり、拡張機能を入れていないブラウザで開いたとしても壊れずに表示されます。

自動更新機能はないので保存した時点での情報です。

既存の方法で保存しちゃったHTMLを変換する手順

「拡張機能は最高だけど、もう本拡張機能を入れる前に通常の方法で保存しちゃったよ~~!一つにまとめられない?」って方のために紹介します。

拡張機能のオーバーフローメニュー内にある「SingleFile」の三点ボタン(⋮)→「オプション」をクリックします。

「SingleFile」拡張機能でオプションを開く手順画像

オプションダイアログを閉じて拡張機能のページにします。

「ファイルの URL へのアクセスを許可する」をクリックしてオンにします。

「SingleFile」拡張機能をローカルのHTML上でも使えるようにする手順画像

これでローカル上のファイルでも本拡張機能が使えるようになります。

既に通常の方法で保存しちゃったHTMLファイルを開いて、右クリック→「SingleFile」→「SingleFileでページを保存」をクリックします。

既に保存したローカルのHTML上で「SingleFile」拡張機能を使う手順画像

ちゃんと1つのHTMLファイルにまとめられます。

既に保存したローカルのHTMLファイルを「SingleFile」拡張機能で変換した画像

ただし、通常の「名前を付けて保存」で保存した時点で、一部画像やレイアウトが崩れている可能性があります。その場合はもう本拡張機能で変換してもそのままです。

もしそのページを再表示できる状態であれば再表示して拡張機能で保存するのが一番かなと思います。

僕の場合、ノートPCの購入完了画面をHTML保存したくて拡張機能導入前に通常の方法で保存していました。通常の方法だとやっぱり画像やレイアウトが一部崩れていました。

でもその画面を再表示するには全く同じオプションで同じPCを買わないと表示されないので、諦めて一部画像が欠落けつらくしているHTMLファイルを開いて本拡張機能で変換しました。

感想

以上、ウェブサイトをフォルダーで分けずに単一のHTMLとして保存してくれるChrome拡張機能「SingleFile」についてでした。

本音を言うと、ブラウザ側のファイル保存が優秀になったら拡張機能をわざわざ入れなくてもいいので丸く収まります。もしかしたら開発者ツール経由とかならできるのかもしれませんが。

Chrome拡張機能

Posted by ナポリタン寿司