29560


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

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

[code]

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

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

* * *

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

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

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

* * *

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

[code]

    <!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>
    
[/code]

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も動いていた** 事になります。


CC BY-SA 3.0
2016-10-14T09:26:42.407
29556
2016-10-15T14:40:13.683
2016-10-15T12:53:34.287
3054
19175
question
monaca
monaca で jQuery の $ が使えない


`changelog`が何なのか確認していませんが、クライアントサイドで使用する物ではないかもしれません。  
「ローダーの設定」でロードするものを`hammer.js`か`hammer.min.js`のみにしてみて下さい。


CC BY-SA 3.0
2016-10-14T12:35:04.453
29560
2016-10-14T12:35:04.453
3054
29556
answer