Googleのウェブサイト翻訳ツールで画像の対応

Question

ウェブサイト翻訳ツール
https://translate.google.com/manager/website/?hl=ja

自サイトに設置した翻訳ツールで画像の切り替えにも対応できないかと試行錯誤しております。
javascriptで言語切替のイベントを取得できれば、
予め用意した英語版画像などに差し替える処理を実行するなどして対応できそうだと思ったのですが
言語切替のイベントを取得する方法やコードをご存知の方がいらっしゃいましたらご教示頂きたいです。

よろしくお願い致します。

Comments

[m.ts10806]

URLはリンクにできるので、調整してもらえますか？

Answer 1

自身の環境に簡易に設置した上で調べてみました。

言語を切り替えると下記の場所が変わるようですね。

ヘルプ探ってみましたが、イベント処理はなさそう。
装飾はできるようですね。

• Google翻訳ツールでサイトを多言語対応にする

htmlタグの変更監視なので、changeイベントではとれません。
下記のようにすれば一応、現在選択されている言語がとれることはとれました。

var Lang = "";
$(function(){
  var getLang = function() {
        Lang = $("#google_translate_element div div span a.goog-te-menu-value span:first-child").text();
        console.log(Lang );
    };
    setInterval(getLang, 300);
});

※設定などで途中の階層やクラス名がかわるかもしれませんのでそこは自身の環境にあわせて調整してください。

動かしてみれば分かるとは思いますが、「言語を選択」からコンソールに出力されます。
実際に言語を選択すればその言語がコンソールに出力されます。

ひとまず「[言語を選択]以外のときに言語が切り替わった」ようなやり方はできるように思います。

参考まで。

Answer 2

mts10806 様 ありがとうございます

頂いた回答をヒントに下記コードでなんとかなりそうです。
※表示モード「インライン + 縦or横」で設置した状態で。

$(function () {
  var getLang = function(){
    var selector = $('#google_translate_element .goog-te-combo').html();
    if(selector){
      $('#google_translate_element .goog-te-combo').on('change', function(){
        console.log('lang-change', $(this).val());
      });
      clearInterval(getLangTimer);
    }
  };
  var getLangTimer = setInterval(getLang, 300);
});

Comments

[m.ts10806]

なるほど。
.goog-te-comboというchangeイベントが拾えるエレメントがいるんですね。
それならそれを使うのが吉です。
解決につながったようで何よりです。

[m.ts10806]

あ、いや、changeイベントが拾えるならsetInterval()で状況監視しなくてもいいような気が・・・！

[yankee]

ページ読み込み直後は、セレクトボックスが生成されていないので、
setInterval でセレクトボックスが生成されるまでの間、監視するようになっています。
change イベントの関連付けが終わってから setInterval を削除されるようにしました

[m.ts10806]

なるほど。
$(function () {　で取れないなら、.goog-te-comboのloadイベントでも良いかなと思います。
いずれにしてもGoogle管理下なので簡単に拾えないかもしれませんね。