HOKKAIDO AI LAB を英語でも読めるようにしました。ボタン1つで翻訳、英語のページを作らなかった理由も

For readers outside Japan: You can now read HOKKAIDO AI LAB in English. Press the EN button next to the search box at the top of any page, and the page will be translated into English in your browser. Press JA to switch back to Japanese. The translation is done automatically by Google Translate, so some phrases may sound unnatural.

• 海外から読んでくださる方のために、ヘッダーの検索欄の右に英語の翻訳ボタン（EN）を付けた
• 押すと、いま見ているページがその場で英語になる。もう一度押す（JA）と日本語に戻る。英語のまま、ほかのページにも移れる
• 英語のページは別に作っていない。翻訳は読む人のブラウザの中だけで起きる。その理由と、同じしくみを自分のサイトに入れるときの注意も書く

使い方

どのページでも、ヘッダーの検索欄の右端に、地球のマークと「EN」のボタンがあります。

1. 読みたいページで「EN」を押す
2. 少し待つと、タイトル、本文、目次、メニューが英語になる
3. 英語のまま、ほかの記事やページに移れる
4. 日本語に戻すときは「JA」を押す

翻訳されるもの、されないもの

コードを翻訳しないのは、コマンドや設定の書き方が変わってしまうと、そのまま使えなくなるからです。翻訳は機械翻訳なので、専門用語や言い回しが不自然になるところがあります。正確な内容は、日本語の原文で確かめてください。

英語のページを作らなかった理由

英語に対応する方法は、大きく2つあります。1つは、記事ごとに英語のページ（たとえば /en/ から始まるアドレス）を作る方法。もう1つは、今回のように、読む人のブラウザの中で翻訳する方法です。

英語のページを作れば、英語で検索した人にも見つけてもらえます。ただ、このサイトの記事は300本近くあり、全部を人の手で訳すのは現実的ではありません。機械翻訳で一気に作ると、訳の質を確かめていないページが大量に増えることになります。読む人にとっても、検索エンジンにとっても、それは中身の薄いページに見えます。記事を直したときに、英語のページを直し忘れる心配もあります。

そこで、まずはボタンで翻訳する方法にしました。英語のページは増えず、日本語の記事を直せば、翻訳もいつも最新の記事から作られます。海外の方にも役に立ちそうな、ツールやゲームのページは、あらためて英語でていねいに用意することも考えています。

自分のサイトに入れたい人へ

ここからは、同じしくみを自分のサイトに入れたいWeb担当者向けの話です。このサイトでは、プラグインを使わず、Google 翻訳のウェブ用の部品を読み込む小さなプログラムを書いて入れました。

• 翻訳するかどうかは Cookie で覚える：ボタンを押したら「googtrans」という Cookie に「日本語から英語へ」と書き、ページを読み直す。読み直したときに Cookie を見て、翻訳の部品を読み込む
• 翻訳しないところには印を付ける：ロゴやコードなど、翻訳されると困るところには translate=”no” と、class=”notranslate” を付ける
• Google 翻訳が出す帯を隠す：そのままだと、画面の上に Google 翻訳の帯が出て、ページ全体が下にずれる。帯と吹き出しを CSS で隠し、ずれも戻す
• 英語は長くなる：日本語の「ツール」は「tool」、「AIニュース解説」は「AI News Commentary」。メニューが長くなって折り返すので、英語のときだけ文字と間隔を少し詰める。翻訳すると html 要素に translated-ltr というクラスが付くので、それを目印にできる
• ボタンはヘッダーに収める：スマホでは、ロゴと検索欄とボタンが1行に収まるように、検索欄を短くした

プラグインで入れる場合も、考え方は同じです。英語にしたときのレイアウトと、翻訳されては困るものは、必ず実際に英語にして確かめてください。

翻訳のしくみについて（プライバシー）

「EN」を押したときに、ページの文章を英語にするため、ページの内容が Google の翻訳のサービスに送られます。翻訳するかどうかを覚えるために、ブラウザに Cookie を1つ保存します。ボタンを押さなければ、翻訳のしくみは読み込まれません。

まとめ

• ヘッダーの検索欄の右の「EN」で、ページが英語になる。「JA」で日本語に戻る
• 翻訳は読む人のブラウザの中だけ。英語のページは作らず、いつも最新の日本語の記事から翻訳される
• ロゴとコードは翻訳しない。機械翻訳なので、正確な内容は日本語で確かめてほしい
• 自分のサイトに入れるなら、英語にしたときのレイアウトと、翻訳されては困るものを確かめる

英語で読んでみて、分かりにくいところがあれば、お問い合わせから教えてください。英語でのお問い合わせも歓迎です。

出典とリンク

• Google 翻訳：translate.google.com
• MDN Web Docs「translate 属性」：developer.mozilla.org