Cookieを使ってユーザーごとに表示を出し分けてみた
あっという間に7月も終わりですね。目標にしていた月2更新が早くも途絶えそうなので記事を書きます。
先日、仕事で
「うちのサイトに登録して2週間以内の人にはこのポップを表示するようにしてほしい。でも、そのポップの隅の×印を押したら2週間以内だとしてもポップが表示されないようにしてほしい。クッキーとか使えばできるんでしょ?」
みたいな依頼を受けました。
でも、僕Cookie使った実装をしたことがなかったんですよね…恥ずかしながら。
今回は自前フレームワーク的なものが用意されていたので簡単に実装できたのですが、一度簡単にCookieの基礎知識をまとめておいたほうがいいなあと思って、今この記事を書いているわけです。
そもそもCookieとは
- WebサーバーからブラウザへのHTTPレスポンスのヘッダーを利用した小さな情報(ファイル)。key-value型(クッキー名-値)の情報。
- サイトアクセス時にWebサーバー側がCookieをsetし、ブラウザにはCookieファイルが保存される。
- サイト再訪時、ブラウザはHTTPリクエストのヘッダーにCookieを入れてWebサーバーに送信する。
- Cookieを使えばWebサーバー側はそのアクセスが初めてのアクセスなのか再訪なのかを判断できる。
- PHPでは以下のようにCookieをsetする(らしい)。
setcookie(クッキー名, 値, Cookieの保存期間); 例えばこんな感じ setcookie('hoge', 'fuga', time() + 60 * 60 * 24 * 30); タイムスタンプの部分は time();で現在日時を取得。その後は「秒 * 分 * 時間 * 日」。 上記の例では30日間Cookieを保存することになります。 なお、 setcookie('hoge', 'fuga', time() - 1); のように現在より前の時間を設定してやるとCookieを削除することができます。
setcookieはドメイン名とかこれ以外にも引数をつけることができるらしいのですが、あんまり使わないようですね。
わざわざDBにデータ持たせるほどでもないかなーという時(今回のケース)や、まだログインはしていないけど再訪者をチェックして表示を出し分けたい時、ECサイトのカート機能やレコメンド機能で使うことが多いようです。
今回の場合、
- サイトアクセス時にCookieをgetする(close_pushed=1を持っているかチェックする)。
- Cookieがあった場合
- ポップを表示しないよう、jsでポップ部分のdiv要素を削除する。
- Cookieがなかった場合
- ポップ部分はそのまま表示する。
- ×ボタンが押された場合、ボタンのクリックイベントで関数を実行。その中でCookieをsetする(close_pushed=1をsetする)。と同時にjsでポップ部分のdiv要素を削除する。
という流れになりました。
前述の通り、今回はjsで作った自前フレームワーク的なものが用意されていたので、それを使って以下のような感じで簡単に書けました(一部にjQuery使用)。
<!-- 帯の部分のみ抜粋 --> <div id="pop"> <p>会員登録ありがとうございます。</p> <span><a href="#" onclick="closePop();return false;">×</a></span> </div>
// アクセス時に実行 (function () { var cookie = new FwCookie(); // フレームワークの呼び出し // getCookie(クッキー名);でCookieの値を取れる if (cookie.getCookie('close_pushed')) { $('#pop').remove(); } }()); // ×ボタンがクリックされたら実行 function closePop() { var cookie = new FwCookie(); // setCookie(クッキー名, 値);でCookieをsetできる cookie.setCookie('close_pushed', 1); $('#pop').remove(); }
因みにCookieの保存期間はフレームワーク側で一律に設定しており、使う際にいちいち記述する必要が無いようになっていました。
セッションとの違いとかもまとめたかったのですが、長くなりそうなのでとりあえずこんなところで。