本日は、久々に iGoogle ガジェット改め Google Universal ガジェットの作り方の続きです。お気づきの方も多いかと思うのですが、 Google Universal ガジェットのなかには、 Google の表示言語の設定（検索窓の右の「表示設定」から変更できます）によって表示メッセージを変更するものがあります。例えば Google 謹製の Gmail ガジェットは、表示設定が日本語なら「受信トレイ」、「プレビューを非表示」などと表示しますが、英語だとそれらが「Inbox」、「Hide preview」に変わります。このように言語に合わせてメッセージを変更することを「国際化(Inernationalization = i18n)」と呼びます。

多くの言語に対応しておけば、それだけ多くの人に使ってもらうことができます。とくに日本ではまだ iGoogle を使っている人は少ないので、最低でも英語には対応させておきたいところですね。そのようなわけで、本日から 2 回に分けて、この「ガジェットの国際化」の実現方法をご紹介していきます。前編である本日は前回作成した「東京アメッシュ」ガジェットを日本語・英語の双方に対応させる方法をご紹介し、後編では国際化の仕組みについて詳しくご紹介する予定です。

それでは、さっそく始めましょう！

Google ガジェットを国際化するためには、表示メッセージを並べた message bundle というファイルを言語ごとに用意する必要があります。とりあえず、ここでは日本語と英語の message bundle を用意することにしましょう。まずは日本語用です。以下の内容の XML ファイルを "ALL_ALL.xml" という名前で作成してください。そうそう、文字コードは UTF-8 でなければなりませんので、ご注意を。

<messagebundle>
  <msg name="locale">jp</msg>
  <msg name="title">東京アメッシュ</msg> 
  <msg name="area_selection">地域選択</msg>
  <msg name="area_all">全域</msg>
  <msg name="area_23">23区</msg>
  <msg name="area_tama">多摩</msg>
</messagebundle>

次は英語用です。今度は "en_ALL.xml" という名前にしてください。

<messagebundle>
  <msg name="locale">en</msg>
  <msg name="title">Tokyo Amesh</msg> 
  <msg name="area_selection">Area Selection</msg>
  <msg name="area_all">All Tokyo Met.Area</msg>
  <msg name="area_23">23-ward Area</msg>
  <msg name="area_tama">Tama Area</msg>
</messagebundle>

詳細は後編でご紹介しますが、感の良い方はこれだけで大体の仕組みがわかるかもしれませんね。

次はガジェット定義ファイルを変更して、先ほど作成した message bundle を適用しましょう。新しいガジェット定義ファイルは以下のようになります。 Locale タグの messages 属性で message bundle の URL を指定しているのですが、これは私の VALUE DOMAIN サーバーにあるファイルを直指定しています。もしご自分で実験するときは、適切な URL に差し替えてください。

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs title="__MSG_title__"
               title_url="http://tokyo-ame.jwa.or.jp/__MSG_locale__/1-top.html"
               height="200">
    <Locale messages="http://www.sourcewalker.com/blog_files/50949796/ALL_ALL.xml"/> 
    <Locale lang="en" messages="http://www.sourcewalker.com/blog_files/50949796/en_ALL.xml"/>
  </ModulePrefs>
  <UserPref name="location" display_name="__MSG_area_selection__" datatype="enum" default_value="1">
    <EnumValue value="1" display_value="__MSG_area_all__"/>
    <EnumValue value="11" display_value="__MSG_area_23__"/>
    <EnumValue value="22" display_value="__MSG_area_tama__"/>
  </UserPref>
  <Content type="html">
    <![CDATA[
      <a href="http://tokyo-ame.jwa.or.jp/__MSG_locale__/__UP_location__-top.html" target="_top">
        <img style="width:100%; height:200px; border-width: 0px;"
             src="http://tokyo-ame.jwa.or.jp/__UP_location__-0.jpg"/>
      </a>
    ]]> 
  </Content> 
</Module>

東京アメッシュ本体も英語ページが用意されていますので、タイトルや画像をクリックした際のリンク先も言語に合わせて変更するようにしてみました。前回の内容からの主な変更点は、 Locale 要素が追加されたこと、表示メッセージを直書きする代わりに "__MSG_*__" というシンボルを記述していることです。これらに関しても、後編で詳細をご紹介します。

それでは、さっそくガジェットを表示させてみましょう。以下の URL にガジェット定義ファイルが置いてありますので、よろしければお使いください。

http://www.sourcewalker.com/blog_files/50949796/tokyo_amesh.xml

このガジェットを表示させると、言語設定が日本語のときは今までどおりのメッセージが表示されます。

言語設定を英語に変更すると、ガジェットはまったく変更していないにもかかわらず、以下のように英語のメッセージが表示されます。

ちなみに、言語設定を切り替えるには iGoogle の URL に以下の CGI パラメータを追加するのが手軽だと思います。

例えば以下の URL ならデフォルトの言語設定に関わらず英語ページが表示されます。

http://www.google.co.jp/ig?gl=US&hl=en

以下の URL なら日本語ページになります。

http://www.google.co.jp/ig?gl=JP&hl=ja

この技はガジェット開発以外でもけっこう便利に使えますよ。その他の Google が認識する CGI パラメータについてはこちらの記事をご参照ください。

本日は、東京アメッシュガジェットを国際化（英語・日本語だけですが ＾＾；）する方法をご紹介しました。まだ仕組みに関する詳細をご紹介していないので意味不明かもしれませんが、必要な作業内容に関してはだいたいイメージしていただけたのではないかと思います。後編ではいよいよ国際化の仕組みの全貌に迫りますので、どうかお楽しみに！