Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

E34dfb243cc4baa2f1d4306941d9cfd8?s=128

Kenichiro MATOHARA

March 19, 2022
Tweet

More Decks by Kenichiro MATOHARA

Other Decks in Technology

Transcript

  1. 画像つきHTMLフ 画像つきHTMLフ ァイルを1ファイ ァイルを1ファイ ルで共有 ルで共有 Kenichiro Matohara(matoken) <maroken@kagolug.org> 1

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

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

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

    / 26
  7. 7 / 26

  8. 8 / 26

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

  10. ウェブページの保存方法 ウェブページの保存方法 ウェブブラウザで保存時にいくつかのオプション「完全,HTMLの み,テキストファイル,単一ファイル」 「完全」だとほぼすべてのファイルが保存されるが,たくさんの ファイルが保存されて扱いが面倒,アーカイバを使うと閲覧が面 倒 Opera/Vivaldi等で利用できる「単一ファイル」 htmlメール等と同じMIME形式.1ファイルで便利だが開けるア プリケーションが少ない(Opera/Vivaldi/MUA等)

    印刷でpdf保存 ほぼ見た目通りに保存できて便利.アニメーションgifなどは静 止画に.少し重い.閲覧時に解像度が合わないと見づらい 10 / 26
  11. 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
  12. 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: <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> 12 / 26
  13. 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
  14. 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
  15. 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
  16. 今回は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
  17. DATA Uriの画像はw3mやdilloで DATA Uriの画像はw3mやdilloで も開ける も開ける 17 / 26

  18. 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
  19. 時間が掛かる? 時間が掛かる? 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
  20. 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
  21. 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
  22. 容量の比較 容量の比較 表 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
  23. SingleFile利用例 SingleFile利用例 Discordのtextchatをバックアップ exportされるのはhtmlだけなのでSingleFileで画像を読み込み&変 換してバックアップ Reveavl.jsのスライドを単一htmlで公開 $URL?print-pdf で開いた状態でSingleFile利用するとJavaScript 不要 23

    / 26
  24. 以前試したもの 以前試したもの InternetArchive alternative 指定URLやURL群,RSS等から様々な形式でウェブやビデオやgit などをバックアップ オンラインブックマークやウェブブラウザの履歴を自動的に保 存したり,特定のURLを毎日保存したり Joplin( )

    Evernote alternative ウェブブラウザからウェブページや指定部分を保存 Joplinが重い(CLI版あるけどWebClipper使えない) ArchiveBox (鹿児島らぐ 2020.07) https://joplinapp.org/ 24 / 26
  25. まとめ まとめ SingleFileでウェブを保存すると人と共有するのに便利 pdf変わりにも使えそう 自分用アーカイブだとJoplin WebClipperのほうが? CLIで自動化も 25 / 26

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

    3月のオフな集まり(第236回) Kenichiro Matohara(matoken) Asciidoctor Reveal.js 26 / 26