iPhoneなどスマートフォンや最近の携帯電話では、GPS情報を受信できる。
カーナビなどのアプリも一般的になりつつある。
自分のiPhoneでも受信して利用できるか試してみた。
クリックで表示（PCの場合、ブラウザによってはGPS情報が表示されません）
現在地の緯度、経度、誤差、移動速度を取得してみる。
スマートフォン向けのUI（ユーザインターフェース）を提供しているjQueryMobileを利用すると見た目もネイティブアプリのようになるため積極的に利用してみた。
index.htmlのheadタグ内の記述は以下のとおり、
<!– for jQuery –>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<!– /for jQuery –>
これを使ってコンテンツ部分と情報ページ部分の両方をsectionというタグで分けて、同じindex.html内に記述している。ちょっとした情報ページであればこれで十分だ。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!– for iPhone –>
<meta name="viewport" content="width=device-width ,initial-scale=1.0 ,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/> <!–フルスクリーンモード–>
<link rel="apple-touch-icon" href="icon.png" /> <!–ホームアイコンの設定–>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!– /for iPhone –>
<!– for jQuery –>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<!– /for jQuery –>
<script src="main.js"></script>
<title>GPS情報</title>
<style>
p{
font-family: 'メイリオ', Osaka;
}
</style>
</head>
<body>
<section id="index" data-role="page" data-title="GPS情報">
<div data-role="header" data-position="fixed" data-theme="a">
<h1>GPS情報</h1>
<a href="#quote" class="ui-btn-right" data-transition="fade">参考文献</a
</div>
<div data-role="content" data-theme="c">
<p id="gps_info">???</p>
<button onclick="updateWP()">位置情報更新</button>
</div>
<footer data-role="footer" data-position="fixed" data-theme="a">
Copyright 2012 mrgarita.net
</footer>
</section>
<!– 参考文献 –>
<section id="quote" data-role="page" data-title="参考文献">
<header data-role="header" data-position="fixed" data-theme="a">
<a href="#index" data-transition="fade">トップ</a>
<h1>参考文献</h1>
</header>
<div data-role="content" data-theme="c">
<p>
日経ソフトウエア2012年6月号特別付録<br>
<br>
HTML5逆引きポケット辞典<br>
第4章 端末の位置情報を利用したい
</p>
</div>
<footer data-role="footer" data-theme="a">
Copyright 2012 mrgarita.net
</footer>
</section>
</body>
</html>
静止状態であれば、緯度と経度は取得可能だが、移動速度は継続的にGPS情報を取得する必要があるため、今回は
navigator.geolocation.watchPosition
というGPS情報を継続的に取得できる命令を使った。
通常の緯度と経度を取得するのであれば、navigator.geolocation.getCurrentPositionを使えば取得できる。
実際のソース（JavaScript部分：main.js）
// -------------------------------------------------------------------------------------–
// main.js: GPS情報を取得するプログラム
// created at 2012-08-29 on MRGARITA.NET
// -------------------------------------------------------------------------------------–
var WP; // 位置情報取得識別ID
// 位置情報の取得に成功した場合
function SccCB(position){
// 緯度の取得
var lat = position.coords.latitude;
// 経度の取得
var lon = position.coords.longitude;
// 緯度経度の誤差範囲の取得
var acu = position.coords.accuracy;
// 移動速度の取得
var spd = position.coords.speed;
spd = spd * 60 * 60 / 1000; // m/secをkm/hになおす
// 表示データ整形
var gpsInfo = "緯度は" + lat + "<br>";
gpsInfo += "経度は" + lon + "<br>";
gpsInfo += "誤差は" + acu + "m<br>";
gpsInfo += "移動速度は" + spd + "km/h";
document.getElementById("gps_info").innerHTML = gpsInfo;
stopWP();
alert("位置情報を更新しました");
}
// 位置情報の取得に失敗した場合
function ErrCB(error){
alert("位置情報を取得できませんでした");
}
// 位置情報を更新
function updateWP(error){
stopWP();
// 端末の位置情報を継続的に取得する(navigator.geolocation.watchPosition)
WP = navigator.geolocation.watchPosition(SccCB, ErrCB, {enableHighAccuracy: true});
}
// 位置情報の監視を停止
function stopWP(error){
navigator.geolocation.clearWatch(WP);
}
window.onload = function(){
updateWP(); // 位置情報を表示
}
移動速度はm/secで取得されるためkm/hに直してある。
歩いている位では、「0km」と表示されるだけだったので車での移動中に試してみた。
車のメーターが60kmを指しているときに『位置情報更新』ボタンを押してみると「58km」と表示された。
ほぼ合っているようだ。
今度新幹線や他の乗り物で試してみようと思う。
位置情報を実際に取得する命令は、
WP = navigator.geolocation.watchPosition(SccCB, ErrCB, {enableHighAccuracy: true});
の部分だが、注意が必要だ。
引数部分のSccCBは正常に取得した場合に実行する関数で
ErrCBは取得に失敗したとき呼ばれる関数である。
SccCBの中で実際に緯度や経度、誤差、移動速度を取得している。
これには一定の時間がかかるため、SccCBやErrCB関数の最後にalert文を挿入し、次の処理に移動しないようにしている。
今回はGPS情報を取得して表示しているだけなので特にalert文を挿入する必要はないが、緯度や経度を取得したあと何か処理を行いたい場合はこのようにきちんと取得後に何か処理を行うようにしなければいけない。
普段使っているスマートフォンでこんなことが簡単にできるようになったのだなぁ、と技術の進歩に驚く。
実際の軍事衛星は、もっと高精度なのだろうから、いつでも特定の人物を狙って攻撃できますね。
こわい話です。
コメント