プログラム初心者です。色々調べたのですが分からなかった為こちらで質問致しました。
ご教授お願い出来ないでしょうか。よろしくお願い致します。

ピンチイン・ピンチアウトをしたいのでmonacaでHammer.jsを使おうとしています。
JS/CSSコンポーネントの追加から「Hammer.js」を選択し、hammer.min.jsをロードするように設定しました。
いろいろなエラーが出て、それを修正しているうちに、なぜか$関数の呼び出しに失敗するようになってしまいました。

Uncaught TypeError:Propetty '$'of object [object Object]is not a function

console.log("what is $:", $)としたところ何も入っていませんでした。


なぜ動かないのか自分なりに色々調べてみたのですが、そもそもプラグインがきちんと読み込まれていない?かもしれません。理由がよく分かりません(もしかすると自分のミスかもしれませんが・・)
表題からはずれてしまうのですが、一旦Hammer.jsを置いて、別のプラグインで簡単に動かしてみました。

  • 使用したプラグイン⇒d3.js
  • d3.jsプラグインはmonacaのJS/CSSコンポーネントの追加から行いました。
     (表示されたもの全てをダウンロードしました。)

これはうまく行き、d3が動作する事を確認出来ました。


現在のプログラムを全て記載致します。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">


    <script src="components/loader.js"></script>
    <script src="components/hammer.min.js"></script>   

    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">


    <script>
        $(function() {  ←ここでエラーが出ています。
            //Hammer.jsオブジェクトの読み込み
            var $exampleElm = document.getElementById("example"),
                $hammerObj = new Hammer($exampleElm),
                $jqExampleElm = $($exampleElm);
                $hammerObj.get("pan").set({ enable: true });
                $hammerObj.get("pinch").set({ enable: true });
                $hammerObj.get("tap").set({ enable: true });
                $hammerObj.get("swipe").set({ enable: true });

            //pan event
                $hammerObj.on("pan",function(event) {
                    if(event.isFinal) { //end
                        panTime = false;
                        $jqTgPanPinchArea.data("down", false);
                        //パンが終わったときの操作
                    } else {
                        if(!panTime) { //start
                            $jqExampleElm.data("down", true);
                    //パンを始めたときの動作
                        } else { //move
                            if ($jqExampleElm.data("down") == true) {
                                //パンしている途中の動作
                            }
                        }
                    }
                });
                var panTime = false,
                    pinchTime = false,
                    $pinchTimer = {};

            //pinch event
                $hammerObj.on("pinch",function(event) {
                    event.preventDefault ? event.preventDefault() : (event.returnValue = false);
                    if(!pinchTime) { //start
                        pinchTime = event.timeStamp;
                        //ピンチを始めたときの動作
                    } else { //move
                        if($pinchTimer) clearTimeout($pinchTimer);
                        //ピンチをしている途中の動作
                        $pinchTimer = setTimeout(function() { //end
                            pinchTime = false;
                            //ピンチが終わったときの動作
                        }, 100);
                    }
                });
                 $hammerObj.on("tap", function(event) {
                    //タップしたときの動作
                });
                //swipe
                $hammerObj.on("swipeleft", function(event) {
                    //左へスワイプした時の動作
                });
                $hammerObj.on("swiperight", function(event) {
                    //右へスワイプした時の動作
                });


        });

        </script>

bodyタグの中にdivでid='example'としています。


修正して解決したエラー:

www/components/loader.jsのエラー

(Uncaught ReferenceError:require is not defined)
var changelog = require( "changelogplease" );←ここで引っかかっているみたいです。

これは、changelog のロードを止めて hammer.min.js のみにして解決。

index.htmlのエラー

(Uncaught SyntaxError:Unexpected token ILLEGAL)
$jqExampleElm = $($exampleElm);  ←ここでエラーが出ます。

これは、「;」が全角だったのを直して解決。

hammer.min.js のエラー

Uncaught TypeError:Cannot call method'addEventListener'of nullと出ています。

これは、HTML側に要素を用意して解決。
このエラーが出た時点では、jQueryもHammerも動いていた事になります。