Googleを使ったなんちゃって地域化

テレビで子供が、言った。たぶん。

自動翻訳についてどう思いますか?

あのう、その質問自体が古いと思います。今では、外国語を見ることは珍しいですから。

ソフトウェアやWebサイトを世界に向けて発信したいと思うなら、複数の言語や地域に対応させるというのがよくやられる戦略です。複数の言語や地域に簡単に対応できるようにするのが「国際化」、実際に特定の言語や地域に対応させるのが「地域化」です。国際化・地域化にはある程度決まったやり方があります。拙著(Java)記事(PHP)でかつて紹介しました。しかし、そういった伝統的な方法には問題があります。地域化のためには、対象となる言語に堪能な人に頼らなければならないのです。友達が世界中にいたり予算が潤沢にあったりしない限り、日本語と英語、あと一つくらいで精一杯なことが多いのではないでしょうか。

しかし実は、ソフトウェアの国際化はとても簡単ですし、地域化に至ってはほぼ自動的にできてしまうのです。次のような単純な手順で実現できます。

  1. jQueryを有効にする
  2. http://labs.unfindable.net/translator.min.js を読み込む
  3. 対象の要素に特定のクラス属性を与える(例:message)
  4. 地域化のための関数を呼び出す(最初の引数はクラス属性値。2番目の引数は元の言語)
    net.unfindable.labs.translator.translate('message','ja');

サンプル

日本語が第1言語の人が開いたときには何も起こりません(機械翻訳を意識した日本語)。

日本語

英語が第1言語の人が開くと、(だいたい読める)英語に自動的になります。事前に英語の文章を用意しておく必要はありません。

英語

フランス語が第1言語の人が開くと、(たぶん通じる)フランス語に自動的になります。もちろん、事前にフランス語の文章を用意しておく必要はありません。

フランス語

HTMLはこんな感じになります(当たり前ですが、英語やフランス語の文章を用意する必要はありません。ブラウザの言語を取得するための処理も不要です)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title class="message">Googleを使ったなんちゃって地域化</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("jquery", "1.4.2");
      google.load("language", "1");
    </script>
    <script type="text/javascript" src="http://labs.unfindable.net/translator.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        net.unfindable.labs.translator.translate('message','ja');
      });
    </script>
  </head>
  <body>
    <h1 class="message">Googleを使ったなんちゃって地域化</h1>
    <p class="message">テレビで子供が、言った。たぶん。</p>
    <blockquote>
      <p class="message">自動翻訳についてどう思いますか?</p>
      <p class="message">あのう、その質問自体が古いと思います。今では、外国語を見ることは珍しいですから。</p>
    </blockquote>
    <p class="message">ソフトウェアの国際化はとても簡単ですし、地域化は自動です。</p>
    <ol>
      <li class="message">jQueryを有効にする</li>
      <li class="message">http://labs.unfindable.net/translator.min.js を読み込む</li>
      <li class="message">対象の要素に特定のクラス属性を与える(例:message)</li>
      <li><span class="message">地域化のための関数を呼び出す(最初の引数はクラス属性値。2番目の引数は元の言語)</span><br /><code>net.unfindable.labs.translator.translate('message','ja');</code></li>
    </ol>
  </body>
</html>

こうなると、機械翻訳でうまく訳せるような日本語を書く能力が大切になるかもしれません。Google翻訳であーだこーだと試してみるのもいいかもしれませんが、オンライン翻訳ツールをうまく使う10の秘訣!みたいな定石ができてくるとうれしいです。(いずれにしても、うまく訳せているかどうかを判断するために、日本語以外の言語を一つ読めなければなりません。)

補足

  • 地域化のための関数呼び出しは、ページのロードが終わってからでなければなりません。サンプルのように、
    $(document).ready(function() { net.unfindable.labs.translator.translate('message','ja'); });

    とするのが簡単でしょう。

  • FirefoxのアドオンQuick Locale Switcherを使えば、ブラウザの言語を簡単に切り替えられます(ユーザインターフェイス言語は切り替えないようにします。そうしないと、切り替えのたびに再起動を要求されてうるさいです)。
    Quick Locale Switcher

お約束ですが、こういう話を基本から学びたいという方には、拙著『Webアプリケーション構築入門 実践!Webページ制作からマッシュアップまで 』(森北出版, 2011)がおすすめです。