Q&A
なにかでビルドしているんですか？それともこのHTMLとGameScreen.jsのままでブラウザに表示させてますか？
実現したいこと
EclipseでJavaScriptを使ってwebアプリケーションを開発していて、
同階層にあると視認性良くないため、
フォルダにjsファイルを保存するようにしたい。
発生している問題・分からないこと
別フォルダにjsファイルを保存するとそのファイルが読み込めないとの
エラーが出力される。
エラーメッセージ
error
1MIME タイプ (“text/html”) が許可されていないため、“http://localhost:8080/BoardGame/Lib/OriginalMath” からのモジュールの読み込みがブロックされました。 2GmaeScreen.html 3モジュールのソース “http://localhost:8080/BoardGame/Lib/OriginalMath” の読み込みに失敗しました。 GmaeScreen.html 4MIME タイプ (“text/html”) が許可されていないため、“http://localhost:8080/BoardGame/Lib/MouseEvent” からのモジュールの読み込みがブロックされました。 5GmaeScreen.html 6モジュールのソース “http://localhost:8080/BoardGame/Lib/MouseEvent” の読み込みに失敗しました。
該当のソースコード
html
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>Card Game WebSite By M4saraPFF</title> 6 7</head> 8<body> 9 <script src="GameScreen.js" type="module"></script> 10 <div class="GameScreen"> 11 <canvas id="canvas"></canvas> 12 </div> 13</body> 14</html>
JavaScript
1// Cardsクラス宣言 2export class Cards 3{ 4 // コンストラクタ 5 constructor() 6 { 7 this.strokes = []; 8 } 9 10 // 更新処理 11 // 引数 : 無し 12 // 返り値 : 無し 13 update() 14 { 15 cards.drow(); 16 } 17 18 // 描画処理 19 // 引数 : 無し 20 // 返り値 : 無し 21 drow() 22 { 23 ctx.clearRect(0, 0, canvas.width, canvas.height); 24 25 for (const stroke of this.strokes) 26 { 27 ctx.strokeRect(stroke.x, stroke.y, stroke.width, stroke.height); 28 } 29 } 30 31 // 追加処理 32 // 引数 : x座標, y座標, 幅, 高さ, 番号 33 // 返り値 : 無し 34 add(x, y, width = 63, height = 88, number = this.strokes.length +1, dragging = false) 35 { 36 this.strokes.push 37 ({ 38 x, 39 y, 40 width, 41 height, 42 number, 43 dragging, 44 }); 45 46 cards.create(x, y, width, height); 47 } 48 49 // Cardsオブジェクトとの当たり判定 50 // 引数 : 座標 51 // 返り値 : 接触しているCardsオブジェクト番号 or null 52 colison(posX, posY) 53 { 54 let number, difficultX, difficultY = null; 55 56 for (const stroke of this.strokes) 57 { 58 if (originalMath.JudgeInto(stroke.x, stroke.y, stroke.width, stroke.height, 59 posX, posY, 0, 0)) 60 { 61 number = stroke.number; 62 difficultX = posX -stroke.x; 63 difficultY = posY -stroke.y; 64 } 65 } 66 67 return [number, difficultX, difficultY]; 68 } 69 70 // 生成処理 71 // 引数 : x座標, y座標, 幅, 高さ 72 // 返り値 : 無し 73 create(x, y, width, height) 74 { 75 ctx.strokeRect(x, y, width, height); 76 } 77 78 // ゲッター(移動可能判定) 79 // 引数 : 無し 80 // 返り値 : 移動可能オブジェクトの番号 or null 81 getCardsDragging() 82 { 83 for (const stroke of this.strokes) 84 { 85 if (stroke.dragging == true) { return stroke.number; } 86 } 87 88 return null; 89 } 90 91 // ゲッター(座標) 92 // 引数 : 番号 93 // 返り値 : 座標(x, y) 94 getCardsPos(number) 95 { 96 for (const stroke of this.strokes) 97 { 98 if (stroke.number == number) 99 { 100 return [stroke.x, stroke.y]; 101 } 102 } 103 104 return null; 105 } 106 107 // セッター 108 // 引数 : 番号, x座標, y座標, 幅, 高さ 109 // 返り値 : 無し 110 setCards(number, x, y, width = 63, height = 88) 111 { 112 for (const stroke of this.strokes) 113 { 114 if (stroke.number == number) 115 { 116 stroke.x = x; 117 stroke.y = y; 118 stroke.width = width; 119 stroke.height = height; 120 121 break; 122 } 123 } 124 125 cards.drow(); 126 } 127 128 // セッター(移動判定) 129 // 引数 : 番号, 判定(true or flase) 130 // 返り値 : 無し 131 setCardsDragging(number, judgeDragging) 132 { 133 for (const stroke of this.strokes) 134 { 135 if (stroke.number == number) 136 { 137 stroke.dragging = judgeDragging; 138 139 break; 140 } 141 } 142 } 143} 144 145const init = () => 146{ 147 cards.add(canvas.width /2, canvas.height /2); 148 cards.add(canvas.width /3, canvas.height /3); 149 cards.add(canvas.width /4, canvas.height /4); 150} 151 152const loop = () => 153{ 154 cards.update(); 155} 156 157// インポート 158import { Mouse } from "./Lib/MouseEvent"; 159import { OriginalMath } from "./Lib/OriginalMath"; 160 161// 書式の初期化 162const canvas = document.createElement("canvas"); 163const ctx = canvas.getContext("2d"); 164canvas.width = 1920; 165canvas.height = 1280; 166document.body.appendChild(canvas); 167 168// クラス変数宣言 169const cards = new Cards(); 170const mouse = new Mouse(); 171const originalMath = new OriginalMath(); 172 173init(); 174// ループ関数の指定 175window.requestAnimationFrame(loop); 176 177// クリック処理 178canvas.addEventListener("mousedown", (event) => 179{ 180 console.log("mousedown Event"); 181 const rect = canvas.getBoundingClientRect(); 182 let number = null; 183 let difficultPosX, difficultPosY = null; 184 185 mouse.mousePos(event.clientX, event.clientY, rect); 186 const [mousePosX, mousePosY] = mouse.getMousePos(); 187 188 [number, difficultPosX, difficultPosY] = cards.colison(mousePosX, mousePosY) 189 if (number != null) 190 { 191 cards.setCardsDragging(number, true); 192 193 mouse.setDifferencePos(difficultPosX, difficultPosY); 194 } 195}); 196 197// 移動処理 198canvas.addEventListener("mousemove", (event) => 199{ 200 console.log("mousemove Event"); 201 const rect = canvas.getBoundingClientRect(); 202 let number = cards.getCardsDragging(); 203 204 if (number == null) { return; } 205 206 let [cardsX, cardsY] = cards.getCardsPos(number); 207 let [differenceX, differenceY] = mouse.getDifferencePos(); 208 209 mouse.mousePos(event.clientX, event.clientY, rect); 210 const [mousePosX, mousePosY] = mouse.getMousePos(); 211 212 const draggingX = mousePosX - cardsX; 213 const draggingY = mousePosY - cardsY; 214 215 cardsX += draggingX - differenceX; 216 cardsY += draggingY - differenceY; 217 218 cards.setCards(number, cardsX, cardsY); 219}); 220 221// 離脱処理 222canvas.addEventListener("mouseup", () => 223{ 224 console.log("mouseup Event"); 225 let number = cards.getCardsDragging(); 226 227 cards.setCardsDragging(number, false); 228})
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
恐らく、パスが正しく設定出来ていないのではと思い
プログラム経験のある人たち数人に確認してもらいましたが、
パスに関しては間違いないと確認を貰ってます。
補足
【フォルダ構成】
プロジェクト名
┠ src
┠ main
┠ webapp
┠ Lib
┠ MouseEvent.js
┠ OriginalMath.js
┠ Zone.js
┠ META-INF
┠ WEB-INF
┠ GameScreen.js
┠ GameScreen.html
GameScreen.js/GameScreen.htmlはどちらも同階層にあります。
GameScreen.jsからLibフォルダにあるjsファイルを読み込もうとするとエラーが出てしまいます。
Libフォルダにあるファイルを全て同階層に保存(webappフォルダに直接保存)すると
エラーは出力されず、問題なく動作することを確認しています。
eclipse上でhtmlファイルを選択->サーバーで実行
で起動しているので、恐らく後者ではないかと思います....
また、ベストアンサーに選ばせていただいた方法で解決が出来ました！！！
お声がけ有難うございました！
また今後もこちらのサイトの方で助言を頼むことがあるかと思いますので
またその際もお願いいたします！！！！
回答1件
0
ベストアンサー
エラーメッセージからして、サーバーからの OriginalMath.js のレスポンスが MIME/TYPE: text/html で返されてしまっています。ブラウザの開発ツール（F12）のネットワークタブなどで MouseEvent などのレスポンスヘッダー（応答ヘッダー）を確認してみると、text/html となっていることが確認できると思います。javaScript として認識させたいなら、application/javascript などとなっている必要があります。
原因ですが、おそらく
js
1import { Mouse } from "./Lib/MouseEvent"; 2import { OriginalMath } from "./Lib/OriginalMath";
の部分で拡張子 (.js) を省略してしまっていることが原因ではないでしょうか。
webpack や vite などのバンドラでスクリプトを変換する場合は拡張子が省略できることも多いため、解説サイトなどで拡張子を省略した記法で書かれていることがありますが、質問者様のように esModule として読み込む場合は、通常は拡張子を省略できません。
上記で解決しない場合は、開発サーバーの設定などを見直してみてください。
投稿2024/02/03 11:28
総合スコア1086
今拡張子を付けて試したところ無事起動できました！
参考にしたサイトやEclipseで自動入力されるものは全て拡張子が無かったので
知らなかったです。勉強になりました！ありがとうございました！！！！！
あなたの回答
tips
プレビュー
