SingleFile を使ってウェブサイトを1つのファイルで保存する

SingleFile というツールを知ったので少し試してみました．SingleFile はウェブブラウザのエクステンションやコマンドで動作するウェブページを1つのファイルとして保存するものです．

GitHub – gildas-lormeau/SingleFile: Web Extension for Firefox/Chrome/MS Edge and CLI tool to save a faithful copy of an entire web page in a single HTML file

通常，Google ChromeやFirefoxなどでウェブページを保存すると.htmlファイルの他に加増などのファイルも保存されてたくさんのファイルになります．(Operaや)Vicaldiの保存時には，「Webpage, Single File」というオプションで単一のファイルに保存できて便利なのですが，これは電子メールなどでよく使われるマルチパート形式なので開けるアプリケーションが限られます(Vicaldiやメールクライアントなど)

VivaldiのSingle Fileで保存したファイルの例

$ head -20 Kenichiro\ MATOHARA\ \(@matoken\)\ on\ Speaker\ Deck.html
From: <Saved by Blink>
Snapshot-Content-Location: https://speakerdeck.com/matoken
Subject: Kenichiro MATOHARA (@matoken) on Speaker Deck
Date: Thu, 4 Mar 2022 12:14:42 -0000
MIME-Version: 1.0
Content-Type: multipart/related;
type="text/html";
boundary="----MultipartBoundary--bKIA37ggaBaZ6Ekc3F9C7ZVuwXuByQUfZtvGrUlpck----"

------MultipartBoundary--bKIA37ggaBaZ6Ekc3F9C7ZVuwXuByQUfZtvGrUlpck----
Content-Type: text/html
Content-ID: <frame-CAC4A4874F6CD6B8AD80F1CB5473647C@mhtml.blink>
Content-Transfer-Encoding: quoted-printable
Content-Location: https://speakerdeck.com/matoken

<meta http-equiv=3D"Content-Type" co=
ntent=3D"text/html; charset=3DUTF-8">
=20
Kenichiro MATOHARA (@matoken) on Speaker Deck

今回試したSingleFileは画像などの外部ファイルをdata URLでhtml内に埋め込むことで1つのファイルにしているようです．この場合実際の画像のimgタグの中にdata URL形式でコンテンツを埋め込むので少しわかりやすいし，最近のウェブブラウザなら対応しているのでかんたんに開けます．

実はこのページも asciidoc -a data-uri で埋め込んでいたりします．デメリットはデータ量が大きくなる(data URL形式でデータが大きくなる他にも同じ画像を2回表示したい場合data URLはそれぞれ埋め込む必要があるので2倍になる)，レガシーなウェブブラウザでdata URL部分が解釈できないなどでしょうか．

SingleFileはウェブラウザの拡張機能，CLI版，UserScript版があるようです．今回は拡張機能版を試してみました．

SingleFileの拡張機能は，FIrefox, Google Chrome系，Microsoft Edgeで動作するようです．自分の環境に合うものを導入しましょう．

Firefox: https://addons.mozilla.org/firefox/addon/single-file

Chrome: https://chrome.google.com/extensions/detail/mpiodijhokgodhhofbcjdecpffjipkle

Microsoft Edge: https://microsoftedge.microsoft.com/addons/detail/efnbkdcfmcmnhlkaijjjmhjjgladedno

今回はFirefoxに導入しました．

そして適当な画像の含まれたhtmlファイルを作ってFirefoxで開き，

$ echo '= test page
>
> image:https://nitter.matoken.org/pic/profile_images%2F1347989841099649024%2FF99WcItH_bigger.jpg[]
> ' > sample.adoc
$ asciidoc -b html ./sample.adoc (1)
$ grep \<img ./sample.html (2)

$ firefox ./sample.html

適当な外像の含まれたhtmlファイルを作成

画像は別ファイルを参照している

SimpleFileのアイコンをクリックして保存してそのファイルを確認するとdata URL形式に変換されていました．

$ grep \ /dev/null;echo
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gKgSUNDX1BST0ZJTEUAAQEAAAKQbGNtcwQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAA

w3mでも閲覧できました．

pdfの代わりにも使えるかもしれないですね．

環境

$ w3m -dump https://addons.mozilla.org/ja/firefox/addon/single-file/ | grep -i バージョン -A1 -m1
バージョン
1.19.32
$ dpkg-query -W firefox w3m
firefox 96.0.3-1
w3m 0.5.3+git20210102-6
$ lsb_release -dr
Description: Debian GNU/Linux bookworm/sid