海外のウェブサイトを読みたいとき、Google 翻訳を活用した人は多いのではないでしょうか。筆者は、英語なら何とか読めたとしても、それ以外の言語だとチンプンカンプンです。
逆に、あなたのウェブサイトも海外の人たちから Google 翻訳を経由して読まれているかもしれませんね。ところが自動翻訳は一つ大きな問題があります。それは自動翻訳してほしくないところまで無理やり翻訳してしまう点です。今回は、その問題を解決する translate 属性に注目したいと思います。
自動翻訳でどこが問題になる？
日本語のウェブサイトでアルファベット表記の固有名詞や作品名などを記載したとしましょう。もし中国語に自動翻訳すると、通常はその部分も無理やり中国語に変換されてしまいます。
<p>
私は <cite>Ghost in the Shell</cite>
が大好きです。
</p>
「Ghost in the Shell」はご存知の方も多いですよね。アニメ映画にもなった漫画作品です。なので cite 要素で囲んでいます。もしこれを中国語に Google で自動翻訳すると、こんな感じになってしまいます。
我喜欢攻壳机动队。
筆者は中国語が全く分からないので、これがどのように翻訳されているのかは分かりませんが、少なくとも「Ghost in the Shell」が無理やり中国語に変換されていることは確かです。
もう一つ別の例を挙げましょう。フッターに良く入れる会社名の著作権表記です。
<p><small>© 忍丸株式会社</small></p>
Google で中国語に翻訳すると、次のように変換されます。
© Shinobimaru Co., Ltd.
なぜか英語表記になってしまいました。まぁ、そこは良いとして、もしこの会社の呼び方が「にんまる」だったら困りますねぇ。また、Co., Ltd. なのか Corporation なのかは会社によって違います。一層のこと、ここは固有名詞ということで無理に翻訳してほしくない場合もありますよね。
自動翻訳を避ける方法
このように自動翻訳によって意味が分からなくなったり、まったく違う呼び方や意味に捉えられてしまうという問題を避けるため、自動翻訳を拒否する仕組みが欲しいところです。それを実現するのが translate 属性です。前述の 2 つの例を translate 属性を使ってマークアップすると、次のようになります。
<p>
私は
<cite translate="no">
Ghost in the Shell
</cite>
が大好きです。
</p>
<p>
<small translate="no">
© 忍丸株式会社
</small>
</p>
これを Google 翻訳で中国語に翻訳すると、次のように変換されます。
我是 Ghost in the Shell 爱。
© 忍丸株式会社
ベストではないかもしれませんが、期待通りに変換されているのではないでしょうか。
translate 属性の詳細
translate 属性に指定できる値は空文字列、”yes”、”no” のいずれかです。それぞれの意味は下表のとおりです。
| 値 | 意味 |
| translate=”” | 翻訳対象とする |
| translate=”yes” | 翻訳対象とする |
| translate=”no” | 翻訳対象としない |
translate 属性の効用は該当の要素のテキストだけでなく、その子孫要素にまで及びます。
もし translate 属性が指定されていなければ、その要素は祖先要素の翻訳状態を継承します。つまり祖先要素に translate 属性が指定されていれば、それに従うことになります。しかし、もし祖先要素をたどっても translate 属性が指定された要素が見つからなければ、「翻訳対象とする」が適用されます。
JavaScript での DOM の値
translate 属性の値を JavaScript から読み取るにはどうすれば良いでしょうか。もし翻訳対象とするかどうかさえ分かれば良いのであれば、該当の要素のオブジェクトから translate プロパティにアクセスすれば状態が得られます。
<p>
<small id="s1">
© 忍丸株式会社
</small>
</p>
<p>
<small id="s2" translate="no">
© 忍丸株式会社
</small>
</p>
<script>
const s1 = document.getElementById('s1');
console.log(s1.translate); // true
const s2 = document.getElementById('s2');
console.log(s2.translate); // false
</script>
このように、要素のオブジェクトの translate プロパティは、要素に translate 属性がマークアップされているかどうかにかかわらず翻訳状態を返します。マークアップの状況を知りたいなら、要素オブジェクトの getAttribute() メソッドを使わないといけません。
<script>
const s1 = document.getElementById('s1');
console.log(s1.getAttribute('translate')); // null
const s2 = document.getElementById('s2');
console.log(s2.getAttribute('translate')); // "no"
</script>
まとめ
普段、ウェブサイトを製作するうえで、海外の人が Google 翻訳を通してページを読むという視点を忘れがちです。もし海外の人にも読んでもらいたいのであれば、translate 属性をうまく使いたいですね。
このウェブサイトもそうですが、WordPress のような CMS を使っていると、少し面倒かもしれませんね。良い方法は無いでしょうかね？
今回は以上で終わりです。最後まで読んでくださりありがとうございました。それでは次回の記事までごきげんよう。
