Hatena::ブログ(Diary)

KAZUMiX memo

2009-04-21

HTMLの暴走 (meltdown3)

| 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
動作せず(原因不明)

注意事項

初音ミク出現

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

D

技術的な仕組み

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

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

解説記事

参考書籍

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

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

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

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

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

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

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

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

ActionScript 3.0 アニメーション

ActionScript 3.0 アニメーション

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

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

最近読んだ本

近況

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

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

VJ現場

関連エントリー

I-RomI-Rom 2009/04/23 19:51 最後のタグが飛び回るのは、MS-DOSの臭いを感じるのは俺だけか?

KAZUMiXKAZUMiX 2009/04/29 02:07 AS3側を微妙にアップデート。対象の画像が何らかの理由で読み込み中のままになってしまう場合を考慮してタイムアウトを追加。

>I-Rom
そう。いかにもコンピュータっぽくした。

KAZUMiXKAZUMiX 2009/05/01 19:55 JavaScriptを修正。IEで2回目以降の動作がうまくいっていなかった問題の修正。

strawberrycakestrawberrycake 2013/10/01 20:03 最近このブックマークレットにハマり、退屈な時にいろいろなホームページで暴走させたりしてます。

ちなみにWEBページの一つの画像に焦点を当てて暴走させるプログラムとかを作ることはできますか?

複数ある場合は選択してから暴走するといった感じで

hdhd 2014/12/02 21:27 Flashだからスマホじゃ動かない…残念。
でも1と2は使えるので使います。ありがとう。