home wiki.fukuchiharuki.me
Menu

関連

  • HTML
  • JavaScript/jQuery
  • CSS

概要

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

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

方法

  • 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/style.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/multilingal.js"></script>
    		<script type="text/javascript">
    <!--
    jQuery(function() {
    	appendLangSelectorTo('#multilingal');
    });
    // -->
    		</script>
    	</head>
    	<body class="ja">
    			<div id="multilingal"></div>
    			<div id="header">
    				<span id="m001-001"></span>
    			</div>
    			<div id="content">
    				<span id="m001-002"></span>
    			</div>
    			<div id="footer">
    				<span id="m001-003"></span>
    			</div>
    	</body>
    </html>
  • css/style.css
    @charset "UTF-8";
    
    body {
    	display: none;
    }
    
    .ja #m001-001:after {
    	content: "日本語ヘッダ";
    }
    
    .en #m001-001:after {
    	content: "English Header";
    }
    
    .ja #m001-002:after {
    	content: "日本語コンテント";
    }
    
    .en #m001-002:after {
    	content: "English Content";
    }
    
    .ja #m001-003:after {
    	content: "日本語フッタ";
    }
    
    .en #m001-003:after {
    	content: "English Footer";
    }
  • css/noscript.css
    @charset "UTF-8";
    
    body {
     	display: block;
    }
  • js/multilingal.js
    var langs = [
    	{lang: 'ja', name: '日本語'},
    	{lang: 'en', name: 'English'}
    ];
    
    var setLang = function(lang) {
    	if (! lang) {
    		lang = langs[0];
    	}
    	jQuery.each(langs, function() {
    		jQuery('body').removeClass(this.lang);
    	});
    	jQuery('body').addClass(lang);
    };
    
    var appendLangSelectorTo = function(target) {
    	jQuery.each(langs, function() {
    		jQuery(target).append(
    			jQuery('<a />')
    			.attr('rel', this.lang)
    			.text(this.lang)
    			.click(function() {
    				setLang(jQuery(this).attr('rel'));
    			})
    		);
    	});
    };
    
    jQuery(function() {
    	setLang(langs[1].lang);
    	jQuery('body').css('display', 'block');
    });

解説

  • 例では日本語をデフォルトにして全体を非表示(css/style.css)
    • JavaScript有効の場合言語を設定して全体を表示(js/multilingal.js)
    • JavaScript無効の場合そのまま全体を表示(css/noscript.css)
      • linkをnoscriptでheadの中に書くためhtml5
  • ラベルのIDをつけたspanを置く(index.html)
    • :afterで言語ごとのテキストを定義する(css/style.css)
  • JavaScriptでbodyに設定する言語のクラスを切り替える(js/multilingal.js)

meta(X-UA-COmpatible)でエラー

IEを最新のモードで表示させるためのmetaが次の文法エラーになるが、.htaccessとかでなんとかできる。

Bad value X-UA-Compatible for attribute http-equiv on element meta

参考