#11 ポケモンタイプ別検索アプリを作る-多言語化対応アクセシビリティ編【ぴよぴよコーダーの開発日記】

2020年2月2日 16:59

前回までの実装で、いったん見た目上は、多言語切り替え表示ができたものの、マシンリーダブルじゃないかなと。そもそもlang属性の切り替えもしていないし、、というわけでパラメータごとにlang属性を切り替えてみようと思います。

もしjQueryでやるなら、こんな感じ。

$('html').attr('lang', 'ja');
 var langType = location.search;
 if(langType.indexOf('lang=en') !== -1){
   $('html').attr('lang', 'en'); 
 } else if(langType.indexOf('lang=cn') !== -1){
   $('html').attr('lang', 'zh-cmn-Hans');
 }

それにしても、Chromeのデベロッパツール見てて思ったんですよ。loadされた後にlang属性切り替えってタイミング的に微妙というか、リクエストしたら成形済みのHTMLをレスポンスされたほうが、マシンリーダブル的に最適化されているのではと。

たとえば、テキストブラウザとか音声読み上げブラウザを使っている人だと、HTMLに全部書きで表示非表示切り替えをしているに過ぎないJavaScriptの処理だと、全部表示されちゃうし、全部の言語が読まれてしまうじゃないですか。

そんなわけで、PHPでlang属性の切り替えをこんな感じに書いてみる

<?php
if(isset($_GET['lang'])){
 $lang = $_GET['lang'];
}
if(isset($_GET['lang'])){
 if($lang == "en"){
   echo '<html lang="en">';
 } else {
   echo '<html lang="zh-cmn-Hans">';
 }
} else {
 echo '<html lang="ja">';
}
?>

コンテンツ本体は、ヒアドキュメント使ってこんな感じかしら

$searchBixEn = <<< EOM
 <fieldset>
   <legend><span class="js-lang--en">Find out the type of Pokemon</span></legend>
   <div>
     <label for="autocomplete_search">
       <input type="search" id="autocomplete_search">
     </label>
     <button type="button" class="search_button"><span class="js-lang--en">Search</span></button>
   </div>
 </fieldset>
EOM;

if(isset($_GET['lang'])){
 $lang = $_GET['lang'];
}
if(isset($_GET['lang'])){
 if($lang == "en"){
   echo $searchBixEn;
 } else {
   echo $searchBixCn;
 }
} else {
 echo $searchBixJa;
}

ヒアドキュメント使って、日本と英語と中国語のバージョンのコンテンツを変数に入れて切り替える感じです。

これで無事に多言語成形済のソースがレスポンスされるようになった！

支援技術や、クローラーにもやさしくなったかな。

追記：簡体字のlang属性、最初は lang=”zh-CN”って書いてたんだけど、調べたら古い端末には対応していないらしく、今は、lang=”zh-cmn-Hans”とのこと。奥が深い。。

参考：中国語ウェブサイトの言語コード指定（lang属性）

lang属性によっては古い端末に対応していない理由↓↓↓

参考：iOS で日本語文章に発生する中華フォント現象とは

数年前iOSのslackで中華フォント現象起きててすごい見づらいなと思ってたけど、数日で解消されていた裏には開発者様たちのこんな努力があったんですね。。

デモ：jQuery版　 PHP版　（【使い方】炎とかフェアリーなどの文字列を入力ボックスに入れて「しらべる」をクリックすると結果が表示されます）

この記事が気に入ったらサポートをしてみませんか？