スマートフォンサイトを作るとき、ちょっとした一手間を加えるだけで、驚くほどユーザビリティーが向上しますよ、というおハナシです。

その一手間とはズバリ、jQuery の「タッチイベント」を活用すること。
タッチイベントとは、その名のとおりスマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことで、以下の４つのタイプの機能が用意されています。

  • touchstart　：　タッチしたときに発生する
  • touchmove　：　タッチしたまま動かしたときに発生する
  • touchend　：　タッチ状態から離れたときに発生する
  • touchcancel　：　タッチ中に電話がかかってきた場合などに発生する（通常は使わない）

具体的にわかりやすいように、ここではスマートフォン用のサイトでよく使われる「開閉式のメニュー」を制作すると仮定して説明を進めていきます。

通常、何も考えずに jQuery を書くと、だいたい以下のようなコードになると思います。

$(function(){
$(".toggle").on("click",function() {
	$(this).toggleClass("on");
	$("#navi").find("ul").slideToggle();
	return false;
});
});

上記のコードを説明すると「［.toggle］をクリックすると［#navi］の中にあるリストを開閉する」という意味になります。

実際に動いているものが以下。

jQuery 開閉式メニュー：サンプル・デモ

このコードでは jQuery の［クリックイベント（.click）］を使用しています。

PC では確認できませんが、各種スマートフォン等のモバイルデバイスで試してみると、ボタンをタップした後、メニューが開閉するまでに一瞬のタイムラグが発生していることを確認できると思います。

続いて［タッチイベント］を使うヴァージョンで、同様の開閉メニューを実装するコードを書いてみます。

$(function(){
var _touch = ('ontouchstart' in document) ? 'touchstart' : 'click';
$("#navi").find(".toggle").on(_touch,function() {
	$(this).toggleClass("on");
	$("#navi").find("ul").slideToggle();
	return false;
});
});

ここではより使いやすいように、変数「_touch」に［タッチイベント］の処理を代入してみました。
PC上でボタン「.toggle」部をクリックした時の挙動と反応は前者とまったく同じですが、モバイルデバイスでタップすると、タイムラグもなく即時に反応してメニューが開閉するのを確認できるはずです。

jQuery 開閉式メニュー：サンプル・デモ

今回は比較的わかりやすく挙動の違いを確認してもらうために、簡単なケースで紹介しましたが、モバイルデバイス対応のプログラムを構築する際、［タッチイベント］を活用すると飛躍的にユーザビリティが向上しますし、PC では実現し得なかった処理を実装することができるようになります。

モバイル用の超有名 jQuery プラグイン［jQuery Mobile］などもありますが、これら大容量のライブラリを使わなくても、手軽に活用できるのが［タッチイベント］の魅力の１つでもあります。

もちろん、タッチできない環境のときはマウスのクリックでも動きます。
使いどころを見極めて活用したいですね。