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

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

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

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

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

今回試した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に導入しました.

firefox singlefile

そして適当な画像の含まれた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)
<img src="https://nitter.matoken.org/pic/profile_images%2F1347989841099649024%2FF99WcItH_bigger.jpg" alt="https://nitter.matoken.org/pic/profile_images%2F1347989841099649024%2FF99WcItH_bigger.jpg" />
$ firefox ./sample.html
  1. 適当な外像の含まれたhtmlファイルを作成
  2. 画像は別ファイルを参照している

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

$ grep \<img test\ page\ \(2022_3_4\ 22_56_30\).html | dd count=1 bs=128 2>/dev/null;echo
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gKgSUNDX1BST0ZJTEUAAQEAAAKQbGNtcwQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAA

w3mでも閲覧できました.

w3m dataURI

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
Release:        unstable
$ arch
x86_64

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Find out more about Webmentions.)