自作WEBアプリにフリック機能をつけるよ

JavaScript

スマフォアプリっていったらフリック機能ですよね、指でぴょいひょいってやったら、閉じたり消したり、これぞアプリっていった醍醐味です。

フロントエンドのjQueryやJavaScript素人の私がやれる範囲でチャレンジしてみようと思い至ったわけです。

まずはお手本になるソース捜索から

いきなりつまずきそう…..以外にコレといった物がない、検索の仕方が悪いのかスライダーのjQueryばっかり出てきますね、スライダーもフリックしたりするけどコレジャナイ感が….

有りました!

やっとみつけた「jQuery Touchwipe Plugin」

jQuery Touchwipe (iPhone, iPad, iPod Touch Gesten Gestures Event Wischeffekt / Wipe Effect)

jQueryプラグインですけど、コレなら軽量だし呼び出すのもわかりやすくて、コピペぐらいしか出来ない現状の私には理解しやすい。

jQueryのあとに 「jquery.touchwipe.min.js」を呼び出して

<script src="jquery.touchwipe.min.js"></script>

呼び出しも簡単、IDやクラスを指定してあげるだけでいいなんて解りやすいですね。

$("#imagegallery").touchwipe({
     wipeLeft: function() { alert("left"); },
     wipeRight: function() { alert("right"); },
     wipeUp: function() { alert("up"); },
     wipeDown: function() { alert("down"); },
     min_move_x: 20,
     min_move_y: 20,
     preventDefaultEvents: true
});

実際組み込んでみてから発覚したのですが、コレ上下も反応しちゃうので、スクロール出来ないですよ!縦に長いサイドメニューを閉じるものを制作したかったのに、メニューの内容が画面より長くなりすぎるケースがあるサイドメニューには使えなかった。

画像とか縦サイズがはっきりしてる要素向きなんでしょうね。

スワイプスプリクトを更に探すこと30分ほど

スマホのスワイプ検知 - Qiita
スマホの横スワイプをjQueryを使って検知する ネットで拾ったコードをベースに自分用に書き直したものを公開できる形に変更してます。 mainというidを持つ要素に対して横スワイプを行うとアラートが出るものです。 $(func...

こちらを発見する、これなら左右だけの検知なことから、自分の目的にも合致してるかと思います。3年前の記事なので結構スワイプって需要ないんですかね、実装できるか不安になってきた。

このままだと、要素を指定するたびにソースを丸々コピーして増やすのは効率が悪いので、チョコットいじらせてもらって実装しました。関数化してタッチしてからの数値と、リターンしたときの動作が個別に指定出来るようにしてみる。

 //呼び出し
 SwipeCheck('#calendar-side','70',function(){
    alert('右だよ');
 },function(target){
    alert('左だよ');
 });
 function SwipeCheck(_selector,min_move,_rCallback = null,_lCallback = null){
  $(_selector).on('touchstart', onTouchStart); //指が触れたか検知
   $(_selector).on('touchmove', onTouchMove); //指が動いたか検知
   $(_selector).on('touchend', onTouchEnd); //指が離れたか検知
   var direction, position;
  //スワイプ開始時の横方向の座標を格納
   function onTouchStart(event) {
     position = getPosition(event);
     direction = ''; //一度リセットする
   }
  //スワイプの方向(left/right)を取得
   function onTouchMove(event) {
     if (position - getPosition(event) > min_move) { // 以上移動しなければスワイプと判断しない
       direction = 'left'; //左と検知
     } else if (position - getPosition(event) < -min_move){  // 以上移動しなければスワイプと判断しない
       direction = 'right'; //右と検知
     }
   }
 function onTouchEnd(event) {
     if (direction == 'right'){
       _rCallback();
     } else if (direction == 'left'){
       _lCallback();
     }
   }
  //横方向の座標を取得
   function getPosition(event) {
     return event.originalEvent.touches[0].pageX;
   }
 }

無事にスワイプ機能が付けられる。そして誤爆

やっと憧れのスワイプ機能を実装する、楽しすぎてあっちこっちにつけたら、入力画面とかで誤操作で閉じたり、縦に長い画面でも誤操作になりがちに、なんでも機能はほどほどが良いってことでメモ書きを終わりにしたいと思います。

コメント

タイトルとURLをコピーしました