215ページ、チャプター5-3、ステップ1の『承認する』ボタンについてですが、index.htmiをSavedで開きコンソールも表示させたときに、『クッキーを確認できません』『クッキーを確認しました』の文字確認ができません。
ブラウザは、Chromeを使っていますが、コードチェックもしてみましたが、わかりませんでした。
そのあとのステップ3、221ページのパネル表示も消えない状況です。
解決法をご教示お願いできますでしょうか。
よろしくお願いいたします。
配布しているサンプルデータで動作確認をしてみましたか? していない場合はまずダウンロードして、サンプルが動くかどうかチェックしてみてください。
配布サンプルデータが動くのであれば、5-3の場合、Servedの起動方法か、作成したプログラムのどこかが違う可能性が高いです(コンソールの設定なども考えられなくはないですが可能性は低い)。もう一度チャレンジしてみてもらえますか。
サンプルデータでも動作確認してみましたが、反応はテキスト通りに作成したものと変化がありませんでした。サンプルデータの場所は、book-js>book-js>5-03_cookie>step3 かstep2で間違いないでしょうか。
htmlは以下で作成しています。(ステップ3)
<!doctype html>
<html>
<head>
<meta charset=”UTF-8“>
<meta name=”viewport” content=”width=device-width,initial-scale=1“>
<title>テンプレート</title>
<link href=”../../_common/images/favicon.ico” rel=”shortcut icon“>
<link href=”https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500” rel=”stylesheet“>
<link href=”../../_common/css/style.css” rel=”stylesheet“>
<link href=”panel.css” rel=”stylesheet“>
</head>
<body>
<header>
<div class=”container“>
<h1>タイトル</h1>
<h2>サブタイトル</h2>
</div><!– /.container –>
</header>
<main>
<div class=”container“>
<section>
<p><button id=”testbtn“>テスト用 cookie削除</button></p>
</section>
</div><!– /.container –>
</main>
<footer>
<div class=”container“>
<p>JavaScript Samples</p>
</div><!– /.container –>
</footer>
<div id=”privacy-panel“>
<p>当サイトではユーザーエクスペリエンス向上のためクッキーを使用しています。また、匿名でアクセス
状況のデータを収集しています。詳しい情報は当サイトのプライバシーポリシーをご覧ください。</p>
<button id=”agreebtn“>承認する</button>
</div>
<script src=”../../_common/scripts/js.cookie.js“></script>
<script>
‘use strict’;
const agree = Cookies.get(‘cookie-agree’);
const panel = document.getElementById(‘privacy-panel’);
if (agree === ‘yes’) {
document.body.removeChild(panel);
} else {
document.getElementById(‘agreebtn’).onclick = function(){
Cookies.set(‘cookie-agree’, ‘yes’, {expires: 7});
document.body.removeChild(panel);
};
}
// クッキー削除(テスト用)
document.getElementById(‘testbtn’).onclick = function(){
Cookies.remove(‘cookie-agree’);
};
</script>
</body>
</html>
テキスト通り作成したもので、承認ボタンをクリックしたあとページ更新をするとコンソールが以下の内容になります。
Refused to apply style from ‘http://localhost:4248/_common/css/style.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.
(index):37 GET http://localhost:4248/_common/scripts/js.cookie.js net::ERR_ABORTED 404 (Not Found)
(index):41 Uncaught ReferenceError: Cookies is not defined
at (index):41
(anonymous) @ (index):41
よろしくお願いします。
サンプルデータの動作確認は、テキストを読み直して、再度確認しましたら、問題なくできました。すみませんでした。
もともとの設定が間違っていたのかもしれません。テキスト212ページにある『実習で作成中のファイルも同じようにして確認できます。「practice」フォルダに含まれる各フォルダをクリックすれば、開きたいHTMLファイルを開くことができます』について理解できていなかったのですが、最初の段階で、いままで「_template」フォルダをコピーしたものは、すべてデスクトップの別の場所に作って置いていたので、そこに「practice」フォルダは存在していなかったため、何のことかわかりませんでした。なので、元の「practice」フォルダの中に、「_template」フォルダをコピーして作成した「5-03_cookie」フォルダを移動しました。そして、Servedを使って、local.htmlから「practice」フォルダ、「5-03_cookie」フォルダを開きコンソールを確認したら、サンプルデータと同じで、何も表示されなくなることが確認できました。
上記内容で間違いありませんでしょうか。
よろしくお願いします。
正しいです。
先に投稿されたエラーメッセージを見て、Servedの起動方法かファイルの保存場所が違うのではないかと思っていました。ともかく動いてくれたよかったです。