#10 ポケモンタイプ別検索アプリを作る-１ソースで多言語化対応編【ぴよぴよコーダーの開発日記】

ひさしぶりの、ポケモンタイプ別検索アプリ、なぜか英語版と中国語版をワンソースで作ってみます。

英語はわかるけど、中国語って簡体字というのと繁体字というものがあるらしい。違いは、簡体字が中国本土やシンガポールで使われていて、繁体字が香港、台湾、マカオ（南のほうかな）で使われているそうです。

大きな会社のグローバルサイトを見てみると簡体字が多かったので、ひとまず中国語は簡体字で作ってみます。

簡単な要件：「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();
 }
});

検索語と検索結果までの実装は、またいつか。