https://labs.cybozu.co.jp/blog/akky/tags/serviceworker/ Recent content in Serviceworker on akky@サイボウズラボ・ブログ Hugo ja Thu, 09 Sep 2021 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2021/09/web2img-packs-website-into-single-image-file/ Thu, 09 Sep 2021 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2021/09/web2img-packs-website-into-single-image-file/ <p><a href="https://github.com/etherdream/web2img">EtherDream/web2img</a> は、ウェブサイトを一枚の画像内にまとめ、またそのまとめた画像をブラウザ上で展開して表示するツールです。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2021/09/web2img-packs-website-into-single-image-file/web2img-screenshot.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2021/09/web2img-packs-website-into-single-image-file/web2img-screenshot_hu_8df1e010b2d43a83.webp 480w, https://labs.cybozu.co.jp/blog/akky/2021/09/web2img-packs-website-into-single-image-file/web2img-screenshot_hu_47e25b5f187a4de2.webp 768w, https://labs.cybozu.co.jp/blog/akky/2021/09/web2img-packs-website-into-single-image-file/web2img-screenshot_hu_2adf62cb20d04abb.webp 805w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2021/09/web2img-packs-website-into-single-image-file/web2img-screenshot.png" width="805" height="349" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>複数の html だけでなく、CSS ファイルや JavaScript ファイル、画像や動画などリソースファイルをすべてエンコードして一枚の画像が出てきます。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2021/09/web2img-packs-website-into-single-image-file/web2img-akky-test-1.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2021/09/web2img-packs-website-into-single-image-file/web2img-akky-test-1_hu_3d78d657b93965e3.webp 20w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2021/09/web2img-packs-website-into-single-image-file/web2img-akky-test-1.png" width="20" height="20" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>画像は簡易なリードオンリーのファイルシステムのように使われています。これを展開するためにはトップの html と JavaScript ファイル一つだけが必要で、これを置いたウェブページからは ServiceWorker 経由で先に作成した画像ファイルが読まれ、デコードされて格納されていた html/css/js/jpg/mp4 等を使った元々のウェブサイトが動きます。(<a href="https://caniuse.com/serviceworkers">ServiceWorker に対応しているブラウザ</a>で)</p> <p><a href="https://etherdream.github.io/web2img/">こちらに生成用のツールが公開されて</a>いて、実際に試せます。</p> <p>Step 1 でローカルのウェブサイトのフォルダを指定すると、</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2021/09/web2img-packs-website-into-single-image-file/web2img-generated.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2021/09/web2img-packs-website-into-single-image-file/web2img-generated_hu_87ea653c9a97ef4f.webp 377w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2021/09/web2img-packs-website-into-single-image-file/web2img-generated.png" width="377" height="524" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>フォルダに入っているファイルの情報と、ファイルをパックした画像が生成されます。</p> <p>この画像ファイルをインターネット上の<a href="https://raw.githubusercontent.com/akky/web2img_test/master/web2img-akky-test.png">適当な場所</a>に置いて、Step 3に入力すると、</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2021/09/web2img-packs-website-into-single-image-file/web2img-extractor.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2021/09/web2img-packs-website-into-single-image-file/web2img-extractor_hu_2ffbd74e63e98293.webp 480w, https://labs.cybozu.co.jp/blog/akky/2021/09/web2img-packs-website-into-single-image-file/web2img-extractor_hu_73a9bc2f4fc88d24.webp 665w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2021/09/web2img-packs-website-into-single-image-file/web2img-extractor.png" width="665" height="422" alt="" loading="lazy" decoding="async"> </picture></a></p> <p>この画像ファイルを展開して動かすための JavaScript ファイルを生成してくれます。</p> <p>この js をこれを呼ぶ最小の html ファイルの二つを置くと、そのページではパックされた<a href="https://akimoto.jp/web2img/">元々のウェブサイト/ページが表示されました</a>。JavaScript を止めたり、ServiceWorker 非対応のブラウザで開くと何も表示されません。</p> <p><a href="https://labs.cybozu.co.jp/blog/akky/2021/09/web2img-packs-website-into-single-image-file/web2img-result.png"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2021/09/web2img-packs-website-into-single-image-file/web2img-result_hu_dcd126789f8815a3.webp 480w, https://labs.cybozu.co.jp/blog/akky/2021/09/web2img-packs-website-into-single-image-file/web2img-result_hu_79e41fcb19bd986c.webp 661w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2021/09/web2img-packs-website-into-single-image-file/web2img-result.png" width="661" height="360" alt="" loading="lazy" decoding="async"> </picture></a></p>