GPSを利用しよう (3/3)
作成:2012-03-12 07:52
更新:2012-03-12 07:52
更新:2012-03-12 07:52
■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でもう少し調べてみると面白いでしょう。
ここでは、<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>
※関連コンテンツ
「PhoneGapによるAndroid/iPhoneアプリ開発入門」に戻る