Javascript/Smapho - a羅針盤

スマホ †

スマホ用のJavascriptのサンプルです。

スマホとPCの判断 †

スマホかどうかの判断は結果true/falseで判断できます。スマホの種類は変数deviceを使用します。

    var device;
    function isSwipe() {
        var result = false;
        device = "pc";
        if ( navigator.userAgent.indexOf('iPhone') > 0 ||
             navigator.userAgent.indexOf( 'iPad') > 0 ||
             navigator.userAgent.indexOf('iPod') > 0 ||
             navigator.userAgent.indexOf('Android') > 0) {
            device = 'smapho';
            result = true;
        } else if ( navigator.userAgent.indexOf('iPad') > 0 ) {
            device = 'iPad';
            result = true;
        }
        return result;
    }

↑

スワイプ操作 †

スワイプ操作を取得して実行するサンプルです。上記のisSwipe関数を使用します。ページを開く時にonloadでinitSwipeを呼び出し、スマホの場合MobiSwipeで操作領域に押下した時と指を動かした時のそれぞれのイベントmousedown、mousemoveを登録します。操作内容はmousemoveの中に記述します。以下のサンプルは斜め方向(X方向とY方向)の指の動きに対応したものです。必要に応じて、X方向のみ・Y方向のみに変更して下さい。使用例は"等高線グラフの回転"のページの"等高線グラフ"を参照して下さい。

<body onload="initSwipe()">

    var swipemove;
    function MobiSwipe(id) {
        // 定数。しきい値
        this.AXIS_THRESHOLD = 5;
        // メンバー変数
        // 操作領域のオブジェクトをIDで取得する。
        this.element      = document.getElementById(id);
        this.inGesture    = false;
        this._originalX = 0
        this._originalY = 0
        var _this = this;

        // iPhoneのみ        
        this.element.onclick = function() {void(0)};

        // 押下した時の処理
        var mousedown = function(event) {
            // 既存の動作の停止
            event.preventDefault();
            _this.inGesture  = true;
            _this._originalX = (event.touches) ? event.touches[0].pageX : event.pageX;
            _this._originalY = (event.touches) ? event.touches[0].pageY : event.pageY;
            // iPhoneのみ
            if (event.touches && event.touches.length!=1) {
                _this.inGesture = false; // Cancel gesture on multiple touch
            }
        };

        // 指を動かした時のイベント処理
        var mousemove = function(event) {
            // 既存の動作の停止
            event.preventDefault();
            var delta = 0;
            var deltaX = 0;
            var deltaY = 0;
            // X方向とY方向の座標の取得
            var currentX = (event.touches) ? event.touches[0].pageX : event.pageX;
            var currentY = (event.touches) ? event.touches[0].pageY : event.pageY;

            if (_this.inGesture) {
                // 移動長さの計算
                deltaX = Math.round(currentX-_this._originalX);
                deltaY = Math.round(currentY-_this._originalY);
                delta = Math.sqrt(deltaX*deltaX + deltaY*deltaY);
                // 移動長さがしきい値を超えた場合
                if ( _this.AXIS_THRESHOLD < delta ) {
                    _this._originalX = currentX;
                    _this._originalY = currentY;
                               :
                    この部分に実行内容を記述する
                               :
                }
            } else {
                // NOP
            }
        };

        // 操作領域のオブジェクトに以下のイベントを登録する
        this.element.addEventListener('touchstart', mousedown, false);
        this.element.addEventListener('touchmove', mousemove, false);
        this.element.addEventListener('touchcancel', function() {
            _this.inGesture = false;
        }, false);
    }


    function initSwipe() {
        if ( isSwipe() == true ) {
            swipemove = new MobiSwipe("操作領域ID");
        }
    }

前へ　一覧へ　次へ

Last-modified: 2016-06-20 (月) 05:01:28 (3088d)