小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


iPhoneの加速度センサーにあわせて画像を傾けてみる

iPhone JavaScript

はじめに

iPhoneには加速度センサーという機能が搭載されていて、これを使うとiPhone自体の３次元方向（左右／前後／上下）の傾きを知ることができます。この加速度センサーにあわせて画像をくるくるさせるサンプルプログラムを作ってみました。

やさしくはじめるiPhoneアプリ開発の学校
やさしくはじめるiPhoneアプリ開発の学校
posted with amazlet at 14.01.23
森 巧尚
マイナビ
売り上げランキング: 59,686
Amazon.co.jpで詳細を見る

JavaScriptから加速度センサーの値を取得する

JavaScriptから加速度センサーの値を取得する方法については、以下のブログに詳細が書かれていますので、参考にすると良いです。

加速度センサーの傾きにあわせて画像を傾けてみる

加速度センサーにあわせて画像をくるくるさせるサンプルプログラムを作ってみました。

加速度センサーの傾きの取得と画像を回転さえる部分のコードは以下のようになっています。画像を回転させる処理はjqueryrotate - jQuery plugin that rotate images (and animate them) by any angle - Google Project Hosting はてなブックマーク - jqueryrotate - jQuery plugin that rotate images (and animate them) by any angle - Google Project HostingというjQueryのプラグインを使用していて、加速度センサーの傾きを１０倍した値を角度として、傾けるようにしています。

window.ondevicemotion = function(event) {
  // 左右の傾きを取得する
  var x = event.accelerationIncludingGravity.x;
  // 加速度センサーの傾き×10度画像を傾ける
  $('#iphone').rotate(x*10);
  document.querySelector("#x").innerHTML = x;
}
サンプルコード
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>iphoneの加速度センサーで画像を回転させる</title>
<meta name="viewport" content="width = 450" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="jQueryRotate.2.1.js"></script>
<script>
window.ondevicemotion = function(event) {
  // 左右の傾きを取得する
  var x = event.accelerationIncludingGravity.x;
  // 加速度センサーの傾き×10度画像を傾ける
  $('#iphone').rotate(x*10);
  document.querySelector("#x").innerHTML = x;
}
</script>
</head>
<body>
<h1>加速度センサーのデモ</h1>
<p>iPhoneを傾けると、画像も一緒に傾きます。(iOS4.2以降)</p>
<div>
<img src="iphone.png" id='iphone'>
</div>
<p>左右の傾き: <span id='x'></span></p>
</body>
</html>

関連エントリ