SingleFile というツールを知ったので少し試してみました.SingleFile はウェブブラウザのエクステンションやコマンドで動作するウェブページを1つのファイルとして保存するものです.
通常,Google ChromeやFirefoxなどでウェブページを保存すると.htmlファイルの他に加増などのファイルも保存されてたくさんのファイルになります.(Operaや)Vicaldiの保存時には,「Webpage, Single File」というオプションで単一のファイルに保存できて便利なのですが,これは電子メールなどでよく使われるマルチパート形式なので開けるアプリケーションが限られます(Vicaldiやメールクライアントなど)
$ 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に導入しました.
そして適当な画像の含まれた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
- 適当な外像の含まれたhtmlファイルを作成
- 画像は別ファイルを参照している
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でも閲覧できました.
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