クッキー(cookie)とJavaScriptでタブを制御しよう

jQueryプラグイン化した新バージョンを作成しました。

CookieをIEからFirefoxへインポートする際、ドメイン名の解釈の違いでcookieが複数生成されるバグを修正しました。(2010.03.06)

IE6,IE7でJavaScriptが動作しないバグを修正しました。(2009.09.10)

クッキー(cookie)とJavaScriptを使って、いわゆるYahoo!トピックスのタブ表示みたいなのを作ろう!という企画。

タブ表示サンプル

たまに使いたくなるクッキー。でも処理がめんどくさそうなので今まで敬遠してきた。
そんな折、テレビから「START!一歩を踏み出そう」の声が・・・。なんか作らないといけないような強迫観念にさいなまれて、サンプルを作成してみた。

≫サンプルはこちら

以下、HTMLのマークアップ。(簡略化してます)

<ul id="tabhead">
	<li id="head-tab0" class="on"><a id="anchor-tab0" href="#">foo_a</a></li>
	<li id="head-tab1"><a id="anchor-tab1" href="#">foo_b</a></li>
	<li id="head-tab2"><a id="anchor-tab2" href="#">foo_c</a></li>
</ul>
<div id="tabbody">
	<div id="body-tab0" class="current">
		<h2>foo_a</h2>
		<ul>
			<li>hoge</li>
		</ul>
	</div>
	<div id="body-tab1">
		<h2>foo_b</h2>
		<ul>
			<li>hoge</li>
		</ul>
	</div>
	<div id="body-tab2">
		<h2>foo_c</h2>
		<ul>
			<li>hoge</li>
		</ul>
	</div>
</div>

肝心のJavaScript部分は以下↓

//変数設定
var CookieTab = {
	cookieName: 'select', //cookieに書き込むプロパティ名
	cookieExpires: 10, //cookieの有効期限(単位:日)
	tabHeadId: 'tabhead', //タブheadのID名
	tabBodyId: 'tabbody', //タブbodyのID名
	tabHdPrefix: 'head-', //タブheadリストのID接頭語
	tabBdPrefix: 'body-', //タブbodyリストのID接頭語
	tabAnPrefix: 'anchor-' //タブheadアンカーのID接頭語
};

//DOM読込完了後、tab制御開始
dom.event.addEventListener(window,'load',function(){
	CookieTab.setting();
});

//tabの初期制御
CookieTab.setting = function() {
	this.tabValue = this.getCookie(this.cookieName);
	this.domAnalysis();
	if(!this.tabValue || this.tabValue==undefined){
		this.tabValue = 'tab0';
	}
	this.tabControl();
}

//cookie書込用関数
CookieTab.setCookie = function(ckName, ckValue, ckExpires, ckDomain, ckPath, ckSecure) {
	var date = new Date();
	date.setTime(date.getTime() + ckExpires*24*60*60*1000);
	var ckStr = escape(ckName) + '=' + escape(ckValue);//日本語使用時の文字化け対策
	ckStr += '; expires=' + date.toGMTString();//有効期限をGMT値に変換
	if(ckDomain) {
		ckStr += '; domain=' + ckDomain;
	}
	if(ckPath) {
		ckStr += '; path=' + ckPath;
	}
	if(ckSecure) {
		ckStr += '; secure';
	}
	document.cookie = ckStr;
}

//cookie取得用関数
CookieTab.getCookie = function(ckName) {
	var ckMatch = ('; ' + document.cookie + ';').match('; ' + ckName + '=(.*?);');
	var ckValue;
	if(ckMatch){
		ckValue = ckMatch[1];
	} else {
		ckValue = '';
	}
	ckValue = unescape(ckValue);//escapeしたものを元に戻す
	return ckValue;
}

//DOM解析用関数
CookieTab.domAnalysis = function() {
	this.linum = this.ID(this.tabHeadId).getElementsByTagName('li').length;
	this.tabBdDiv = this.ID(this.tabBodyId).getElementsByTagName('div').length;
	if(this.linum != this.tabBdDiv){
		throw new Error('tabHead is not equal to tabBody.');
	}
}

//tabの初期設定
CookieTab.tabControl = function() {
	this.tabDisplay();
	for(var i=0; i<this.linum; i++){
		this.tabAnchor(i);//tabクリック時の動作設定
	}
}

//tabの表示制御
CookieTab.tabDisplay = function() {
	for(var i=0; i<this.linum; i++){
		//互換性維持のためclassの取得・設定にはhoge.className = fooを使用
		this.ID(this.tabHdPrefix + 'tab' + i).className = '';
		this.ID(this.tabBdPrefix + 'tab' + i).className = '';
	}
	this.ID(this.tabHdPrefix + CookieTab.tabValue).className = 'on';
	this.ID(this.tabBdPrefix + CookieTab.tabValue).className = 'current';
}

//tabクリック時の動作制御
CookieTab.tabAnchor = function(tabnum) {
	this.ID(this.tabAnPrefix + 'tab' + tabnum).onclick = function(){
		CookieTab.setCookie(CookieTab.cookieName,'tab' + tabnum,CookieTab.cookieExpires,location.hostname);//Cookieを発行するドメイン名を明示的に指定
		CookieTab.tabValue = CookieTab.getCookie(CookieTab.cookieName);
		CookieTab.tabDisplay();
		return false;
	}
}

//getElementByIdの短縮形を使用
CookieTab.ID = function(id) {
	var myId = document.getElementById(id);
	return myId;
}

解説は時間と紙面の関係上、割愛。スクリプトに少しコメントを入れてるので、そちらを参照ください。

ちょっと前から「オライリーのサイの本」を読んで、ちょこちょこ勉強してるけど、やっぱ手を動かさないとダメ。「名前空間を汚さないようにモジュール化する」ってことの意味が、やっと少し分かった気がする。

今回は「jQuery」を使わず実装したけど、jQueryを使った場合のスクリプトは以下。
jQueryにプラスして、「jquery.cookie.js」も使用するのであしからず。

//DOM読込完了後、tab制御開始
$(document).ready(function(){
	CookieTab.setting();
});

//tabの初期制御
CookieTab.setting = function() {
	this.tabValue = $.cookie(this.cookieName);
	if(!this.tabValue || this.tabValue==undefined){
		this.tabValue = 'tab0';
	}
	this.tabControl();
}

//tabの初期設定
CookieTab.tabControl = function() {
	this.tabDisplay();
	$('#' + this.tabHeadId + ' li a').each(function(value){
		$(this).click(function(){//tabクリック時の動作設定
			value+='';//数値型→文字列型変換
			$.cookie(CookieTab.cookieName, 'tab' + value, { expires: CookieTab.cookieExpires, domain: (location.hostname) });//Cookieを発行するドメイン名を明示的に指定
			CookieTab.tabValue = $.cookie(CookieTab.cookieName);
			CookieTab.tabDisplay();
			return false;
		});
	});
}

//tabの表示制御
CookieTab.tabDisplay = function() {
	$('#' + this.tabHeadId + ' li').each(function(){
		$(this).removeClass('on');
	});
	$('#' + this.tabBodyId + ' div').each(function(){
		$(this).removeClass('current');
	});
	$('#' + this.tabHdPrefix + this.tabValue).addClass('on');
	$('#' + this.tabBdPrefix + this.tabValue).addClass('current');
}

jQueryには、jQueryの難しさがあるし、こっちの方法も結構めんどい。適材適所で使うのがよいかと。

サンプルのダウンロードもできるので、興味がある方はどうぞ。
これを使う機会、いつか来るかな。

≫CookieTab.jsサンプルファイルの一括ダウンロードはこちら


ライセンス:
クリエイティブコモンズライセンス:帰属(Attribution, by)」での公開・配布となります。