加速度センサーを利用するライブラリ

Posted by dab | 2011年12月26日 月曜日 12:30:07 < だぶたると, コンピュータ >

加速度センサーを使用してスマホの傾きを検出し、
その動きからメニューを表示するライブラリを公開しました。

動作イメージ

だぶチルト
http://dabtilt.wi-wi.jp/

ほとんどの処理をCSSでつくることになるため、CSS3のアニメーション定義が必要ですが、
アニメーション関連は2行くらいしかないため、
今までのスタイルシート(CSS2.1)を理解している人なら、すぐに理解できると思います。
スクリプトの書き方は、スクリプトファイルを読み込んで、どの傾き方向とどの要素を結びつけるかを指定するだけです。

<style type="text/css">
#menu { position: absolute; } /* iOS5(iPhone)はfixedにも対応しています。 */
.open { display: block; }
.close { display: none; }
</style>

<div id="menu" class="close">
<ul>
<li><a href="">メニュー1</a></li>
<li><a href="">メニュー2</a></li>
<li><a href="">メニュー3</a></li>
</ul>
</div>

<script type="text/javascript" src="dabtilt.js">
<script type="text/javascript">
DabTilt.Tilt("right", "menu", "open", "close");
</script>

アニメーションさせる方法はだぶチルトのページにくわしく書く予定です。

iPhoneからはショートURL http://cise.jp/D002 にアクセスするとサンプルページに入れます。

今後は加速度センサーだけでなく、ジャイロセンサーも利用してより確実な角度検出を行います。
また、classの変更、コールバック関数の呼び出しだけですが、フリックスクロールの代わりにできるような、スクロール機能も付けようと思います。

TrackBack URI : http://home.wi-wi.jp/blog/wp-trackback.php?p=605

Leave a comment

:mrgreen: :neutral: :twisted: :shock: :smile: :???: :cool: :evil: :grin: :oops: :razz: :roll: :wink: :cry: :eek: :lol: :mad: :sad: