iphoneに搭載されているセンサー(GPS位置情報、ジャイロセンサー、電子コンパス、加速度センサー)の情報を取得

mobileapi

現時点における、モバイルデバイスの各センサーから情報を取得する方法を確認してみました。
iPhone4sでしか試していません。

example
(iphone,ipadでアクセスしてください)

サンプルコード

//位置情報取得
 window.onload = function(){
    navigator.geolocation.watchPosition(update); //現在位置情報を定期的に監視

    // navigator.geolocation.getCurrentPosition(); //現在位置情報を取得
    // navigator.geolocation.clearWatch(); //watchPosition()での監視を中止
}
function update(position){
    //下記すべての情報が取得できるわけでは無い
    var lat = position.coords.latitude; //緯度
    var lng = position.coords.longitude; //経度
    var alt = position.coords.altiude; //高度
    var acc = position.coords.accuracy; //緯度経度の誤差
    var alc = position.coords.altiudeAccuracy; //高度の誤差
    var hed = position.coords.heading; //方角
    var spe = position.coords.speed; //スピード

    var html ="";
        html += "緯度:" + lat + "<br>";
        html += "経度:" + lng + "<br>";
        html += "高度:" + alt + "<br>";
        html += "緯度経度誤差:" + acc + "<br>";
        html += "高度誤差:" + alc + "<br>";
        html += "方角:" + hed + "<br>";
        html += "速度:" + spe + "<br>";
        
    document.getElementById("geolocation").innerHTML = html;
}

//デジタルコンパス情報取得&ジャイロセンサー情報
window.addEventListener("deviceorientation", function(evt){
    //デジタルコンパス情報取得
    var ch = evt.webkitCompassHeading;
    var chAcc = evt.webkitCompassAccuracy;
    var html ="";
        html += "方角："+ch
        html += "　誤差："+chAcc;
    document.getElementById("compass").innerHTML = html;
    
    //ジャイロセンサー情報取得
    var alpha = evt.alpha;   // z-axis
    var beta = evt.beta;     // x-axis
    var gamma = evt.gamma;   // y-axis
    var html ="";
        html += 'Z回転(alpha):' + alpha + "<br>";
        html += "X回転(beta):" + beta + "<br>";
        html += "Y回転(gumma):" + gamma;
    document.getElementById("gyroscope").innerHTML = html;
    
}, false);

//加速度センサー情報取得
window.addEventListener("devicemotion", function(evt){

   //加速度
   var x = evt.acceleration.x;
   var y = evt.acceleration.y;
   var z = evt.acceleration.z;


   //傾き
   var xg = evt.accelerationIncludingGravity.x; //左右
   var yg = evt.accelerationIncludingGravity.y; //上下
   var zg = evt.accelerationIncludingGravity.z; //前後

   //回転値
   var a = evt.rotationRate.alpha; //z方向
   var b = evt.rotationRate.beta; //x方向
   var g = evt.rotationRate.gamma; // y方向

    var html ="";
        html  += "x:"+x+"<br>";
        html += "y:"+y+"<br>";
        html += "z:"+z+"<br>";
        
        html += "傾きx:"+xg+"<br>";
        html += "傾きy:"+yg+"<br>";
        html += "傾きz:"+zg+"<br>";
        
        html += "alpha(z):"+a+"<br>";
        html += "beta(x):"+b+"<br>";
        html += "gamma(y):"+g+"<br>";

   document.getElementById("rotation").innerHTML = html;

}, true);

//位置情報取得

window.onload = function(){

navigator.geolocation.watchPosition(update); //現在位置情報を定期的に監視

// navigator.geolocation.getCurrentPosition(); //現在位置情報を取得

// navigator.geolocation.clearWatch(); //watchPosition()での監視を中止

}

function update(position){

//下記すべての情報が取得できるわけでは無い

var lat = position.coords.latitude; //緯度

var lng = position.coords.longitude; //経度

var alt = position.coords.altiude; //高度

var acc = position.coords.accuracy; //緯度経度の誤差

var alc = position.coords.altiudeAccuracy; //高度の誤差

var hed = position.coords.heading; //方角

var spe = position.coords.speed; //スピード

var html ="";

html += "緯度:" + lat + " ";

html += "経度:" + lng + " ";

html += "高度:" + alt + " ";

html += "緯度経度誤差:" + acc + " ";

html += "高度誤差:" + alc + " ";

html += "方角:" + hed + " ";

html += "速度:" + spe + " ";

document.getElementById("geolocation").innerHTML = html;

}

//デジタルコンパス情報取得&ジャイロセンサー情報

window.addEventListener("deviceorientation", function(evt){

//デジタルコンパス情報取得

var ch = evt.webkitCompassHeading;

var chAcc = evt.webkitCompassAccuracy;

var html ="";

html += "方角："+ch

html += "　誤差："+chAcc;

document.getElementById("compass").innerHTML = html;

//ジャイロセンサー情報取得

var alpha = evt.alpha; // z-axis

var beta = evt.beta; // x-axis

var gamma = evt.gamma; // y-axis

var html ="";

html += 'Z回転(alpha):' + alpha + " ";

html += "X回転(beta):" + beta + " ";

html += "Y回転(gumma):" + gamma;

document.getElementById("gyroscope").innerHTML = html;

}, false);

//加速度センサー情報取得

window.addEventListener("devicemotion", function(evt){

//加速度

var x = evt.acceleration.x;

var y = evt.acceleration.y;

var z = evt.acceleration.z;

//傾き

var xg = evt.accelerationIncludingGravity.x; //左右

var yg = evt.accelerationIncludingGravity.y; //上下

var zg = evt.accelerationIncludingGravity.z; //前後

//回転値

var a = evt.rotationRate.alpha; //z方向

var b = evt.rotationRate.beta; //x方向

var g = evt.rotationRate.gamma; // y方向

var html ="";

html += "x:"+x+" ";

html += "y:"+y+" ";

html += "z:"+z+" ";

html += "傾きx:"+xg+" ";

html += "傾きy:"+yg+" ";

html += "傾きz:"+zg+" ";

html += "alpha(z):"+a+" ";

html += "beta(x):"+b+" ";

html += "gamma(y):"+g+" ";

document.getElementById("rotation").innerHTML = html;

}, true);

javascriptでデバイスのセンサーにアクセスできるようになるなんて……良い時代ですね。
“一般人がGPSを搭載したデバイスを肌身離さず持ち歩いている”なんてことも今までにはなかったことで、WebGISとかと組み合わせたらきっと面白いことができる気がします。

サンプルコード

投稿者: shimizu