Q&A
読み込もうとしているquiz.jsのソースコードを貼ってください
前提・実現したいこと
こんにちは。
クイズ アプリの作成の際、jsファイルに記入された問題文が画面側に表示できません。
解決方法をご存知の方、手数ですがアドバイス頂けましたらありがたいです。
発生している問題・エラーメッセージ
問題文が読み込めていない状態の画像です。
該当のソースコード
index
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" /> 6 7 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.theme-1.1.1.min.css" /> 8 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css" /> 9 <link rel="stylesheet" href="css/quiz.css"/> 10 11 <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 12 13 <script src="js/custom-scripting.js"></script> 14 <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> 15 16 <script src="js/quiz.js"></script> 17 18 <title>quiz47</title> 19 </head> 20 <body> 21 <!-- =====▽▽この下にページごとの処理を記述します▽▽===== --> 22 <!-- ============================ページ区切り[スタート]============================ --> 23 <div data-role="page" id="topPage"> 24 25 <div data-role="header"> 26 <h1>Quiz47</h1> 27 </div> 28 29 <div data-role="content"> 30 <div style="text-align:center;"> 31 <h1>47都道府県クイズ</h1> 32 <img src="images/japan.gif" style="width: 50%"> 33 </div> 34 <a data-role="button" href="#questionPage">スタート</a> 35 </div> 36 37 <div data-role="footer"> 38 <div data-role="navbar"> 39 <ul> 40 <li><a href="#scorePage" data-icon="info" data-rel="dialog">正解率</a></li> 41 </ul> 42 </div> 43 </div> 44 45 </div> 46 47 48 <!-- ============================ページ区切り[問題]============================ --> 49 <div data-role="page" id="questionPage"> 50 51 <div data-role="header"> 52 <a href="#topPage" data-icon="home">トップ</a> 53 <h1>問題</h1> 54 </div> 55 56 <div data-role="content"> 57 <h1 style="text-align:center;"> 58 次の中で<br /> 59 面積が<br /> 60 一番広いのは？ 61 </h1> 62 <ul data-role="listview" data-inset="true" id="questionList"> 63 <li><a href="#answerPage" id="1"></a></li> 64 <li><a href="#answerPage" id="2"></a></li> 65 <li><a href="#answerPage" id="3"></a></li> 66 </ul> 67 </div> 68 69 </div> 70 71 <!-- ============================ページ区切り[解答]============================ --> 72 <div data-role="page" id="answerPage"> 73 74 <div data-role="header"> 75 <a href="#topPage" data-icon="home">トップ</a> 76 <h1>解答</h1> 77 </div> 78 79 <div data-role="content"> 80 <h1 style="text-align:center;" id="judge"></h1> 81 82 <table style="font-size:1.5em"> 83 <tr> 84 <td>1位:</td> 85 <td id="todofuken1"></td> 86 <td class="areaSize" id="areaSize1"></td> 87 </tr> 88 <tr> 89 <td>2位:</td> 90 <td id="todofuken2"></td> 91 <td class="areaSize" id="areaSize2"></td> 92 </tr> 93 <tr> 94 <td>3位:</td> 95 <td id="todofuken3"></td> 96 <td class="areaSize" id="areaSize3"></td> 97 </tr> 98 </table> 99 <p> 100 <a data-role="button" id="nextButton" href="#questionPage"> 101 次の問題 102 </a> 103 </p> 104 </div> 105 106 </div> 107 108 <!-- ============================ページ区切り[正解率]============================ --> 109 <div data-role="page" id="scorePage"> 110 111 <div data-role="header"> 112 <h1>正解率</h1> 113 </div> 114 115 <div data-role="content"> 116 <table> 117 <tr> 118 <td style="width: 6em;">解答数</td> 119 <td id="totalQuestion"></td> 120 </tr> 121 <tr> 122 <td>正解数</td> 123 <td id="correctAnswer"></td> 124 </tr> 125 <tr> 126 <td>正解率</td> 127 <td id="correctRatio"></td> 128 </tr> 129 </table> 130 <a data-role="button" href="#topPage"> 131 閉じる 132 </a> 133 </div> 134 135 </div> 136 <!-- ===================================================================================== --> 137 138 </body> 139 140</html>
quiz.js です (04/23ご指摘を受け追記）
javascript
1// =========================================== 2// 47都道府県クイズ JavaScript 3// =========================================== 4 5// ============アプリ共通変数の定義============ 6 7//グローバルオブジェクト（空オブジェクト） 8var MYQUIZ = {}; 9 10//都道府県データ（名称、面積(平方km)） 11MYQUIZ.todofuken = [ 12 ["北海道", "83457"],["青森県", "9644"], ["岩手県", "15279"], 13 ["宮城県", "7286"], ["秋田県", "11636"], ["山形県", "9323"], 14 ["福島県", "13783"],["茨城県", "6096"], ["栃木県", "6408"], 15 ["群馬県", "6363"], ["埼玉県", "3797"], ["千葉県", "5157"], 16 ["東京都", "2188"], ["神奈川県", "2416"],["新潟県", "12584"], 17 ["富山県", "4248"], ["石川県", "4186"], ["福井県", "4190"], 18 ["山梨県", "4465"], ["長野県", "13562"], ["岐阜県", "10621"], 19 ["静岡県", "7780"], ["愛知県", "5165"], ["三重県", "5777"], 20 ["滋賀県", "4017"], ["京都府", "4613"], ["大阪府", "1898"], 21 ["兵庫県", "8396"], ["奈良県", "3691"], ["和歌山県","4726"], 22 ["鳥取県", "3507"], ["島根県", "6708"], ["岡山県", "7113"], 23 ["広島県", "8479"], ["山口県", "6113"], ["徳島県", "4147"], 24 ["香川県", "1877"], ["愛媛県", "5678"], ["高知県", "7105"], 25 ["福岡県", "4977"], ["佐賀県", "2440"], ["長崎県", "4105"], 26 ["熊本県", "7405"], ["大分県", "6340"], ["宮崎県", "7736"], 27 ["鹿児島県","9189"],["沖縄県", "2276"] 28]; 29 30//スコアの初期化 31if(!localStorage.totalQuestion){ 32 localStorage.totalQuestion = 0; 33 localStorage.correctAnswer = 0; 34} 35 36// =====▽▽この下にページごとの処理を記述します▽▽===== 37 38// ============ページ区切り[問題]============ 39$(document).on("pageinit", "#questionPage", function(){ 40 41 //画面表示時の処理 42 $("#questionPage").on("pageshow", function() { 43 44 var randNum = new Array(3); 45 46 //0から46までの重複のない整数を3つ取得 47 do{ 48 for(var i = 0; i < randNum.length ; i++){ 49 randNum[i] = Math.floor(Math.random() * 47); 50 } 51 }while(MYQUIZ.isDuplicate(randNum)); 52 53 //問題を表示 54 $("#1").html(MYQUIZ.todofuken[randNum[0]][0]); 55 $("#2").html(MYQUIZ.todofuken[randNum[1]][0]); 56 $("#3").html(MYQUIZ.todofuken[randNum[2]][0]); 57 58 //都道府県番号をsessionStorageに保存 59 sessionStorage.randNum1 = randNum[0]; 60 sessionStorage.randNum2 = randNum[1]; 61 sessionStorage.randNum3 = randNum[2]; 62 }); 63 64 //都道府県名の選択時の処理 65 $("#questionList a").on("click", function() { 66 var selectedId = $(this).attr("id"); 67 sessionStorage.selectedNumber = sessionStorage["randNum" + selectedId]; 68 }); 69 70}); 71 72//配列内の値の重複を確認 73MYQUIZ.isDuplicate = function(array){ 74 array.sort(); 75 for(var i = 0; i < (array.length - 1); i++){ 76 if(array[i] === array[i + 1]) return true; 77 } 78 return false; 79} 80 81 82// ============ページ区切り[解答]============ 83$(document).on("pageinit", "#answerPage", function(){ 84 85 //画面表示時の処理 86 $("#answerPage").on("pageshow", function() { 87 var selectedNum = sessionStorage.selectedNumber; 88 var randNum = new Array(3); 89 randNum[0] = sessionStorage.randNum1; 90 randNum[1] = sessionStorage.randNum2; 91 randNum[2] = sessionStorage.randNum3; 92 93 var questionData = new Array(3); 94 for(var i = 0; i < questionData.length; i++){ 95 questionData[i] = new Array(2); 96 questionData[i][0] = MYQUIZ.todofuken[randNum[i]][0]; 97 questionData[i][1] = MYQUIZ.todofuken[randNum[i]][1]; 98 } 99 questionData.sort(MYQUIZ.arraySort); 100 101 //正誤の判定と表示 102 if(questionData[0][0] === MYQUIZ.todofuken[selectedNum][0]){ 103 $("#judge").html("正解").css("color","green"); 104 localStorage.correctAnswer++; 105 }else{ 106 $("#judge").html("ハズレ").css("color","red"); 107 } 108 109 //ランキング表示 110 for(var i = 0; i < questionData.length; i++){ 111 $("#todofuken" + (i+1) ).html(questionData[i][0]); 112 $("#areaSize" + (i+1) ).html(questionData[i][1] + "平方Km"); 113 } 114 115 //総解答数の更新 116 localStorage.totalQuestion++; 117 }); 118}); 119 120//2次元配列ソート(並べ替え)用の関数 121MYQUIZ.arraySort = function(a, b){ 122 return b[1] - a[1]; 123} 124 125// ============ページ区切り[正解率]============ 126$(document).on("pageinit", "#scorePage", function(){ 127 128 //画面表示時の処理 129 $("#scorePage").on("pageshow", function() { 130 $("#totalQuestion").html(localStorage.totalQuestion); 131 $("#correctAnswer").html(localStorage.correctAnswer); 132 var ratio = Math.floor((localStorage.correctAnswer / localStorage.totalQuestion) * 100); 133 $("#correctRatio").html(ratio + "%"); 134 }); 135 136});
試したこと
旧ファイル名"quiz.index"のままになっている個所があるかと思い、プログラム内を検索しましたが、ありませんでした。
補足情報（FW/ツールのバージョンなど）
本のプログラムダウンロードサイト
http://ec.nikkeibp.co.jp/nsp/dl/09617/index.shtml
Link
namimons さん ご指摘ありがとうございます。 また情報の添付漏れ、失礼しました。 今しがたquiz.jsを追記しました。 お手数をおかけしますが、引き続き宜しくお願い致します。
raaartaさんが添付されたコードをそのままコピペして以下のブラウザで全てクイズの選択肢が表示され、結果も正常に表示されました。
（PCブラウザ）
InternetExplorer11 version：11.371.16299.0
FireFox version：59.0.2(64bit)
GoogleChrome version：65.0.3325.181(64bit)
（スマートフォン・タブレット）
iPhone6 iOS:11.3(Safari version：11.0)
iPad mini2 iOS:11.3(Safari version：11.0)
コードの間違いではなく、ブラウザのバージョンもしくは他のプログラムが干渉している可能性があるかもです。現在のテスト環境と他に一緒に動かしているコードがあればそれも載せた方がいいかもです。
haru_hime さん ご連絡ありがとうございます。お話をお伺いするに、私はmonacaをかましている・経由させていて、クイズの問題が表示されない。 haru_hime さんはmonacaをかましていなくて、正常に表示されている。 →→プログラムそのものに間違いはなさそうだ、という点、ごもっともです。 私がまだmonaca及びjavascriptを学び始めたばかりなので、これ以上は自分では不具合原因を深堀できませんが、わかりましたらご連絡させてください。 フツーのブラウザでは実行できる旨の検証、本当にありがとうございました。
monacaデバッガーにエラーはでていませんか？画面中に浮いているボタンに！マークがでているか見てみてください。クラウドエディタで編集しているのであれば、プレビューからＦ１２を押してエラーメッセージが出ているか確認できます。
monacaデバッガーにエラーはでていませんか？画面中に浮いているボタンに！マークがでているか見てみてください。クラウドエディタで編集しているのであれば、プレビューからＦ１２を押してエラーメッセージが出ているか確認できます。
namimonさん ご意見ありがとうございます。 monacaのデバッガには何もでていませんでした Debugタブ Logタブ Warningタブ Errorタブは何もなし。 ただ、monacaをChromeで表示させている状態でF12を押し、Chromeのデベロッパーツールでは以下の"8 errors"です。 Mixed Content: The page at 'https://ide.monaca.mobi/project/5adc528b4567?_ga=2.110056261.13367214975-13199223775062' was loaded over HTTPS, but requested an insecure stylesheet 'http://code.jquery.com/mobile/1.1.1/jquery.mobile.theme-1.1.1.min.css'. This request has been blocked; the content must be served over HTTPS. index.html:8 Mixed Content: The page at 'https://ide.monaca.mobi/project/5adc655528b4567?_ga=2.110056261.1336721497.1524201.1523775062' was loaded over HTTPS, but requested an insecure stylesheet 'http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css'. This request has been blocked; the content must be served over HTTPS. index.html:1 Mixed Content: The page at 'https://ide.monaca.mobi/project/5adcb4567?_ga=2.110056261.1336721497.125-13191.1523775062' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/jquery-1.7.1.min.js'. This request has been blocked; the content must be served over HTTPS. custom-scripting.js:3 Uncaught ReferenceError: $ is not defined at custom-scripting.js:3 index.html:1 Mixed Content: The page at 'https://ide.monaca.mobi/project/5a8555528b4567?_ga=2.1261.1336721497.1201.1523775062' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js'. This request has been blocked; the content must be served over HTTPS. quiz.js:39 Uncaught ReferenceError: $ is not defined at quiz.js:39 index.html:1 Mixed Content: The page at 'https://ide.monaca.mobi/project/5adc612ee788854567?_ga=2.11.1336721497.152466523775062' was loaded over HTTPS, but requested an insecure stylesheet 'http://code.jquery.com/mobile/1.1.1/jquery.mobile.theme-1.1.1.min.css'. This request has been blocked; the content must be served over HTTPS. index.html:1 Mixed Content: The page at 'https://ide.monaca.mobi/project/5adc61b4567?_ga=2.1156261.1336721497.15246062' was loaded over HTTPS, but requested an insecure stylesheet 'http://code.jquery.com/mobile/1.1.1/jquery.mobile.structure-1.1.1.min.css'. This request has been blocked; the content must be served over HTTPS.
上記情報で何かお気づきの点ございましたら、お手数ですが教えて頂ければありがたいです。度々申し訳ございません。宜しくお願いします。
翻訳：安全でないスクリプト 'http://code.jquery.com/jquery-1.7.1.min.js'を要求しました。このリクエストはブロックされました。 原文：but requested an insecure script 'http://code.jquery.com/jquery-1.7.1.min.js'. This request has been blocked; 英語が得意で無いので翻訳しながらでしたがjqueryがブロックされているようですね。 monacaを良く知りませんので解決方法はわかる方にパスします。
haru_himeさん、レスポンスありがとうございます！了解です。取り急ぎ。
問題がまだ解決していない場合は質問に追記をお願い致します。解決した場合はベストアンサーを選択して質問を閉じましょう。
回答1件
0
ベストアンサー
外部サーバーにあるスクリプトを読み込む時に、そのサーバーがhttpなのでスクリプトの読み込みがブロックされているようです。
index.htmlの
http://code.jquery.com/jquery-1.7.1.min.js
などを全て
https://code.jquery.com/jquery-1.7.1.min.js
にする（httpsでの接続は確認できました）
または、一回外部にあるスクリプトを全てダウンロードしてから、プロジェクト内にアップロードし、プロジェクト内のパスでスクリプトを読み込んでください。
投稿2018/04/26 00:39
総合スコア726
namimonさん
ありがとうございます、できました！！
①index.html内でのhttp:で検索ヒットが４件、その全てをhttps:にしました。
②置換後にindex.htmlを保存し、再度monaca画面右側の疑似スマートフォン画面を操作するも、、かわらず、ゲゲゲ、、と思いましたが
③monacaを表示させているChromeをF5で更新させると、、、クイズの回答・選択肢がでてきました。
namimonさん、またharu_himeさん、ご親切に本当にありがとうございました！！"webアプリのデバッグ"がほんの少し、わかったきがします。monacaでindex.htmlを編集後保存してもダメでChromeのリロードで本当の意味で更新されるってなんやねん、、とも思いましたが、本当にいいナレッジを頂きました。ひたすら、感謝です！
キャッシュが残っていたのかもしれませんね。
解決につながったのでしたら、ベストアンサーいただけると幸いです。
あなたの回答
tips
プレビュー
