iPhoneのsafariで傾きとか取得してみる

今日帰り道にjsで加速度とか傾きとかとれるよねって話をしていたので、書いてみました。
iPhoneのsafariとかなら普通にとれちゃうんですね。

つーことでサンプルのせておきます(DEMOはこちら*iPhoneでアクセスしてください)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf8">
<title>js test</title>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css" />
<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
window.addEventListener('devicemotion', function(event) {
  // 傾き
  $('#x').text(event.acceleration.x);
  $('#y').text(event.acceleration.y);
  $('#z').text(event.acceleration.z);

  // 重力
  $('#xg').text(event.accelerationIncludingGravity.x);
  $('#yg').text(event.accelerationIncludingGravity.y);
  $('#zg').text(event.accelerationIncludingGravity.z);

  // 回転
  $('#a').text(event.rotationRate.alpha);
  $('#b').text(event.rotationRate.beta);
  $('#g').text(event.rotationRate.gamma);

});
</script>

</head>
<body>
<div class="container">

<h2>傾き加速度</h2>
<p>x: <span id='x'></span></p>
<p>y: <span id='y'></span></p>
<p>z: <span id='z'></span></p>

<h2>重力加速度</h2>
<p>xg: <span id='xg'></span></p>
<p>yg: <span id='yg'></span></p>
<p>zg: <span id='zg'></span></p>

<h2>回転加速度</h2>
<p>a: <span id='a'></span></p>
<p>b: <span id='b'></span></p>
<p>g: <span id='g'></span></p>

</div>
</body>


</html>