hammer.jsの使い方について

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 881

rettmb125

score 6

WordPressを使ってサイトを製作しています。
横フリックでタブの切り替えができる機能をつけているのですが、縦スクロールの動作と混同してしまって気持ちの悪い動作になってしまっています。

そこで、下記の記事を見つけてhammer.jsを使おうと考えております。(https://qiita.com/coa00@github/items/dc1aa5fedd8e4ed8b1ff#%E3%82%B3%E3%83%BC%E3%83%89)

hammer.jsをサーバーにアップロードして<script>タグでファイルを読み込んだ後に、utility.jsという別ファイルに下のコードを書きました。

jQuery.noConflict();
(function($) {

    var duringAnimation = false;//アニメーション中のロック用フラグ
    var mc = new Hammer(document.getElementById("swiper")); **エラー部分**

    mc.on("pan", function(e){
        var viewItem = $(e.target).closest(".view-mode");
        var positions = $(".position > li");
        var index = $(viewItem).index();
        var length = $(".view-mode").length;
        var nextItem;

        var nextIndex;
        var direction;
        var range = 60;//判定する角度
        var easing = 'ease';

        if (e.distance < 70) return true;

                //範囲外だったら処理しない。
        if ( !(e.angle > -180 - range && e.angle < -180 + range) && !(e.angle < range && e.angle > -range)){
            return true;
        }

                //方向
        direction = (e.additionalEvent === "panleft") ? "left":"right";

        var step = (direction === "left") ? 1:-1;
        nextIndex = index + step;

        if (nextIndex > length-1)
        {
            nextIndex = 0;
        }else if (nextIndex < 0){
            nextIndex = length-1;
        }

        nextItem = $(".view-mode")[nextIndex];


        $(positions).removeClass("active");
        $(positions[nextIndex]).addClass("active");

        //$("#position ul").animate({left: 0}, 100, "easeOutExpo");
        $(window).scrollTop(0);

        if (duringAnimation === false) {
            duringAnimation = true;
            $(nextItem).css({"left":"100%", "display":"block"}).transition({left: "0"}, 300, easing);
            $(viewItem).transition({left: (direction === "left") ? "-100%":"100%" }, 300, easing,function () {
                $(viewItem).css({"position": "absolute", "display": "none"});
                $(nextItem).css({"margin-top": "0", "position": "relative", "display": "block"});
                duringAnimation = false;
            });
        }
    });

})(jQuery); **エラー部分**


すると『Uncaught ReferenceError: Hammer is not defined』という内容のエラーが出ます。
エラーが出ている場所は、5行目の『var mc = new Hammer(document.getElementById('swiper'));』と、最後の行の『})(jQuery);』の部分です。

原因が分からなくて困っているのですが、どなたか原因や解決策に心当たりのある方はいらっしゃらないでしょうか。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • 退会済みユーザー

    2018/01/24 16:06

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる