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

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

E34dfb243cc4baa2f1d4306941d9cfd8?s=47 Kenichiro MATOHARA
March 19, 2022
Technology
0
54

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

小江戸らぐ 3月のオフな集まり(第236回)
https://koedolug.connpass.com/event/239577/

source
https://gitlab.com/matoken/koedolug-2022.03/-/blob/master/slide/slide.adoc

E34dfb243cc4baa2f1d4306941d9cfd8?s=128

Kenichiro MATOHARA

March 19, 2022
Tweet

More Decks by Kenichiro MATOHARA

See All by Kenichiro MATOHARA
省リソースで動作するビデオカンファレンスソフトウェアのGalène
E34dfb243cc4baa2f1d4306941d9cfd8?s=48 matoken
0
62
スライドファイルをセルフホスト(Pelican利用)
E34dfb243cc4baa2f1d4306941d9cfd8?s=48 matoken
0
32
OCRで画像文字を 文字データに
E34dfb243cc4baa2f1d4306941d9cfd8?s=48 matoken
0
13
コマンドラインで 翻訳
E34dfb243cc4baa2f1d4306941d9cfd8?s=48 matoken
0
120
Raspberry Pi Zeroをストレージ無しで活用
E34dfb243cc4baa2f1d4306941d9cfd8?s=48 matoken
0
26
SSDプチフリ対策
E34dfb243cc4baa2f1d4306941d9cfd8?s=48 matoken
0
4
Speach To Text To Translation(Azure版)
E34dfb243cc4baa2f1d4306941d9cfd8?s=48 matoken
0
15
色々聞く
E34dfb243cc4baa2f1d4306941d9cfd8?s=48 matoken
0
73
音でデータを届けたい
E34dfb243cc4baa2f1d4306941d9cfd8?s=48 matoken
0
34

Other Decks in Technology

See All in Technology
越境チャレンジの現在地 〜Epic大臣制度の今〜
Dd5c63951803a69272ac7a6aaa59401d?s=48 yousak
0
800
覗いてみよう！現場のスクラムチーム
1f0222f7251c3c48f4a8e5103cc64346?s=48 tkredman
0
960
What's new in Vision
53e2d354b3299d64a54af680865516d5?s=48 satotakeshi
0
180
トランザクションスクリプトは何がダメなのか？
80b7d87c10fcdb6a0cba4f8b69e933bc?s=48 polidog
2
1.2k
2022年度新卒技術研修「DNS」講義
094e424062f60b011a0d0b294fbc17e4?s=48 excitejp
PRO
0
360
多様な成熟度のデータ活用を総合支援するKADOKAWA Connectedのデータ組織について
058dd218ad1491cf904b1105b94fe5a8?s=48 kadokawaconnected
PRO
0
190
データエンジニアと作るデータ文化
465cba0ac1de7e490c6ea484da327572?s=48 yuki_saito
4
1.4k
要約 "Add Live Text interaction to your app"
9e64d2069945742c818421e884603b44?s=48 ushisantoasobu
0
140
ノーメンテナンス運用実現のためのノウハウ/ColoplTech-05-02
E704514df1d69d511c4c74771a40c8f5?s=48 colopl
0
160
Oracle Base Database Service 技術詳細
3115a782126be714b5f94d24073c957d?s=48 oracle4engineer
PRO
3
9k
サーバレスECにおける Step Functions の使い方 〜ステートマシン全部見せます！〜
74cec195bfb6cb5165256d88cb7fcf0f?s=48 miu_crescent
0
180
2022年度新卒技術研修「 ソフトウェアテスト」講義
094e424062f60b011a0d0b294fbc17e4?s=48 excitejp
PRO
0
360

Featured

See All Featured
Art Directing for the Web. Five minutes with CSS Template Areas
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
196
9.4k
Large-scale JavaScript Application Architecture
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
499
110k
We Have a Design System, Now What?
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
35
2.9k
A Philosophy of Restraint
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
192
15k
How GitHub (no longer) Works
78b475797a14c84799063c7cd073962f?s=48 holman
296
140k
The Invisible Customer
4262b9cfacfb6b2c77f23e1d0310cd3e?s=48 myddelton
110
11k
Optimizing for Happiness
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
365
63k
Six Lessons from altMBA
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
14
1.4k
Making Projects Easy
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
98
4.3k
Happy Clients
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
89
5.6k
How To Stay Up To Date on Web Technology
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
780
250k
Intergalactic Javascript Robots from Outer Space
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
261
25k

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