HTMLの暴走 (meltdown3)

HTMLの暴走(meltdown3)イメージ

javascript:(function(d,s){s=d.createElement('script');s.type='text/javascript';s.src='http://www.rr.iij4u.or.jp/~kazumix/d/javascript/meltdown3.js?'+(new Date).getTime();s.charset='UTF-8';s.id='KM3';d.body.appendChild(s);})(document)

上記のコードをアドレスバーに貼り付けて実行すると、そのページが暴走を開始します。
JavaScriptコード、アドレスバー実行例
ページによってはアニメーションが始まるまでちょっと待たされることがあるかもしれません。
色んなページで遊んでみてください。

アドレスバー貼り付けではなく、リンク動作の実験版

ブラウザ対応状況

Firefox
ページによってはアニメーションが処理落ちしまくることがあります(だんだん軽くなってゆく)。それ以外は理想的に動作します
IE
Firefoxで重いページが軽かったりします。ただしアニメーションが始まるまで若干待たされたり、アニメーション時に位置ずれが発生するページがあったりします
Webkit (Google Chrome, Safari)
floatでテキストの回り込みをしている部分が残念な感じに。その他レイアウト崩れが発生しがちですが、動作は軽いです
Opera
動作せず(原因不明)

注意事項

初音ミク出現

  • ページの要素が画像に変化する演出は、画像化に必要な素材が足りない場合は発生しません

技術的な仕組み

JavaScript側で死ぬほど面倒で地味な準備を行った後、ActionScript 3.0 (Flash)に制御を移して楽しくアニメーションさせてます。

ソースコード一式
ダウンロード meltdoen3 ver 1.01 (JavaScript + FlashCS3 ActionScript3.0 クラス30個以上あるのにパッケージ切ってなくてごめんなさい版)

参考書籍

ゲームプログラマになる前に覚えておきたい技術

ゲームプログラマになる前に覚えておきたい技術

シーン遷移の概念の影響をうけました。解説に利用している言語はC/C++ですが、ActionScript 3.0が分かる人なら問題無いと思います。
シューティングゲーム プログラミング

シューティングゲーム プログラミング

大量のオブジェクトの管理手法(タスクシステム)の概念の影響をうけました。上に同じくC/C++での解説です。
デザインパターンとともに学ぶオブジェクト指向のこころ (Software patterns series)

デザインパターンとともに学ぶオブジェクト指向のこころ (Software patterns series)

デザインパターンってよく聞くけどなんなの?と思って読んでみた本。Bridgeパターンの概念を知らずにコピペクラス爆発させてた過去の自分にさようならw 時々解説に使われているコードはJavaですが(以下略)
JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

クロージャナチュラルに使えるようになったのはこの本のおかげ。
ActionScript 3.0 アニメーション

ActionScript 3.0 アニメーション

前提としてActionScript 3.0を理解している必要はありますが、AS3アニメーションの基礎です。価格が強気の7,000円(税別)。
その他影響を受けた本たち。
最近読んだ本

近況

去年まではこのブログを見た方からなどのお仕事依頼は個人でうけていたのですが、今年からは去年末に立ち上げたデジタルコンテンツ制作会社、株式会社ファーストインパクトとしてうけています(私は前線で活動する実働取締役)。肩書きがVJとなっている名刺は法人化前に作ったものなのでレアになるかもしれませんw (でも実はまだ大量にある)
VJ依頼に関してはクラブイベントなどの現場で捕まえてくれると嬉しいです。
VJ現場