Twitterで流行し、一時期はその発言を見ない日はなかった『爆発しろ』という言葉ですが、現在においても散見されます。このたびTwitterのPostを爆発させるGreasemonkeyをリリースしました事をここにお知らせします。
当Greasemonkeyをインストールしますと、タイムラインのPostに火薬が充填されます。充填された火薬は画面上では判断することができませんのでご了承下さい。Postをクリックすると火薬へ着火され爆発します。
爆発前
爆発後
尚、TwitterのHomeでのみ動作します。
爆発が隣のPostに飛び火し、爆発の連鎖は起こさないように最前の注意を払っておりますのでご安心下さい。また、CSS3の機能を利用しているため、現時点ではFirefox3.0では動作しません。FirefoxのBeta版とGreasemonkeyというAdd-onをご利用下さい。リリース時にダウンロードできるFirefoxは3.1Beta3となっております。
一度爆発したPostは火薬を消費しているため爆発をしません。一画面に表示されるPostは20までですので、連続して爆発できるのは標準で20回までとなっておりますが、21回以上の連続爆発をというお客様の声に御応えするためにAutoPagerizeに対応しました。
AutoPagerizeにより新しいページが読み込まれるたびに新しい火薬が充填されます。これにより連続100回以上の爆発も可能となっております。
快適な爆発生活をお楽しみ頂けるよう、是非ともexplotterをご利用下さい。
2009/04/02 追記
一応、爆発はアニメーションしています。処理が重くて破片の移動が間に一回だけはいっているだけになってます。もし、もう少し細かいアニメーションが見たいときは、104行目のこの部分を
)(2,50,positionData)();
下のようにして見てください。
)(5,50,positionData)();
第一引数はアニメーションの枚数、第二引数は時間の間隔になっています。
2009/04/02 追記2
爆発した破片の到達点の相対座標を乱数で決める時に次のような計算にしがちです。
var n=200;
var x=(Math.random()*2-1)*n;
var y=(Math.random()*2-1)*n;
var x=(Math.random()*2-1)*n;
var y=(Math.random()*2-1)*n;
でも、このような方法だと分布が均等になってしまい不自然になります。ではこれならどうでしょうか。
var n=200;
var x=(Math.random()-Math.random())*n;
var y=(Math.random()-Math.random())*n;
var x=(Math.random()-Math.random())*n;
var y=(Math.random()-Math.random())*n;
分布が中央によりますが分布の形状が正方形になってしまいます。今回は以下のように記述しました。
var distance=Math.random()*200;
var direction=Math.random()*2*Math.PI;
var x=distance*Math.cos(direction);
var y=distance*Math.sin(direction);
var direction=Math.random()*2*Math.PI;
var x=distance*Math.cos(direction);
var y=distance*Math.sin(direction);
飛距離と方向を乱数で定義し、それをX-Y方向にベクトルを分解しています。これで随分とリアルにはなりましたが、飛距離の分布がまだ均等になっています。本来であればX-Y平面に対するZ軸方向の角度によって飛距離は決定すべきです。つまり、分布は飛距離ではなく角度に対して一定あるべきですが、今回はここまでは計算させていませんし、高さを表現する為のサイズ変更も行っていません。さらに突き詰めるのであれば、地面で反射する破片を考慮することも考えられます。どこまで行なうかは色々な条件とのバランスの上で決めるべきではないでしょうか。
2009/04/02 追記3
positionのabsoluteを使用した場合、移動元の表示領域は保持したままにならずにつめられてしまいます。今回の場合は、post表示領域の高さが変化してしまいます。しかし、破片の回転に使用しているtransformは、移動元に表示領域を残したまま表示位置を変更します。破片の移動もtranslateを利用した場合、cssの指定が全てtransform内で収まり非常に好都合なのでこの方法で行なう予定でした。
part.style.MozTransform="rotate("+progress*datum.rotate+"deg) translate("+progress*datum.x+"px,"+progress*datum.y+"px)";
ところがtranslateを指定して位置を移動した場合、親要素からはみだすと表示されなくなってしまいました。このため、祖先要素のoverflowにvisibleを追加したのですがこれでもうまくいきませんでした。仕方がないので、破片のCSSのpositionにrelativeとz-indexに大きめの値を指定し、leftとtopの指定で対応しました。
part.style.left=progress*datum.x+"px";
part.style.top=progress*datum.y+"px";
part.style.MozTransform="rotate("+progress*datum.rotate+"deg)";
part.style.top=progress*datum.y+"px";
part.style.MozTransform="rotate("+progress*datum.rotate+"deg)";
この、親からはみだすと消えてしまう現象の詳細はわかりません。transformの仕様かもしれませんし、他のCSSの値が影響している可能性もあります。もしかすると、ブラウザに依存した挙動かもしれません。知らないとはまってしまうかもしれません。ちょっとしたバッドノウハウになりそうですね。