さて、もうすぐjubeat saucer稼働ですが

こんなの作ってみました。

いかにもブログパーツにしてくれと言わんばかりのデザインで作ってみました。
この前同じようなものを作ったとき、どうしても線がうまく結べなかったので作戦を変更して、画像は固定でもいいので、とにかくあのエフェクトを再現したいなと思ってやってみました。*1
ソースを見ればわかるかと思いますが、両サイドに流れる星はSVGで描画してあります。
アニメーションで星どうしがつながる線を描いて、しばらくしたら消えるというふうにしてあります。
下から上へスクロールしているのは、CSS3のアニメーションで実現させています。

SVG画像は左のように同じ絵が縦に2枚連なっていて、縦の移動量が全体の半分になるところで最初に戻しています。svgタグにアニメーションを指定するのはどうなのかと思ったので、divタグで囲ってそこにアニメーションを設定しています。
線がつながるエフェクトはSVGの方でアニメーションを設定しています。CSSでやれないかなと試行錯誤していたのですが無理だったので諦めました。JSに任せてもよかったのですが、伸びていく線の端の座標を計算するのがめんどくさそうなのでやめました。最近のブラウザやiOS5のSafariで動くからまあいっかー、Android3.x以前のブラウザやIEではたぶん動かないけどまあいいよねー
あと、CSSはSCSSで、JSはCoffeeScript書いたものをコンパイルしてもらうようにしました。SCSSが使えるとスタイル決めるのがだいぶ楽になりますね。
この調子だとsaucerの背景も作ってしまうんじゃないかと思います。あの背景は直線をバシバシ描いていけばいいんだと思いますが、途中で切れる線と切れない線が入り交じっているので、少々厄介だったりします。まあ一番厄介なのは初代なんですが…

*1:たしかただの線だけど流れ星もあった気がしてきたけれど…