2017-07-31

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があった場合
1. ポップを表示しないよう、jsでポップ部分のdiv要素を削除する。
Cookieがなかった場合
1. ポップ部分はそのまま表示する。
2. ×ボタンが押された場合、ボタンのクリックイベントで関数を実行。その中で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の保存期間はフレームワーク側で一律に設定しており、使う際にいちいち記述する必要が無いようになっていました。

セッションとの違いとかもまとめたかったのですが、長くなりそうなのでとりあえずこんなところで。

2017-07-09

書いている人&このブログについて

技術

書いている人について

こんにちは。hkと申します!

経歴

ECやFintech関連のサービスを展開する都内のIT企業でwebエンジニアをしています。職業エンジニア歴は(この記事を書いている時点で)まだ3ヶ月です。

学生時代に金融や経済を学んだものの興味が持てず、新卒でシステムベンダーに就職。過酷な環境に心を折られて1ヶ月で退職するも慌てて受けた公務員試験に合格。官公庁で3年働く間にプログラミングを独学し、今の会社に採ってもらいました。よかったよかった。

使っている言語・技術

現在の仕事はJava(Spring, Seasar2)、PHP(Zend Framework)あたりを使ったサーバーサイドの開発が中心です。OracleやMySQLは触りますが、インフラは疎めです。フロント方面ではjQueryくらいしか触りません。

社内では他にRubyやAngular、Go、Pythonあたりを書く人もいますが、今私の携わっているサービスは比較的歴史が古いため、仕方ない気もします。

プライベートではPHPとPythonでサイトを作ったことがあります。他には過去にRaspberryPiを弄ったり、iOSに手を出したり。最近はJS全般に興味津々、といったところです。

このブログについて

アウトプットによるスキルの定着を図りつつ、備忘録を兼ねてこのブログを始めることにしました。月2回の更新が目標です。

基本的にはその時々に学んだ技術をソースコードを交えてまとめていく感じのブログになると思います。「最近読んだ本や技術書でこれが良かった」みたいな記事も書くかもしれません。

正直なところ、ブログはほとんど書いたことがない上にマークダウンも書けるか怪しいので最初のうちは読み辛いブログになってしまうかもしれません。レベル的には未熟でも無味乾燥な記事にならないようにしたいです。少しずつ頑張っていこうと思います。

以上どうぞよろしくお願いします。

hkのweblog

ひよっこエンジニアがにわとりになるまでの軌跡