JavaScriptでフリック操作を実装

The following two tabs change content below.
九 栄作

九 栄作

取締役NEET株式会社
NEET株式会社総合メディア事業部所属
九 栄作

最新記事 by 九 栄作 (全て見る)

スマートフォン向けのアプリを作るのにボタンポチポチだけだと寂しいのでフリックやスワイプをしたときの処理を簡単に作れるようにするために、コンストラクタ関数にしたflick.jsを作成しました。
flick.jsのダウンロートはこちら>>>https://goo.gl/kVwrz7

フリック処理の取得は「【JavaScript】スマホやタブレットでのスワイプ・フリック動作を取得する方法」http://www.hp-stylelink.com/news/2014/06/20140617.phpを参考にしています。

以下、仕様の説明

構文

new Flick();

説明
スマートフォンやタブレットのフリック動作時に処理をさせるためのコンストラクタ関数。

プロパティ

Flick.sensitivity
フリック操作の感度を表すプロパティです。タッチを開始したところから放すまでの距離を指定します。値が小さいほど感度がよくなります。デフォルトは50です。

Flick.flickMode
真偽値で指定します。trueのときフリック操作による処理を可能にし、falseのときフリック操作による処理を無効にします。デフォルトはtrueです。

メソッド

Flick.flick(Element)
引数の要素に対してフリック処理を適用します。

Flick.setFlickFunction(flickEvent, function)
第一引数にはフリック動作をキーワードで記述します。
フリック操作時の処理を第二引数に入れます。

第一引数に入るキーワード
rtl: 右から左へフリック
ltr :左から右へフリック
up :下から上へフリック
down: 上から下へフリック

使用例

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>フリック</title>
    <script src="flick.js"></script>
    <script>
      function init() {
          var target = document.getElementById('target');
          // インスタンス生成
          var flick = new Flick();

          // フリック処理をさせる要素を指定
         flick.flick(target);

         // フリックしたときの処理
         flick.setFlickFunction('rtl', function() {
             alert('右から左へフリックされました');
         });
     }
    </script>
    <style>
        #target {
            background: #aaa;
            width: 400;
            height: 400px;
        }
    </style>
    </head>
    <body onload="init();">
        <div id="target"></div>
    </body>
</html>

実行すると幅400px,高さ400pxの灰色の背景の四角が表示され、その四角の上をタッチして右から左へフリックするとアラートが表示されます。

注意点はflick.jsを自分のスクリプトより先に読み込んであげないと使用できません。
またコンストラクタ関数なのでnew演算子でインスタンスを生成する必要があります。
タッチイベントを利用して実装しているため、PCブラウザ上では動きません。

flickModeプロパティはボタン操作とフリック操作両方対応させてユーザーに任意に選ばせるゲームやアプリを作る場合に使用を想定してます。

ソースコード見たい人向けにソースコードも貼っておきます。

var Flick = function() {
    this.sensitivity = 50;
    this.flickMode = true;
    this.rtl = function(){}
    this.ltr = function(){}
    this.up = function(){}
    this.down = function(){}
    this.setFlickFunction = function(flickEvent, func){
        if (typeof(func) == 'function'){
            switch(flickEvent){
                case 'rtl':
                    this.rtl = func;
                    break;
                case 'ltr':
                    this.ltr = func;
                    break;
                case 'up':
                    this.up = func;
                    break;
                case 'down':
                    this.down = func;
                    break;
                default :
                    console.log('The \'' + flickEvent + '\' is not defined.');
                    break;
             }
        } else {
            console.log('\'' + func + '\' is not a function.');
        }
    }
    this.flick = function(target){
        var that = this;
        var touchStartX;
        var touchStartY;
        var touchMoveX;
        var touchMoveY;
        target.addEventListener("touchstart", function(event) {
                if (that.flickMode) {
                    event.preventDefault();
                    touchStartX = event.touches[0].pageX;
                    touchStartY = event.touches[0].pageY;
                }
            }, false);

            target.addEventListener("touchmove", function(event) {
                if (that.flickMode) {
                    event.preventDefault();
                    touchMoveX = event.changedTouches[0].pageX;
                    touchMoveY = event.changedTouches[0].pageY;
                }
            }, false);

        target.addEventListener("touchend", function(event) {
            if (that.flickMode) {
                if (touchStartX > touchMoveX) {
                    if (touchStartX > (touchMoveX + that.sensitivity)) {
                         that.rtl();
                    }
                } else if (touchStartX < touchMoveX) {
                    if ((touchStartX + that.sensitivity) < touchMoveX) {
                        that.ltr();
                    }
                 }
                 if (touchStartY > touchMoveY) {
                     if (touchStartY > (touchMoveY + that.sensitivity)) {
                         that.up();
                     }
                 } else if (touchStartY < touchMoveY) {
                     if ((touchStartY + that.sensitivity) < touchMoveY) {
                          that.down(); 
                     }
                 }
            }

        }, false);
   }
}

それでは、また(´・ω・`)ノシ

スポンサーリンク