BOOK Studio947
狩野祐東・狩野さやか著書

215ページ、チャプター5-3、ステップ1の『承認する』ボタンについて

書籍Q&ACategory: 確かな力が身につくJavaScript「超」入門第2版215ページ、チャプター5-3、ステップ1の『承認する』ボタンについて
crayon asked 4年 ago

215ページ、チャプター5-3、ステップ1の『承認する』ボタンについてですが、index.htmiをSavedで開きコンソールも表示させたときに、『クッキーを確認できません』『クッキーを確認しました』の文字確認ができません。
ブラウザは、Chromeを使っていますが、コードチェックもしてみましたが、わかりませんでした。
そのあとのステップ3、221ページのパネル表示も消えない状況です。
解決法をご教示お願いできますでしょうか。
よろしくお願いいたします。

3 Answers
狩野 祐東 Staff answered 4年 ago

配布しているサンプルデータで動作確認をしてみましたか? していない場合はまずダウンロードして、サンプルが動くかどうかチェックしてみてください。

配布サンプルデータが動くのであれば、5-3の場合、Servedの起動方法か、作成したプログラムのどこかが違う可能性が高いです(コンソールの設定なども考えられなくはないですが可能性は低い)。もう一度チャレンジしてみてもらえますか。

crayon answered 4年 ago

サンプルデータでも動作確認してみましたが、反応はテキスト通りに作成したものと変化がありませんでした。サンプルデータの場所は、book-js>book-js>5-03_cookie>step3 かstep2で間違いないでしょうか。
htmlは以下で作成しています。(ステップ3)

<!doctype html>

 
<html>

 
<head>

 
<meta charset=”UTF-8“>

 
<meta name=”viewportcontent=”width=device-width,initial-scale=1“>

 
<title>テンプレート</title>

 
<link href=”../../_common/images/favicon.icorel=”shortcut icon“>

 
<link href=”https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500rel=”stylesheet“>

 
<link href=”../../_common/css/style.cssrel=”stylesheet“>

 
<link href=”panel.cssrel=”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&#8217; 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
よろしくお願いします。

crayon replied 4年 ago

サンプルデータの動作確認は、テキストを読み直して、再度確認しましたら、問題なくできました。すみませんでした。

crayon replied 4年 ago

もともとの設定が間違っていたのかもしれません。テキスト212ページにある『実習で作成中のファイルも同じようにして確認できます。「practice」フォルダに含まれる各フォルダをクリックすれば、開きたいHTMLファイルを開くことができます』について理解できていなかったのですが、最初の段階で、いままで「_template」フォルダをコピーしたものは、すべてデスクトップの別の場所に作って置いていたので、そこに「practice」フォルダは存在していなかったため、何のことかわかりませんでした。なので、元の「practice」フォルダの中に、「_template」フォルダをコピーして作成した「5-03_cookie」フォルダを移動しました。そして、Servedを使って、local.htmlから「practice」フォルダ、「5-03_cookie」フォルダを開きコンソールを確認したら、サンプルデータと同じで、何も表示されなくなることが確認できました。

上記内容で間違いありませんでしょうか。

よろしくお願いします。

狩野 祐東 Staff replied 4年 ago

正しいです。
先に投稿されたエラーメッセージを見て、Servedの起動方法かファイルの保存場所が違うのではないかと思っていました。ともかく動いてくれたよかったです。

crayon answered 4年 ago

ありがとうございます。
無事解決できてよかったです。お手数おかけして申し訳ありませんでした。
ありがとうございました。