Google Translatorのあれこれ(スタイルの崩れ修正 & ボタンclickでイベント発火&翻訳しない) #GoogleTranslate

Google Translateを使いこなす

概要

多言語対応する時に、気軽に使えるウェブサイト翻訳ツール - Google 翻訳。
今回は、このgoogle translateで、色々試行錯誤した内容をまとめておきます。
まあ、あまり使うことはないかと思いますが、参考にしてみてください。

スタイル崩れる問題

なぜか、Google Translateを使うと、既存のスタイルが崩れて画面がぐちゃぐちゃになってしまう。
原因を調べてみると、翻訳イベントの後に、bodyタグに謎のスタイルが当たっている。
style="position: relative; min-height: 100%; top: 40px;

これを直すために、cssに以下のように記述

/* Google Translate Overrides対応 */
html, body{
  min-height: 0!important;
  height: auto!important;
  position: inherit!important;
}

タグではなく、ボタンclickで翻訳

defaultで用意されているselectタグを使うと簡単だが、実際に使う場合に、ボタンをclickした時に使いたいなんてこともある。そのような時は、下記のように使ってあげると良い。

<button id="translate-en-btn">英語翻訳する</button>



// 英語対応
translate_lang('translate-en-btn', 'en');

/**
 * ボタンを押した時に、指定の言語でgoogle翻訳する
 * @param btn
 * @param lang
 */
function translate_lang(btn, lang) {
    var target = document.getElementById(btn);
    target.addEventListener('click', function () {
        var jObj = $('.goog-te-combo');
        var db = jObj.get(0);
        jObj.val('en');
        fire_google_translate(db, 'change');
    });
}

/**
 * グーグル翻訳のイベントを発火
 * @param element
 * @param event
 * @returns {*}
 */
function fire_google_translate(element, event){
    if (document.createEventObject){
        // dispatch for IE
        var evt = document.createEventObject();
        return element.fireEvent('on' + event, evt);
    }
    else {
        // dispatch for firefox + others
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(event, true, true);
        return !element.dispatchEvent(evt);
    }
}

こんな感じでやってあげれば、ボタンを押下した時に、翻訳するイベントが走ります。

google翻訳しない

全体的に翻訳しない場合

そもそも、google翻訳自体を走らせたくないよという場合は、google翻訳時に保存されたcookieを削除します。
googtransというcookieに保存されているので、サーバーサイドで削除してあげましょう。
以下、Rubyの場合ですが。

cookies.delete(:googtrans)

部分的に翻訳しない

この箇所だけは、翻訳して欲しくないんだよね、というところはhtmlのクラスでnotranslateをつけてあげましょう。

<p class="notranslate">翻訳しないでー</p>

以上、割と力技のものもありましたが、まとめてみました。

参照

css - Prevent Google Translator from changing height of html to 100% - Stack Overflow
jquery - Trigger Google Web Translate Element - Stack Overflow
javascript - Google Translate set default language - Stack Overflow
javascript - How can I tell Google Translate to not translate a section of a website? - Stack Overflow