仕上げ
その他、アプリケーションとして必要な仕上げをします。
ビューポートの設定
スマートフォンのブラウザはピンチ操作などによって拡大縮小が可能ですが、特に地図の場合はUI上固定されている方が何かと便利です。
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
iPhone用「ホーム画面に追加」対応
iPhoneではSafariのページを「ホーム画面に追加」するとアイコン化することができますが、その際にapple-mobile-web-app-capableを適切に設定しておくと全画面アプリ化することができます。URLバーやツールバーが表示されないので画面を広く使えます。
<meta name="apple-mobile-web-app-capable" content="yes">
全画面表示
ビューのルートとなる<div id="container">は、実はこのままでは表示されません。「height:100%」の記述はなんとなく期待される「見えているビューポートに対して100%」としては機能しないからです。「width:100%」の方は期待通りに機能するので、読み込み完了時に<div id="container">の高さをwindowの高さと合わせます。
$('#container').css({height: parseInt($(window).height(), 10)});
CSSの調整
標準では<div>などにmarginやpaddingが設定されている場合があって、全画面にぴっちり地図が収まらないためリセットします。その他、絵的な調整についてはソースを参照してください。
html, body, div{
margin:0; padding:0;
}
ソース
今回のアプリの完全なソースは以下のとおりです。
前述のとおり、＜あなたのアプリケーションID＞の部分はご自分で取得されたアプリケーションIDに書き換えてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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">
<title>マクどこ</title>
<style type="text/css">
html, body, div{
margin:0; padding:0;
}
a{
color:#fff; font-weight:bold;
}
div#label{
z-index:2;
padding:8px;
overflow:hidden;
color: #fff;
background-color: #000;
background-image: -webkit-gradient(
linear,
0% 0%,
0% 100%,
from(rgba(155, 155, 155, 0.1)),
to(rgba(255, 255, 255, 0.5)),
color-stop(.5,rgba(155, 155, 155, 0.2)),
color-stop(.5,rgba(255, 255, 255, 0.1))
);
border-radius: 8px;
opacity: .7;
}
div#title{
font-size:14pt;
font-weight:bold;
line-height:1.2em;
width:100%;
overflow:hidden;
}
div#desc{
font-size:9pt;
font-weight:normal;
line-height:9pt;
overflow:hidden;
}
</style>
</head>
<body>
<div id="container" style="width:100%; height:100%; position:relative;">
<div id="map" style="width:100%; height:100%;"></div>
<div id="label" style="position:absolute; bottom:4px; right:4px; width:92%; height:64px">
<div id="title">マクどこ</div>
<div id="desc">always I'm lovin'it</div>
</div>
</div>
</body>
<script src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=＜あなたのアプリケーションID＞"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
jQuery(document).ready(function($){
//resize container
$('#container').css({height: parseInt($(window).height(), 10)});
//initialize map
var map = new Y.Map("map");
map.addControl(new Y.ZoomControl());
map.drawMap(new Y.LatLng(34.6812,135.2022), 14, Y.LayerSetId.NORMAL);
//main
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(pos){
var latlng = new Y.LatLng(pos.coords.latitude,pos.coords.longitude);
searchNearestMcDonald(latlng);
});
}
//search nearest McDonald
var searchNearestMcDonald = function(latlng){
$.ajax({
url: "http://search.olp.yahooapis.jp/OpenLocalPlatform/V1/localSearch",
dataType: "jsonp",
data:{
appid: "＜あなたのアプリケーションID＞",
cid: "d115e2a62c8f28cb03a493dc407fa03f",
results: 1,
lat: latlng.lat(),
lon: latlng.lng(),
sort: "dist",
output: "json"
},
success: function(result){
updateRoute(latlng, result);
}
});
}
//update Route
var plugin = null;
var updateRoute = function(latlng, result){
var coords = result.Feature[0].Geometry.Coordinates.split(",");
if(plugin){
map.removePlugin(plugin);
}
plugin = new Y.RouteSearchPlugin({latlngs:[
latlng,
new Y.LatLng(coords[1],coords[0])
]});
map.addPlugin(plugin);
var name = result.Feature[0].Name;
var address = result.Feature[0].Property.Address;
var tel = result.Feature[0].Property.Tel1;
var simplename = name.replace('マクドナルド','');
var distance = (plugin.estimateDistance() * 1000) + 'm';
$('#title').html(simplename + '(' + distance + ')');
$('#desc').html(address + '<br /><a href="tel:' + tel + '">' + tel + '</a>');
}
});
</script>
</html>
おわりに
いかがでしたでしょうか。YOLPにはGUIを伴う高機能・リッチな高レベルAPIからネイティブに近い低レベルAPIまでさまざまな粒度のAPIが提供されています。またマクドナルド店舗カセットのようなデータセットの配布や、データのホスティングも提供されています。これらをうまく組み合わせることで、少ない手間で有益なアプリケーションを開発することが可能となります。YOLPはこれからもHTML5とJavaScriptによる位置情報サービス開発に全力でコミットしていきますので、どうぞたくさんのフィードバックをお聞かせください。よろしくお願いいたします。
※定期的に現在地を取得して自動的にルート検索を行う機能には、YOLPはご利用いただけませんのでご注意ください。
