Googleウェブサイト翻訳ツールを自作して多言語ホームページに自動翻訳する

2019年3月24日 2019年3月26日

JavaScriptだけで手軽にWEBサイト（ホームページ）を多言語に変換できるGoogleウェブサイト翻訳ツールが終了しました。

上記ページで代替案としてBing翻訳と弊社のSpokeを紹介したのですが、Bing翻訳ではなく、なんとかGoogle翻訳を使えないか？というご相談も多く頂いています。

そこでGoogleウェブサイト翻訳ツールとは、少し挙動が異なるのですが、Google翻訳のエンジンを用いた誰でも簡単に導入できる代替案２つをご紹介します。

Googleウェブサイト翻訳ツールの特徴を整理
①実はリンクを貼るだけで表示上は多言語に変換できる
- サンプル/デモページ
②Googleウェブサイト翻訳ツールをJavaScriptだけで擬似的に再現して自動翻訳（機械翻訳）
- 下層ページもダイレクトに翻訳したい
- サンプル/デモページ
まとめ

Googleウェブサイト翻訳ツールの特徴を整理

まずはGoogleウェブサイト翻訳ツールの仕様と特徴を確認しましょう。

Google翻訳の翻訳エンジンを利用している
JavaScriptを挿入するだけで手軽に導入できる
無料で利用できる
サーチエンジン最適化がされていない（URLが変化しないので検索対象にならない）

上記４点の仕様と特徴に近づけるGoogleウェブサイト翻訳ツールに代替できるツールを作ってみたいと思いいます。

①実はリンクを貼るだけで表示上は多言語に変換できる

https://translate.google.com/translate?sl=ja&tl=en&u=https://exsample.com

上記のhttps://exsample.comの箇所に任意の日本語サイトのURLをhttps://(http://)から入れてブラウザのURLバーへ貼り付けてみてください。

Google翻訳のドメイン内で日本語から英語に翻訳がされたと思います。

この機能を利用してWEBサイト（ホームページ）を翻訳したいと思います。

ヘッダーなどに多言語対応したい該当サイトのTOPページのURLをパラメータとしたリンクを付けておけば、より手軽にGoogle翻訳を用いて多言語変換できます。

<ul>
<li><a href="https://translate.google.com/translate?sl=ja&tl=en&u=https://exsample.com">English</a></li>
<li><a href="https://translate.google.com/translate?sl=ja&tl=th&u=https://exsample.com">Thai</a></li>
<li><a href="https://translate.google.com/translate?sl=ja&tl=fr&u=https://exsample.com">French</a></li>
<li><a href="https://translate.google.com/translate?sl=ja&tl=zh-TW&u=https://exsample.com">Traditional Chinese</a></li>
<li><a href="https://translate.google.com/translate?sl=ja&tl=zh-CN&u=https://exsample.com">Chinese Simplified</a></li>
<li><a href="https://translate.google.com/translate?sl=ja&tl=ko&u=https://exsample.com">Korea</a></li>
<li><a href="https://translate.google.com/translate?sl=ja&tl=id&u=https://exsample.com">Indonesian</a></li>

青字（tl=）の部分は翻訳したい言語に合わせて変更してください。

このパラメータはISO-639 言語コードの2文字を使って表しますが、中国語のようにISO-3166 国コードをハイフンでつないでzh-TW（繁体字）やzh-CN（簡体字）と4文字で表すこともありますので事前にGoogle翻訳で確認して適宜変更するようにしてください。

※「元の言語:」「翻訳する言語:」をそれぞれ変更することでsl=とtl=のパラメータに何を入れなければならないのかを調べることができます。

ページ遷移しても順次下層ページも同時に翻訳をしてくれるます。下層ページを制作する必要がありません。

サンプル/デモページ

Webサイト（ホームページ）を無料で多言語化するGoogleウェブサイト翻訳ツールを代替するヘッダーリンクデモページ（比較しやすいように別windowで開きます）

②Googleウェブサイト翻訳ツールをJavaScriptだけで擬似的に再現して自動翻訳（機械翻訳）

Googleウェブサイト翻訳ツールのような自動翻訳（機械翻訳）は、基本的に検索エンジンにインデックスさせることはできませんので上記でご紹介したTOPページのリンク方式で十分だと思います。

しかし、上記のTOPページへの固定リンク方式では、必要性は低いものの、下層ページを閲覧したい場合に以下のように3アクション必要になります。

https://exsample.com/category/current.html

上記のページを閲覧していたユーザが前述のTOPページへの固定リンクで翻訳変換した場合

https://exsample.com/ （翻訳済み）

上記の翻訳内容を閲覧してから

https://exsample.com/category/ （翻訳済み）

上記の翻訳されたカテゴリに移動してからやっと

https://exsample.com/category/current.html （翻訳済み）

上記の翻訳されたページを閲覧できることになります。このように３つの操作アクションが必要です。

下層ページもダイレクトに翻訳したい

TOPページへの固定のリンクではなく、Googleウェブサイト翻訳ツールと同じく現在表示している任意のページを翻訳したいという要望があるかもしれません。

そこで1アクションで翻訳できる方法もご紹介します。

https://exsample.com/category/current.html

　　　　　　　　　　　　　　↓　ダイレクトに翻訳

https://exsample.com/category/current.html （翻訳済み）

上記のURLを閲覧していたユーザが以下の翻訳済みのページをダイレクトに閲覧できるようにします。

<html>
<head>
<title>Webサイト（ホームページ）を無料で多言語化するGoogleウェブサイト翻訳ツールを代替するJavaScriptのデモサンプル（demo/sample）ページ</title>
<meta charset="utf-8">
</head>
<body>

<!-- ヘッダーなど共通部でプルダウンのフォームを作成 -->
<form name="yourForm">
<select name="yourSelect" onChange="gTranslate()">
    <option value="">Languages</option>
    <option value="https://translate.google.com/translate?hl=ja&sl=ja&tl=en&u=">English</option>
    <option value="https://translate.google.com/translate?hl=ja&sl=ja&tl=zh-CN&u=">中文簡体字</option>
</select>
</form>

<!-- 本文 -->
<p>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。（青空文庫より）</p>

<!-- Googleウェブサイト翻訳を代替するJavaScriptの本体 -->
<script type="text/javascript">
function gTranslate(){
    var getUrl= location.href;
    if (document.yourForm.yourSelect.value == ""){
        return;
    } else {
        var postUrl= document.yourForm.yourSelect.value + getUrl;
    }
    window.open(postUrl, '_blank');
}
</script>

</body>
</html>