傾けた方向に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です。
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);