monaca で jQuery の $ が使えない
プログラム初心者です。色々調べたのですが分からなかった為こちらで質問致しました。
ご教授お願い出来ないでしょうか。よろしくお願い致します。
ピンチイン・ピンチアウトをしたいので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も動いていた事になります。