2014/06/17

【JavaScript】スマホやタブレットでのスワイプ・フリック動作を取得する方法

【JavaScript】スマホやタブレットでのスワイプ・フリック動作を取得する方法

スマートフォンやタブレットではスワイプやフリックを行って操作します.

今回は,指の動いた方向や距離を取得し,スワイプ・フリック動作として取得する方法を紹介します.

目次

タッチイベント

AndroidやiPhoneでの,指の動作を取得するには,touchstarttouchmove,,touchendと,段階に応じた3種類のイベントを使用します.

touchstarttouchmovetouchend
画面に指が触れた場合 画面上で指が移動した場合 画面から指が離れた場合

サンプルソース

左右のスワイプ・フリック動作を取得してみます.

window.addEventListener("load", function(event) {
    var touchStartX;
    var touchStartY;
    var touchMoveX;
    var touchMoveY;

    // 開始時
    window.addEventListener("touchstart", function(event) {
	event.preventDefault();
	// 座標の取得
	touchStartX = event.touches[0].pageX;
	touchStartY = event.touches[0].pageY;
    }, false);

    // 移動時
    window.addEventListener("touchmove", function(event) {
	event.preventDefault();
	// 座標の取得
	touchMoveX = event.changedTouches[0].pageX;
	touchMoveY = event.changedTouches[0].pageY;
    }, false);

    // 終了時
    window.addEventListener("touchend", function(event) {
	// 移動量の判定
	if (touchStartX > touchMoveX) {
	    if (touchStartX > (touchMoveX + 50)) {
		//右から左に指が移動した場合
	    }
	} else if (touchStartX < touchMoveX) {
	    if ((touchStartX + 50) < touchMoveX) {
		//左から右に指が移動した場合
	    }
	}
    }, false);
}, false);

開始時の指の位置座標と,移動時に上書きされる指の位置座標を終了時に判定し,左右の動きで別の動作をするようになっています.

※preventDefault()を使用してブラウザのスクロールを停止する必要がある場合には,適宜スクロール処理を追加する必要があります.

まとめ

上記の処理で,スワイプ・フリック動作を取得することが出来ます.

スマートフォンやタブレットでのUIは使いやすい・使いにくいがはっきりと出やすいので,スワイプ・フリック動作での演出を行う場合には,実機でのテストを何度も行ってみると良いと思います.