ホームページを作ると、たま〜に多言語で切り替えて表示したいという場合があります。
グローバルなwebシステムやサービスなどでは、言語切替は必須だし、少なくても英語に切り替えるだけでも、グローバル対応としては重要です。
この場合、ライブラリやAPIを使って対応してもいいですが、設置も構築も運用も比較的高い手法を紹介します。
しかも、HTML+CSSだけで設置できてしまうので、とてもオススメです。
HTML+CSSでの設置方法
サンプルHTMLは次のようなモノを用意してみました。
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='UTF-8'/>
<title></title>
<link rel='stylesheet' href='language.css'/>
</head>
<body>
<h1>頑張れ！</h1>
<div>幸運を祈ります。</div>
<div>また来週！</div>
</body>
</html>
サンプルページの文章には全く意味が無いので、日本語が書かれているとだけ認識してください。
次に、これに英語翻訳した要素を追加します。
*, *:before, *:after {
box-sizing : border-box;
}
#language{
display:none;
}
.language-toggle{
display:flex;
gap:10px;
margin:10px;
align-items:center;
cursor:pointer;
}
.language-toggle .toggle-point{
width:40px;
height:20px;
border:1px solid #AAA;
border-radius:20px;
padding:2px;
font-size:0;
}
.language-toggle .toggle-point::before{
content:'';
display:inline-block;
width:15px;
height:15px;
border-radius:50%;
background-color:red;
}
#language:checked ~ .language-toggle .toggle-point{
text-align:right;
}
#language:not(:checked) ~ *:is([lang]):not([lang='ja']),
#language:not(:checked) ~ * *:is([lang]):not([lang='ja']){
display:none!important;
}
#language:checked ~ *:is([lang]):not([lang='en']),
#language:checked ~ * *:is([lang]):not([lang='en']){
display:none!important;
}
デモ
頑張れ！
Hang in there.
幸運を祈ります。
Break a leg.
また来週！
See you next week.
解説
切り替えトグルの箇所のソースの方が長いのですが、ここはcheckboxを使った切り替えにすることで、cssのみで切り替えが実現できます。
ということは、2ヶ国語にしか対応できないのですが、これだけでも十分ですよね？
切り替えたいそれぞれの要素にlang="ja"（日本語）とlang="en"（英語）の区分けでタグを設置していきます。
:checkedの擬似クラスを使って "*:is([lang]):not([lang='ja'])"この箇所で、チェックがない場合は、日本語(lang="ja")以外のlang属性が付いている項目を非表示にしています。
逆にチェックが付いている場合は、英語(lang="en")以外を非表示にしています。
Javascriptを使ってレベルアップ
2ヶ国語だけじゃなくもっと多言語に対応したい場合や、見た目を変えたい場合などはチェックボックス方式では対応出来ない場合があります。
こういう場合は、やはりjavascriptを少し使わざるを得ません。
そして、次のような方式にする事で、実現が可能になります。
そして、ソースコードも少しだけスッキリできます。
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='UTF-8'/>
<title></title>
<link rel='stylesheet' href='multi-language.css'/>
<script src='multi-language.js'></script>
</head>
<body>
<div class='language-change'>
<label><input type='radio' name='lang' value='ja'>日本語</label>
<label><input type='radio' name='lang' value='en'>English</label>
<label><input type='radio' name='lang' value='de'>Deutsch</label>
</div>
<h1 lang='ja'>頑張れ！</h1>
<h1 lang='en'>Hang in there.</h1>
<h1 lang='de'>weiter so!</h1>
<div lang='ja'>幸運を祈ります。</div>
<div lang='en'>Break a leg.</div>
<div lang='de'>Ich wünsche Dir viel Glück.</div>
<div lang='ja'>また来週！</div>
<div lang='en'>See you next week.</div>
<div lang='de'>bis nächste Woche!</div>
</body>
</html>
.language-change{
display:flex;
gap:10px;
margin:10px;
align-items:center;
cursor:pointer;
}
html[lang='ja'] *:is([lang]):not([lang='ja']),
html[lang='en'] *:is([lang]):not([lang='en']),
html[lang='de'] *:is([lang]):not([lang='de']){
display:none!important;
}
switch(document.readyState){
case 'complete':
new multi_language()
break
default:
window.addEventListener('load' , (()=>{
new multi_language()
}))
}
function multi_language(){
this.set_current_lang()
}
multi_language.prototype.get_lang_lists = function(){
return document.querySelectorAll(`input[type='radio'][name='lang']`)
}
multi_language.prototype.set_current_lang = function(){
const current_lang = document.querySelector('html').getAttribute('lang')
this.checked_lang_list(current_lang)
}
multi_language.prototype.checked_lang_list = function(current_lang){
const elms = this.get_lang_lists()
for(const elm of elms){
if(elm.value === current_lang){
elm.checked = true
}
elm.addEventListener('click' , this.click_lang.bind(this))
}
}
multi_language.prototype.click_lang = function(e){
const lang = e.target.value
document.querySelector('html').setAttribute('lang' , lang)
}
サンプル
解説
htmlタグのlang属性を切り替えることで、対象の言語の箇所のみを表示するようにしています。
cssが、劇的にシンプルになっているのが分かりますよね？
サンプルでは、日本語、英語、ドイツ語の3ヶ国語にしていますが、もっと増やしたい場合は、cssの
html[lang='ja'] *:is([lang]):not([lang='ja']),
この箇所に対象の言語コードを追加してくださいね。
ちなみに、言語コードは、
コチラのページを参考にするといいでしょう。
あと、javascriptが苦手と言う人は、サンプルコードをそのまま使ってもらえれば使用することができます。
もし、切り替え箇所の表示をもっとデザイン対応したい場合は・・・頑張ってトライするしかないかも・・・
メリットとデメリット
メリット
厳密に断言できませんが、多言語文字をhtml内に埋め込むことで、検索対象の文字列が増えて、グローバルなSEOに対しても有効になる（かも？）。
サーバー負荷などもあまり大きくない状態で設置できるのと、ソースコードで該当箇所の文字を言語対応させることができるので、管理がメッチャ楽になると思います。
デメリット
表示されないコードが含まれる分、無駄なパケットダウンロードが行われるので、大容量なテキストを扱う場合は、ページごと切り替える方がいいかもしれません。
注意点
文字タグ（要素）以外に対しても適用できますが、lang > langというような階層構造での対応はできないので、一番root箇所が変更されてしまうので、入れ子構造などにならないように、構造体に気を配ってください。
また、動的な言語対応をしたい場合は、適宜cgiやjavascriptを使って実現しないといけなくなるので、このソースを改良してお使いください。
あとがき
たまに発生する、ホームページの言語対応で、自分の備忘録と、今後のコピペ対応のためにブログを書いてみました。
でも、思った以上に簡単に言語切替が実現できてしまうと感じられた人もいると思います。
こうした仕組みの箇所はあまり労力を費やさず、翻訳文面の方のクオリティに労力を使ったほうが、絶対にいいですからね。
サクッと行きましょう！
0 件のコメント:
コメントを投稿