[PR] スマホ用、傾き検出JavaScriptライブラリ公開
Wataru Kanzaki
自薦（宣伝）のためPRタグをつけましたが、
iPhoneなどのスマホ用の、加速度センサーを利用した傾き検出のJavaScriptライブラリを公開しました。
http://dabtilt.wi-wi.jp/
（こちらのURLからもアクセスできます。 http://cise.jp/D001 ）
デバイスの角度に応じて玉を転がすゲームのような物であれば、
加速度センサーのデータを直接受け取ると思いますが、
このライブラリはもっとおおざっぱな、「右、左に傾いたら」というレベルでの検出をするための物です。
簡単に使い方を説明すると、
デバイスを右に傾けたときに<div id=“menu”>を表示、左に傾けると隠したい場合は、以下のようになります。
・スタイルシートで設定する場合。
<style type=“text/css">
.open { display: block; }
.close { display: none; }
</style>
<script type=“text/javascript”>
DabTilt.Tilt(‘right’, ‘menu’, ‘open’, ‘close’);
</script>
・jQueryと連携する場合。
<script type=“text/javascript”>
DabTilt.Tilt(‘right’,
function(){ $(‘menu’).show(); },
function(){ $(‘menu’).hide(); }
);
</script>
タッチジェスチャーではない操作から画面を操作するため、
ボタンなどのスペースを用意する必要がなくなり、画面を広く使えるというメリットがあります。
主な利用方法は、
PCサイトでposition:fixedを使っていたグローバルナビゲーションなどの代わりや、
ゲームなどでのフリップ（フリックではなく）を想定しています。
サンプルページをiPhoneで見ていただくと、上に傾けたときにタブバーが飛び出すようになっています。
（そんな風には、、、見えませんか？(^^;）
イメージとしてはMac DockやWindowsタスクバーの、「自動的に隠す」設定です。
この最下段のリンクは
<link>要素のrel=“Prev”、”Next”、”Start”、”Index"と、microformatsの”Home"を読み出しています。
移動や反転はあくまでプログラムの処理ですので、当然ボタン操作でもいいわけですが、
フリップ、もといチルト（傾け）を効果的に使うと、また違った楽しみ方ができると思います。
動作検証はiPhone4 iOS5、Safari mobileとSleipnir Mobileです。
Android/Windows mobileスマホでは動かないかもしれませんが、
（主にCSSの対応状況が原因だと思いますが。）
機種名とともに動いた報告、動かない報告などいただければ幸いです。
-----
Wings-Winds
http://www.wi-wi.jp/
神崎渉瑠