スパイスラボ神部です。

今日はちょっと前に流行った画面崩壊について調べていました。Wario Land: Shake It – Amazing footage! とか、ワリオランドシェイクみたいに HTML が崩壊するブックマークレット（とそのソースコード） - てっく煮ブログあたりのやつですね。

しかしこれよりも前にもっとすごいやつ（画像だけではなく文字も崩壊しちゃう）ものがありまして、いったい誰がつくっているのかなーと不思議に思っていました。具体的には、

-映画「ハプニング」オフィシャルサイト の右にあるブログパーツ

-映画「シャッター」オフィシャルサイト の右にあるブログパーツ

あたりです。

これってどうやってるのかなー、と前から気にはなっていたのですがソースコードが追えず分からずじまい。しかし、これらのブログパーツをさがしていたところ、なんと制作者とおぼしき本人のブログをはてなダイアリーで発見！→KAZUMiX memo（ちなみにプロフィールページ）

これ、主に meltdown.js というのをベースにつくられているのですが、ソースコードを見てみると非常にシンプル！言ってしまえば、モダンなブラウザが全部 DOM で描画していることを前提にして、要素ごとの位置を記憶しておき、全部とれたら二次関数的な軌跡で移動させている、そんな感じでしょうか？

このスクリプトに関する関連エントリはどれも必読です。

-HTML崩壊 meltdown.js - KAZUMiX memo

-何かが起きる！映画「ハプニング」のブログパーツ - KAZUMiX memo

-JavaScript + Flash でできる面白いこと - KAZUMiX memo

しかも JavaScript はなんかちょうど一年くらい前から勉強を始めたばかりくらいだとか・・・！天才がここにいた！知識を吸収してから応用までのラインが最短過ぎます。まさにエコノミーライン。自分にはとても真似出来そうにありません。

他にも こだわりのページ内リンクスムーズスクロール scrollsmoothly.js 動作サンプル | KAZUMiX memo なんかは完全に Flash キラー。Adobe も戦々恐々としそうな勢い。

ということで、かなり興奮してしまいましたが、キャンペーンに画面イジリ系が増えてくるのはネタとしては最後の砦かもしれませんが楽しいのも間違いありません。Web ページをいじるのはいったん Flash でキャプチャしてからならなんでも出来るだろ・・・と思う方もいらっしゃるらしいですが、どうやら blog.ipuheke.jp» Blog Archive » FlashはHTML画面をキャプチャできないようです。そうすると、顔面をスキャンしてつくったマスクにラクガキするよりも、こうやって脳みそに直接手を突っ込んじゃうようなDOMの方が可用性があるということなのでしょうか。

今後どんなものが出てくるのか、それがひじょーに楽しみです＾＾