スマートフォンで上下左右のどちらにスワイプしたのかを得る

以前スワイプ操作を得て画像をスライドするサンプルを作って見ましたが、今回は上下左右のどちらにスワイプしたかを得るサンプルを作ってみました。

先ずは移動距離を得てみる

タッチパネル搭載のパソコンやスマートフォン等でご覧下さい。

サンプルはタップした位置を起点とし、X、Yのどちらにどれだけ移動したかを数値で得ています。また、起点からの距離を計算し、どれだけ移動したのかも同時に得ていますが、起点より戻る場合はマイナス数値になるので、これをプラスにしています。

$(function() {
  var touch_x    = 0;     //最初にタップしたXの位置
  var touch_y    = 0;     //最初にタップしたYの位置
  var slide_x    = 0;     //移動したXの位置
  var slide_y    = 0;     //移動したYの位置
  
/*
 * タップ、スワイプ、指を離した時のイベントハンドラ
 */
  $("body").bind("touchstart", TouchStart);
  $("body").bind("touchmove" , TouchMove);
  $("body").bind("touchend"  , TouchLeave);

/*
 * タップ
 */
  function TouchStart( event ) {
    $("#event").html('タップしました');
    var pos = Position(event);
    touch_x = pos.x;
    touch_y = pos.y;
    
    $("#pos-x").html(pos.x);
    $("#pos-y").html(pos.y);
  }
    
/*
 * スワイプ
 */
  function TouchMove( event ) {
    $("#event").html('移動中です');
    
    var pos = Position(event); //X,Yを得る
    
    //移動した位置から最初の位置を引く
    slide_x = pos.x - touch_x;
    slide_y = pos.y - touch_y;
    
    //マイナスの値をプラスに変更
    slide_x = Math.sqrt(Math.pow(slide_x,2));
    slide_y = Math.sqrt(Math.pow(slide_y,2));
    
    
    $("#leave-x").html(pos.x);
    $("#leave-y").html(pos.y);
    $("#slide-x").html(slide_x);
    $("#slide-y").html(slide_y);
  }
    
/*
 * 指を離す
 */
  function TouchLeave( event ) {
    $("#event").html('指を離しました');
  }

/*
 * 現在位置を得る
 */
  function Position(e){
    var x   = e.originalEvent.touches[0].pageX;
    var y   = e.originalEvent.touches[0].pageY;
    x = Math.floor(x);
    y = Math.floor(y);
    var pos = {'x':x , 'y':y};
    return pos;
  }

});

移動した距離から、上下左右のどちらに移動したのかを得る

移動した距離を得る事が出来たので、後はどちらに移動したかを得るだけです。

タッチパネル搭載のパソコンやスマートフォン等でご覧下さい。

$(function() {
  
  var touch_x  = 0;      //最初にタップしたXの位置
  var touch_y  = 0;      //最初にタップしたYの位置
  var slide_x  = 0;      //移動したXの位置
  var slide_y  = 0;      //移動したYの位置
  var minus_x  = false;  //マイナス移動 X
  var minus_y  = false;  //マイナス移動 Y
  
/*
 * タップ、スワイプ、指を離した時のイベントハンドラ
 */
  $("body").bind("touchstart", TouchStart);
  $("body").bind("touchmove" , TouchMove);
  $("body").bind("touchend"  , TouchLeave);

/*
 * タップ
 */
  function TouchStart( event ) {
    $("#event").html('タップしました');
    var pos = Position(event);
    touch_x = pos.x;
    touch_y = pos.y;
    
    $("#def").html('最初の位置 : '+'X:'+touch_x +' Y:'+ touch_y);
  }
    
/*
 * スワイプ
 */
  function TouchMove( event ) {
    $("#event").html('移動中です');
    
    var pos = Position(event); //X,Yを得る
    
    //移動した位置から最初の位置を引く
    var cal_x = pos.x - touch_x;
    var cal_y = pos.y - touch_y;
    
    //最初にタップした位置からマイナかプラスを判定
    if(cal_x < 0)
      minus_x = true;
    else
      minus_x = false;
    
    if(cal_y < 0)
      minus_y = true;
    else
      minus_y = false;
    
    
    $("#loc").html('差分 : '+'X:'+cal_x +' Y:'+ cal_y);
    $("#message").html('＋ or － :'+'X:'+minus_x +' Y:'+ minus_y);

    //マイナスの値をプラスに変更
    slide_x = Math.sqrt(Math.pow(cal_x,2));
    slide_y = Math.sqrt(Math.pow(cal_y,2));
  }
    
/*
 * 指を離す
 */
  function TouchLeave( event ) {
    $("#message").html('最終差分:'+'X:'+slide_x +' Y:'+ slide_y);
    var message;
    
    //指のズレ50を考慮し、それ以上ならそちらに移動していると判断する
    if(slide_x > 50){
      if(minus_x === true)
        message = '←';
      else
        message = '→';
    }
    if(slide_y > 50){
      if(minus_y === true)
        message = '↑';
      else
        message = '↓';
    }
    $("#event").html(message);
  }

/*
 * 現在位置を得る
 */
  function Position(e){
    var x   = e.originalEvent.touches[0].pageX;
    var y   = e.originalEvent.touches[0].pageY;
    x = Math.floor(x);
    y = Math.floor(y);
    var pos = {'x':x , 'y':y};
    return pos;
  }

    
});

先ず、最初にタップした位置からどちらに移動したのかは、移動した位置からタップした位置を引いた値がマイナスなら左へスワイプ（上へスワイプ）と判断出来るので、これをセットします。

次に、比較する際に数値がマイナスだと面倒なので、これをプラスにし、移動距離によって上下なのか左右なのかを判断します。ただ、指って必ずしもまっすぐにはスワイプしてくれないので、遊びが出ます。その遊びを５０未満とし、５０以上の移動があった方を縦、横のスワイプ方向としています。

ということから、斜め上に向けてスワイプしたりすると、正確な判断が出来ません。制度を上げるのであれば、XとYの両方の数値を確認し、その差によって処理するか否か、或いは数値が多い方を優先するかなど判断していけば良いかと思います。

こういう下地があれば、後は算数の問題になり、簡単なマウスジェスチャーというかスワイプジャスチャー？的なものをスマートフォンサイトに実装する事が出来ますね。例えば、左からメニューバーを出したりなど。ただ、最近のブラウザは、それそのものにジェスチャーがあるので、工夫は必要かなぁと思います。