カテゴリー
ネットのサービス

Joy Generator – 小さな喜び(joy)を集めたウェブサイト

アメリカの公共ラジオ局NPR が公開したJoy Generator (喜び生成器) は、

現時点で提供されているのは、以下のようなもの

  • 追想しよう – 懐かしい動画の再生
  • フローを見つけよう – お絵かき
  • 落ち着く音 – 絵筆の走る音、ささやき声、日常に溢れる心地よい音などを再生
  • それを待つ – 植物の発芽と成長を見る
  • 視点を変えてみる – 宇宙や星に関する映像
  • 詩を簡単に – 与えられた文章を消し込むことで詩を作る
  • カワイイの力 – 可愛い動物の動画
  • 野生の呼び声 – 国立公園の音源を組み合わせてBGMに

ちょっとした休憩時間に眺めたり、BGM/BGV にしたりできる小さなページが集められています。

野生の呼び声(Call of The Wild)、では、風の音、水の音、蛙の音、鳥の音、を好きなバランスで組み合わせて再生させることもできます。

カテゴリー
技術

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な利用に耐性ができるということでしょうか。

カテゴリー
データ可視化

KalkiCode – 基本的なデータ構造を各種言語でどう書くかや動く図で見せてくれるサイト

Kalkicode は、例示や図によるプログラミングサンプルを、プログラミング上の問題(基本的なアルゴリズムやウェブサービス技術)と複数の言語のそれぞれの切り口から並べて示そうとしている、教育サイトです。

配列・行列・リスト・ツリー・グラフ・再帰、などさまざまなデータ構造・アルゴリズム毎に分けられた章を開くと、

データ構造 and/or アルゴリズムの解説に、それを実装したコードサンプルが10前後のプログラミング言語で用意され、コードの実行結果、図、などが続きます。

ものによっては動的にデータ構造の変化を見せてくれたりもします。

こちらは平衡二分探索木にノードを追加したり削除したりする際の動きをアニメーションで表示しているところ。

双方向リンクリストへの追加や削除とか

環状単方向リストへの追加と削除とか

プログラミングの学習をする際に、理解を助けてくれそうなコンテンツがたくさんあります。

10前後のプログラミング言語で同じことを書く、というのもこれだけ多くの項目となると大変なことだと思います。見た感じ、ある程度自動で変換してるのかなとも思いましたが。

# 同じサイト内に Java-to-PHP converter なんてのもあったので、全部じゃないにしてもある程度横展開は自動なのかもしれません。

via Hacker News