画像つきHTMLファイルを1ファイルで共有

画像つきHTMLフ画像つきHTMLファイルを1ファイァイルを1ファイルで共有ルで共有 Kenichiro Matohara(matoken) <[email protected]> 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: <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: <[email protected]> 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> 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 \<img | d <p><span class="image"><img src="data:image/jpg;base64,/9j/4AAQSkZJRgABAQAAAQABA データ URL - HTTP | MDN 14 / 26

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 \<img ./sample.html <img src="https://nitter.matoken.org/pic/profile_images%2F1347989841099649024%2FF99WcItH_bigge $ firefox ./sample.html 1 2 $ 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/4gKgSUNDX1BST0ZJTEUAAQEAAAKQbGNtcw 1 16 / 26

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

画像つきHTMLファイルを1ファイルで共有

画像つきHTMLファイルを1ファイルで共有

Kenichiro MATOHARA

More Decks by Kenichiro MATOHARA

Other Decks in Technology

Featured

Transcript

画像つきHTMLフ画像つきHTMLファイルを1ファイァイルを1ファイルで共有ルで共有 Kenichiro Matohara(matoken) <[email protected]> 1

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

今回試した環境今回試した環境 Lenovo ThinkPad Yoga 260(CPU: Intel Core i5-6200U, RAM:

7 / 26

8 / 26

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

Chromiumで完全で保存したとき Chromiumで完全で保存したときの例の例 $ ls matoken\ \(@matoken1\)\ _\ nitter*

Vivaldiでの単一ファイル保存時 Vivaldiでの単一ファイル保存時の例の例 $ head -20 Kenichiro\ MATOHARA\ \(@matoken\)\

Data URI スキーム Data URI スキーム htmlファイル中にデータをbase64形式に変換してそのまま埋め込んでしまう． dilloやw3m-imgでも(画像は)対応している例えば

SingleFile拡張機能版を試してみ SingleFile拡張機能版を試してみるる Chrome系，Firefox系，Edgeがある Chrome: Firefox: Microsoft Edge: https://chrome.google.com/extensions/detail/mpiodijhokgodhhofbcjdecpffjipk

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

SingleFile CLI版 SingleFile CLI版 Node.js製依存関係の解決に失敗したのでとりあえずDockerで試した optionたくさんあるので好みのものを SingleFile/README.MD at master ·

時間が掛かる? 時間が掛かる? 1 普通に保存で58秒ほど 2 help表示で13秒ほど 3 回線がボトルネックかもとローカルに保存してローカルサーバ経由で47秒ほど $

Error: Cannot open the page from the filesystem. Chrome: Install

容量の比較容量の比較表 1. を変換容量ファイル数完全 1056kB 35

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

奥付奥付発表発表者利用ソフトウェアライセンス CC BY-NC-SA 4.0 小江戸らぐ