 |
 |
| | | | | | | | | | | ||
| | | | |
|
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
 | |
以下は、Mac OS X 10.4.11 上の Xcode 2.5 で説明しています。このウィジェットは、Hello Worldを修正したものです。Hello Worldで解説したことは繰り返しませんので、そちらを参照してください。
HelloWelt は、Finder における表示から違います。「こんにちは、世界.wdgt」または拡張子が隠されていれば「こんにちは、世界」だけです。インストールして起動すると、日本語で「こんにちは、世界!」という文字列が表示されたウィジェットが表示されます。文字列の下には日本語であることを示す Japanese が表示されています。ウィジェットの機能としては何もなく、ただそれだけです。
 |
このサンプルのファイル構成は以下のようになります。
 |
さまざまな言語のローカル化用フォルダがあるのがわかります。ここでは日本語の ja.lproj を示していますが、他言語のものも同じ構成です。Hello World とは違って、CSS と JavaScript ファイルがあるのに注意してください。情報プロパティリスト自体は、Hello World とほとんど同じです。
Info.plist が Hello World とほとんど変わらないのに、Finder 上のパッケージ名が変わっていました。これを指定しているのが、言語フォルダ内にある InfoPlist.strings です。
ここでバンドルの表示名を指示しています。このウィジェットでは、ウィジェット内に同じような文字が表示されますが、ここで指定しているのはあくまでバンドル自体の表示名であることに注意してください。ちなみに、フランス語フォルダ内のものを見れば、以下のようになっています。
フランス語が優先されているシステムでは、「Bonjour Monde」と表示されることがわかります。
それでは、主要 HTML ファイルを見てみます（空行は除去して詰めています）。
スタイルシートは、コメントとは違って、このサンプルでは CSS は 1 つです。まず全体の JavaScript ファイルが読み込まれ、それからローカル化が読み込まれていることに注意してください。HTML では、スタイルシートでも、最初に読み込まれたものを後で読まれたものが上書きします。本体が読み込まれた後で、onload イベントハンドラに設定されている setup() が呼ばれます。その後で、要素が並んでいます。位置などは、CSS で設定されています。また、JavaScript で扱うために id 属性が設定されていることに注意してください。
スタイルシートを見てみましょう。
指定は Hello World とほとんど変わらないので、内容はわかると思います。
先頭の「#」に気をつけてください。これは id 属性の値でスタイルを適用する先を指定するもので、ID セレクタと呼ばれます。「要素名#名前」のような形でも可能で、その要素で名前の id 属性をもつものを指定します。これとは別に「要素名.名前」だと、その要素で名間の class 属性をもつものを指定します。
セレクタにはさまざまな種類があり、基本的なものが要素名（body など）と「*」（すべての要素）になります。後者は、セレクタ指定のいろんな場所で使えます。たとえば、*.special だと、special というクラス名をもつすべての要素に適用されます。
属性を使った指定も可能で、要素名[属性名] の形だと、div[id] で id 要素が指定された div 要素に適用します。要素名[属性名="属性値"] の形だと、div[id="helloText"] で id 要素に "helloText" が指定された div 要素だけに適用します。[属性名~="属性値"] の形だと、空白で区切られたリスト内のどれかに一致すれば適用されます。div[class="special"] で <div class="title special"> や <div class="list special"> のどちらにも適用されます。[属性名|="属性値"] の形だと、ハイフン区切りのリスト内の先頭に一致すれば適用されます。div[lang|="en"] で、en と en-US の両方の div に適用させられます。
この他にもフォーカス状態や言語コード、最初の子などを示す疑似クラスや、1行目や先頭1文字などを表す疑似要素などもあります。
また、セレクタは、コンマで区切ると、両方に対して同じ指定をできます。たとえば、h1, h2 で両要素に同じスタイル指定をできます。半角スペースで区切ると前のセレクタに含まれるものに適用できます。たとえば、table.fig td だと、fig クラスの table 要素内の td 要素を指します。また、> だと直接の子要素の場合だけに限定できます。+ で区切ると両方が同じ親要素を持ち、前のセレクタの直後に後のセレクタが現れた場合だけ適用されます。
こうしたものを使えば、もっと記述を共有化したり単純化できます。とはいえ、別に慣れないなら、繰り返しも有効でしょう。あまり単純化しすぎても、構造が複雑になり、あとで最終的にどういう指定がされるのかがわかりにくくなる場合もあります。
それでは、ローカル化の前に読み込まれているJavaScriptファイルを見てみます。このファイル内では、getLocalizedString(key) という内部的に使われる関数と、本体の onload イベントハンドラである setup() の 2 つの関数が定義されています。
localizedStrings という名前の配列から値をとりだしています。この配列は、各言語プロジェクトディレクトリ内の localizedStrings.js ファイル内で定義されています。それを見てみましょう。
このように、キー 'Hello, World!' とキー 'Default' に対する値をもつ、localizedStrings という配列が作られています。上の関数は、この配列から値を取り出していたわけです。
onload イベントハンドラから呼び出される関数を見てみましょう。
document オブジェクトは、HTML ファイルやそこに記述されるドキュメントの内容を提供するものです。これは最上位の window オブジェクトのプロパティですが、省略可能なので、省略されています。getElementById メソッドは指定された id をもつ要素を返します。最後の innerText は、タグ要素オブジェクトの内容テキストです。これに HTML タグが入ったものを入れても、そのまま表示されます。タグを解釈して内容を表示してほしい場合は、innerHTML を使います（ただし、ここれは W3C DOM 仕様の一部ではないので注意が必要です）。ウィジェットには関係ありませんが、この innerText は FireFox では動作せず、かわりに textContent を使います。ここでは、これに配列から取得したテキストを代入しているだけです。
このようにウィジェットのローカル化は簡単です。ただ、このサンプルではそのままですが、ローカル化によって文字列長に非常に違いがあったりなどの場合、もっと複雑な動作を実装する必要があるかもしれません。たとえば、日本語の場合は縦書きで表示する、という場合は、CSS が必要になり、また JavaScript で調整をする必要があるでしょう。
管理人：神吉 秀典 E-mail：