#10 ポケモンタイプ別検索アプリを作る-1ソースで多言語化対応編【ぴよぴよコーダーの開発日記】
ひさしぶりの、ポケモンタイプ別検索アプリ、なぜか英語版と中国語版をワンソースで作ってみます。
英語はわかるけど、中国語って簡体字というのと繁体字というものがあるらしい。違いは、簡体字が中国本土やシンガポールで使われていて、繁体字が香港、台湾、マカオ(南のほうかな)で使われているそうです。
大きな会社のグローバルサイトを見てみると簡体字が多かったので、ひとまず中国語は簡体字で作ってみます。
簡単な要件:「English」「Chinese」というリンクを押すと、クエリ文字列に「?lang=en」「?lang=cn」がついて、その情報をもとにページの言語が切り替わる。
まずは言語選択用のリンクを作ります。
<nav>
<ul class="navi--lang">
<li><a href="/">Japan</a></li>
<li><a href="/?lang=en">English</a></li>
<li><a href="/?lang=cn">Chinese</a></li>
</ul>
</nav>
CSSはこんな感じで
.navi--lang {
margin-top: 1rem;
margin-left: 1rem;
display: flex;
}
.navi--lang > li {
flex-basis: 7rem;
text-align: center;
color:#333;
}
さて言語切り替えする文章はspanでクラスに「js-lang--en」や「js-lang--cn」などつけます
<fieldset>
<legend>
<span class="js-lang--ja">ポケモンのタイプをしらべる</span>
<span class="js-lang--en">Find out the type of Pokemon</span>
<span class="js-lang--cn">找出口袋妖怪的类型</span>
</legend>
(以下略)
Google翻訳でそれっぽくしました。
多言語切り替えをするjQueryは、単純にこんな感じです。パラメーターにlang=enがあれば、js-lang--enのみ表示といった具合です。
$(window).on('load', function(){
$('.js-lang--ja').show();
$('.js-lang--en').hide();
$('.js-lang--cn').hide();
var langType = location.search;
if(langType.indexOf('lang=en') !== -1){
$('.js-lang--cn').hide();
$('.js-lang--ja').hide();
$('.js-lang--en').show();
} else if(langType.indexOf('lang=cn') !== -1){
$('.js-lang--cn').show();
$('.js-lang--ja').hide();
$('.js-lang--en').hide();
}
});
検索語と検索結果までの実装は、またいつか。
この記事が気に入ったらサポートをしてみませんか?