質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1126閲覧

Cookie利用のポップアップの動作確認方法がわからない

saku615

総合スコア45

Cookie

HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2022/09/08 04:02

実現したいこと

とあるサイトにCookie利用の同意ポップアップを表示しようとしているんですが、↓のサイトのコードを利用して該当ページに埋め込んでみました。

https://masanyon.com/javascript-cookie-popup/

↓の動作が実現できているかを確認する方法がわからないのですが、どのようにすればいいかわかる方いますでしょうか…?

  1. 同意を押せばcookieが記録される
  2. 拒否を押せばcookieが削除される
  3. ページを遷移した先でも上記の条件で動作する

該当のソースコード

<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cookie-Footer-Test</title> <style> .cookie-consent { display: flex; justify-content: center; align-items: center; position: fixed; bottom: 0; width: 100%; font-size: 12px; color: #fff; background: rgba(0,0,0,.7); padding: 1.2em; box-sizing: border-box; visibility: hidden; } .cookie-consent.is-show { visibility: visible; } .policy-link, :link, :visited, :hover, :active { color: rgb(0, 136, 255); font-size: 15px; text-decoration: none; } .cookie-agree, .cookie-reject { color: #fff; background: dodgerblue; padding: .5em 1.5em; margin-left: 20px; } .cookie-agree:hover, .cookie-reject:hover { cursor: pointer; } /* パッと消える */ .cc-hide1 { display: none; } /* ゆっくり消える */ .cc-hide2 { animation: hide 1s linear 0s; animation-fill-mode: forwards; } @keyframes hide { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } /* メディアクエリ */ @media screen and (max-width: 600px) { .cookie-consent { flex-direction: column; } .cookie-text { margin-bottom: 1em; } } </style> </head> <body> <h1>Cookie-Footerを作るロボ玉</h1> <h2>Cookieのポイント</h2> <h3>1. Cookieには、同意/拒否 ができる仕様となっていなければならない</h3> <p>利用規約 & 同意・拒否ボタンの実装</p> <h3>2. Cookieを拒否したのに裏側で収集してはいけない</h3> <p>拒否ボタンを押したらCookieを削除する</p> <p>SystemのどこかでCookieを使用しているかもしれないので、ここで明示的にすべて削除する</p> <h3>参考・引用</h3> <ol> <li> <a href="https://itblogger-note.blogspot.com/2021/06/cookie-consent-popup.html" target="_blank">【コピペで実装】Cookie使用同意のポップアップ3選</a> </li> <li> <a href="https://acompany.tech/privacytechlab/alert-as-cookie-consent/" target="_blank">Cookieの同意取得の仕組みは?同意管理について分析してみた</a> </li> </ol> <div class="cookie-consent"> <div class="cookie-text"> 当サイトではCookieを使用します。Cookieの使用に関する詳細は <span class="policy-link"> <a href="https://masanyon.com/privacy-policy/" target="_blank" >「プライバシーポリシー」</a> </span> をご覧ください。 <br> クッキーを受け入れるか拒否するか選択してください。 </div> <div class="cookie-agree">同意する</div> <div class="cookie-reject">拒否する</div> </div> <script type='text/javascript'> (function() { console.log('即時関数'); // DOM-Elementを取得しておく const cookieConsent = document.querySelector('.cookie-consent'); const cookieAgree = document.querySelector('.cookie-agree'); const cookieReject = document.querySelector('.cookie-reject'); // Cookieを拒否した時用のFlag const rejectFlag = sessionStorage.getItem('rejectFlag'); console.log({rejectFlag}); const cookieData = document.cookie; console.log({cookieData}); // CookieをSetしているかどうかを判定するためのFlag let cookieSetFlag = false; // 綺麗に分割するために「'; '」(セミコロン&半角スペース)で区切る! const cookieDataList = cookieData.split('; '); console.log({cookieDataList}); for (const cookie of cookieDataList) { const cookieSplit = cookie.split('='); console.log({cookieSplit}); if (cookieSplit[0] === 'robotama-cookie') cookieSetFlag = true; console.log({cookieSetFlag}); } // Cookieの有効期限(日)をSetする const expire = 31; // 1. Yes Cookie-Set-Function => 引数は有効期限(日) function SetCookie(expire){ const current = new Date(); expire = current.getTime() + expire * 24 * 3600 * 1000; // CookieにDataをSetする document.cookie = `robotama-cookie=robotama-read; expire=${expire}`; } // 2. Cookieを拒否したときに、Cookieをすべて削除するFunction function DeleteAllCookie(){ const maxAgeZero = 'max-age=0'; for (const cookie of cookieDataList) { const cookieSplit = cookie.split('='); document.cookie = `${cookieSplit[0]}=; ${maxAgeZero}`; } } // 3. Popup表示のFunction function PopupDisplay(){ cookieConsent.classList.add('is-show'); } if (cookieSetFlag) { console.log('cookieSetFlagが立っている!Cookie同意済みUser'); } else { if (rejectFlag) { console.log('rejectFlagが立っている!Cookie-拒否User'); } else { console.log('2つのFlagが立っていない!初回Access-Userか、有効期限切れUser'); PopupDisplay(); } } // Cookie同意ボタンにイベントを追加する cookieAgree.addEventListener('click', ()=> { cookieConsent.classList.add('cc-hide2'); SetCookie(expire); }); // Cookie拒否ボタンにイベントを追加する cookieReject.addEventListener('click', ()=> { cookieConsent.classList.add('cc-hide2'); // Cookie拒否Userは、SessionStorageで管理 // Sessionが切れれば、また表示される sessionStorage.setItem('rejectFlag', true); DeleteAllCookie(); }); }()); </script> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ブラウザにcookie編集用の拡張機能をインストールして、cookieがどうなっているのかを確認するのが早いです。
(ブラウザ標準機能でも確認できますが、若干面倒くさいです。)

chrome エクステンション cookie編集
あたりで検索して、適当な拡張機能をインストールして使ってみると分かると思います。

投稿2022/09/08 05:13

tanat

総合スコア18709

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

saku615

2022/09/08 05:37

ありがとうございます!試してみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問