【Cookie実装】JavaScriptでCookieの利用同意と拒否のFooterバナーを作る

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptでGDPR対策ともなる合法なCookieの利用同意と拒否のFooterバナーを作る方法について解説します。

以前にJavaScriptでのCookieの操作について解説しているので、気になる方はそちらもCheckしてみてください！

JavaScriptでCookieの取得・追加・更新・削除・有効期限の設定 | cookieの操作

【 JavaScriptでCookieの操作をする】

1 Cookieバナーの仕様を定義する
2 Cookieの利用同意と拒否のFooterバナーを作る・実装ロジック
- 2.1 実装ロジック
3 Cookieの利用同意と拒否のFooterバナーのSample-Code全文
4 Cookieの利用同意と拒否のFooterバナーのHTMLイメージ
5 JavaScript書籍 Ver. 中級-上級者向け
6 JavaScript書籍 Ver. 初級者向け
7 Twitterやってます！Follow Me！
8 参考・引用
9 最近の投稿

Cookieバナーの仕様を定義する

Cookieとは、WebサーバーやJavaScriptからユーザーのブラウザへ送信・保存されるデータのことです。

このCookieのデータを活用することによってWebサイトを閲覧したユーザーを識別でき、再訪問者かどうかを判断できるようになっています。

そのため、Cookieは個人情報と位置付けられており、また「足あと」とも表現されます。

GDPR（一般データ保護規則）や改正個人情報保護法により、Cookieが個人情報相当とみなされて規制されるようになったので、Cookieを使用するためにはユーザーの同意が必要となりました。

また、拒否権がないCookieのバナーやPopupは違法になるので注意が必要です。

Cookie同意取得は何が正解なのか
Cookie規制により、同意取得バナーを表示しているWebサイトが近年増えている。
しかし、バナーを表示したからといって全てが解決するというわけではない。
というのも、法令に遵守している同意取得バナーを表示させないと違法なるからだ。
・「サイトの閲覧＝同意」のようにユーザーに取得可否の選択権がないもの
・「Cookie ウォール」と呼ばれる同意がないとサイト閲覧できないもの
・同意拒否ボタンの場所がわかりにくいもの
・同意拒否理由をきくもの
日本のWebサイトを見ると「拒否ボタン」がないバナーを導入している企業が多い。
しかし、ユーザーに拒否権のないバナーは違法だ。
また、拒否手続きの手間を増やす手法も違法となるため、注意しなければならない。
対してオプトイン方式は、事前にデータ取得の同意可否を行う方式だ。
NGバナーとは違い、オプトイン方式であれば「拒否ボタン」を表示できるなど、確実にユーザーに選択権がある。
そのため、改正個人情報保護法はもちろん、Cookie規制が厳しいGDPR対策としても非常に有効だ。
引用元： Cookieの同意取得の仕組みは？同意管理について分析してみた

Cookieの利用同意と拒否のFooterバナーを作る・実装ロジック

今回のCookieの利用同意と拒否のFooterポップアップを作るにあたって、こちらの記事を参考にさせていただきました。

【コピペで実装】Cookie使用同意のポップアップ3選

上記の記事では、Cookieには保存せず「LocalStarage」を使っていた点と、

先述の仕様の定義で挙げた「拒否ボタン」や拒否の場合の処理などが実装されていなかったので、その点を改造していきます。

Cookie同意UserはCookieに保存する点と、Cookie拒否UserはCookieデータをすべて削除&拒否情報をSettionStorageで管理している点が実装の注目ポイントです。

実装ロジックは、まとめると次のとおりです。

実装ロジック

同意ボタンでCookieデータをSetする。
拒否ボタンでは、Cookieデータをすべて削除する(いつの間にかCookieもすべて破棄する)。さらに、sessionStorageにrejectFlagをSetする。
初回アクセスや、Sessionが切れたらCookieバナーを表示する。
FlagでStatusを管理する。
Cookie同意Userは、CookieデータのSetを確認してFlagのON/OFFを実施する。
cookieSetFlagが立っているUserは、Cookie同意済みUser
rejectFlagが立っているUserは、Cookie-拒否User
2つのFlagがどちらも立っていないUserは、初回アクセスUserか、有効期限・Session切れUser
2つのFlagが立っていなければ、Cookieバナーを表示する。

Cookieの利用同意と拒否のFooterバナーのSample-Code全文

<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>