今日は早めに家に帰り着いたので、久しぶりに何かプログラムを作りたいと思い、JQueryMobileを使った、GPSの位置情報を記録する簡単なWebアプリを作ってみました。
記録ボタンを押すとその地点の位置情報が記録され、グーグルマップへのリンクが作成されるという簡単なものです。また、逆ジオコーディングで地名を検索し、データをLocalStorageに記録しています。
iPhoneとAndroid、PCならChromeで動くと思います。 プログラム実行
■ソースコード
<html lang="jp" class="ui-mobile landscape">
<head>
<title>LocaRec</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<link rel="stylesheet" media="screen" href="http://termat.sakura.ne.jp/javascript/jqmobile/jquery.mobile-1.1.0.min.css">
<link rel="stylesheet" media="screen" href="http://termat.sakura.ne.jp/javascript/jqmobile/jquery.mobile.structure-1.1.0.min.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://termat.sakura.ne.jp/javascript/jqmobile/jquery.mobile-1.1.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" ></script>
<script type="text/javascript">
var listNum=0;
var dbName="locrec.data";
var list=[];
$(document).ready(function(){
loadLink();
});
var getLocation=function(){
if((navigator.geolocation == undefined)){
alert("位置情報が取得できません。");
return;
}
navigator.geolocation.getCurrentPosition(success,error);
};
var success=function(pos){
var lat=pos.coords.latitude;
var lon=pos.coords.longitude;
var uri="http://maps.google.co.jp/?q="+lat+","+lon;
var li=$("<li />");
li.attr("id","li"+listNum);
var a=$("<a />");
a.attr("name","li"+listNum);
listNum++;
a.attr("uri",uri);
a.attr("href",uri);
a.text(uri);
li.append(a);
$("#link").append(li);
var obj={uri:uri,text:""};
addLink(obj);
$("#link").listview('refresh');
geo(lat,lon,a);
};
var error=function(){
alert("位置情報が取得できません。");
};
var geo=function(lat,lon,a){
var latlng=new google.maps.LatLng(lat,lon);
var geocoder = new google.maps.Geocoder();
var geocoderRequest = { "location": latlng };
var geocoderCallback = function( results, status ){
if( status == google.maps.GeocoderStatus.OK ){
a.text(results[0].formatted_address);
var item=list[listNum-1];
item.text=results[0].formatted_address;
list[listNum-1]=item;
update();
}else{
alert( '失敗：' + status );
}
};
geocoder.geocode( geocoderRequest, geocoderCallback );
};
var setItemStatus=function(){
var flg=true;
var kids=$("#link").children();
if(kids.length<=0)return;
var tag="ui-icon ui-icon-delete ui-icon-shadow";
if(isDelete(kids[0].getElementsByTagName("span")[0])){
tag="ui-icon ui-icon-arrow-r ui-icon-shadow";
flg=false;
}
for(var i=0;i<kids.length;i++){
var span=kids[i].getElementsByTagName("span")[0];
$(span).attr("class",tag);
if(flg){
var a=kids[i].getElementsByTagName("a")[0];
var id=$(a).attr("name");
$(a).attr("href","javascript:removeItem('"+id+"');");
}else{
var a=kids[i].getElementsByTagName("a")[0];
var uri=$(a).attr("uri");
$(a).attr("href",uri);
}
}
};
var isDelete=function(span){
var name=$(span).attr("class");
if(name.indexOf("delete")>0){
return true;
}else{
return false;
}
};
var getSpanItem=function(par){
return par.getElementsByTagName("span")[0];
};
var removeItem=function(id){
if(window.confirm('リンクを削除しますか？')){
$("#"+id).remove();
removeLink(id);
}
};
var addLink=function(data){
list.push(data);
update();
};
var removeLink=function(id){
var val=id.replace("li","");
var n=Number(val);
list.splice(n,1);
update();
};
var update=function(){
localStorage[dbName]= JSON.stringify({data: list});
};
var loadLink=function(){
var data=localStorage[dbName];
if(!data)return;
var json=JSON.parse(data);
list=json.data;
var n=list.length;
if(n==0)return;
for(var i=0;i<n;i++){
var item=list[i];
var li=$("<li />");
li.attr("id","li"+i);
var a=$("<a />");
a.attr("name","li"+i);
a.attr("uri",item.uri);
a.attr("href",item.uri);
if(item.text.length>0){
a.text(item.text);
}else{
a.text(item.uri);
}
li.append(a);
$("#link").append(li);
}
listNum=n;
$("#link").listview('refresh');
};
</script>
<body>
<div data-role="page" class="ui-page ui-body-c ui-page-active">
<div data-role="header" data-theme="b" id="header" data-position="inline" class="ui-bar-b ui-header" role="banner">
<h1 class="ui-title" tabindex="0" role="heading" aria-level="1" id="title">ロケレコ</h1>
<a href="javascript:getLocation();" data-role="button" data-icon="plus" class="ui-btn-left" title="Add"">追加</a>
<a href="javascript:setItemStatus();" data-role="button" data-icon="gear" data-iconpos="notext" class="ui-btn-right" title="Del"">編集</a>
</div>
<div data-role="content">
<ul data-role="listview" id="link">
</ul>
</div>
</div>
</body>
</html>