Transifex Live Translation Pluginを使ったWordPressサイトの多言語化

• 2015年12月1日、20時57分、Toruさんのコメントを追記

これは言い出しっぺの特権により初日をゲットした、WordPress Advent Calendar 2015への記事です。

Transifexというウェブ翻訳プラットフォーム(ウェブサービス)はご存知でしょうか? OSS界隈の翻訳プラットフォームとしてはけっこう使われていて、わりと古くからあります。

ここで紹介するのは、このTransifexのTransifex Liveという最近出た機能を利用したWordPressの多言語化(多言語表示?)のためのプラグインです。

西川さんが「WordPress の多言語化で考えることとプラグインの比較 | Shinichi Nishikawa’s」で紹介されている他の多くのプラグインとはだいぶん違った仕組みなので、ざっと説明すると、

1. Transifex Liveが該当のウェブページをスクレイピングして翻訳元になるテキストをTransifex上に取り込む
2. それを自分で(もしくは誰かが)Transifex上で翻訳してプッシュすると、翻訳されたテキストがTransifexのCDN上に配備される
3. その翻訳したテキストが該当のウェブページ上でJavaScriptによってオリジナルのテキストと直接置換される

という感じです。

このサイトでも入れてますので、左上の「日本語」のタブクリックして「English」に変えてみてください。

どうでしょう? サイトタイトルの「わーどぷれすっ!」とその下の「WordPressに関するあれとかこれとか」がそれぞれ「waadopuresu」と「Something about WordPress」に変わりましたでしょうか?

ブラウザの言語設定がもし「English」になっていれば、最初から翻訳されたテキストが表示されているかもしれません。

他のプラグインとの比較でメリットになると思うのは、

1. Transifex上の翻訳メモリ機能が使える
2. パラグラフで分割されるので、同じページを複数人で同時に翻訳できる

デメリットとしては、

1. TransifexのCDNからのネットワーク上にもし不具合が発生したら機能しなくなる
2. まぁいまどきのブラウザではありませんが、ブラウザのJavaScriptが動作しなければ機能しなくなる
3. 「現時点ではSEO的に、そしてアクセシビリティ的によろしくない」
   Toruさんのコメントより

   パーマリンクが同一なので言語と地域が分からず、かと言ってhreflangも埋め込まれておらず…SEO的にもアクセシビリティ的にも、ウェブサイトでは使えなさそう？

あとは、、なんだろ。もしほかに思いついたら教えてください!

では詳しい手順:

1. Transifex Live Translation PluginをWordPressにインストールして有効化
2. Transifex Live WordPress Plugin Settingsをクリックし、ページを開く
3. 「Click here to sign up and get a API key for free.」をクリックして、Transifexにサインアップ、ログインします。
4. 次に、Transifex上にプロジェクトを作り、テキストを取り込む元のURL等を設定したりするのですが、まだ最近出来たサービスなのでUIとかステップとかが変わりそうななので、詳しくは公式のドキュメントを参照してください。
   ポイントとしては、「2. Choose project type」で「Web Project, using Transifex Live」を選びます。
5. 翻訳元のテキストを取り込みます(この辺の画面遷移やUIもちょっとわかりにく)。
   1. プロジェクトの「LIVE」ボタンを押す
      
   2. 該当のウェブページが取り込まれて、wyswygで各パラグラフや項目毎にハイライトされ、そこにマウスをホバーさせると「Collect string」や「Ignore String」「View string in strings list」などが小さいアイコンとともに表示されます。
      
      ここで「Collect string」を選択していいのですが、そうするとテキストがひとつずつしか選択できないので、「View string in strings list」をクリックしてみます。
   3. 右上のチェックボックスをクリックして全部の文字列を選択し、「Collect」をクリックします
      
6. とりあえず上3つを訳してみます。まず右上のターゲット言語で「English」を選び、左ペインの翻訳する文字列をクリック、翻訳テキストを入力し、「Save」「Review」をクリックします。
   
7. APIキーの取得がまたちょっとわかりにくいのですが、
   1. 右上、クエスチョンマークの左横の歯車マークをクリックすると以下のようなメニューが表示されるので、この左ペイン(メニュー)の「Install」をクリックし、scriptタグ内のapi_keyのダブルクオーテーション内の文字列をコピー
      
   2. WordPress側、プラグインの設定画面のAPIキー入力欄にペーストします
8. 反映させる
   1. 上のAPIキーを取得したさいに開いた画面で「Take Live」をクリックし、「Publish to Production」をクリックします
      

以上です。

で、実は、7-1の「Install」でおわかりかと思いますが、他のCMSや素のHTMLでもここの

<script type="text/javascript">// <![CDATA[
window.liveSettings={api_key:"xxxxxxxxxxxxxxx"};
// ]]></script>
<script src="//cdn.transifex.com/live.js" type="text/javascript"></script>

を入れれば機能します!

では素敵な他言語ライフを!

明日はnatsumiineさんです。ヨロピク!