Blogger記事を翻訳ツールで国際化する

1

Blogger記事を多言語化した時の話です。

国際化しようと思ったのか

  • 海外からのアクセスが増えたから
    • 全体の5%ぐらいが海外からのアクセスだった
  • Firefoxアドオンとかで国際化の重要性を認識してきたため
    • 意外と海外ユーザがいる

どうやってやる？

英語の記事を書いてみる

記事を英語で記載してそのまま投稿する。書いてみたが、ほぼアクセスはなかった。 ぼちぼちアクセスがありました。

ただし、Bloggerでページ個別にhreflangを指定出来るわけではないため、Googleからどう認識されているのかが気になるところです。また、重複ページになる可能性もあるため、注意が必要です。

実施例

ウェブサイト翻訳を使ってみる

Google翻訳のウェブサイト版です。JavaScriptコードをWebページに挿入するとプルダウンメニューを表示して、ユーザが翻訳言語を選択するとページを翻訳してくれます。

Bloggerには、ウェブサイト翻訳のガジェットがあるため、それを利用する。ただし、初期のガジェットには、個人的に不満点があったため、改善して配置しました。

不満点は以下の通リです。

  • ページの言語(日本語)を使用するユーザにも表示される
    • 日本語ユーザには、不要な要素を表示するため、非表示としたい。
  • 言語選択の選択肢が多すぎる
    • 100言語以上に翻訳可能ですが、多すぎて選択することが苦痛です。
      主要言語のみを表示するようにしました。（他言語は、翻訳を諦めます）
  • 表示まで、時間がかかる（ページ表示に遅延して表示される）
    • 領域確保そのものを含めて遅延することで、違和感を軽減する。

修正コードは以下の通りです。

どこかのスタイルシート#Translate1 {
  display: none;
}
サイドバー翻訳ウィジェット  <b:widget id='Translate1' locked='false' title='translation' type='Translate' version='1'>
    <b:widget-settings>
      <b:widget-setting name='displayMode'>SIMPLE</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
      <b:if cond='data:title != &quot;&quot;'>
        <h2 class='title'><data:title/></h2>
      </b:if>
      <div class='widget-content'>
        <div id='google_translate_element' style='min-height:30px;'/>
        <script>
var browserLanguage = function() {
  var ua = window.navigator.userAgent.toLowerCase();
  try {
    if (ua.indexOf(&#39;chrome&#39;) != -1){
      return (navigator.languages[0] || navigator.browserLanguage || navigator.language || navigator.userLanguage).substr(0,2);
    } else{
      return (navigator.browserLanguage || navigator.language || navigator.userLanguage).substr(0,2);
    }
  } catch (e) {
    return undefined;
  }
}

function googleTranslateElementInit() {
  var trans = new google.translate.TranslateElement({
    pageLanguage: &#39;<data:pageLanguage/>&#39;,
    includedLanguages: &#39;ar,de,en,es,fr,ko,pt,ru,zh-CN,zh-TW&#39;,
    //autoDisplay: false, // 効果が不明のため&#12289;削除
    gaTrack: true,
    gaId: &#39;{アナリティクスのID}&#39;,
    layout: google.translate.TranslateElement.InlineLayout.<data:layout/>
  }, &#39;google_translate_element&#39;);

  // JavaScriptが動作する場合&#12289;要素を表示
  if (browserLanguage() !== &#39;<data:pageLanguage/>&#39;) {
    var div = document.querySelector(&#39;#Translate1&#39;);
    var css = document.defaultView.getComputedStyle(div, null);
    if (div.hidden || css.display == &#39;none&#39;) {
      div.style.display = &#39;block&#39;;
    }
  }
}
        </script>
        <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/>
      </div>
      <b:include name='quickedit'/>
    </b:includable>
  </b:widget>

言語選択

Google翻訳ツールですべての言語を翻訳言語に選択すると100言語程度の選択が可能になる。100言語を翻訳可能であることは素晴らしいですが、100個の選択肢から自身の言語を選択するのは苦痛です。また、100個のうち全体の99%が使用する言語はそう多くないでしょう。

ということで、筆者は言語の話者数とサイトのアクセス数を元に10言語を選択しました。10言語なのは、Google翻訳ツールのプルダウンの1列が10行だったためです。選択したのは以下の通り。

  • アラビア語
  • スペイン語
  • ドイツ語
  • フランス語
  • ポルトガル語
  • ロシア語
  • 英語
  • 韓国語
  • 中国語(簡体)
  • 中国語(繁体)

韓国語と中国語(繁体)は、韓国と台湾からのアクセスがあったため、採用です。残りの言語は話者数ランキングの上位8言語です。
デバッグ環境用のFirefoxの言語変更は、以下をページを参考にしてください。

表示の確認（デバッグ）

下記のページを参考にしてください。

※ Chromeの言語変更は、Chromeを完全に再起動する必要があります。

上記方法やOSを英語化しても、プルダウンの「言語を選択」が日本語のままでした。Google先生を信じて確認を諦めました。（IPとかで判定して動作しているのだろうか？）

参考