はじめに
ブログを読んでいただきありがとうございます！今回の作って学ぶWeb制作ではCookie同意確認バナーを実装していきます。サイトの訪問者に対して、Cookieの使用について知らせたり、同意を求めるメッセージを出すためのポップアップやバナーを見たことがある方も多いと思います。
今回の記事を通して、Cookieの有効化/無効化の処理の実装方法を学んでいきましょう。
EU（外国制度）
GDPR（General Data Protection Regulation：一般データ保護規則）https://www.ppc.go.jp/enforcement/infoprovision/EU/
デモ
必要なCookieのみ許可、すべて許可を選択することができ、確認後はバナーが非表示になります。Cookieが存在している間は、サイトを再訪問してもバナーは表示されないようになります。
仕様
以下の仕様をもとに実装を進めていきます。
ユーザーがサイト初回訪問時にCookie利用同意確認バナーを表示
「必要なCookieのみ許可」または「すべて許可」をボタンで選択
同意内容はcookieConsentという名前のCookieに365日間保存
Cookieがすでに存在する場合はバナーを非表示にする。
css、jsファイルは外部ファイルとしてhtmlで読み込みます。
【実践】バナーを実装する
HTMLコード
バナーに必要な要素を準備していきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cookie同意確認バナー サンプル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>作って学ぶWeb制作 上級</h1>
<h2>Cookie同意確認バナーを実装しよう</h2>
</header>
<div id="cookie-banner" class="cookie-banner">
このサイトではCookieを使用しています。<a href="#">詳しくはこちら</a>
<div class="cookie-buttons">
<button id="accept-necessary">必要なCookieのみ許可</button>
<button id="accept-all">すべて許可</button>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>CSSでスタイル追加
バナーは画面下部に、最前面で固定表示にします。
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #222;
color: #fff;
padding: 20px;
text-align: center;
font-size: 14px;
display: none;
z-index: 1000;
}
.cookie-banner a {
color: #4eaaff;
text-decoration: underline;
}
.cookie-buttons {
margin-top: 10px;
}
.cookie-buttons button {
margin: 0 10px;
padding: 8px 12px;
border: none;
border-radius: 4px;
cursor: pointer;
}
#accept-necessary {
background-color: #666;
color: white;
}
#accept-all {
background-color: #4eaaff;
color: white;
}ソースコード ポイント解説
position: fixed と z-index がポイントです。バナーが常に画面下に表示され、他の要素に隠れないようにしています。
.cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #222;
color: #fff;
padding: 20px;
text-align: center;
font-size: 14px;
display: none;
z-index: 1000;
}JavascriptでCookieを操作する
Cookieの操作とバナーの表示制御を行っていきましょう。
document.addEventListener("DOMContentLoaded", function () {
const banner = document.getElementById("cookie-banner");
const acceptNecessary = document.getElementById("accept-necessary");
const acceptAll = document.getElementById("accept-all");
// Cookieから同意状態をチェック
function getCookie(name) {
const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
return match ? match[2] : null;
}
// Cookieをセット（期限：365日）
function setCookie(name, value, days) {
const expires = new Date(Date.now() + days * 864e5).toUTCString();
document.cookie = `${name}=${value}; expires=${expires}; path=/`;
}
// 同意済みならバナーを非表示
if (!getCookie("cookieConsent")) {
banner.style.display = "block";
}
acceptNecessary.addEventListener("click", function () {
setCookie("cookieConsent", "necessary", 365);
banner.style.display = "none";
console.log("必要なCookieのみ許可");
});
acceptAll.addEventListener("click", function () {
setCookie("cookieConsent", "all", 365);
banner.style.display = "none";
console.log("すべてのCookieを許可");
});
});Cookie情報の確認方法
開発中は検証ツール(開発者ツール)を使いながらCookie情報を確認していくため、ブラウザでCookie情報を確認する方法を紹介します。ローカル環境で開発中の場合はローカルサーバーを立てることをおすすめします。VSCodeの場合、Live serverがおすすめです。
①右クリック→検証 または Ctrl + Shift + I（F12）
②Applicationタブを選択
③左バーのCookiesから詳細を確認
Edgeの場合 ：
①右クリック→開発者ツールで調査するまたは Ctrl + Shift + I（F12）
②Applicationタブ(バージョンによってはStrageタブ)を選択
③左バーのCookiesから詳細を確認
ソースコード ポイント解説
Cookieの読み書きですが、関数getCookie()で指定した名前のCookieがあるかどうかを調べ、その値を取り出します。14~17行目の関数setCookie()で名前・値・有効期限（日数）を指定しCookieを保存します。
次に、サイト初回訪問時などCookieが未設定のときだけバナーを表示する制御の部分を見てみましょう。
// 同意済みならバナーを非表示
if (!getCookie("cookieConsent")) {
banner.style.display = "block";
}ページが読み込まれたときにcookieConsentという名前のCookieが存在しているかをチェックし、存在していなければバナーを表示します。
次に、ボタンのクリックでCookieを保存してバナーを非表示にしている部分です。
acceptNecessary.addEventListener("click", function () {
setCookie("cookieConsent", "necessary", 365);
banner.style.display = "none";
console.log("必要なCookieのみ許可");
});クリックしたボタンに応じて”necessary” または “all”を365日保存します。Cookie保存後にバナーを非表示にしています。
これで、ユーザーの選択に応じてCookie情報を記録することができました。
毎回バナーを表示するのではなく、すでに同意している人には表示しないというユーザーへ配慮した機能になりましたね。
まとめ
今回の作って学ぶWeb制作では入力フォームのバリデーションを実装してみました。リアルタイムでのエラーチェックや、ユーザーに優しいインターフェースを意識した設計は、ユーザーのストレスを減らすことにもつながります。入力フォームに限らず、どんな機能も使いやすさを考えて設計・実装することが大切ですね。
今回もお読みいただきありがとうございました。
