スマホの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以上のがないから確認できておらず。