このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ第47回

iOS 4.2の新機能で作るHTML5+JSアプリ

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です。

【図】fig06.png
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);
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く