動的にGoogle翻訳のリンクを変更する方法【英語・中国語対応、リンククリック版】

Posted on by

ウェブサイトを多言語対応させるために、Google翻訳を利用することは非常に便利です。
通常、選択式のメニュー（<select>タグ）を使うことが一般的ですが、
リンククリックだけで言語を切り替える方法もあります。
この記事では、リンクをクリックするだけでGoogle翻訳のリンクを動的に生成し、
英語や中国語に翻訳されたページを開く方法について解説します。

使用する技術

この実装では以下の技術を使用します。

  • HTML: リンクを作成し、言語の選択肢を提供するために使用。
  • JavaScript: ユーザーがクリックしたリンクに応じて、Google翻訳のリンクを動的に変更するために使用。

完成イメージ

この手法では、ユーザーがそれぞれの言語リンクをクリックするだけで、
指定された言語に翻訳されたページをGoogle翻訳で開くことができます。

サンプルコード：リンクを使用した多言語対応

以下は、リンクをクリックするだけで英語、簡体字中国語、
繁体字中国語に翻訳するためのGoogle翻訳リンクを動的に生成するコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google翻訳リンクを変更</title>
</head>
<body>

<h1>翻訳言語を選択してください</h1>

<!-- 言語選択のリンクリスト -->
<ul class="list_bottom02">
    <li><a href="#" class="translateLink" data-lang="ja" target="_blank">日本語</a></li>
    <li><a href="#" class="translateLink" data-lang="en" target="_blank">ENGLISH</a></li>
    <li><a href="#" class="translateLink" data-lang="zh-CN" target="_blank">中文（簡体字）</a></li>
    <li><a href="#" class="translateLink" data-lang="zh-TW" target="_blank">中文（繁体字）</a></li>
</ul>

<script>
    const translateLinks = document.querySelectorAll('.translateLink');
    const siteToTranslate = "https://example.com"; // 翻訳対象のサイトのURL
    const baseLink = "https://translate.google.com/translate?hl=ja&sl=ja&tl=";

    translateLinks.forEach(link => {
        link.addEventListener('click', function(event) {
            event.preventDefault(); // デフォルトのリンク動作をキャンセル
            const lang = link.getAttribute('data-lang');
            const translateUrl = baseLink + lang + "&u=" + siteToTranslate;
            window.open(translateUrl, '_blank'); // 新しいタブで翻訳ページを開く
        });
    });
</script>

</body>
</html>

コードの説明

言語選択リンクの作成

<ul class="list_bottom02">
    <li><a href="#" class="translateLink" data-lang="ja" target="_blank">日本語</a></li>
    <li><a href="#" class="translateLink" data-lang="en" target="_blank">ENGLISH</a></li>
    <li><a href="#" class="translateLink" data-lang="zh-CN" target="_blank">中文（簡体字）</a></li>
    <li><a href="#" class="translateLink" data-lang="zh-TW" target="_blank">中文（繁体字）</a></li>
</ul>

各言語に対応したリンクを <ul> と <li> タグでリスト形式に作成し、
<a> タグの中に data-lang 属性を追加して、それぞれのリンクに翻訳先の言語コードを設定します。

  • data-lang="en" は英語用
  • data-lang="zh-CN" は中国語（簡体字）用
  • data-lang="zh-TW" は中国語（繁体字）用

この data-lang 属性に基づいて、Google翻訳リンクの動的生成を行います。

JavaScriptでリンクを動的に変更

const translateLinks = document.querySelectorAll('.translateLink');
const siteToTranslate = "https://example.com"; // 翻訳するサイトのURL
const baseLink = "https://translate.google.com/translate?hl=ja&sl=ja&tl=";

translateLinks.forEach(link => {
    link.addEventListener('click', function(event) {
        event.preventDefault(); // デフォルトのリンク動作をキャンセル
        const lang = link.getAttribute('data-lang');
        const translateUrl = baseLink + lang + "&u=" + siteToTranslate;
        window.open(translateUrl, '_blank'); // 新しいタブで翻訳されたページを開く
    });
});
  1. リンクリストの取得
    querySelectorAll を使って、すべての .translateLink クラスを持つリンク要素を取得します。
  2. クリックイベントの追加
    各リンクに対して addEventListener を使って click イベントを追加します。リンクがクリックされると、data-lang 属性に指定された翻訳先の言語コードを取得し、Google翻訳リンクを動的に生成します。
  3. 新しいタブでページを開く
    window.open() 関数を使って、翻訳されたページを新しいタブで開きます。

動作確認

  1. 言語選択
    ページが表示されると、ユーザーは「日本語」「ENGLISH」「中文（簡体字）」「中文（繁体字）」のリンクをクリックできます。
  2. リンクの動作
    それぞれのリンクをクリックすると、選択した言語に基づいてGoogle翻訳リンクが動的に生成され、新しいタブで翻訳されたページが表示されます。

例えば、「中文（簡体字）」を選択すると、次のようなGoogle翻訳リンクが生成されます。

https://translate.google.com/translate?hl=ja&sl=ja&tl=zh-CN&u=https://example.com

応用

この方法は、他の言語にも簡単に拡張することができます。新しい言語のリンクを <li> タグに追加し、data-lang 属性に対応する翻訳先言語コードを記述するだけです。また、クリックされたときにリンク先を動的に生成するため、翻訳するURLも簡単に変更できます。

まとめ

Google翻訳のリンクを、リンククリックによって動的に変更する方法を解説しました。
この方法を使えば、選択式のメニューを使用せずに、ユーザーが言語を簡単に切り替えることができます。
多言語対応が求められるウェブサイトにとって非常に便利な方法です。

これにより、ユーザーに対してより直感的で使いやすいインターフェースを提供し、
多様な言語のニーズに応じた柔軟な対応が可能になります。
ぜひ、自分のウェブサイトにも取り入れてみてください。