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

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

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

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

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

有りました！

やっとみつけた「jQuery Touchwipe Plugin」
スワイプスプリクトを更に探すこと30分ほど
実際に適応させてから運用していて出てきた問題点

やっとみつけた「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;
   }
 }

実際に適応させてから運用していて出てきた問題点

21年3月7日に追記

運営しているコミック新刊チェックにて、フリックタイプの開閉メニューを導入しようとしたところ、呉動作が頻発してしまい正式にリリースするまえに一旦保留にした。

漫画の新刊情報をリスト化している為やたら縦に長いサイトになっている。雑にスクロールしようとすると誤爆してメニューが開いてしまうことから困った、雑に縦フリックすると斜めにフリックすると横フリック判定を受けて誤爆につながる…

/*
誤爆問題はフリックの感度距離設定を伸ばせば解決するかと思う
一行目の70のところを増やせば感度を下げられる
*/
SwipeCheck('#calendar-side','70',function(){
    alert('右だよ');
 },function(target){
    alert('左だよ');
 });

問題は解決？かと思うが不安が残る為、本番サイトでは不採用かな～気まぐれ発売予定漫画をリンクで移動するのではなくスワイプでサブウインドウ化してみようと思った案だから冒険すぎる。