国際化と地域化

http://docs.angularjs.org/guide/i18n

AngularJSでのi18nとl10n
AngularJSへのロケールの提供
落とし穴

AngularJSでのi18nとl10n

i18nとl10nとは何か?

"Internationalization(国際的にする)"を省略したi18nは、プロダクトの開発プロセスにおいて、言語と文化を簡単にローカライズすることが出来るようにする方法のことを指します。 "Localization(地域化)"を省略したl10nは、プリケーション適応のプロセスで、独自の文化または言語マーケットにおいてのテキストのユーザービリティを有効にします。アプリケーション開発者のためにアプリケーションを国際的にすることは、アプリケーション外部の文字列と別の特定ロケール(日付または通貨フォーマットのような)の全てを抽象化することを意味します。アプリケーションをローカライズすることは、翻訳とローカライズされたフォーマットを提供することを意味します。

現在、Angularはどのレベルでi18n/l10nをサポートしますか?

現在Angularは、日付、数値、通貨のフィルターのi18n/l10nをサポートします。

加えて、AngularはngPluralizeディレクティブによってサポートされる、国や地域独自の複数形の扱いをサポートします。

Angularの全てのローカライズのコンポーネントは、$localeサービスによって、管理・設定されるロケールの独自ルールに依存しています。

例やサンプルをすぐに読みたいという読者のために、 Angularの様々なロケールのルールを設定したフィルターの使い方を紹介するWebページがあります。これらのサンプルはGithub、またはAngularのdevelopmentパッケージ内のi18n/e2eフォルダー内のどちらかで確認することが可能です。

ロケールIDとは何ですか?

ロケールとは、地域、国家、文化領域を特定するものです。一般的なほとんどのロケールIDは、言語コードと国コードの2つのパーツから成り立ちます。例えば、en-US, en-AU, zh-CNは全て言語コードと国コードを持つ有効なロケールIDです。ロケールIDの国コードの指定は任意であるため、en、zh、skのようなロケールIDもまた有効です。ロケールIDの使用についてより詳しい情報が必要であれば、 ICUのWebサイトを参照してください。

Angularによるロケールのサポートでは、Angularは数値と日付のフォーマットルールを異なるファイルに分け、各ファイルに独自ロケールを設定しています。現在サポートされているロケールのリストは、ここから見つける事が出来ます。

AngularJSへのロケールの提供

Angularにロケールのルールを提供するアプローチは2つあります。

1. 予めルールを設定

希望する特定のロケールファイルをangular.jsまたはangular.min.jsファイルの末尾に連結してしまうことで、予めバンドルすることが可能です。

例えば、下記のようにすることで、UNIX系のOS上でドイツのローカライズルールを含むangular.jsファイルを作成する事が可能です。

cat angular.js i18n/angular-locale_de-de.js > angular_de-de.js

通常のangular.jsスクリプトが開始するものの代わりにangular_de-de.jsスクリプトを含んだアプリケーションは、自動的にドイツのロケールのルールでローカライズされた設定を行います。

2. index.htmlページにロケールjsスクリプトを含める

index.htmlページにロケールを特定するjsファイルを含める事も可能です。例えば、もし顧客の1人がドイツのロケールを必要とするのであれば、下記のようなindex_de-de.htmlを提供します。

<html ng-app>
 <head>
….
   <script src="angular.js"></script>
   <script src="i18n/angular-locale_de-de.js"></script>
….
 </head>
</html>

2つのアプローチの比較

上記で説明した両方のアプローチは、アプリケーションをローカライズするロケール毎の異なるindex.htmlページまたはjsファイルを準備しておく必要があります。また、サーバーが対応するロケールの正しいファイルを提供するように設定する必要もあります。

しかしながら、2つ目のアプローチ(index.htmlページ内にロケールのjsスクリプトを含める)は、追加のスクリプトファイルを読み込む必要があるため、遅くなりがちです。

落とし穴

通貨シンボルの落とし穴

Angularの通貨(currency)フィルターは、ロケールサービスが提供する通貨シンボルをデフォルトで使用できるようにし、またカスタマイズした通貨シンボルのフィルターを提供することも可能です。もし、アプリケーションが1つのロケールでしか使用されないのであれば、デフォルトの通貨シンボルを当てにするのが良いでしょう。ただし、もし他のロケールの閲覧者がアプリケーションを使用するかもしれないのであれば、実際の値として理解されることを確実にするために、自身の通貨シンボルを提供すべきです。

例えば、もし1000ドルの勘定残高を{{ 1000 | currency }}のように通貨フィルターに紐づけて表示をしたいとします。この時、アプリケーションのロケールはen-USだとします。すると、'$1000.00'が表示されます。ただし、もし異なる地域(例えば日本)の誰かが、このアプリケーションを表示すると、彼女のブラウザにはjaとしてロケールが指定されており、代わりに'¥1000.00'の残高が表示されてしまいます。これでは完全に顧客の信頼を失ってしまいます。

こういったケースでは、フィルターを設定する際に、例えばUSD$1,000.00のように、パラメータに通貨シンボルを含めた通貨フィルターを提供することによって、デフォルトの通貨シンボルを上書きする必要があります。こうすることで、Angularは常に'USD$1000'の残高を表示するようになり、ロケールの変更を気にする必要が無くなります。

単位の翻訳変換での落とし穴

翻訳される文字列/日付のフォーマットの長さや単位には、多種多様なものがあることに注意しておいてください。例えば、"June 3, 1977"をスペイン語に翻訳すると、"3 de junio de 1977"になります。他にも、もっと極端なケースが存在します。そのため、アプリケーションを国際的にする際に、 UIコンポーネントがはみ出したりすることがない様にテストして、それに応じてCSSルールを適用させる必要があります。

タイムゾーン

Angularの日付フィルターはブラウザのタイムゾーンの設定を使用することに注意してください。そのため、同じアプリケーションでも、実行されているコンピューターに設定されたタイムゾーンに依存した異なる時間情報を表示します。現在、JavascriptもAngularも、開発者によって指定されたタイムゾーンの日付を表示するようにサポートすることは出来ません。

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
"訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。