WEBアプリのスマートフォン対応でよくやること

2012.10.3
CSS, CSS3, HTML5, iOS, JavaScript, jQuery

プログラマーの後藤です。

今回は最近よく使うソースの基本的な部分を自分のメモ用に少し解説してみます。
主にiPhone、iPadなのでとりあえずwebkitのみで対応。
ライブラリとしてjQueryを使っています。

サンプルをKAYACさんのjsdo.itに公開しておきました。

今回紹介する、WEBアプリのスマホ対応としてのポイントは３つ

var touchsupport = ('ontouchstart' in window); //タッチイベントの切り替え判定
	
if(touchsupport){
	touchstart = 'touchstart';
	touchmove = 'touchmove';
	touchend = 'touchend';
}else{
	touchstart = 'mousedown';
	touchmove = 'mousemove';
	touchend = 'mouseup';
}

PCとスマホで大きく違うのはやはりタッチイベントとマウスイベントだと思います。
どの程度イベントの違いによる影響を考慮するかにもよりますが、ココではあらかじめ
タッチとマウスのイベントの切り替えを事前に判別しておきます。

こうしておくことで、以降のイベントの定義をある程度簡素化でき
PCとスマホ両方でイベントが取れるようになります。
ただしPCとスマホでイベント以外にも多くの違いがあるので注意！
最初にしっかりこの辺りを組んでおくと後々デバック等にも便利です。

//イベントを設定
$("#button1").on(touchstart, onTouchStart);
$("#button2").on(touchstart, onTouchStart);
$("#button3").on(touchstart, onTouchStart);

if(touchsupport) e = e.originalEvent;
//タッチまたはクリックした位置を取得
if(touchsupport){
	touchStartX = e.touches[0].pageX;
	touchStartY = e.touches[0].pageY;
}else{
	touchStartX = e.pageX;
	touchStartY = e.pageY;
}

二つめのポイントは、jQueryを利用している場合のタッチイベントのオブジェクトの扱いです。
toucheventの場合jQueryではオリジナルのイベントを返す仕組みになっているので、
touchesなどのプロパティが使えません…。
なので、jQueryでイベントリスナーを利用する場合は
originalEventから元のイベントオブジェクトが取れることを覚えておきましょう。
(知らないと割とハマる…)

target = e.target;
		
var matrix = new WebKitCSSMatrix(window.getComputedStyle(target).webkitTransform);
objStartX = matrix.e; //x座標
objStartY = matrix.f; //y座標

$(target).css({'-webkit-transform':'translate3d('+moveX+'px,'+moveY+'px,0)'});

三つめのポイントは、オブジェクトの位置の指定にtranslateを使っているところです。
こうすることによって、スマホでの描画のパフォーマンスをある程度上げることができます。

ちなみに最新のjQueryだとベンダープレフィックスを省略とか
他にも色々簡単にできるみたいなのですが今回は割愛。
他のブラウザにもマルチで対応したい場合等、
このままでは難しい部分もちょっとあったり、考えどころは沢山ありますが
都度勉強しつつ臨機応変に対応して経験値貯めて行かないとですねー。

この辺りはjQueryがバージョンアップしていて
もっと良い方法がいろいろありそうなので調べてみたいところ。
まだ日本語のドキュメントがあまり無く難しいところですが…。

言い回しとかおかしいところあったらご指摘くださいm(__)m
初歩的なことかもしれませんが参考までに。