とりあえず、まったく何の準備もせずにハッカソンが近づいてきたある日、

「CSS3で画像サムネイルを傾ける」

という記事を発見。「とりあえず、他の参加者のネタに乗っかれなかったらこれ使って何かやろう」と思って当日を迎えました

さすがは中国GTUG、開催のあいさつもそこそこに「はじめ！」の号令（実際は「そろそろ時間なんで適当に始めちゃってください」程度）

アイデアソンという名目でグダグダと他の参加者と話をしたりネタを聞き出したりしたけど、結局「チームお一人様」で闘うことに（ほとんどの人が1人でやってたみたい）

ということで当初の予定通り、前述のCSSを使用して何かを作ろうと。

「まぁ、傾けるんなら加速度センサーだろ」という短絡的な思考で、画面を傾けても常に画像が上（？）を向いているようなものを作ることにしました。

最初の壁：加速度センサー使える端末がない

そこそこ新しいmacには加速度センサーが入っているという噂を聞いていたのに、MBAはSSD搭載になったせいか、加速度センサーが搭載されてないことが判明

「じゃあ、Androidでいいだろう」→Androidのブラウザは加速度センサーにアクセスしない...

仕方ないので、MNPで生贄になったiPhoneで試してみる→持っててよかったiPhone！

ということでiPhoneで確認しながら開発することに（この時点で既に昼過ぎ）

実際やったことはほぼ写経

表示する写真を変えて、それに合わせて上記のCSSを軽くいじって、ぐぐって出てきた加速度センサーのコードを使うだけ

で、できあがったのがこちら（画像にツッコミは禁止）

ソース一式はこちら

※どちらもDropBoxのPublicフォルダなのでいつ消えるかわかりません

加速度センサーで拾った値を画面に表示するようにしているので、値が出ない場合は残念ながら端末に加速度センサーが搭載されていないか、ブラウザが対応していません。

※検証端末は上でも書いたようにiPhone3GSの標準ブラウザのみ

※Android版FireFox6が加速度センサーに対応したとのことなので確認してみたところ、iPhoneで取得できる値とAndroidで取得できる値が全然違ったため動作が困ったことに...orz

当日の他の方の成果物やハッシュタグ汚染については中国GTUG公式や別の人のエントリ、Togetterなんかでまとめられてるのでそちらを参照