iOS 4.2の新機能で作るHTML5+JSアプリ (3/4)

2010年12月01日　10時00分更新

文●古籏一浩

ツイートする

傾けた方向にGoogleマップを移動させる

　加速度の値が求められたので、今度は加速度センサーでGoogleマップを移動させるプログラムを作成します。本連載の28回で紹介したFirefox用のプログラムをiPhone/iPad用に変更します。

　まず、FirefoxのMozOrientationイベントをiPhone/iPadのdevicemotionイベントに変更します。以下のようにイベント名を書き換えます。

window.addEventListener("MozOrientation", ...)

↓

window.addEventListener("devicemotion", ...)

　次に、加速度を示すオブジェクト名を変更します（プロパティ名は同じです）。Firefoxではイベントハンドラに加速度のオブジェクトが渡されますが、iPhone/iPadではイベントオブジェクトのaccelerationオブジェクトになります。

var x = orientData.x; // 左右方向の傾き
var y = orientData.y; // 奥〜手前方向の傾き

↓

var x = evt.acceleration.x;   // 左右方向の傾き
var y = evt.acceleration.y;   // 奥〜手前方向の傾き

　以上で移植は完了です。実際のプログラムはサンプル02です。

iPhone/iPadを傾けると地図が自動的にスクロールする

　Firefoxで取得できる加速度の値は-1.0〜+1.0ですが、iPhone/iPadはより大きな値になります。iPhone/iPadで快適に操作できるようにするには、加速度ではなく傾きを示すaccelerationIncludingGravityを使った方がよいでしょう。

●サンプル02[HTML]

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8" /> 
    <title>Geo Location API + 加速度センサー</title>
    <link rel="stylesheet" href="css/main.css" type="text/css" media="all">
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="js/sample.js"></script>
  </head>
  <body>
    <h1>Geo Location API + 加速度センサー</h1>
    <div id="map_canvas"></div>
    <div id="sensor">現在地を特定中です...</div>
  </body>
</html>

●サンプル02[sample.js]

var gmap;
var lat = 35.698179;
var lng = 139.772489;
window.addEventListener("devicemotion", function(evt){
  if (!gmap) return;
  var x = evt.acceleration.x;  // 左右方向の傾き
  var y = evt.acceleration.y;  // 奥〜手前方向の傾き
  lng = lng + Math.round(x * 1000) / 10000000;
  lat = lat - Math.round(y * 1000) / 10000000;
  gmap.setCenter(new google.maps.LatLng(lat, lng)); // 現在地をマップの中心座標に設定
  document.getElementById("sensor").innerHTML = "x:"+x+"<br>y:"+y;
}, true);
window.addEventListener("load", function(){
  if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(
      function(position){
        lat = position.coords.latitude;
        lng = position.coords.longitude;
        gmap = new google.maps.Map(document.getElementById("map_canvas"), {
          zoom : 19,
          center : new google.maps.LatLng(lat, lng),
          mapTypeId : google.maps.MapTypeId.ROADMAP
        });
      },
      function(error){
        document.getElementById("sensor").innerHTML = "現在地を特定できませんでした。<br />エラーコード："+error.code;
      }
    );
  }else{
    document.getElementById("sensor").innerHTML = "Geo Location APIに対応していません";
  }
}, true);