Old

訪問済み画像リンクにa:visitedを適用する jquery.cookie.jsプラグインの使い方

お久しぶりです。ビットエーのフロントエンドな人、じゃずーです。

タイトルのまんまなんですが、今回は「jquery.cookie.js」の使い方と使いドコロ紹介ということで「画像リンクに a:visited（みたいな）変化を与えてみよう」というTIPS紹介になります。

昔はできたけど今は不可能になったimageへのa:visited装飾

まぁ知ってる人にとっては常識中の常識ですが、実は2009年…？くらいだったかな？までは普通に画像リンクにもvisited（訪問済み）のスタイルが適用できたんです。

が、「これじゃブラウザ履歴が駄々漏れになっちゃうじゃん！」という取り組みによりいつの間にか適用範囲外に。

現在は普通にCSSに書くだけじゃ画像リンクを踏んだかどうか？を軸にしての装飾変化を与えることができなくなっているんです。（※visitedを適用できるCSSプロパティが制限されている）

というわけで「jquery.cookie.js」の出番です

jquery_01
はい。そんな時に使えるフロントエンダーさん御用達。ご存知jQueryプラグインさんの登場です。

このプラグイン、基本的には「JSでcookieを焼き付ける」と「焼き付けたcookieを参照 ⇒ なんかしらの処理を実行」を可能にするもの。と考えていただければOKです。

以下に「遷移前のページ」「遷移後のページ」および「実装手順」についてザッと紹介しておきたいと思います。

遷移前画面（index.html）ソース

遷移前のページソースは以下のような感じになります。サンプル画面も用意してあるので、そちらもご覧いただくと分かりやすいかもしれません。

このサンプルの場合、「test」という名前のcookieが無いかどうか確認して、その有無によって表示の切り替えを行っている感じですね。

>>サンプルデモ画面

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<style>

</style>
</head>
<body>

<p><a href="index_after.html"><img src="http://dummyimage.com/600x200/2e2e2e/ffffff.png&text=cookie値を取得しに行く"></a></p>
<button>cookieクリアー</button>

<script>
//cookie取得したら、画像パスを変更する
if( $.cookie('test') == 1 ){
	$('p img').attr('src', "http://dummyimage.com/600x200/c73c0e/ffffff.png&text=cookie取得済み");

	//ボタンクリックでcookieを消す
	$('button').click(function () {
		$.cookie('test', '', { expires: 1, path: '/'});
		location.reload();
	});
}
</script>

確認しやすいよう、ひっそりとcookie削除用のボタンも用意しました。ご確認ください。

遷移後画面（index_after.html）ソース

こちらがリンク後のページソース。追加箇所はリンク元ページとほぼ同じですね。このページを開いたタイミングでcookieの焼付けが行われます。

>>サンプルデモ画面

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.cookie.js"></script>
</head>
<body>

<p><img src="http://dummyimage.com/600x200/088A29/ffffff.png&text=cookieをGET!!"></p>
<button onclick="location.href='index.html'">戻って画像の切り替えを確認する</button>

<script>
//cookieセット
$.cookie('test', 1, { expires: 1, path: '/' });
</scrip>

実装方法と手順について

実装は割と簡単で、大きく分けて4工程になります。以下参照ください。

1.「jquery.cookie.js」をダウンロード

carhartlさんという方が公開してくれているgithubのレポジトリから「jquery.cookie.js」をダウンロードしてきます。

画面右側にある「Download ZIP」をクリックすればダウンロード可能なので、解凍後以下の手順に進んでいきます。

※ちなみにLICENSEはMITなので著作権表記を残せば商用利用OKです。

>>carhartl/jquery-cookie ダウンロード

2.cookie名を決めて設定しておく

上記サンプルソース上でいうと、$.cookie(‘test’)の「test」部がcookie名になります。

この部分の名前をなるべくユニークであり、かつなんとなく分かりやすい感じに命名しておきます。

>>jquery.cookie.jsの設定についての詳細

3.決めたcookie名に値を格納

サンプルのように、$.cookie(“test”, 1, { expires: 1, path: ‘/’ });とする場合

”test”というcookieに値”1”を有効期限”1日”で設定したことになります。

ちなみに有効期限（expires）が設定されていない場合には、ブラウザを閉じたタイミングでクッキー削除されます。

pathは有効なパス（ドメイン全体で利用したい場合は’/’を設定）を指定しておきましょう。

4. cookieの中身を見て装飾を変更

if( $.cookie('test') == 1 ){
	$('p img').attr('src', "http://dummyimage.com/600x200/c73c0e/ffffff.png&text=cookie取得済み");
}

サンプルの場合、上記のif文でcookie名”test”を使って条件判定しています。

if文のロジックを細かく解説すると以下のような感じ。わざわざ書く必要もないかもですがｗ

  • cookieが空の場合：「cookie値を取得しに行く」の画像を表示
  • cookieが空じゃない場合：「cookie取得済み」の画像を表示

今回は画像パスの変更程度でしかcookieを使っていないですが、応用としては、モーダルの表示回数を制限したり、バナー等、様々な表示の出し分けができます。

使えそうなシーンなどなど

ユーザーの体験に合わせてあれこれ出し分けしたい時や、思いっきり目立たせたいキャンペーンバナーなんだけど毎回毎回画面全域を占領して出したりするのはウザがられそうな時。

そしてそれらの挙動を「わざわざサーバーサイドでやると実装の手間が掛かり過ぎる時」にものすごく重宝します。

あんなことやりたいよねー…と思いついてはみたものの、エンジニアから上がってきた工数にビックリしてしまっている方にとってはちょっとした引き出しの一つとして。

急なディレクターからの依頼に「そんな仕様HTMLに無いよ！」と言いたくなってしまったフロントエンドな方々には瞬殺手段の一つとしてぜひぜひ便利に使っていただければと。

※うるさく注意事項として
もはや言うまでも無いことですが、cookieは使い方を誤るとサイト全体に悪影響を及ぼし、ユーザ側に保存するデータのためにサイト運営者側が後から消せなくなるようなモノだったりします。

a:visitedが訪問済みリンクなどを秘匿しているのもそういう理由もあるので、プライバシーに配慮しつつ、サイト全体の事も考え、利用してくださいね。

Share

RECOMMENDこちらの記事も人気です。