Javascript センサー

2024-12-262024
98.6% (360.9/366)
December
83.6% (25.9/31)
Week 52
56.3% (3.9/7)
Day 26 Thu
94.5% (22.6/24)

訪問者

total: 12317
today: 1
yesterday: 1
now: 1

↑

更新

MenuBar

位置情報
- 単発
- 連続
加速度
傾き
コンパス

位置情報 †

http://www.w3.org/2008/geolocation/

↑

単発 †

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Location</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
$(document).ready(function(){
  var options = {
    enableHighAccuracy: false, // true : 高精度
    timeout: 5000              // タイムアウト (ms)
  };

  window.navigator.geolocation.getCurrentPosition(
    showLocation, showError, options);
});

function showLocation(e) {
  var $ul = $('ul');

  var obj = e.coords;
  for (var key in obj) {
    $ul.append('<li>' + key + "=" + obj[key] + '</li>');
  }
}

function showError(e) {
  switch(e.code) {
  case 1 :
    alert('Error 1 : PERMISSION_DENIED');
    break;
  case 2 :
    alert('Error 2 : POSITION UNAVAILABLE');
    break;
  case 3 :
    alert('Error 3 : TIMEOUT');
    break;
  default :
    alert('Error ' + e.code + ' : UNKNOWN ERROR');
    break;
  }
}
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
<UL></UL>
</body>
</html>

↑

連続 †

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Location2</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
var watchId;

$(document).ready(function(){
  var options = {
    enableHighAccuracy: false, // true : 高精度
    timeout: 5000,             // タイムアウト (ms)
    maximumAge: 1000           // キャッシュ有効期間（ミリ秒)
  };

  
  $('button').on('click' , function(e) {
    var $this = $(this);
    
    if ($this.text() == 'Start') {
      $this.text('Stop');
      watchId = window.navigator.geolocation.watchPosition(
                   showLocation, showError, options);
    } else {
      $this.text('Start');
      window.navigator.geolocation.clearWatch(watchId);
    }
  });
  
});

function showLocation(e) {
  var $ul = $('ul');
  $ul.empty();
  var obj = e.coords;
  for (var key in obj) {
    $ul.append('<li>' + key + "=" + obj[key] + '</li>');
  }
}

function showError(e) {
  switch(e.code) {
  case 1 :
    alert('Error 1 : PERMISSION_DENIED');
    break;
  case 2 :
    alert('Error 2 : POSITION UNAVAILABLE');
    break;
  case 3 :
    alert('Error 3 : TIMEOUT');
    break;
  default :
    alert('Error ' + e.code + ' : UNKNOWN ERROR');
    break;
  }
}
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
<button>Start</button>
<UL></UL>
</body>
</html>

↑

加速度 †

http://dev.w3.org/geo/api/spec-source-orientation.html#devicemotion
x : West→East
y : South→North
z : Down→Up

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Motion</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
$(document).ready(function(){
  window.addEventListener("devicemotion", showmotion, true);
});

function showmotion(e) {
  var $ul = $('ul');
  $ul.empty();

  var obj = e.accelerationIncludingGravity;
  for (var key in obj) {
    $ul.append('<li>' + key + "=" + obj[key] + '</li>');
  }
}
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
<UL></UL>
</body>
</html>

↑

傾き †

http://dev.w3.org/geo/api/spec-source-orientation.html#deviceorientation
alpha(z軸周り : Down→Up周り) 0～360
beta(x軸周り : West→East周り) -90～90 (液晶面上 0 ++++ 液晶面正面 90 ---- 背面上 0 ---- 背面正面 -90 ++++ 液晶面上 0) ・・・iPad が上を向いているか下を向いているかの判断は beta からはできないのね・・・
gamma(y軸周り : South→North周り) -180～180

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Tilt</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
$(document).ready(function(){
  window.addEventListener("deviceorientation", showorientation, true);
});

function showorientation(e) {
  var $ul = $('ul');
  $ul.empty();

  var obj = e;
//  for (var key in obj) {
//    $ul.append('<li>' + key + "=" + obj[key] + '</li>');
//  }
  $ul.append('<li>alpha(z軸)=' + obj.alpha + '</li>');
  $ul.append('<li>beta(x軸)=' + obj.beta + '</li>');
  $ul.append('<li>gamma(y軸)=' + obj.gamma + '</li>');
}
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
<UL></UL>
</body>
</html>

↑

コンパス †

HTML5で標準化されていない
http://dev.w3.org/geo/api/spec-source-orientation.html#compassneedscalibration
Safari では、deviceorientation イベントから方位を取得可能
Safari Developer Library/webkitCompassHeading

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Compass</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
$(document).ready(function(){
  window.addEventListener("deviceorientation", showorientation, true);
});

function showorientation(e) {
  var $ul = $('ul');
  $ul.empty();

  var obj = e;
//  for (var key in obj) {
//    $ul.append('<li>' + key + "=" + obj[key] + '</li>');
//  }
  $ul.append('<li>webkitCompassAccuracy=' + obj.webkitCompassAccuracy + '</li>');
  $ul.append('<li>webkitCompassHeading=' + obj.webkitCompassHeading + '</li>');
}
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
<UL></UL>
</body>
</html>

HTML

Javascript センサー

目次

訪問者

更新

最新の10件

人気の10件

MenuBar

位置情報 †

単発 †

連続 †

加速度 †

傾き †

コンパス †