実現したいこと
PCで配布しているhtmlファイルのjsをスマホで動かしたい。
基本的なjsはscriptタグに直接記述しています。ただ、関数の数が多いため外部ファイルの読み込みの必要があるのですが、その際エラーが発生しています。
PCでは動作していますが、スマホブラウザではエラーが出ます。
前提
VSCodeのLive Serverを利用し、ポート番号5500でhtmlを公開します。ここで同一LANに接続しているスマホでこのhtmlにアクセスします。
IPアドレス:ポート番号/path
の様な形でhtmlにアクセスできました。
利用したいjsですが、クラスを宣言して、その中で関数を作成しています。これを利用したい。外部jsファイルを読み込むために
JavaScript
1<script src="http://IPアドレス:5500/path/example.js"></script>
と記述し
JavaScript
1const example = new Example();
として関数を利用しています。PCでは問題なく動作するのですが、スマホでアクセスした際に「Cannot access uninitialized variable」となります。エラー内容的には「初期化していない変数を利用した際に出るエラー」のようで原因を特定してみようと色々と試し、
const example = new Example();
こちらをコメントアウトすると
Can't find variable: example
というエラーが発生することを確認。(コメントアウトしているので当然見つからないわけですが)
おそらく、jsファイルが読み込めず変数が初期化できないまま利用しているので
「Cannot access uninitialized variable」というエラーが発生したと思います。
知りたいこと
外部jsの読み込み方法です。PCでは動作しているので
ローカルではない、外部からのアクセスに問題があって書き方を変える必要があるのか、スマホ特有のエラーにより書き換えの必要があるかなど知りたいです。
追記
ファイルの開示ですが、公開できないコードなので中途半端な説明になってしまいました。
・スマホはiOSでブラウザはSafariです。
・PCはmacでブラウザはGoogleChromeですが、Safariでの動作も確認できてます。
・script内にasync関数は入っています。PCローカルのjsonファイルの受け渡しをする必要があるため非同期関数にしています。jsonファイルの受け渡し自体はスマホブラウザでも確認できました。
最後に大まかなコードの流れだけになってしまいますが載せておきます。
ただ、下記のように簡単なコードを作成すると普通に動作したのでjsファイルの読み込みが悪いのではなく、外部jsファイルの中身自体がスマホで動作しないコードがあるのかもしれないです...
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <title>HTMLテンプレート</title> 5 <button onclick="createSentence()">クリック</button> 6 </head> 7 <body> 8 <h1>Hello, World!</h1> 9 <script src="../path/example.js"></script> 10 <script> 11 const url1 = "http://IPアドレス:5500/path/file.json"; 12 const url2 = "http://IPアドレス:5500/path/file2.json"; 13 14 15 let file1 = { key1: "value1", }; 16 let file2= { key1: "value1", }; 17 // jsonファイルの受け取り 18 const fetchData = async () => { 19 try { 20 await Promise.all([ 21 fetch(url1).then((response) => response.json()), 22 fetch(url2).then((response) => response.json()), 23 ]) 24 .then((data) => { 25 file1 = data[0]; 26 file2 = data[1]; 27 }) 28 .catch((err) => { 29 console.error("JSONファイルの取得に失敗しました", err); 30 }); 31 } catch (err) { 32 console.log(err); 33 } 34 }; 35 36 fetchData(); 37 38 const example = new Example(1, 2); 39 40 const createSentence = async () => { 41 alert(example._add()); 42 }; 43 </script> 44 </body> 45</html> 46
javascript:example.js
1class Example { 2 constructor(a, b) { 3 this._a = a; 4 this._b = b; 5 } 6 7 _add() { 8 const c = this._a + this._b 9 return c; 10 } 11}
回答1件
あなたの回答
tips
プレビュー