簡単なアプリケーションと国際化

Home » iGoogle ガジェットの作り方 » 簡単なアプリケーションと国際化

前ページ下準備 - 開発環境を整えるでは、HTMLのみで構成されたヘローワールドガジェットを作成しましたが、
今回は JavaScript によるアプリケーションを作成し、最後にメッセージを国際化します。

ガジェットの作成に入る前に、Google ガジェットの構成要素について簡単に説明します。
一言で説明すると、Google ガジェットとは HTML + JavaScript を含んだ XML ファイルです。
この XML ファイルのことをガジェットスペックと呼びます。
ガジェットの作成とはこのガジェットスペックを記述することになります。

ガジェットを実行するためのドックの一つが iGoogle で、
iGoogle 以外のガジェットの実行環境には、Google デスクトップや Orkut などがあります。
この辺の詳細については Google Code の API 概要 - ガジェットをご覧ください。

簡単なアプリケーションガジェットの作成

今回サンプルとして作成するのは JavaScript による URL 変換アプリケーションです。
escape/unescape 関数を利用して URL を変換します。
JavaScript の機能のみを利用していますので、ガジェット自体はかなり簡単なものです。
サーバ側のハンドラを必要とするガジェットの作成は、次回行う予定です。

本当はチンパン団らしく、Google Finance APIs を使ってボロックスガジェットを作ろうかと思ったのですが、
Financial Gadgets を見たところ対応している市場が NYSE, AMEX, or NASDAQ だったのでやめました。

ということで出来上がったガジェットが urlesc.xml です。
My Gadgets にガジェットの URL http://www.chimpan426.org/ig/urlesc.xml を入力すると iGoogle に登録できます。

urlesc ガジェット

ガジェットの中身、ガジェットスペックについて簡単に説明しますと、Module がガジェットのルート要素になります。
Module には ModulePrefs と Content を子要素として含めます。

ModulePrefs にはモジュールの説明等を記述します。
このガジェットでは国際化のためのメッセージバンドルを記述していますが、これについては後述します。

Content にはモジュールのコードを HTML で記述します。
ガジェットは iGoogle 上では iframe として取り込まれますので、Content 内の HTML は普通に書けばだいたい OK です。
Content の type 属性には "html" か "url" を指定します。
通常のガジェットは type="html" で作成し、type="url" はガジェットの Content を別の場所に納める際にのみ使用します。
詳しくは、コンテンツタイプの選択をご覧ください。

ガジェットの国際化

ガジェットを公開する場合、そのガジェットは全世界からアクセスされることになります。
実際にユーザを獲得できるかは別問題ですが、日本以外のユーザの目に触れることも意識してガジェットの国際化をお薦めします。
具体的な方法は以下で説明しますが、国際化自体はけっこう簡単です。

ガジェットを国際化する場合、メッセージバンドルを使用します。
メッセージバンドルとは、ガジェットスペック上のメッセージを外部ファイルとして保存し、
ブラウザの言語設定等に応じて表示するメッセージを切り替えるための機能です。
Google ガジェット API に従ってガジェットスペックとメッセージバンドルを記述しておくと、
iGoogle などのガジェットドックが自動的にメッセージの切り替えを行ってくれます。

置換メッセージの指定

ガジェットスペック上に __MSG_ で始まり __ で終わるテキストを記述すると、メッセージバンドルによるメッセージ置換箇所となります。
今回作成したガジェットには、__MSG_title__ __MSG_Escape__ __MSG_Unescape__ の3つのメッセージを使用しており、
それぞれガジェットのタイトル、エスケープボタンのラベル、アンエスケープボタンのラベルとなっています。

ガジェットタイトルを国際化する場合は ModulePrefs に directory_title 属性が必要になりますので注意してください。
詳しくは、ガジェット設定をご覧ください。

また、メッセージバンドル中のメッセージは gadgets.getMsg メソッドにより JavaScript から取得することもできますが、
この例では使用していません。

メッセージバンドルの作成

実際に表示されるメッセージは、メッセージバンドルに記述します。
今回用意したメッセージバンドルは、urlesc/ALL_ALL.xmlurlesc/ja_ALL.xml の二つです。
ja_ALL.xml が日本語のメッセージバンドルで、ALL_ALL.xml はフォールバックメッセージバンドルとなります。
フォールバックメッセージバンドルは、ユーザが指定した言語のメッセージバンドルが存在しないときに使用される
デフォルトのメッセージバンドルです。

メッセージバンドルのファイル名については、命名の慣例が定められています。
特に理由がなければファイル名はこれに従いましょう。

メッセージバンドルを用意したらウェブサーバ上に配置します。
ガジェットスペックの ModulePrefs に Locale 要素を追加してメッセージバンドルの URL を指定すれば国際化は完了です。
実際に国際化されたガジェットのサンプルは urlesc.xml をご覧ください。

国際化したガジェット

ブラウザの言語設定を日本語にして iGoogle にアクセスするか、
iGoogle の URL に hl=ja パラメータを付けて http://www.google.com/ig?hl=ja にアクセスすると
日本語にローカライズされたガジェットが表示されます。

日本語のガジェット

ブラウザの言語設定を日本語以外にして iGoogle にアクセスするか、
iGoogle の URL に hl=ja 以外のパラメータを付けて http://www.google.com/ig?hl=en などにアクセスすると
フォールバックメッセージとともにガジェットが表示されます。

フォールバックメッセージ

hl=en 時にガジェット自体の形が変わっているのは、US 版の iGoogle のみバージョンアップされているためのようです。
iGoogle の URL を http://www.google.co.jp/ig に変えると、言語によってガジェットの形が変わることはなくなりますが、
将来的には www.google.co.jp/ig も新バージョンに変わると思います。

ガジェットの国際化機能には、上記の他にテキストの方向制御などがあります。
今回のサンプルで取り上げていない事項については、ガジェットと国際化(i18n)をご覧ください。

次のステップへ

ガジェットの作成については一通り説明しましたので、次ページではガジェットの公開について説明する予定です。

次ページ:ガジェットを公開する