Xboxの実績解除をjQueryで作ってみた


本当に一発ネタ的な感じですが、ゲーム機のXboxにある「実績解除」を擬似的にブラウザで再現してみました

http://program.kir.jp/unlock/

リンク先のリンクをクリックだ!

もともとはflashで出来た実績解除ボタン(ブログパーツ)が面白かったので、似た奴を作ってみようと思ったわけです。Xboxユーザーですし。


http://unlock360.in/

上記のボタンは押したら音が出るflashですが、私はjqueryで画面表示をやってみました。
何に一番苦労したかって、あのアイコン(アニメgif)作り。

本当は点滅だけじゃなくてトロフィーっぽい画像も見えるんだけど資料がないのでそこまで作りこんでない(笑)

jqueryの仕組み的には、単なるdiv要素を決まった位置に表示させているだけ。
以下が参考になりました。

http://ascii.jp/elem/000/000/478/478300/

角丸にしている部分はこちら

マジで簡単!!画像を使わず角丸を実現するjQuery Corner | バシャログ。

クリック時にあの音を鳴らすプラグインはこちら

Google Code Archive - Long-term storage for Google Code Project Hosting.

Xboxのあの音は

XBOX360 実績解除スレまとめ @wiki - アットウィキ

から拝借。最近AS3に夢中だったけどjQueryも相当面白いわ。
音も鳴らせるし。調子に乗ってブログパーツにしたい(ユーザーごとに実績項目をいろいろ作れるようにしたい)けど、javascriptはてなダイアリーに貼るのはflashより難しいんだよね…萎えるなあ。

このブログパーツ欲しい!という方はタイトルの☆かブクマなどで支援お願いしますw