jsのサーバー環境でcreatejsが見つからない

回答率: 85.48%

質問するログイン新規登録

質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう

ただいま回答率: 85.48%

トップ CreateJSに関する質問

Q&A

解決済

1回答

1416閲覧

jsのサーバー環境でcreatejsが見つからない

退会済みユーザー

総合スコア0

0グッド

0クリップ

投稿2020/10/09 09:51

編集2020/10/09 09:57

0

0

前提・実現したいこと

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

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

画像の読み込みまではできますが，画像の合成ができません．

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

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

null: Uncaught ReferenceError: createjs is not defined　hogehoge.github.io/main.js:35

該当のソースコード

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>
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})($);

試したこと

先ほども過去質問で同様の質問を行ったのですが，

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>

の時は

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

のエラーメッセージが出ていました．

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

リモート実行環境:Chrome

2020/10/09 09:58

前回質問と本質的には同じでは？ CDNを正しく取り直すところからやってみてください。

2020/10/09 09:58

きょうび、httpsではなくhttpで提供しているものを使うのは間違いです。

退会済みユーザー

2020/10/09 10:08

大変失礼いたしました．URLの違いだけに着目し，バージョンが1.12になっていることに気が付いていませんでした．バージョンを3に直したら，うまくいきました．本当にありがとうございます．

2020/10/09 10:09

整理すべきは全体の整合性かと思います。点だけでは全体は見えません。

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

回答1件

0

ベストアンサー

<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

これの順番を変えても同じエラー出ますか？

投稿2020/10/09 10:05

総合スコア902

2020/10/09 10:10

jQuery依存のライブラリではないですよ。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

関連した質問

トップ CreateJSに関する質問

jsのサーバー環境でcreatejsが見つからない

関連した質問

同じタグがついた質問を見る

運営からのお知らせ

【サポート業務のお知らせ】ゴールデンウィーク休業につき下記の日程で、お問い合わせ等のサポート業務をお休みいたします。 2024/04/27(土)~2024/04/29(月) 2024/05/03(金)〜2024/05/06(月) なお期間中もサポートへのお問い合わせは受け付けております。

【重要なお知らせ】いつもteratailをご利用いただきありがとうございます。現在、認証システムの修正により、一部のユーザーが強制的にログアウトされる可能性がございます。お手数おかけしますが、再度ログインを行なっていただきますよう宜しくお願いいたします。ご不便をおかけし申し訳ございません。

過去のお知らせを見る