カテゴリー
技術

web2img – 一枚の画像ファイル内にパックしたウェブサイトを展開して動くツール

EtherDream/web2img は、ウェブサイトを一枚の画像内にまとめ、またそのまとめた画像をブラウザ上で展開して表示するツールです。

複数の html だけでなく、CSS ファイルや JavaScript ファイル、画像や動画などリソースファイルをすべてエンコードして一枚の画像が出てきます。

画像は簡易なリードオンリーのファイルシステムのように使われています。これを展開するためにはトップの html と JavaScript ファイル一つだけが必要で、これを置いたウェブページからは ServiceWorker 経由で先に作成した画像ファイルが読まれ、デコードされて格納されていた html/css/js/jpg/mp4 等を使った元々のウェブサイトが動きます。(ServiceWorker に対応しているブラウザで)

こちらに生成用のツールが公開されていて、実際に試せます。

Step 1 でローカルのウェブサイトのフォルダを指定すると、

フォルダに入っているファイルの情報と、ファイルをパックした画像が生成されます。

この画像ファイルをインターネット上の適当な場所に置いて、Step 3に入力すると、

この画像ファイルを展開して動かすための JavaScript ファイルを生成してくれます。

この js をこれを呼ぶ最小の html ファイルの二つを置くと、そのページではパックされた元々のウェブサイト/ページが表示されました。JavaScript を止めたり、ServiceWorker 非対応のブラウザで開くと何も表示されません。

とても面白いですが、これ何に使うんでしょう? Hacker News で紹介されてるタイトルはもっと直截で、「(画像掲示板の) imgur.com にウェブサイトをデプロイする(Deploy a website on imgur.com)」となっています。

ウェブ上に画像を無料や廉価で置けるサービスはたくさんあるので、この Web2img のようなものを使えばウェブサイトの本体部分をそうした画像置き場に置けてしまう、ということですね。Imgur を含めほとんどのサービスでは利用規約に触れるだろうとは思いますが。

サービス側でではアップロードされた画像がこの手の濫用に使われているものではないかをチェックする手間も増えますね。今でも違法なものをチェックして拒絶するために様々な努力がなされているはずですが。

今のジェネレーターではできあがった画像はランダムで意味がないものですが、画像としてもちゃんと意味があって復元できる上に、どこかにこういったファイル群が隠されているように作ることも難しいことではありません。

逆にいうと、アップロードした画像をそれとわからない程度に減色したり圧縮したりして保管して表示するサービスもありますが、その方がこういうhackな利用に耐性ができるということでしょうか。

カテゴリー
ツール

GitHub Pages で static な短縮URLサイト作成

nelsontky/gh-pages-url-shortener は、GitHub の静的ファイル公開機能 GitHub Pages を使った、短縮URLホスティングです。

clone して自分でもホストしてみました。s.akimoto.jp の DNS が GitHub Pages を指すように設定します。

https://s.akimoto.jp/ (説明用の index.html が開きます)

そして、GitHub issues にタイトルがURLになる issue を投げる

と、 issue 番号⇒URL の転送が実施されます。

https://s.akimoto.jp/1 ( issue のタイトルに書いた別のアドレスへ転送されます)

その動作原理

  1. CNAME で gh-pages ブランチを指させる
  2. (短縮URLのパス)すべては 404.html に渡される
  3. GitHub issues から JSON API でURL転換情報を JavaScript が取得し、(それに従って)転送
  4. 役に立つ?

ということ。なるほど。GitHub issues を、転送用の lookup table として使っているわけですね。この後転送したい短縮URLを増やすのは、issue を発行すればよいということです。更新や削除も同様。面白い事考えるなあ。

# GitHub API の公開アクセスには60回/時間の制限が掛かっているので、実用的には使えないでしょう。

via Hacker News