memorandum
thinking about creation

jQueryでスワイプをシンプルに実装する

Entry Date _ 2020.02.19
/
ModifiedDate _ 2020.02.19

問い合わせフォームを簡単なSPAにしたところ、スマートフォンで確認画面からフォーム入力画面に遷移するときにスワイプで移動したいとの要望があった。

調べてみると簡単にできそうだったので、またいつか使うときのために、下記の関数にしておくことにした。

var Swipe = function(_opt){
    var direction, position;

    // タッチデバイスか判定
    var isTouchDevice = function() {
        return ('ontouchstart' in window || navigator.msPointerEnabled) ? true : false;
    };

    if (isTouchDevice()){

        var getPosition = function(event){
            return event.originalEvent.touches[0].pageX;
        }

        // タッチ検知
        $(_opt.selector).on('touchstart', function(event){
            position  = getPosition(event);
            direction = ''; //一度リセットする
        });

        // スワイプ検知
        if (!_opt.swpmove) _opt.swpmove = 140;
        $(_opt.selector).on('touchmove',  function(event){
            var swpmove = position - getPosition(event); // 移動量
            if (swpmove > _opt.swpmove) {
                direction = 'left';
            }else if (swpmove < (_opt.swpmove * -1)){
                direction = 'right';
            }
        });

        // 指が離れたか検知
        $(_opt.selector).on('touchend',  function(event){
            if (direction == 'right'){
                _opt.swRight();
            }else if (direction == 'left'){
                _opt.swLeft();
            }
        });
    }
}

基本的には、Qiitaにあった『スマホのスワイプ検知』をベースにさせてもらっている。それを、包括的な関数にまとめ、少し機能を追加したものだ。

元と違うところは、タッチデバイスかどうか調べて、それ以外はイベントを発生させないところと、「スワイプを検知する領域」「スワイプと判断する指の移動量」「右にスワイプした時の処理」「左にスワイプした時の処理」を、それぞれ外部から設定できることろ。

使い方は、上記のスクリプトを読み込んでから、以下のように「Swipe」をコールします。

Swipe({
    selector:'main',// スワイプを検知する領域
    swpmove: '140', // スワイプと判断する指の移動量
    swRight: function(){
        // 右にスワイプした時の処理
        console.log('右');
    },
    swLeft: function(){
        // 左にスワイプした時の処理
        console.log('左');
    }
});

サンプルを表示する

PCでもChromeならば、デベロッパーツールのモバイル・エミュレーターでスワイプを確認することができる。スワイプするとコンソールに「右」「左」と表示されるはずだ。

元の記事では「スワイプと判断する指の移動量(swpmove)」を「70」に設定してあったが、実機で試してみると上下のスクロールでもスワイプと判断してしまうことがあったので初期値を倍の「140」にしてある。このへんは主観なので調整してほしい。

Category

memorandum index