GPSを利用しよう (3/3)

■GPSアクセスの実際

では、実際にGPSアクセスを行う例を挙げておきましょう。下のリスト欄に、簡単なサンプルを挙げておきます。これを実行し、ボタンにタッチすると、現在の位置に関する情報が得られます。アンドロイドアプリにする場合は、先のManifest.mf修正も忘れないで下さい。

ここでは、<script type="text/javascript" src="phonegap.js">というようにしてPhoneGapライブラリを読み込む形にしてあります。が、既に触れたように、GPSの機能はPhoneGapライブラリではなくHTML5の機能ですので、このライブラリを読みこまなくともちゃんと機能します。この先、PhoneGapライブラリの機能も利用することになりますから、今のうちから書いておく習慣をつけておきましょう。

ボタンをクリックしたところでdoActionを呼び出しています。そこでgetCurrentPositionを呼び出し、成功時の処理を行うonSuccessで取得した各値を取り出し表示しています。取り出した値は、ひとつのテキストにまとめた後、$('#msg').htmlというものでid="msg"のタグに表示しています。これは、jQueryの機能を使っています。前回、jQuery Mobileを導入する話をしましたが、jQuery MobileはjQueryのプラグインですので、jQueryの機能ももちろん使うことができます。

というわけで、GPSを使ったアプリは意外と簡単に作れることがわかりました。興味のある人は、HTML5のGeolocatin APIでもう少し調べてみると面白いでしょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript"
	src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript"
	src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript">
function onSuccess(position) {
	var lat = position.coords.latitude;
	var lng = position.coords.longitude;
	var alt = position.coords.altitude;
	var hdng = position.coords.heading;
	var t = new Date(position.timestamp);
	var msg = lat + "/" + lng + "<" + alt + ">";
	msg += "<br><" + hdng + ">" + t;
	$('#msg').html(msg);
};

function onError(error) {
	alert('code: ' + error.code + ':' + error.message);
}

function doAction(){
	navigator.geolocation.getCurrentPosition(onSuccess, onError);
}

</script>
	
</head>
<body>
	<!-- home page -->
	<div id="home" data-role="page">
		<div data-role="header">
			<h1>Sample</h1>
		</div>
		<div data-role="content">
			<h2>Sample Page</h2>
			<p id="msg">※これはサンプルで作ったページです。</p>
			<button onclick="doAction();">click</button>
		</div>
	</div>
</body>
</html>

<< 前へ　

記事のリストに戻る

PC Site G+ mail