世界中のユーザーに対応したソフトウェアを作成するためには、インターナショナリゼーション『 i18n 』とローカリゼーション『 l10n 』という2つの重要なプロセスが関わります。これらの用語はしばしば同じ意味で使われることがありますが、実際には異なるプロセスを指します。
この記事では、国際化とローカリゼーションの基本を解説し、ローカライズされた Angular アプリケーションのセットアップ手順を段階的に説明します。また、『Ignite UI for Angular』を活用して多言語対応のデータグリッドを作成するための実践的なアプローチもご紹介します。
それでは、始めましょう！
- インターナショナリゼーションとは？
- ローカライゼーションとは？
- なぜ『 i18n 』と『 l10n 』が重要なのか？
- Angular の国際化
- Angular Gridsでのローカリゼーション
- Angular Grid の Ignite UI ：グローバルリーチを実現するためのグリッド
インターナショナリゼーションとは？
インターナショナリゼーション『 i18n 』は、主に開発者やエンジニアによって行われるプロセスです。このプロセスでは、後から大規模な再構築を行わずに複数の言語や地域設定をサポートできるよう、コードベースを設計します。ユーザー向けのテキストはプレースホルダーに置き換えられ、システムが各言語の設定に基づいて適切に解釈します。また、Unicode文字エンコードの利用や、左から右への書記体系（LTR）のサポートを事前に計画することも重要です。
ローカライゼーションとは？
ローカライゼーションは、特定の言語や文化に合わせてアプリケーションをカスタマイズするプロセスです。このプロセスには、テキストの翻訳だけでなく、日付、時刻、数値、通貨などのデータ形式を地域の規則に合わせて調整する作業が含まれます。ローカライゼーションの専門家は、コンポーネントのコンテンツを翻訳・適応させ、各オーディエンスにとって自然で心地よいエクスペリエンスを提供します。
インターナショナリゼーションとローカライゼーションは密接に関連しています。インターナショナリゼーションが柔軟性をもたらし、ローカライゼーションがそれを各ユーザーに最適化する役割を果たします。
なぜ『 i18n 』と『 l10n 』が重要なのか？
インターナショナリゼーションとローカリゼーションは、世界中のユーザーを対象とするアプリケーションにとって欠かせない要素です。多くのユーザーは、母国語で提供され、馴染みのあるデータ形式を持つコンテンツを好みます。これにより、ユーザビリティやユーザーエクスペリエンスが向上し、アプリケーションはさまざまな地域の多様なオーディエンスに対応できるようになります。また、これらのプロセスを通じて、ビジネスが新たな国際市場に進出し、成長を促進することも可能になります。
Angular の国際化
Angular には、多言語アプリケーションの管理を容易にする国際化『 i18n 』機能が組み込まれています。これにより、開発者は静的コンテンツを翻訳したり、ロケールに基づいたフォーマットを簡単に処理することができます。
Angular プロジェクトで『 i18n 』を有効にする
以下の例では、Angular アプリでローカライゼーションを設定する方法を解説します。
ステップ1：Angularプロジェクトを設定する
Angular CLIのインストール。
npm install -g @angular/cli
新しい Angular プロジェクトを作成します。
ng new translation-example --style=css --routing=false --skip-tests cd translation-example
localize パッケージを追加します。
ng add @angular/localize
ステップ 2：アプリの国際化の準備
angular.jsonを開き、ロケールセクションを設定します。
プロジェクト内で韓国語と日本語のロケールを構成します。※以下は設定例
"projects": { " translation-example": { "i18n": { "sourceLocale": "en", "locales": { "ko": "src/locale/messages.ko.xlf", "ja": "src/locale/messages.ja.xlf" } },
ステップ3：翻訳するテキストをマークします
src/app/app.component.html ファイル編集。
翻訳対象のテキストに『 i18n 』属性を追加します。※以下はその例
<h1 i18n="@@helloWorld">Hello World</h1>
また、必要に応じて .css ファイルでページを自由にスタイル設定することができます。
ステップ4：翻訳の抽出
ng extract-i18n
このコマンドを実行すると、src フォルダ内に messages.xlf という名前の翻訳ファイルが作成されます。
ステップ5：翻訳ファイルを作成します
次のコマンドで src ディレクトリにロケールフォルダを作成します。
mkdir src/locale
既存の messages.xlf ファイルをコピーし、韓国語と日本語用の翻訳ファイルを作成します。
cp messages.xlf src/locale/messages.ko.xlf cp messages.xlf src/locale/messages.ja.xlf
各翻訳ファイルを編集して、対応する翻訳を追加します。たとえば、messages.ko.xlf ファイルには以下を追加します。
<trans-unit id="helloWorld" datatype="html"> <source>Hello World</source> <target>안녕하세요 세계</target> </trans-unit>
ステップ 6：ロケールを使用したアプリケーションのビルド
angular.json の設定：実稼働用の設定にローカリゼーションを有効化します。※以下は設定例
"configurations": { "production": { "localize": true, … } }
次のコマンドを実行してアプリケーションをビルドします。
ng build --configuration=production --localize
このコマンドを実行すると、プロジェクトで定義されているロケール（en、ko、ja）ごとに個別のビルドが生成されます。これにより、dist ディレクトリ内に言語ごとのフォルダが作成されます。ビルド後、dist/translation-example 内に以下のようなサブディレクトリが表示されます。
- dist/translation-example/en
- dist/translation-example/ko
- dist/translation-example/ja
アプリケーションを実行すると、各言語に翻訳されたページが、それぞれ異なるアドレスで表示されます。
Angular Gridsでのローカリゼーション
Angularアプリケーションでデータグリッドをローカライズする際、単なるテキスト翻訳を超えた対応が求められます。データグリッドは動的なデータを表示するため、次のような要素に対応したローカリゼーションが必要です。
- 地域によって標準的な形式が異なります。たとえば、米国では「MM/DD/YYYY」が一般的ですが、ヨーロッパ諸国では「DD/MM/YYYY」、日本では「YYYY/MM/DD」が標準です。
- 小数点や千の位の区切り記号の書式は、ロケールによって大きく異なります。たとえば、英語圏では「1,000.00」が一般的ですが、他の地域でも「1.000,00」と表示される場合があります。
- アラビア語やヘブライ語などのRTL言語（右から左）では、データグリッドのレイアウトが影響を受けるため、これに適応する必要があります。
- アルファベット順の並べ替えは、フランス語やドイツ語の特殊文字やアクセントの違いにより、ロケールによって異なる場合があります。
Angular Grid の Ignite UI ：グローバルリーチを実現するためのグリッド
Ignite UI for Angular Grid には、ローカリゼーションをサポートする組み込み機能が搭載されており、開発者がユーザーに文化的および言語的に適切な方法でデータを提示することを可能にします。この機能には、地域設定に応じた日付、数値、通貨の書式設定が含まれ、ユーザーエクスペリエンスと使いやすさを大幅に向上させます。Angular Grid は、世界中のユーザーにシームレスにローカライズされたデータ体験を提供できるよう設計されています。
当社のグリッドは、フランス語、日本語、スペイン語をはじめとする 20以上の言語 に対応した、すぐに利用可能なリソース文字列を提供します。これらの言語パックは、igniteui-angular-i18n パッケージを通じて利用可能ですが、デフォルトでは igniteui-angular に英語のローカライゼーションが含まれています。開発者は、igniteui-angular-i18n パッケージを活用することで、数ステップで言語パックをロードして適用し、文化的に正確でカスタマイズされたインターフェースを構築できます。
Ignite UI は、幅広い言語をサポートする一方で、カスタマイズの自由度も高い設計になっています。この柔軟性により、グリッドはユーザーの言語的および文化的なニュアンスに正確に適応します。
Ignite UIを使用することで、「日付と数値の書式設定」「通貨記号」「その他の重要なデータ表現」が自動的にローカライズされます。開発者は、必要なリソース文字列をインポートしたり、カスタム言語パックを作成したりすることで、迅速にアプリケーションの使いやすさを世界規模で向上させることができます。
Ignite UI で『 i18n 』とローカリゼーションオプションの詳細をご覧いただけます。
この記事の原文は以下よりご確認いただけます。 [Katie Mikova(https://www.infragistics.com/community/blogs/b/infragistics/posts/angular-data-grids-internationalization-localization) (ケイティ・ミコヴァ) / 2024年11月19日(火)
