画像つきHTMLフ 画像つきHTMLフ ァイルを1ファイ ァイルを1ファイ ルで共有 ルで共有 Kenichiro Matohara(matoken) 1 / 26

南隅から参加(鹿児島の右下) 好きなLinuxディストリビューションはDebian お仕事募集 mailto:work＠matohara.org Kenichiro Matohara(matoken) Kenichiro Matohara(matoken) https://matoken.org https://matoken.org 2 / 26

最近 最近 四十肩が慢性的になってる感じであれ tor relay nodeを起動(ドイツ80Mbps，日本80Mbps，日本0.3Mbps) TwitterフロントエンドのNitterをonion siteでも公開 🧅の話は多分明後日の鹿児島らぐで http://nitter2l2szql27s7siskdgvtr4sgeq43x7jodtqmltxur3kioycnjid.onion/ 3 / 26

LinuxでVRChat LinuxでVRChat 先月のここの夜の部でVRChatで小江戸に VRChatは最近のマシンだとLinux版SteamでもProton経由で動作する 少し古いマシンは最近Protonの対応がいまいちな感じ Intel Core iの3世代，6世代のiGPUではProton(3〜experimental)で VRChathは動作しない? Wine経由でWindows版Steamを導入してVRChatが動作するのを確認 LutrisやBottolesを使うとお手軽 Bottlesは最近Lutrisみたいなインストーラ(まだ数は少ない)が使え るようになり便利に 4 / 26

今回試した環境 今回試した環境 Lenovo ThinkPad Yoga 260(CPU: Intel Core i5-6200U, RAM: 8GB + swap 10GB, SSD: 128GB) Flatpak版Bottles 2022.2.14-trento Gamingボトル + インストーラーでSteamを導入後Steam上で VRChat導入 5 / 26

動作 動作 Desktopモードで起動(VRは環境がないので未確認) チュートリアルのワールドでアスレチックなどは特に問題無く動 き回れるしサウンド周りもOK 20fps前後 30分しないうちに酔った 常駐するのは辛いが，軽いワールドでのイベントに参加して話聞 くくらいならどうにかという感じ? 6 / 26

7 / 26

8 / 26

なお，小江戸ワールドはワールドデータダウンロード後の読み込み 中にメモリ不足の警告後落ちるorz 9 / 26

ウェブページの保存方法 ウェブページの保存方法 ウェブブラウザで保存時にいくつかのオプション「完全，HTMLの み，テキストファイル，単一ファイル」 「完全」だとほぼすべてのファイルが保存されるが，たくさんの ファイルが保存されて扱いが面倒，アーカイバを使うと閲覧が面 倒 Opera/Vivaldi等で利用できる「単一ファイル」 htmlメール等と同じMIME形式．1ファイルで便利だが開けるア プリケーションが少ない(Opera/Vivaldi/MUA等) 印刷でpdf保存 ほぼ見た目通りに保存できて便利．アニメーションgifなどは静 止画に．少し重い．閲覧時に解像度が合わないと見づらい 10 / 26

Chromiumで完全で保存したとき Chromiumで完全で保存したとき の例 の例 $ ls matoken\ \(@matoken1\)\ _\ nitter* 'matoken (@matoken1) _ nitter.html' 'matoken (@matoken1) _ nitter_files': fontello.css 'media_FNkcBz-aMAQyKcb.jpg_name=small' hls.light.min.js 'media_FNkcS5YaQAoxAJ7.jpg_name=small' hlsPlayback.js 'media_FNkcSfBagAYoKmj.jpg_name=small' infiniteScroll.js 'media_FNoFO5aacAUryLG.jpg_name=small' logo.png 'media_FNpg8sJVgAMMpWh.jpg_name=small' 'media_FM2QtkiVUAERh6_.jpg_name=small' 'media_FNpg9NRUYAMkkG_.jpg_name=small' 'media_FM7cI-pagAEAOsW.jpg_name=small' 'media_FNpq1QWUYAAEJSV.jpg_name=small' 'media_FMxo4DWagAY1YwX.jpg_name=small' 'media_FNpq2BcVcAMQSp_.jpg_name=small' 'media_FMzEb4iVQAIaIqQ.png_name=small' 'media_FNuodpOVQAUzgW7.jpg_name=small' 'media_FNFs11AaAAMSpzY.jpg_name=small' 'media_FNuoeRfVIAUbPMK.jpg_name=small' 'media_FNQgyx7VgAQD3Ef.jpg_name=small' 'media_FNuoez4UcAUXTFF.jpg_name=small' 'media_FNVB5FlagAMvfH0.png_name=small' 'media_FNuwOczUcAAjlYQ.jpg_name=small' 'media_FNVRlW7aAAAeJ_n.jpg_name=small' 'media_FNzG1mYaAAAKJ2n.jpg_name=small' 'media_FNaL8L-VQAEWVbI.jpg_name=small' nitter.css 'media_FNaV6VYaQAEtoo0.jpg_name=small' pbs.twimg.com_profile_images_1347989841099649024_F99W 'media_FNezFC0akAkRvT2.jpg_name=small' profile_images_1347989841099649024_F99WcItH_bigger.jpg 'media_FNk4rPiaQAg6kSa.jpg_name=small' style.css 11 / 26

Vivaldiでの単一ファイル保存時 Vivaldiでの単一ファイル保存時 の例 の例 $ head -20 Kenichiro\ MATOHARA\ \(@matoken\)\ on\ Speaker\ Deck.html From: 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: Content-Transfer-Encoding: quoted-printable Content-Location: https://speakerdeck.com/matoken =20 Kenichiro MATOHARA (@matoken) on Speaker Deck 12 / 26

SingleFile SingleFile Data URIを使ってHTMLファイル中に画像を埋め込んで保存する拡 張機能/UserScript/CLIのアプリケーション 画像等も1つのhtmlファイル内に埋め込まれるので便利 ウェブブラウザがあれば開ける textなのでpastbinサービスに貼り付けることも  既定値ではJavaScriptや動画，音声は埋め込まないようになっ ている 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 13 / 26

Data URI スキーム Data URI スキーム htmlファイル中にデータをbase64形式に変換してそのまま埋め込ん でしまう． dilloやw3m-imgでも(画像は)対応している 例えば AsciiDoc ファイルをAsciiDoctorで -a data-uri を指定して html書き出し $ asciidoctor -a data-uri -b html --no-header-footer -o - ./DOCUMENT.AsciiDoc | grep \

SingleFile拡張機能版を試してみ SingleFile拡張機能版を試してみ る る Chrome系，Firefox系，Edgeがある Chrome: Firefox: Microsoft Edge: https://chrome.google.com/extensions/detail/mpiodijhokgodhhofbcjdecpffjipk https://addons.mozilla.org/firefox/addon/single-file https://microsoftedge.microsoft.com/addons/detail/efnbkdcfmcmnhlkaijjjmhjjg 15 / 26

今回はFirefoxに導入 今回はFirefoxに導入 適当な画像の含まれたhtmlファイルを作ってFirefoxで開き， SimpleFileのアイコンをクリックして保存してそのファイルを確認す るとdata URI形式に変換されている． 1 適当な画像の含まれたhtmlファイルを作成 2 画像は別ファイルを参照している 1 画像がData URI になっている $ echo '= test page > > image:https://nitter.matoken.org/pic/profile_images%2F1347989841099649024%2FF99WcItH_bigger. > ' > sample.adoc $ asciidoc -b html ./sample.adoc $ grep \

DATA Uriの画像はw3mやdilloで DATA Uriの画像はw3mやdilloで も開ける も開ける 17 / 26

SingleFile CLI版 SingleFile CLI版 Node.js製依存関係の解決に失敗したのでとりあえずDockerで試した optionたくさんあるので好みのものを SingleFile/README.MD at master · gildas-lormeau/SingleFile $ docker pull capsulecode/singlefile $ docker tag capsulecode/singlefile singlefile $ docker image ls singlefile REPOSITORY TAG IMAGE ID CREATED SIZE singlefile latest 36fda8dcb810 4 months ago 755MB $ docker run singlefile --help | wc -l 74 $ docker run singlefile "https://nitter.matoken.org/matoken1/media" > /tmp/SingleFile.html 18 / 26

時間が掛かる? 時間が掛かる? 1 普通に保存で58秒ほど 2 help表示で13秒ほど 3 回線がボトルネックかもとローカルに保存してローカルサーバ 経由で47秒ほど $ time docker run singlefile https://github.com/gildas-lormeau/SingleFile/ > /tmp/singlefile-t real 0m58.279s user 0m0.018s sys 0m0.049s $ time docker run singlefile --help > /dev/null real 0m13.072s user 0m0.088s sys 0m0.146s $ time docker run singlefile http://172.17.0.1:8000/gildas-lormeau_SingleFile_%20Web%20Extensi real 0m47.339s user 0m0.059s sys 0m0.110s 2 19 / 26

SingleFileZ SingleFileZ SingleFileのデメリットとしてbase64でデコードするのでデータ量が 増えてしまう． SingleFileZはzip圧縮htmlを作成する Chrome版拡張機能については らしいの で注意  展開にはSingleFileZと設定が必要で開く環境を選ぶので注意 gildas-lormeau/SingleFileZ: Web Extension for Firefox/MS Edge and CLI tool to save a faithful copy of an entire web page in a self-extracting HTML/ZIP polyglot file 2023年1月に動作しなくなる 20 / 26

Error: Cannot open the page from the filesystem. Chrome: Install SingleFileZ and enable the option "Allow access to file URLs" in the details page of the extension (chrome://extensions/? id=offkdfbbigofcgdokjemgjpdockaafjg). Otherwise, start the browser with the switch "--allow-file-access-from- files". Microsoft Edge: Install SingleFileZ and enable the option "Allow access to file URLs" in the details page of the extension (edge://extensions/? id=gofneaifncimeglaecpnanbnmnpfjekk). Otherwise, start the browser with the switch "--allow-file-access- from-files". Safari: Select "Disable Local File Restrictions" in the "Develop" menu. 21 / 26

容量の比較 容量の比較 表 1. を変換 容量 ファイル数 完全 1056kB 35 SingleFile 952kB 1 SingleFile + xz 660kB 1 SingleFile + zip 668kB 1 SingleFileZ 720kB 1 pdf 1212kB 1 https://nitter.matoken.org/matoken1/media 22 / 26

SingleFile利用例 SingleFile利用例 Discordのtextchatをバックアップ exportされるのはhtmlだけなのでSingleFileで画像を読み込み&変 換してバックアップ Reveavl.jsのスライドを単一htmlで公開 $URL?print-pdf で開いた状態でSingleFile利用するとJavaScript 不要 23 / 26

以前試したもの 以前試したもの InternetArchive alternative 指定URLやURL群，RSS等から様々な形式でウェブやビデオやgit などをバックアップ オンラインブックマークやウェブブラウザの履歴を自動的に保 存したり，特定のURLを毎日保存したり Joplin( ) Evernote alternative ウェブブラウザからウェブページや指定部分を保存 Joplinが重い(CLI版あるけどWebClipper使えない) ArchiveBox (鹿児島らぐ 2020.07) https://joplinapp.org/ 24 / 26

まとめ まとめ SingleFileでウェブを保存すると人と共有するのに便利 pdf変わりにも使えそう 自分用アーカイブだとJoplin WebClipperのほうが? CLIで自動化も 25 / 26

奥付 奥付 発表 発表者 利用ソフトウェア ライセンス CC BY-NC-SA 4.0 小江戸らぐ 3月のオフな集まり(第236回) Kenichiro Matohara(matoken) Asciidoctor Reveal.js 26 / 26