小金井にあるWEB制作会社の備忘録

MEMORANDUM

jQuery「$.cookie」を使ってホームページを多言語対応

観光地になっている飲食サービスのホームページの制作に携わった際に、外国の方にも理解できるようにと多言語での対応を求められた際に使用した、「クッキー(cookie)を使った言語切り替え」の方法をメモ。
一般的には言語ごとにディレクトリ作成して、別ページで作られるほうが多いかも。

jquery.cookieの取得と設定

クッキーを扱うのは大変なため今回は「jquery.cookie.js」というライブラリを使用。
下記のサイトからダウンロード後にサイトにアップロード、または CDNサイトのURLを利用。

cookieの保存

$.cookie('保存したいcookieの名前', '保存したい値', { expires: 有効期限 , path: '有効範囲' });

通常、cookieの有効期限はブラウザが閉じられるまでですが、上記の有効期限の項目で設定可能。
(小数で指定すると時間単位、秒単位で指定可能。)

cookieの取得

$.cookie('取得したいcookieの名前');

cookieの削除

$.removeCookie('削除したいcookieの名前');

//cookieの保存時に有効範囲を設定していた場合。
$.removeCookie('削除したいcookieの名前', { path: '有効範囲' });

使用事例

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>

<select class="chagelang">
<option value="jp">日本語</option>
<option value="us">English</option>
<option value="cn">中文</option>
<option value="kr">한국어</option>
</select>

<section>
<hgroup>
<h2>
<span class="jp">のっけ丼とは</span >
<span class="us">What is it?</span >
<span class="cn">是什么?</span >
<span class="kr">놋케돈에 대하여</span >
<small>NOKKEDON</small>
</h2>
</hgroup>
<p class="jp">元祖[青森のっけ丼]は市場内のお店に並ぶ青森ならではの新鮮な魚介類をはじめ、<br class="br-sp">
惣菜、地元の特産物や名物から、自分の好きな具材、好きな量をチョイスし温かなごはんにのっけて食べる丼です。<br class="br-sp">
青森をてんこ盛りにのっけて、元祖「青森のっけ丼」をお楽しみください。</p>
<p class="us">The original Aomori Nokkedon is a rice bowl dish of toppings on hot steamed rice:<br class="br-sp">
 choose as many toppings as you like from a range of fresh seafood that only Aomori can provide.<br class="br-sp">
 There is also deli food and authentic local food sold at the shops in the market. <br class="br-sp">
 You can enjoy the original Aomori Nokkedon, which will enable you to experience the true taste of Aomori. </p>
<p class="cn">元祖“青森自选海鲜盖饭”是一种可根据自己喜好、所需分量挑选市场内店铺所销售的青森特色新鲜鱼贝类、熟食、当地特产,并搭配热米饭食用的盖饭。<br class="br-sp">
敬请品尝满载着青森美味的元祖“青森海鲜盖饭”。</p>
<p class="kr">원조 “아오모리 놋케돈”은 시장 내 점포에서 취급하는 이곳 아오모리만의 신선한 해산물과 반찬류, 지역 특산품이나 <br class="br-sp">
명물 중에서 자신이 좋아하는 재료를 좋아하는 만큼 선택하여 따끈한 밥 위에 올려서 먹는 덮밥입니다. <br class="br-sp">
아오모리를 수북이 올린 원조 “아오모리 놋케돈”을 드셔 보세요.</p>
</section>

<script>
$(function() {
	selectLang();
});
</script>

jQuery

$('select.chagelang').change(function(){
	var val = $(this).val();
	$.cookie('lang', val, {expires: 7, path: '/'}); //選択したvalue値をクッキーに格納
	selectLang();
});

//クッキー読み込み
function selectLang(){
	var language = $.cookie('lang');
	if(language == 'us'){
		$('.jp').hide();
		$('.us').show();
		$('.cn').hide();
		$('.kr').hide();
		$('header select').val('us');
	}else if(language == 'cn'){
		$('.jp').hide();
		$('.us').hide();
		$('.cn').show();
		$('.kr').hide();
		$('header select').val('cn');
	}else if(language == 'kr'){
		$('.jp').hide();
		$('.us').hide();
		$('.kr').show();
		$('.cn').hide();
		$('header select').val('kr');
	}else{
		$('.jp').show();
		$('.us').hide();
		$('.cn').hide();
		$('.kr').hide();
	}
}