常連

### 前提・実現したいこと

画像を手元から読み込んでリモート環境に保存されているフレームと合成するwebアプリケーションを作成しています．

サーバにアップする前，ローカルの挙動は問題なかったのですが、
本番環境にしたら挙動が効かなくなりました。

画像の読み込みまではできますが，画像の合成ができません．

原因をご指摘いただけると助かります。
よろしくお願いします

### 発生している問題・エラーメッセージ

```
null: Uncaught ReferenceError: createjs is not defined　hogehoge.github.io/main.js:35
```


### 該当のソースコード

```html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>〇〇ジェネレータ</title>
    <link rel="stylesheet" href="main.css">
    <script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="main.js"></script>
</head>
    <body>
        <h1>○○ジェネレータ</h1>
        <dl class="table">
            <dt>画像</dt>
            <dd><span><img src="base.png" id="preview"></span><dd>
            <dd><input type="file" accept="image/*" id="getfile"><dd>
            <dt>名前</dt>
            <dd><input type="text" class="mediumTextBox" name="txt01" id="txt01" placeholder="" maxlength="20" /></dd>
            <dt>セリフ</dt>
            <dd><textarea name="txt02" id="txt02" rows="4" cols="58"></textarea></dd>
            <dt>ATK</dt>
            <dd><input type="text" class="smallTextBox" name="txt03" id="txt03" placeholder="半角数字5桁以下" maxlength="5"></dd>
            <dt>DEF</dt>
            <dd><input type="text" class="smallTextBox" name="txt04" id="txt04" placeholder="半角数字5桁以下" maxlength="5"></dd>
            <dt>属性</dt>
            <dd>
                <select id="attribution">
                    <option value="">選択してください</option>
                    <option value="fire">火</option>
                    <option value="darkness">闇</option>
                </select>
            </dd>
        </dl>
        <div class="btn">
            <button id="update">画像生成</button>
            <button id="left">←</button>
            <button id="up">↑</button>
            <button id="down">↓</button>
            <button id="right">→</button>
            <button id="zoomin">拡大</button>
            <button id="zoomout">縮小</button>
            <button id="reset">リセット</button>
        </div>

        
        <div class="module">
            <h2>生成結果</h2>
            <h1 id="alert" style="color: red"></h1>
            <canvas id="result" width="640" height="800"></canvas>
        </div>
    </body>
</html>
```

```javascript

(function ($) {
    //画像関連
    var img;
    var img2;
    var stage;

    //画像ロード
    function loadImage(imageData) {
        //画像のロード
        // var baseImg = new Image();
        // baseImg.src = 'base.png';
        // img = new createjs.Bitmap(baseImg);

        var attribution = document.getElementById("attribution").value;

        if(attribution !== null){

            var baseImg = new Image();

            switch (attribution){
                case 'fire':
                    baseImg.src = 'fire.png';
                    break;
                case 'darkness':
                    baseImg.src = 'darkness.png'
                    break;
                default:
                    baseImg.src = 'base.png'
            }

            img = new createjs.Bitmap(baseImg);

        }

        //画像が選択されている時のみ合成
        if (imageData !== null) {
            var baseImg2 = new Image();
            baseImg2.src = imageData;
            img2 = new createjs.Bitmap(baseImg2);
        }

        stage = new createjs.Stage('result');
    }

    //画像と文字を合成する処理
    function genImage(imageIni, txt) {
        //合成画像の設定
        //上下は10ピクセルごと移動
        img2.x = imageIni.xPos * 10;
        img2.y = imageIni.yPos * 10;
        //拡縮は10％ずつ
        img2.scaleX = img2.scaleX * (1 + imageIni.Scale / 10);
        img2.scaleY = img2.scaleY * (1 + imageIni.Scale / 10);

        //ステージ生成
        stage.addChild(img2);
        stage.addChild(img);

        //文字オブジェクトを生成してステージに追加
        $.each(txt, function (key, value) {
            //本文は入力された内容をそのまま取る
            var content = $('#' + key).val();

            //30文字で改行を行う
            if (key == 'txt02') {
                var content = content.replace(/[\r|\r\n|\n]/g, "").replace(/(.{30})/g, "$1" + "\n");
            }

            //文字生成
            var obj = new createjs.Text(content);

            //文字設定
            obj.textAlign = value.align;
            obj.font = value.font;
            obj.color = value.color;
            obj.x = value.x;
            obj.y = value.y;

            stage.addChild(obj);
        });

        //ステージ反映
        stage.update();
    }

    function downloadImage(imageData) {
        window.location = imageData;
    }

    $(function () {
        //読込画像のオブジェクト
        var imageIni = {
            xPos: 0,
            yPos: 0,
            Scale: 0,
            imageData: null,
            attribution: null,
            resetImage: function () {
                this.xPos = 0;
                this.yPos = 0;
                this.Scale = 0;
            },
            makeImage: function () {
                if (this.imageData !== null && attribution !== null) {
                    loadImage(this.imageData);
                    genImage(this, txt);
                }
            }
        };

        //合成する文字の位置情報などを定義
        var txt = {
            'txt01': {
                'x': 320,
                'y': 510,
                'font': '27px/1.5 Meiryo,sans-serif',
                'align': 'center',
                'color': 'black'
            },
            'txt02': {
                'x': 55,
                'y': 565,
                'font': '23px/1.5 MS UI Gothic,sans-serif',
                'align': 'left',
                'color': 'black'
            },
            'txt03': {
                'x': 190,
                'y': 735,
                'font': '30px/1.5 arial black,sans-serif',
                'align': 'center',
                'color': 'red'
            },
            'txt04': {
                'x': 490,
                'y': 735,
                'font': '30px/1.5 arial black,sans-serif',
                'align': 'center',
                'color': 'blue'
            }
        };

        //イベント関連処理
        //初回のみCanvasを作成しておく
        $(window).on('load', function () {
            loadImage(null);
        });

        //画像読込
        $('#getfile').change(function () {
            //読み込み
            var fileList = $('#getfile').prop('files');
            var reader = new FileReader();
            reader.readAsDataURL(fileList[0]);

            //読み込み後
            $(reader).on('load', function () {
                $('#preview').prop('src', reader.result);
                imageIni.imageData = reader.result;
            });
        });


        //ボタンイベントまとめ
        $('.btn').on('click', function (e) {
            if (e.target.id === "update") {
                //画像生成は個別処理なし
            } else if (e.target.id === "up") {
                imageIni.yPos -= 1;
            } else if (e.target.id === "down") {
                imageIni.yPos += 1;
            } else if (e.target.id === "left") {
                imageIni.xPos -= 1;
            } else if (e.target.id === "right") {
                imageIni.xPos += 1;
            } else if (e.target.id === "zoomin") {
                imageIni.Scale += 1;
            } else if (e.target.id === "zoomout") {
                imageIni.Scale -= 1;
            } else if (e.target.id === "reset") {
                imageIni.resetImage();
            } else if (e.target.id === "dl") {
                //TODO
                downloadImage(imageIni.imageData);
                return;
            }

            //画像操作時は再描画を行う
            if (imageIni.imageData !== null) {
                imageIni.makeImage();
                $("#alert").text("");
            } else {
                $("#alert").text("画像を選択してから画像生成を行ってください");
            }
        });
    });
})($);
```

### 試したこと

先ほども[過去質問](https://teratail.com/questions/296946)で同様の質問を行ったのですが，
```html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>〇〇ジェネレータ</title>
    <link rel="stylesheet" href="main.css">
    <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>
    <script src="main.js"></script>
```
の時は
```ここに言語を入力
Uncaught ReferenceError: $ is not defined　hogehoge.github.io/main.js:219
```
のエラーメッセージが出ていました．

### 補足情報（FW/ツールのバージョンなど）

リモート実行環境:Chrome

	@@ -1 +1 @@
1	- jsのサーバー環境でcreatejsが~~定義され~~ない
1	+ jsのサーバー環境でcreatejsが見つからない

質問編集履歴