Dreamweaver/HTML5でiPhoneアプリ開発(その8: アプリがY!ロコに遷移するのを防ぐ)

Filed in Adobe, iPhone, Web関係

※この記事は古いので読み飛ばして下さい(続きはこちら)。

その7では、リバースジオコーディングを使用して、地図中心部の住所を表示する様な拡張を行いました。この調子でどんどん拡張して行きたいところですが、少々厄介な問題を見つけたので、今回はその対策を行います。

これまで作成してきたアプリでは、地図の右下に図1の様なロゴが表示されます。一見何の変哲もない、良く見慣れたYAHOO! JAPANのロゴです。

問題のロゴ

図1: 問題のロゴ

このロゴはY!ロコへのリンクになっていて、Webブラウザでこれをクリックすると、別窓でY!ロコのページが開きます。それ自体は何の問題もないのですが、これをシミュレータ上でクリックしてしまうと、大変な事になります。

上記のロゴは、aタグにtarget=”_blank”を追加する事で、別窓でY!ロコを開く様になっています。これは大抵のWebブラウザが対応しており、特に珍しい事でも何でもありません。

・・・が、今回開発中のアプリは、PhoneGapというフレームワークを使用してWebアプリをあたかもiPhoneアプリの様に扱っています。で、このPhoneGapというのが、target=”_blank”に対応していません。そのため、アプリ上で上記のアイコンをクリックすると、そのままY!ロコに移動してしまいます(図2)。

Y!ロコの画面

図2: Y!ロコの画面

通常のWebブラウザであれば「戻る」ボタンでも押せば元の画面に戻れるのでしょうが、今回開発中のアプリにはそんなものありません。もちろんY!ロコの画面上にもありません。つまり、一度Y!ロコに移動してしまうと、アプリを起動し直さない限り二度と元の画面には戻れません。

これではとても使い物にはなりません。何とかしてY!ロコの出現を阻止する必要があります。そこで、APIのソースを調べてみたところ、問題のロゴには”#yolp-logo-link”というidがついている事が分かりました。これをクリックしてもリンク先に飛ばない様にしてやれば、Y!ロコに飛ばされずに済みそうです。

具体的には、その7で作成した”maptest.js”を以下の様に修正します(“index.html”は変更なし)。

$(document).ready(function() {
	// 初期化
	ymap = new Y.Map("map");
	draw = false;
	follow = true;
	watchID = 0;

	// イベントリスナ
	ymap.__eventlistener__ = ymap.bind('drag', watchStop);
	ymap.__eventlistener__ = ymap.bind('click', move);
	ymap.__eventlistener__ = ymap.bind('moveend', getAddress);

	// 現在地のマーカーで使用するアイコン
	icon = new Y.Icon('http://i.yimg.jp/images/map/yy/images/icon/yy_aicon_01_32pix.gif');

	// ルート検索結果を描画するレイヤ
	route = new Y.RouteSearchLayer();
	ymap.addControl(new Y.CenterMarkControl)

	// 追従開始
	watchStart();
});

// 位置情報の取得と地図の描画を行う
function watchStart() {
	// 位置情報を取得する
	watchID = navigator.geolocation.watchPosition(
		// 位置情報の取得に成功したら、現在地の周辺地図を描画する
		function (position) {
			// 現在地の緯度・経度を取得
			var lat = position.coords.latitude;
			var lng = position.coords.longitude;
			cur = new Y.LatLng(lat, lng);

			// 1回だけ地図を描画する
			if(!draw) {
				ymap.drawMap(cur, 17, Y.LayerSetId.NORMAL);
				// 右下のロゴをタップしてもY!ロコに移動させない
				$("#yolp-logo-link").click(function(e) {
					e.preventDefault();
				});
				draw = true;
			}

			// 現在地にマーカーを描画する
			ymap.clearFeatures();
			var marker = new Y.Marker(cur, {icon: icon});
			ymap.addFeature(marker);

			// 現在地が中心にくる様にマップを移動する
			if(follow) {
				ymap.panTo(cur);
			}
		},
		// 位置情報の取得に失敗したら、エラーダイアログを出す
		function (error) {
			var message = "";

			switch(error.code)
			{
				case error.PERMISSION_DENIED:
					message = "位置情報が利用できません";
					break;
				case error.POSITION_UNAVAILABLE:
					message = "位置情報の取得に失敗しました";
					break;
				case error.TIMEOUT:
					message = "タイムアウトしました";
					break;
			}
			window.alert(message);
		}
	);
}

// 手動で地図をスクロールさせたら、一旦追従をやめる
function watchStop() {
	watchID = 0;
	follow = false;
}

// 地図をタップしたら、その地点を中心に設定する
function move(position) {
	ymap.panTo(position);
	watchID = 0;
	follow = false;
}

// 地図を現在地周辺に戻す
// 追従停止中であれば、追従を再開する
function returnHome() {
	ymap.panTo(cur);
	watchStart();
	follow = true;
}

// ルート検索を行い、結果を地図上に表示する
function routeSearchStart() {
	var latlngs = [cur, ymap.getCenter()];
	route.execute(latlngs);
	ymap.addLayer(route);
}

// ルート検索結果を非表示にする
function routeSearchEnd() {
	ymap.removeLayer(route);
}

// 現在地の住所を取得する
function getAddress() {
	var latlng = ymap.getCenter();
	var lat = latlng.lat();
	var lng = latlng.lng();
	jQuery.ajax({
			url:"http://reverse.search.olp.yahooapis.jp/OpenLocalPlatform/V1/reverseGeoCoder?lat=" + lat + "&lon=" + lng + "&appid=【アプリケーションID】",
			type:"get",
			success:function(data){
			address.innerHTML = data.getElementsByTagName("Address")[0].textContent;
		}
	});
}

その7からの変更点は、38-41行目を追加したのみです。これで、右下のロゴをタップしてもY!ロコに飛ばされずに済みます。ただし、これがYOLPの利用規約に則ったものであるかどうかは分かりません。使用は自己責任でお願いします。(その9に続く)

 
Click to view/hide