star back image
people4
電飾 電飾
moon
men
  • HOME
  • BLOG
  • 【jquery.cookie】クッキーを使って年齢確認の実装しよう
クッキーで年齢確認を作る

【jquery.cookie】クッキーを使って年齢確認の実装しよう

BLOG WEBログ
読了約:22分

お子様にはまだ早い。
キッズには見てほしくない、そんなは時ありますか？

ドラマや映画のラブシーンの時のような感じです。
気まずい。

そんなことは一度もありません。

いやん❤️

お酒や薬に溺れたり、残虐で凄惨なシーンなどなど。
世の中には色々と奥が深く闇な世界もあります。

もしそんなコンテンツなら当然、下層ページへも「目隠し」と「年齢確認」をするための実装をすることになると思います。

こんな感じです。

年齢確認画面のサンプル画像
年齢確認をするための画面の画像

モーダル年齢確認サンプル：トップページのみ
https://astrowave.jp/kin18.php

機能や要件を確認

  • 「Yes」ボタンを押したら「年齢確認」は消える。
  • 「Yes」ボタンを押しただけでは、コンテンツにボカシが入り進めない。
  • 「No」ボタンを押したらYahoo！へ飛んでいきたい。
  • 「次回より確認を省略」のチェックを入れて「Yes」ボタンを押したら記憶（クッキー）されて「年齢確認」をしばらく表示させない。コンテンツにもボカシなし。
  • テストのためにクッキー削除ボタン設置する。

※2番目のボカシについては、
時間的にトップページのみサンプル作成（下層は未作成）なので、
もし下層コンテンツに行ったら、ボカシみたいなこともできるよという想定のものだと思っていただければ幸いです。
トップページでボカす必要はないでしょう。

なんかイジワルじゃないですか。

分別のある大人には「Yes」ボタンを押してどんどんコンテンツを楽しんでほしい。
しかし注意しないと「なりすましキッズ」の可能性もあります。

この記事の要点は以下です。

「次回より確認を省略」のチェックを入れて「Yes」ボタンを押したら、ブラウザに記憶（クッキー）されて、しばらくは表示されないようにしたいというお話です。

そんな時に便利なのがjquery.cookieです。

jquery.cookieがおすすめ

参考：github（jquery-cookie）
https://github.com/carhartl/jquery-cookie
クッキー（cookie）の読み取り、書き込み、削除のためのシンプルで軽量なjQueryプラグインです。昔から存在し、多くの人が利用していると思います。

※jQueryを使わない新バージョンもあります。

実装方法は検索するといっぱい出てきますが、もしよかったら下まで見てくれると嬉しいです。

「年齢確認」をしてもらう

いまこのホームページを見てくれている人が「20歳以上の年齢」かどうかなんて、当然わかりません。自己申告してもらいます。

もし予算があるのであれば、人を雇って、運転免許などでリアル写真で確認して、それからログインしてもらってコンテンツを見てもらう。という手順を踏む方法が王道でしょうか。

とにかく早くして、予算ないから。

は？予算ないなら自分でやろうよ。
この機能は、最低限の実装でゴニョゴニョ。。

見てたら興奮して回路が爆発しました！
どう責任とってくれるんですか！

あなた年齢確認をしましたよね？
製造年月日はいつですか。

下層コンテンツページに直接アクセスされたとしても、「年齢確認」が出るようにしたい。そのようであれば、サンプルソースをフッターのテンプレートに忍ばせておくと良いでしょう。

以下のソースを、</body>の上に貼り付けるだけで動作すると思います。

●ソース：jQueryセット

※プラグインのjsをダウンロードとかしたくなかったらCDNで、jQueryも必要ならお好きなように読みこませてください。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
$(document).ready(function() {
  // cookieの設定
  function setAgevalidateCookie() {
    let date = new Date();
    date.setTime( date.getTime() + ( 1440 * 60 * 1000 )); //24時間
    $.cookie('age-validate', 'true', { expires: date, path: '/' });
    //$.cookie('age-validate', 'true', { expires: 20, path: '/' }); //age-validateを20日間
  }

  // クッキーチェック表示
  if ($.cookie("age-validate") === "true") {
      $('#ageCheck').hide();
  } else {
      $('#ageCheck').show();
      $('body').addClass('agecheck'); // コンテンツアクセス NG
  }

  // Yesボタンが押された時の処理
  $('#age-validate-button').click(function() {
    if ($('#age-validate-checkbox').prop('checked')) {
        // チェックボックスがチェックされている場合、cookieを設定する
        setAgevalidateCookie();
        $('body').removeClass('agecheck'); // コンテンツアクセス OK
    }
    // モーダルを閉じる
    $('#ageCheck').hide();
  });

  //cookieを削除する（検証用オプション）
  $('#del').click(function(){
    $.removeCookie('age-validate' , {
        path:'/' //有効にするパス
    });
    location.reload();  //ページリロード
  });
});
</script>

6行〜7行目のcookie保存の有効期間の設定は24時間にしています。
下のコメントアウトは、20日間の時のサンプルです。

●ソース：html

<div id="ageCheck">
  <div class="ageWrap">
    <div>
      <p class="caution">あなたは18歳以上ですか？</p>
      <p class="caution_memo">18歳未満の方の閲覧を固くお断りいたします。</p>
      <ul class="choice_buttons">
        <li>
          <a href="javascript:void(0)" id="age-validate-button">Yes</a>
          <p class="link_info">特別サイトへ進む</p>
        </li>
        <li>
          <a href="https://yahoo.co.jp">No</a>
          <p class="link_info">Yahooページへ</p>
        </li>
      </ul>
      <p class="check_keep"><label><input type="checkbox" id="age-validate-checkbox" name="check_keep" value="1">本当におとなの方はチェック・次回より確認を省略</label></p>
      <!--<p class="info">※お子様と端末を共同利用している場合はチェックを入れないでください。</p>-->
    </div>
  </div>
</div>

●ソース：css

#underCheckWhole {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
  display: none;
}

.ageWrap {
  display: table;
  border-collapse: collapse;
  border: none;
  position: fixed;
  z-index: 999999;
  height: 100vh;
  width: 100%;
  left: 0px;
  top: 0px;
  background-color: rgba(27,27,27,.9);
  color: #2e2826;
  font-size: 14px;
  font-weight: 300;
  text-align: center;
}

.ageWrap>* {
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
}

.ageWrap .caution_memo {
  font-size: 20px;
  line-height: 1.75;
  font-weight: 400;
  color: #fff;
  margin-top: 0;
  margin-bottom: 35px;
}

.ageWrap .caution {
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 0;
}

.ageWrap .choice_buttons {
  margin-bottom: 10px;
  padding: 0;
  text-align: center;
}

.ageWrap .choice_buttons li {
  vertical-align: top;
  display: inline-block;
  margin-right: 20px;
  margin-left: 20px;
  text-align: center;
}

.ageWrap .choice_buttons a {
  font-size: 24px;
  line-height: 70px;
  font-weight: 600;
  color: #000;
  background-color: #fff;
  display: inline-block;
  height: 70px;
  width: 235px;
  padding: 0 0 0;
  transition: background-color .3s;
  cursor: pointer;
}
.ageWrap .choice_buttons a:hover{
  color: #fff;
  background-color: #e70000;
}

.ageWrap .check_keep {
  margin-bottom: 20px;
}

.ageWrap .check_keep label {
  cursor: pointer;
  color: #fff;
}
.ageWrap .info {
  color: #fff;
}

.ageWrap .corpName {
  margin-top: 25px;
}

.ageWrap .corpName img {
  width: 134px;
}

.ageWrap .link_info {
  color: #fff;
}
.age_clear {
  position: fixed;
  top:20%;
  left: 50%;
  transform: translateY(-20%) translateX(-50%);
  width: auto;
  height: auto;
  display: block;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  color: #000;
  background-color: #fff;
  z-index: 999998;
  border-radius: 5px 10px;
  background: repeating-linear-gradient(45deg, #000000, #000000 14px, #FFD900 14px, #FFD900 28px);
  padding: 10px;
  cursor: pointer;
}
.age_clear span {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  display: block;
  pointer-events: none;
}

body.agecheck .kiji a:active {
  pointer-events: none;
}
body.agecheck .kiji a:hover {
  filter: blur(2px) !important;
}

@media all and (max-width: 480px) {
  .ageWrap {
      font-size:12px;
  }

  .ageWrap .caution_memo {
      font-size: 13px;
      margin-bottom: 18px;
  }

  .ageWrap .caution {
      font-size: 18px;
      margin-bottom: 5px;
  }

  .ageWrap .choice_buttons {
      margin-bottom: 5px;
      font-size: 10px;
  }

  .ageWrap .choice_buttons li {
      margin-right: 5px;
      margin-left: 5px;
  }

  .ageWrap .choice_buttons a {
      font-size: 14px;
      line-height: 35px;
      height: 35px;
      width: 117px;
  }

  .ageWrap .check_keep {
      margin-bottom: 10px;
  }

  .ageWrap .corpName {
      margin-bottom: 0px;
  }

  .ageWrap .corpName img {
      width: 150px;
  }
  .age_clear {
    font-size: 12px;
    line-height: 1.2;
    font-weight: 600;
  }
}

@media all and (min-width: 481px)and (max-width: 750px) {
  .ageWrap {
      font-size:12px;
  }

  .ageWrap .caution_memo {
      font-size: 13px;
      margin-bottom: 18px;
  }

  .ageWrap .caution {
      font-size: 18px;
      margin-bottom: 5px;
  }

  .ageWrap .choice_buttons {
      margin-bottom: 5px;
      font-size: 10px;
  }

  .ageWrap .choice_buttons li {
      margin-right: 5px;
      margin-left: 5px;
  }

  .ageWrap .choice_buttons a {
      font-size: 14px;
      line-height: 35px;
      height: 35px;
      width: 117px;
  }

  .ageWrap .check_keep {
      margin-bottom: 10px;
  }

  .ageWrap .corpName {
      margin-bottom: 0;
  }

  .ageWrap .corpName img {
      width: 150px;
  }
}
</style>

動かない場合はサンプルページを確認ください。
↑サンプルページのhtmlソースの一番下、</body>の上の場所に記述しています。

検証ツールでCookieを確認できます

本当にブラウザに記録されているのでしょうか。
デベロッパーツールで確認ができます。

デベロッパーツールの「アプリケーション」のタブに、「Cookie」という項目があります。

chromeのデベロッパーツールの画面

仕込んだホームページのドメインを選択してください。
jquery.cookieの機能である$.cookieを使っての仕込んだ「age-validate」という名前が「年齢確認」用のクッキー名に当たります。

ソレは右クリックで削除も可能です。

削除してからページをリロードすると「年齢確認」がまた表示されますよ！

楽しい！

クッキーは優しさのためにも使える

ここでは「年齢確認」でクッキーを記録させるお話でしたが、内容を別なものに変えると様々なことに使えます。
例えばお役所のホームページによくある。。

・「文字サイズ」の調整。
・「背景」の色の変更。

参考：TORAT yokotaさん
文字サイズ
https://www.torat.jp/jquery-cookie/

TORAT yokotaさんサイトのクッキーの使い方も面白いです。

文字を大きくしたりして、お年寄りにも優しくできるなんて素晴らしいです。

このアストロウェーブのトップページにもクッキーが使われています。
それは「占い」です。

トップページの一番上のフワフワしてる宇宙飛行士。
クリックすると占いができます。

占いの結果をしばらく残しておくために使っています。
よかったら遊びでクリックしてみてください。

【AI】イラストを描いてもらった

今回の記事のキャッチ画像で使わせてもらいます「Memeplex.app」で作成した画像です。誰でもgoogleアカウントでログインして使えます。

リクエストは「上からクッキーが降ってきてテーブルにクッキーいっぱい。嬉しくなって手を伸ばしてしまう子供たち。」です。
選んだモードは以下の3つです。

  • コメディドラマの一場面
  • インド映画風
  • UnrealEngine5風
初めてインド風、コメディ風にしてみました

ちょっと怖いかもしれないです。

参照ページ置き場

モーダル年齢確認サンプル：
https://astrowave.jp/kin18.php

参考：github（jquery-cookie）
https://github.com/carhartl/jquery-cookie