Google 翻訳 (Google Translate)

テキスト翻訳 (Translate text)

ウェブサイト翻訳ツール プラグイン (Website Translator plugin)

Webサイトを翻訳して表示できるツールです。これはウェブサイト翻訳ツールから取得できるコードを、サイトに追加するだけで実装できます。

コードの解説

プラグインのIDを、head要素内にmeta要素で記述します。

<meta name="google-translate-customization" content="xx"></meta>

言語選択のドロップダウンリストを表示する場所に、次のdiv要素を記述します。

<div id="google_translate_element"></div>

プラグインのスクリプトを記述します。

<script type="text/javascript">
function googleTranslateElementInit()
{
    new google.translate.TranslateElement(
    {
        pageLanguage: 'ja',               // Webサイトの言語
        includedLanguages: 'de,en,zh-CN', // 翻訳する言語
        layout: google.translate.TranslateElement.InlineLayout.SIMPLE, // 表示モード
        autoDisplay: true,       // 翻訳バナーを自動的に表示するか
        multilanguagePage: true, // コンテンツに複数の言語が含まれているか
        gaTrack: true,  // Google Analyticsにより、トラフィックを追跡するか
        gaId: 'UA-xx-1' // Google AnalyticsのID
    }, 'google_translate_element' );
}
</script>
<script type="text/javascript"
  src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

表示モード

ドロップダウンリストの表示形式は、google.translate.TranslateElementオブジェクトに定義されている定数で指定します。

  モード 定数
インライン InlineLayout.VERTICAL 0
InlineLayout.HORIZONTAL 1
ドロップダウン リストのみ InlineLayout.SIMPLE 2
タブ 右下 FloatPosition.BOTTOM_RIGHT 3
左下 FloatPosition.BOTTOM_LEFT 4
右上 FloatPosition.TOP_LEFT 1
左上 FloatPosition.TOP_RIGHT 2

このリストの表示が不要ならば、id="google_translate_element"のdiv要素の記述を削除します。


インライン:縦


インライン:横


インライン:ドロップダウン リストのみ

言語の表示順の変更

※以下の説明は正しくないかもしれません。

言語のリストは、includedLanguagesでの言語コードの設定順に表示されます。よってその記述順を変更すれば、言語リストの順を変更できます。

言語のリストが表示されない

言語の一覧に何も表示されず、言語を選択できない場合があります。

このようになる原因の1つに、Flashの保護モードがあります。もしこの機能を無効にしても構わないならば、これを無効にすることで解決できる場合があります。Language options not displaying for Google Translate in Firefox | Firefox Support Forum | Mozilla サポート

複数の技術系サイトから、まとめて検索