rcmdnk's blog
  1. Top
  2. › Blog
  3. › Octopress , English

20140227_language_200_200

英語に記事を書いたらもっと読んでもらえるかな、とか 思いながら、1つもしてないんですが、 なんとなく翻訳バーを置いてみました。

Googleウェブサイト翻訳ツール

Googleウェブサイト翻訳ツールのページ で簡単にウェブサイト用の翻訳ツールが出来ます。

上のページの新しいウェブサイトを追加 から追加ページヘ行き

translate1

サイトのURLとサイトの言語を入力して

translate2

翻訳ツールの設定を選びます。

翻訳先を一部だけに絞ることも可能(言語を指定)。

それから、表示モードにはインラインの他にタブと自動 があります。

  • インライン: プルダウンリスト+(縦/横: 下/右にgoogle表示、プルダウンリストのみの場合とこれらを表示させた時ではプルダウン部のデザインも違う)

inline_l

  • 左右上下の端にタブを表示

tab

  • 自動: 言語によって自動で翻訳

なんですが、何故かタブの表示がうまく行かず、タブの指定にしても インライン+横のデザインになってしまって上手く出来てません1。

差し当たりインラインのプルダウンリストのみを選んでいます。

また、ここで作る利点としてはGoogle Analyticsのコードを埋め込む事ができるので、 翻訳されたページも追うことが簡単に出来ます。

translate3

そんな感じで設定してコードを取得を押すとこんな感じのコードがもらえます。

Octopressにコードを設置

まず、設置するかどうかを簡単に切り替えられる様にするため、 _config.ymlに次の項目を追加します。

_config.yml 
1
2
3
4

# Google Translate
google_translate_lang: ja
# SIMPLE/TOP_LEFT/TOP_RIGHT/BOTTOM_LEFT/BOTTOM_RIGHT
google_translate_layout: SIMPLE

元の言語とレイアウトについて。 レイアウトに関しては結局プルダウン(SIMPLE)だけで、 他のはタブなので上手くいってないのですが、取り敢えず。

次に、上のコードのページの指示にあるように、メタタグの部分をsource/_includes/custom/head.htmlへ

source/_includes/custom/head.html 
1
2
3

{% if site.google_translate_layout and page.translate != false %}
<meta name="google-translate-customization" content="9e20c1edb27f9f43-faceb5d0f36bfc28-g37f1fcbd5752a6ca-10"></meta>
{% endif %}

と追加します。ここにあるようにlayoutが設定されてないか、 page.translateが偽の場合は翻訳をしないようにしています。

残りの下の部分をsource/_includes/after_footer.htmlへ追加します。

source/_includes/after_footer.html 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

{% if site.google_analytics_tracking_id or page.sharing != false or (site.disqus_short_name and page.comments != false) or (site.linkwithin_show == true and page.footer != false or site.google_translate_lang %}
<script type="text/javascript">
{% if site.google_translate_layout and page.translate != false %}
{% capture analytics %}{% if site.google_analytics_tracking_id %}, gaTrack: true, gaId: '{{site.google_analytics_tracking_id}}'{% endif %}{% endcapture %}
{% capture layout %}{% if site.google_translate_layout == 'SIMPLE' %}InlineLayout.SIMPLE{% else %}FloatPosition.{{site.google_translate_layout}}{% endif %}{% endcapture %}
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: '{{site.google_translate_lang}}', layout: google.translate.TranslateElement.{{layout}}, autoDisplay: false, multilanguagePage: true{{analytics}}}, 'google_translate_element');
}
</script>
<script type="text/javascript">
{% endif %}
(function (w, d) {
  var j, s = d.getElementsByTagName('script')[0],
  a = function (u, i) {
    if (!d.getElementById(i)) {
      j = d.createElement('script');
      j.src = u;
      if (i) {j.id = i;}
      s.parentNode.insertBefore(j, s);
    }
  };
  ...
  ...
  ...
  {% if site.google_translate_layout and page.translate != false %}
  a('//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit','translate-js');
  {% endif %}
})(this, document);
</script>
{% endif %}
{% include custom/after_footer.html %}

こんな感じでgoogleTranslateElementInitをまず最初に置いて、 その後のコードの読み込みは以前

シェアボタンを非同期読み込みでまとめて設定

でやった読み込み部に組み込みました。

googleTranslateElementInitに関しては、Analyticsのコード等も 設定してあればここで直接指定するようにしています。

なので、メタタグ部分は数字が違うので自分で取らないとなりませんが こちらの部分はそのままコピペでも使えます。

表示を整える

そのままだとちょっと周りから浮いてたので

Googleカスタム検索をカスタマイズ

Googleカスタム検索のアップデート

この辺でやったのと同じように表示を変えてみます。

検索部分のhtmlはこんな感じになっています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="google_translate_element">
  <div style="" dir="ltr" class="skiptranslate goog-te-gadget">
    <div class="goog-te-gadget-simple" style="white-space: nowrap;" id=":0.targetLanguage">
      <img style="background-image: url(&quot;https://translate.googleapis.com/translate_static/img/te_ctrl3.gif&quot;); background-position: -65px 0px;" class="goog-te-gadget-icon" src="https://www.google.com/images/cleardot.gif">
      <span style="vertical-align: middle;">
        <a href="javascript:void(0)" class="goog-te-menu-value">
          <span>言語を選択</span>
          <img src="https://www.google.com/images/cleardot.gif" height="1" width="1">
          <span style="border-left: 1px solid rgb(187, 187, 187);">​</span>
          <img src="https://www.google.com/images/cleardot.gif" height="1" width="1">
          <span style="color: rgb(155, 155, 155);">▼</span>
        </a>
      </span>
    </div>
  </div>
</div>

これをナビゲーション部分(div.main-navigation下)に置いているので、 翻訳ツールの部分だけ書くと

sass/partials/_navigation.scss 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.main-navigation {
  text-align: center;

  // translation
  .goog-te-gadget {
     text-align:center;
  }
  div#google_translate_element div.goog-te-gadget-simple {
    background-color: #ffffff !important;
    padding: 3px !important;
    border-radius: 10px !important;
    border: solid 2px darken($nav-bg, 15) !important;
  }
  div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span {
    font-size: 14px !important;
    color: darken($nav-bg, 30) !important;
  }
  div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:hover {
    color: darken($nav-bg, 100) !important;
  }
}

こんな感じの設定を_navigation.scssへ追加。

結果、こんな感じに。

langage

おまけ

単にそのまま翻訳ページに突っ込むだけであれば

http://translate.google.com/translate?langpair=ja|en&u=http://rcmdnk.github.io/

の様にhttp://translate.google.com/translate?langpair=ja|en&u= に続いてページを記入すれば翻訳されます。

langpairで|を挟んで左に元のページの言語、右に翻訳先の言語、を記入すればOK。 簡単な英語ページヘのリンク、的なものならこれでも十分です。 (英語のページを作ってできてない場合は取り敢えずこれで代用する、とか。 このままだとAnalyticsは効きませんが。)

Sponsored Links

  1. デザイン指定の部分は下のコードの中でlayoutに当たる部分なんですが、 インライン+横はこの指定無し、の時のデフォルトです。 つまり、指定のレイアウトが無効で無視されてる様な状態になってるみたいです。 ↩

Sponsored Links

« はてなブックマークされてる不思議なページ OctopressでCSSを分かりやすい形で出力する »

}