home wiki.fukuchiharuki.me
Menu
Top/JavaScriptとCSSで言語切り替えする(その2)

関連†

  • HTML
  • JavaScript/jQuery
  • CSS
↑

概要†

JavaScriptとCSSで言語切り替えをする方法のメモです(後日きれいにまとめるかも)。

Webアプリケーションのフレームワークが多言語対応しているケースが多いと思いますが、ここではあえてJavaScriptとCSSだけで実現する方法を考えてみます。多言語対応した静的なページをWebサーバで、なんてときに。

その1もどうぞ。

↑

方法†

  • index.html 
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>多言語対応テスト</title>
		<link rel="stylesheet" type="text/css" href="css/initialize.css">
		<noscript>
			<link rel="stylesheet" href="css/noscript.css">
		</noscript>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/multilingual.js"></script>
		<script type="text/javascript">
<!--
jQuery(function() {
	jQuery('#multilingual').multilingual();
});
// -->
		</script>
	</head>
	<body class="ja">
			<div id="multilingual"></div>
			<div id="header">
				<span class="multilingual en">English Header</span>
				<span class="multilingual ja">日本語ヘッダ</span>
			</div>
			<div id="content">
				<span class="multilingual en">English Content</span>
				<span class="multilingual ja">日本語コンテント</span>
			</div>
			<div id="footer">
				<span class="multilingual en">English Footer</span>
				<span class="multilingual ja">日本語フッタ</span>
			</div>
	</body>
</html>
  • css/initialize.css 
    @charset "UTF-8"

body {
 	display: none;
}
  • css/noscript.css 
    @charset "UTF-8";

body {
	display: block;
}

.multilingual.sub {
 	display: none;
}
  • js/multilingual.js 
    (function() {

	var langs = [
		{lang: 'ja', name: '日本語'},
		{lang: 'en', name: 'English'}
	];

	var setLang = function(lang) {
		if (! lang) {
			lang = langs[0].lang;
		}
		jQuery.each(langs, function() {
			jQuery('body').removeClass(this.lang);
		});
		jQuery('body').addClass(lang);
		var toHide = '.multilingual';
		jQuery(toHide).hide();
		var toShow = '.multilingual.' + lang;
		jQuery(toShow).show();
	};

	jQuery.fn.extend({
		multilingual: function(callback) {
			var target = jQuery('<ul />').appendTo(this);
			jQuery.each(langs, function() {
				jQuery(target).append(
					jQuery('<li />').append(
						jQuery('<a />')
						.attr('rel', this.lang)
						.text(this.name)
						.click(function() {
							var lang = jQuery(this).attr('rel');
							setLang(lang);
							if (callback) {
								callback(lang);
							}
						})
					)
				);
			});
		}
	});

	jQuery(function() {
		setLang(langs[1].lang);
		jQuery('body').css('display', 'block');
	});

})();
↑

解説†

  • 日本語と英語を全部書いて全体を非表示(css/initialize.css)
    • JavaScript有効の場合言語を設定して全体を表示(js/multilingual.js)
    • JavaScript無効の場合全体を表示してサブ言語を非表示(css/noscript.css)
      • linkをnoscriptでheadの中に書くためhtml5
↑

非表示言語分のパラメータが送れてしまう†

はい。disabled などしてあげないといけないと思います。

↑

参考†