スマホのjavascriptまとめメモ

iPhoneのJavascript関係でのメモ

 

UserAgent

if(navigator.userAgent.indexOf("Android")!=-1){
	isAndroid = true;
	trace("this is android");
}else if(navigator.userAgent.indexOf("iPhone; U;")!=-1){
	isIphone = true;
	isIos = true;
	trace("this is iPhone");
}else if(navigator.userAgent.indexOf("iPad; U;")!=-1){
	isIpad = true;
	isIos = true;
	trace("this is iPad");
}

ざっくりとはこんな感じで。

 

GPS関係

if(navigator.geolocation){
	navigator.geolocation.getCurrentPosition(this.onGotPosition);
}
function onGotPosition(position){
	var lat = position.coords.latitude; //緯度
	var lng = position.coords.longitude; //経度
	var acc = position.coords.accuracy; //誤差
	alert(lat +":"+lng+":"+acc);	
}

これはAndroidでも共通。ちなみに、Google ToolbarがインストールされたPCブラウザでも取得できる。(PCの場合、緯度・経度はもちろんそれなりにずれがあるが)

 

マルチタッチ関係

document.addEventListener("touchstart", this.touchHandler, false);
document.addEventListener("touchmove", this.touchHandler, false);
document.addEventListener("touchend", this.touchHandler, false);
document.addEventListener("touchcancel", this.touchHandler, false);

function touchHandler(event){
	trace("touchの数=>" + event.touches.length);
	for (var i = 0; i < 5; i++) {
		if (event.touches[i]) {
			// 座標をセット
			trace("touch" + i +"   x=" + event.touches[i].pageX + "  y=" + event.touches[i].pageY);
		}
	}
	event.preventDefault();	
}

これはAndroidでも共通。だがiPhoneだと4つぐらいはとれたが、HTC evoだと1つしかとれんかった。

さらに、スクロールをOffにするには、

<meta name="viewport" content=""width=480," user-scalable="no," maximum-scale="0.6667″" />

で横スクロールを禁止にすることができる。
viewportについては、こちら。event.preventDefault();で上の階層へのイベントの伝播を止めることで縦スクロールも禁止することができる。

上位クラスとしてgestureEventも用意されている。

 

DeviceMotion系

window.addEventListener("devicemotion", this.deviceMotionHandler);
function deviceMotionHandler(event){
	trace(event.accelerationIncludingGravity.x +":"+ event.accelerationIncludingGravity.y);
}

取り急ぎこういう感じで取得できる。こちらはiPhoneのみ(たぶんiPadも)。Androidのほうは、イベント名を「deviceorientation」にするとAndroid3.0からは取れるらしいが、手元に3.0以上のがないから確認できておらず。