当サイトを多言語化したいと以前から考えていた。
これまでも海外の友人たちとやり取りする際には、よく自分のブログのURLを伝え、相手側でブラウザの翻訳機能を使って内容を理解してもらっていた。
最近はページごと簡単に翻訳できるようになったとはいえ、毎回その手間をかけてもらうのは少し申し訳なく感じていたし、サイト側で多言語対応できれば、もっとスムーズに読んでもらえるのではないかと思っていた。
そこで、WordPressで簡単に多言語化できるプラグインはないかと調べてみたところ、GTranslateが良さそうだと知り、試しに導入してみた。
すると、設定から数分でサイト全体が多言語対応となり、想像以上に手軽に翻訳環境を構築することができた。
有料版にしないと翻訳されたページは検索エンジンにインデックスされない仕様ではあるものの、無料版でも100言語以上に対応しており、海外SEOを本格的に狙わないのであれば十分実用的である。
実際、当サイトにも少しずつではあるが海外からのアクセスはあり、ユーザー体験の向上という意味でも導入する価値は高いと判断した。
GTranslate導入後の表示イメージ
GTranslateは100言語以上に対応しているが、すべてを表示すると逆にユーザー体験が悪くなると感じたため、
- 日本語
- 英語
- スペイン語
- 中国語
- フランス語
の5か国語のみに絞って設定した。
左上の言語切り替えから選ぶだけで、その後は常に選択した言語で表示され続けるため、非常に使い勝手が良い。
ここでは実際の表示例をスクリーンショットで紹介する。左右にスライドすると違いを見比べることができる。
このように、言語を切り替えるだけでサイト全体が即座に翻訳され、閲覧体験としても非常に自然である。
「海外の読者に読んでもらう際に毎回翻訳してもらう」という手間をなくせる点は、大きなメリットだと感じた。
Safariだけ動作が不安定になる問題が発生
しかし、導入後すぐに問題が発生した。
ChromeやGoogleアプリでは問題なく動作するものの、iPhoneのデフォルトブラウザであるSafari上だけ、翻訳の挙動が不安定になる現象が起きたのである。
- 言語が切り替わらないことがある
- リロードすると元の日本語に戻る
- 動いたり動かなかったりする
といった状態で、どうにも安定しない。
ネット上で対応策を調べてみたが、同じ症状を根本的に解決している情報はほとんど見つからなかった。
そこで、AIを活用しながら原因を調査し、無料版のまま安定動作させる方法を見つけることができた。
以前なら一晩かけて調査しながら対応していたようなことが、これも一瞬で解決できたのでいい時代だと思う。
原因：Safariのトラッキング防止機能（ITP）
Safariには「ITP（Intelligent Tracking Prevention）」というトラッキング防止機能が搭載されている。
これは、外部サービスが保存するCookieやストレージを制限・削除する仕組みである。
GTranslate無料版は、
- JavaScriptで翻訳を実行
- 翻訳状態を外部由来のCookieやlocalStorageに保存
という仕組みで動いている。
ところがSafariはこれを定期的に削除、もしくはそもそも保存させないため、
👉 翻訳状態が保持できず、不安定な挙動になる
という現象が起きていた。
Chromeなどで問題が出なかったのは、この制限が厳しくないためである。
無料版GTranslateをSafariでも安定させる具体的な手順
対処の考え方はシンプルである。
GTranslate側に言語状態を保存させるのではなく、 自サイトのCookieで言語を管理し、ページ読み込み時に強制的に翻訳を適用する。
これによりSafariでも安定して動作するようになる。
今回の対処法では、WordPressの「mu-plugin（必ず読み込まれるプラグイン）」を利用してJavaScriptを差し込む。
通常のプラグインとは違い、無効化されにくく、キャッシュの影響も受けにくいため、この用途に適している。
手順① mu-pluginsフォルダを作成
WordPressのルートディレクトリ内にある wp-content の中に、mu-plugins というフォルダを作成する（すでに存在する場合はそのままでOK）。
wp-content/mu-plugins/手順② PHPファイルを作成
作成した wp-content/mu-plugins/ の中に、以下のファイルを作成する。
gtranslate-fix.php手順③ 以下のコードをそのまま貼り付け
ファイル gtranslate-fix.php を開き、以下をそのまま貼り付けて保存する。
<?php
add_action('wp_footer', function () { ?>
<script>
(function(){
function setCookie(name,value,days){
var d=new Date();
d.setTime(d.getTime()+(days*24*60*60*1000));
document.cookie=name+"="+encodeURIComponent(value)+";path=/;expires="+d.toUTCString()+";SameSite=Lax";
}
function getCookie(name){
var m=document.cookie.match(new RegExp('(?:^|; )'+name+'=([^;]+)'));
return m?decodeURIComponent(m[1]):null;
}
// 言語切り替え時に選択した言語を保存
document.addEventListener('click',function(e){
var el=e.target.closest('.gtranslate_wrapper a, .gt_selector a, a[data-gt-lang]');
if(!el) return;
var lang=el.getAttribute('data-gt-lang');
if(!lang){
var txt=(el.textContent||'').trim().toLowerCase();
if(txt.includes('english') || txt === 'en') lang='en';
if(txt.includes('japanese') || txt.includes('日本語') || txt === 'ja') lang='ja';
if(txt.includes('spanish') || txt === 'es') lang='es';
if(txt.includes('chinese') || txt === 'zh') lang='zh';
if(txt.includes('french') || txt === 'fr') lang='fr';
}
if(lang){
setCookie('gt_lang',lang,365);
}
},true);
// ページ読み込み時に保存された言語を復元
function apply(){
var lang=getCookie('gt_lang');
if(!lang) return;
if(window.doGTranslate){
window.doGTranslate('ja|'+lang);
}
}
// GTranslateのJSが読み込まれるまで待機
var t=setInterval(function(){
if(window.doGTranslate){
clearInterval(t);
apply();
}
},150);
})();
</script>
<?php });手順④ 動作確認
Safariで以下を実行する。
- サイトを開く
- 言語を切り替える（英語など）
- Safariを完全終了
- 再度サイトを開く
翻訳状態が維持されていれば成功である。
キャッシュが原因で反映されない場合
高速化プラグインやブラウザキャッシュによって、古いHTMLが表示される場合がある。その場合はURLの末尾に ?nocache=1 を付けて確認するとよい。
https://あなたのサイトURL/?nocache=1?nocache=1 で動作する場合はキャッシュが原因であり、時間経過またはキャッシュ更新で通常URLにも反映される。
注意点
なお、本記事で紹介している方法は、現時点のSafariおよびGTranslateの仕様に基づいて動作確認を行ったものである。
Safari側の仕様変更やGTranslateのアップデートによって、将来的に動作しなくなる可能性は高い点についてはあらかじめ了承いただきたい。
あくまで無料版を安定運用するための現実的な回避策のひとつとして参考にしてもらえればと思う。
まとめ
GTranslate無料版がSafariで不安定になる原因は、Safari特有のトラッキング防止機能による仕様である。
しかし、
- 言語状態を自サイト側で管理
- JavaScriptで強制的に翻訳を適用
という方法を使えば、無料版のままでも安定して運用することが可能である。
多言語化を手軽に実現したいが、有料版までは使いたくないという方にとって、本記事の方法は十分実用的な解決策になるだろう。
コメント