jsでサーバアップ後のみエラーが出る

前提・実現したいこと

画像を手元から読み込んでリモート環境に保存されているフレームと合成するwebアプリケーションを作成しています．

サーバにアップする前，ローカルの挙動は問題なかったのですが、
本番環境にしたら挙動が効かなくなりました。

原因をご指摘いただけると助かります。
よろしくお願いします

発生している問題・エラーメッセージ

Uncaught ReferenceError: $ is not defined　hogehoge.github.io/main.js:219

main.jsの219行目は最下段です．

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head lang="en">
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <title>〇〇ジェネレータ</title>
8    <link rel="stylesheet" href="main.css">
9    <script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
10    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
11    <script src="main.js"></script>
12</head>
13    <body>
14        <h1>○○ジェネレータ</h1>
15        <dl class="table">
16            <dt>画像</dt>
17            <dd><span><img src="base.png" id="preview"></span><dd>
18            <dd><input type="file" accept="image/*" id="getfile"><dd>
19            <dt>名前</dt>
20            <dd><input type="text" class="mediumTextBox" name="txt01" id="txt01" placeholder="" maxlength="20" /></dd>
21            <dt>セリフ</dt>
22            <dd><textarea name="txt02" id="txt02" rows="4" cols="58"></textarea></dd>
23            <dt>ATK</dt>
24            <dd><input type="text" class="smallTextBox" name="txt03" id="txt03" placeholder="半角数字5桁以下" maxlength="5"></dd>
25            <dt>DEF</dt>
26            <dd><input type="text" class="smallTextBox" name="txt04" id="txt04" placeholder="半角数字5桁以下" maxlength="5"></dd>
27            <dt>属性</dt>
28            <dd>
29                <select id="attribution">
30                    <option value="">選択してください</option>
31                    <option value="fire">火</option>
32                    <option value="darkness">闇</option>
33                </select>
34            </dd>
35        </dl>
36        <div class="btn">
37            <button id="update">画像生成</button>
38            <button id="left">←</button>
39            <button id="up">↑</button>
40            <button id="down">↓</button>
41            <button id="right">→</button>
42            <button id="zoomin">拡大</button>
43            <button id="zoomout">縮小</button>
44            <button id="reset">リセット</button>
45        </div>
46
47        <!-- 出力部分 -->
48        <div class="module">
49            <h2>生成結果</h2>
50            <h1 id="alert" style="color: red"></h1>
51            <canvas id="result" width="640" height="800"></canvas>
52        </div>
53    </body>
54</html>

javascript
1
2(function ($) {
3    //画像関連
4    var img;
5    var img2;
6    var stage;
7
8    //画像ロード
9    function loadImage(imageData) {
10        //画像のロード
11        // var baseImg = new Image();
12        // baseImg.src = 'base.png';
13        // img = new createjs.Bitmap(baseImg);
14
15        var attribution = document.getElementById("attribution").value;
16
17        if(attribution !== null){
18
19            var baseImg = new Image();
20
21            switch (attribution){
22                case 'fire':
23                    baseImg.src = 'fire.png';
24                    break;
25                case 'darkness':
26                    baseImg.src = 'darkness.png'
27                    break;
28                default:
29                    baseImg.src = 'base.png'
30            }
31
32            img = new createjs.Bitmap(baseImg);
33
34        }
35
36        //画像が選択されている時のみ合成
37        if (imageData !== null) {
38            var baseImg2 = new Image();
39            baseImg2.src = imageData;
40            img2 = new createjs.Bitmap(baseImg2);
41        }
42
43        stage = new createjs.Stage('result');
44    }
45
46    //画像と文字を合成する処理
47    function genImage(imageIni, txt) {
48        //合成画像の設定
49        //上下は10ピクセルごと移動
50        img2.x = imageIni.xPos * 10;
51        img2.y = imageIni.yPos * 10;
52        //拡縮は10％ずつ
53        img2.scaleX = img2.scaleX * (1 + imageIni.Scale / 10);
54        img2.scaleY = img2.scaleY * (1 + imageIni.Scale / 10);
55
56        //ステージ生成
57        stage.addChild(img2);
58        stage.addChild(img);
59
60        //文字オブジェクトを生成してステージに追加
61        $.each(txt, function (key, value) {
62            //本文は入力された内容をそのまま取る
63            var content = $('#' + key).val();
64
65            //30文字で改行を行う
66            if (key == 'txt02') {
67                var content = content.replace(/[\r|\r\n|\n]/g, "").replace(/(.{30})/g, "$1" + "\n");
68            }
69
70            //文字生成
71            var obj = new createjs.Text(content);
72
73            //文字設定
74            obj.textAlign = value.align;
75            obj.font = value.font;
76            obj.color = value.color;
77            obj.x = value.x;
78            obj.y = value.y;
79
80            stage.addChild(obj);
81        });
82
83        //ステージ反映
84        stage.update();
85    }
86
87    function downloadImage(imageData) {
88        window.location = imageData;
89    }
90
91    $(function () {
92        //読込画像のオブジェクト
93        var imageIni = {
94            xPos: 0,
95            yPos: 0,
96            Scale: 0,
97            imageData: null,
98            attribution: null,
99            resetImage: function () {
100                this.xPos = 0;
101                this.yPos = 0;
102                this.Scale = 0;
103            },
104            makeImage: function () {
105                if (this.imageData !== null && attribution !== null) {
106                    loadImage(this.imageData);
107                    genImage(this, txt);
108                }
109            }
110        };
111
112        //合成する文字の位置情報などを定義
113        var txt = {
114            'txt01': {
115                'x': 320,
116                'y': 510,
117                'font': '27px/1.5 Meiryo,sans-serif',
118                'align': 'center',
119                'color': 'black'
120            },
121            'txt02': {
122                'x': 55,
123                'y': 565,
124                'font': '23px/1.5 MS UI Gothic,sans-serif',
125                'align': 'left',
126                'color': 'black'
127            },
128            'txt03': {
129                'x': 190,
130                'y': 735,
131                'font': '30px/1.5 arial black,sans-serif',
132                'align': 'center',
133                'color': 'red'
134            },
135            'txt04': {
136                'x': 490,
137                'y': 735,
138                'font': '30px/1.5 arial black,sans-serif',
139                'align': 'center',
140                'color': 'blue'
141            }
142        };
143
144        //イベント関連処理
145        //初回のみCanvasを作成しておく
146        $(window).on('load', function () {
147            loadImage(null);
148        });
149
150        //画像読込
151        $('#getfile').change(function () {
152            //読み込み
153            var fileList = $('#getfile').prop('files');
154            var reader = new FileReader();
155            reader.readAsDataURL(fileList[0]);
156
157            //読み込み後
158            $(reader).on('load', function () {
159                $('#preview').prop('src', reader.result);
160                imageIni.imageData = reader.result;
161            });
162        });
163
164
165        //ボタンイベントまとめ
166        $('.btn').on('click', function (e) {
167            if (e.target.id === "update") {
168                //画像生成は個別処理なし
169            } else if (e.target.id === "up") {
170                imageIni.yPos -= 1;
171            } else if (e.target.id === "down") {
172                imageIni.yPos += 1;
173            } else if (e.target.id === "left") {
174                imageIni.xPos -= 1;
175            } else if (e.target.id === "right") {
176                imageIni.xPos += 1;
177            } else if (e.target.id === "zoomin") {
178                imageIni.Scale += 1;
179            } else if (e.target.id === "zoomout") {
180                imageIni.Scale -= 1;
181            } else if (e.target.id === "reset") {
182                imageIni.resetImage();
183            } else if (e.target.id === "dl") {
184                //TODO
185                downloadImage(imageIni.imageData);
186                return;
187            }
188
189            //画像操作時は再描画を行う
190            if (imageIni.imageData !== null) {
191                imageIni.makeImage();
192                $("#alert").text("");
193            } else {
194                $("#alert").text("画像を選択してから画像生成を行ってください");
195            }
196        });
197    });
198})($);

試したこと

CDNを取得しなおしてフォルダ内に配置し，htmlファイルについて

html
1<!DOCTYPE html>
2<html>
3<head lang="en">
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <title>〇〇ジェネレータ</title>
8    <link rel="stylesheet" href="main.css">
9    <script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
10    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
11    <script src="main.js"></script>

から

html
1<!DOCTYPE html>
2<html>
3<head lang="en">
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <title>〇〇ジェネレータ</title>
8    <link rel="stylesheet" href="main.css">
9    <script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
10    <script src="./jquery-3.5.1.min.js"></script>
11    <script src="main.js"></script>

と書き換えましたが，特に変化はありませんでした．

html
1<!DOCTYPE html>
2<html>
3<head lang="en">
4    <meta charset="utf-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <title>〇〇ジェネレータ</title>
8    <link rel="stylesheet" href="main.css">
9    <script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
10    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
11    <script src="main.js"></script>

と書き換えたところ，今までできなかったローカル環境からの画像の読み込みができるようになりました．
しかし，新たに

null: Uncaught ReferenceError: createjs is not defined

というエラーが発生し，画像とフレームの合成まで到達できませんでした．

補足情報（FW/ツールのバージョンなど）

リモート実行環境:Chrome

m.ts10806

2020/10/09 08:52

CDN取り直してみた場合はどうでしょうか。 https://code.jquery.com/ ただ、何か特別な理由がない限りは３系で良いとは思いますが。

退会済みユーザー

2020/10/09 09:03

CDNを改めてインストールしてフォルダ内に配置し，htmlファイルの10行目を <script src="./jquery-3.5.1.min.js"></script>　に変更しましたが，挙動にもエラーメッセージにも特に変化は見られませんでした．

m.ts10806

2020/10/09 09:34

別件となるので一度解決済みにしてください。あとCDNはそのままネットワーク上のものを参照するのでダウンロードしてくる必要はないです。というか、基本的に元ソースいじらないのでしたらCDNで良いです。

行動規範の内容に同意します

回答1件

ベストアンサー

提示されたjsソースがmain.jsだとするならそもそも219行もないので
main.jsがローカルとサーバー側で違うものを参照しているかもしれません

投稿2020/10/09 08:56

yambejp

総合スコア116724

退会済みユーザー

2020/10/09 09:01

言葉が足りず失礼いたしました．コード短縮のためswtitch文の項目を何行か削っております． main.jsはローカル・サーバー側ともにフォルダ内に一つしか存在しておりません．

yambejp

2020/10/09 09:06

> 何行か削っております．なるほど、その状況は理解しました。ただどこが219行目か判断できないです

退会済みユーザー

2020/10/09 09:09 編集

失礼いたしました．219行目は最下段の })($); になります．

yambejp

2020/10/09 09:15

そうなるとjQueryがきちんと読まれていない可能性が高いですとりあえずhttp://code.jquery.com/jquery-1.11.0.min.jsで呼んでいるscriptを <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> におきかえてみてください

退会済みユーザー

2020/10/09 09:22 編集

退会済みユーザー

2020/10/09 09:52

エラーの症状が変わってきたので，一度本質問を締めました．ご回答いただきありがとうございます．createjsのエラーについて新たに質問を立て直したので，よろしかったらご覧いただけましたら幸いです．

行動規範の内容に同意します