iPhoneでカルーセル時のチラツキをなくす

iPhoneでtranslate3dを利用したスワイプギャラリーでカルーセル処理を行おうとするとチラツキが生じる。

.swipeBox *{
  -webkit-transform: translate3d(0,0,0);
}

といった具合にスワイプギャラリーの構成要素すべてにtranslate3dを指定してGPUをONにすることでチラツキが解決する。

iPhoneのiOS4.3でopacity変更時に画像が欠ける

iPhoneのiOS4.3でopacityをanimateで変更した際に画像が欠けるバグに遭遇

$("img").css("opacity",0).animate({
	"opacity":"1"
});

opacityを1ではなく0.99に変更することで画像が欠けずに

$("img").css("opacity",0).animate({
	"opacity":"0.99"
});

iPhoneでwindowの高さを取得

iPhoneではjQueryを使って「$(window).height()」としても正確な高さが取得できない。すこし小さくなる。jQueryを使わずに、

var winHeight = window.innerHeight

などとすると正確な高さが取得できるようになります。

iOS4.3でclientX,clientY

iPhoneのiOS4.3でclientX,clientYが取得できないバグがある。pageX,pageYと同じ値が返ってくる。

var clientX = event.targetTouches[0].pageY - $(window).scrollTop()

などとしてclientXを計算すればOK

iPhoneのtouch イベント

iPhoneのtouch イベントについてもう少しくわしく調べてみるとタッチイベントの取得は

$("hoge").bind("touchstart",function(e){
 var e = event.touches[0];
 console.log(e.pageX)
})

だけでなく

$("hoge").bind("touchstart",function(e){
 var event = e.originalEvent.changedTouches[0];
 console.log(event.pageX)
})

でも取得できるっぽい。

iScrollでページ内リンク

iPhoneやAndroidで固定配置を実装するJavaScriptライブラリ「iScroll」。

myScroll = new iScroll('wrapper');
$("#nameNav a").click(function(){
	myScroll.scrollToElement($(this).attr("href"), 1);
	return false;
});

iScrollでページ内リンクを実装するには上記のようにscrollToElementメソッドを利用します。

touchstartイベントに対応しているかどうかチェックするスクリプト

touchstartイベントに対応しているかどうかチェックして対応している場合はtouchstartイベントを、対応していない場合はclickイベントを利用する方法

var tap = window.ontouchstart===null?"touchstart":"click";
$("#hoge").bind(tap,function(){
  //fire
})

iPhone ,Androidで縦でも横でも同じ横幅にする

AndroidとiPhoneで縦でも横でも横幅320pxにする方法

;(function($){
	var portraitWidth,landscapeWidth;
	if(/Android/.test(window.navigator.userAgent)){
		var changeEvent = "resize";
	}else{
		var changeEvent = "orientationchange";
		$("body").width(320)
	}
	$(window).bind(changeEvent, function(){
		if(Math.abs(window.orientation) === 0){
			portraitWidth=$(window).width();
			if(/Android/.test(window.navigator.userAgent)){
				if(!portraitWidth)portraitWidth=$(window).width();
			}else{
				portraitWidth=$(window).width();
			}
			$("html").css("zoom" , portraitWidth/320 );
		}else{
			$("body").removeClass("portrait").addClass("landscape");
			if(/Android/.test(window.navigator.userAgent)){
				if(!landscapeWidth)landscapeWidth=$(window).width();
			}else{
				landscapeWidth=$(window).width();
			}
			$("html").css("zoom" , landscapeWidth/320 );
		}
	}).trigger(changeEvent);
})(jQuery);

スマートフォンで画像をダウンロードさせない方法

iPhoneやAndroidなどのスマートフォンではガラケーと違い画像の長押しで写真がダウンロードできてしまう。それを防ぐためのjQuery スクリプト。

$(function(){
	$(".hoge img").load(function(){
		if(!$(this).data("gifFlag")){
			$(this).data("gifFlag",true)
			$(this).css({
				"background":"url("+$(this).attr("src")+")",
				webktBackgroundSize:"100%",
				backgroundSize:"100%"
			}).attr("width",$(this).width()).attr("height",$(this).height()).
			$(this).attr("src","data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D");
		}
	});
});

画像の読み込みがおわったあとで画像をimg要素の背景書に設定し、src属性を透過gifに書き換えるだけ。透過gifも用意するのがめんどくせいのでdata スキーム URIでいい。

iPhoneシミュレータのiOS SDKのバージョンアップ

iPhoneシミュレータのバージョンが古いと指摘されて調べると、
iOS Dev CenterのiOS SDKの最新バージョンはXcode3.2.5 and iOS SDK 4.2。現状のXcode3.2.3 and iOS SDK 4.0。

というわけでバージョンアップしましょう。

iOS SDKのバージョンアップはiOS Dev Centerから最新のバージョンをダウンロードして行います。

ダウンロードとインストールで結構時間がかかるうえ14G（ファイルのダウンロードに3G、インストールに10G）ほどHDが必要になるので注意が必要です。

HDDの状況によってはアップデートではなく、一度アンインストールしてからインストールしてもよいかも。

ターミナルから次のコマンドを入力することでSDKの削除が出来ます。

sudo /Developer/Library/uninstall-devtools --mode=all

一度 OS を再起動してからインストールします。

うーんめんどくさい。HDDの容量アップしたいな。

iPadでportrait(縦)とlandscape(横)を切り返すスタイルシート

link要素を次のように記述すると縦横のスタイルシートが切り替えられる。

<link rel="stylesheet" media="all and (orientation:portrait)" href="style/portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="style/landscape.css">

iPhoneのonTouch系イベント

iPhoneではonmouse系のイベントが利用できない。代わりにonTouch系のイベントが用意されている。

onTouchStart
onTouchMove
onTouchEnd
onTouchCancel

jQueryでは次のようにbindを利用してonTouch系のイベントが利用できる。

$("hoge").bind("touchstart",function(){
 //処理
})

注意点1

$("hoge").bind("touchstart",function(e){
 console.log(e.pageX)
})

なんてのは動作しない。イベント情報はeventで取得できる。

さらにevent.touches[0]と言った形で指の本数だけイベントが設定されている。指の1本だと次のようにイベント情報が取得できる。

$("hoge").bind("touchstart",function(e){
 var e = event.touches[0];
 console.log(e.pageX)
})

注意点2

onTouchEndではevent.touchesを取得できない。TouchEndではもうディスプレイから指が離れているので情報取得できないよという糞仕様。言いたいことはわかるが不便で仕方ない。

iPhoneでステータスバーを消す方法

iPhoneではステータスバーを消す為のフルスクリーンモードが用意されています。以下のmetaタグを追加するだけでOK。

<meta name="apple-mobile-web-app-capable" content="yes" />

しかし、フルスクリーンモードはホーム画面に登録後にホーム画面から起動したページにしか適応されない。微妙すぎる。

つぎのjQueryコードを入れておくと自動でステータスバーが消えます。

window.onload = function(){
	$("body").animate({scrollTop:0})
}

ステータスバーはページが完全に読み込みが行うまで消せないのでwindow.onloadで実行のタイミングを調整(ちょっとタイミングがずれるけど誤差)

iPhone,iPod touchでは両方のテクニックが使えますが、iPadでは後者のJavaScriptは利用できませんのであしからず。