HTMLの暴走 (meltdown3)

2009-04-21

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コード、アドレスバー実行例

ページによってはアニメーションが始まるまでちょっと待たされることがあるかもしれません。

色んなページで遊んでみてください。

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

(実験)ブックマークレットをリンク先のページで発動させてみる - KAZUMiX memo

ブラウザ対応状況

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

注意事項

初音ミク出現

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

技術的な仕組み

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

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

解説記事

参考書籍

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

作者: 平山尚(株式会社セガ)
出版社/メーカー: 秀和システム
発売日: 2008/11/15
メディア: 単行本
購入: 86人クリック: 3,010回
この商品を含むブログ (184件) を見る

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

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

作者: 松浦健一郎,司ゆき
出版社/メーカー: ソフトバンククリエイティブ
発売日: 2006/09/28
メディア: 単行本
購入: 7人クリック: 50回
この商品を含むブログ (25件) を見る

大量のオブジェクトの管理手法（タスクシステム）の概念の影響をうけました。上に同じくC/C++での解説です。

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

作者: アラン・シャロウェイ,ジェームズ・R・トロット,村上雅章
出版社/メーカー: ピアソン・エデュケーション
発売日: 2005/09/16
メディア: 大型本
購入: 36人クリック: 438回
この商品を含むブログ (111件) を見る

デザインパターンってよく聞くけどなんなの？と思って読んでみた本。Bridgeパターンの概念を知らずにコピペクラス爆発させてた過去の自分にさようならｗ時々解説に使われているコードはJavaですが（以下略）

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

作者: Douglas Crockford,水野貴明
出版社/メーカー: オライリージャパン
発売日: 2008/12/22
メディア: 大型本
購入: 79人クリック: 1,311回
この商品を含むブログ (164件) を見る

クロージャをナチュラルに使えるようになったのはこの本のおかげ。

ActionScript 3.0 アニメーション

作者: Keith Peters,永井勝則
出版社/メーカー: ボーンデジタル
発売日: 2007/10/30
メディア: 単行本
購入: 9人クリック: 166回
この商品を含むブログ (46件) を見る

前提としてActionScript 3.0を理解している必要はありますが、AS3アニメーションの基礎です。価格が強気の7,000円（税別）。

その他影響を受けた本たち。

近況

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

VJ依頼に関してはクラブイベントなどの現場で捕まえてくれると嬉しいです。

VJ現場

KAZUMiX memo

2009-04-21