hkのweblogスマートフォン用の表示で見るhkのweblogひよっこエンジニアがにわとりになるまでの軌跡この広告は、90日以上更新していないブログに表示しています。2017-07-31Cookieを使ってユーザーごとに表示を出し分けてみたCookieあっという間に7月も終わりですね。目標にしていた月2更新が早くも途絶えそうなので記事を書きます。先日、仕事で「うちのサイトに登録して2週間以内の人にはこのポップを表示するようにしてほしい。そのポップの隅の×印を押したら2週間以内だとしてもポップが表示されないようにしてほしい。クッキーとか使えばできるんでしょ?」みたいな依頼を受けました。僕Cookie使った実装をしたことがなかったんですよね...恥ずかしながら。今回は自前フレームワーク的なものが用意されていたので簡単に実装できたのですが、一度簡単にCookieの基礎知識をまとめておいたほうがいいなあと思って、今この記事を書いているわけです。そもそもCookieとはWebサーバーからブラウザへのHTTPレスポンスのヘッダーを利用した小さな情報(ファイル)。key-value型(クッキー名-値)の情報。サイトアクセス時にWebサーバー側がCookieをsetし、ブラウザにはCookieファイルが保存される。サイト再訪時、ブラウザはHTTPリクエストのヘッダーにCookieを入れてWebサーバーに送信する。Cookieを使えばWebサーバー側はそのアクセスが初めてのアクセスなのか再訪なのかを判断できる。PHPでは以下のようにCookieをsetする(らしい)。30);タイムスタンプの部分はtime();で現在日時を取得。上記の例では30日間Cookieを保存することになります。1);のように現在より前の時間を設定してやるとCookieを削除することができます。setcookieはドメイン名とかこれ以外にも引数をつけることができるらしいのですが、あんまり使わないようですね。DBにデータ持たせるほどでもないかなーという時(今回のケース)や、まだログインはしていないけど再訪者をチェックして表示を出し分けたい時、ECサイトのカート機能やレコメンド機能で使うことが多いようです。今回の場合、サイトアクセス時にCookieをgetする(close_pushed=1を持っているかチェックする)。Cookieがあった場合ポップを表示しないよう、jsでポップ部分のdiv要素を削除する。Cookieがなかった場合ポップ部分はそのまま表示する。×ボタンが押された場合、ボタンのクリックイベントで関数を実行。その中でCookieをsetする(close_pushed=1をsetする)。同時にjsでポップ部分のdiv要素を削除する。いう流れになりました。前述の通り、今回はjsで作った自前フレームワーク的なものが用意されていたので、それを使って以下のような感じで簡単に書けました(一部にjQuery使用)。<p>会員登録ありがとうございます。$('#pop').remove();}因みにCookieの保存期間はフレームワーク側で一律に設定しており、使う際にいちいち記述する必要が無いようになっていました。セッションとの違いとかもまとめたかったのですが、長くなりそうなのでとりあえずこんなところで。18:39Cookieを使ってユーザーごとに表示を出し分けてみたTweet広告を非表示にする関連記事2018-01-30スレッドが競合した時のこと今日は備忘録。»プロフィールid:h2r4t都内で働く新米webエンジニアです。このブログは月2更新が目標。読者になる検索リンクはてなブログブログをはじめる週刊はてなブログはてなブログPro最新記事Bingの検索結果をcsvで出力するPythonスクリプトを書いたcanvasで画像ファイルを読み込むVue.jsでsetTimeoutする時の注意点rsyncについてのメモスレッドが競合した時のこと月別アーカイブはてなブログをはじめよう!h2r4tさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。