Angularデータグリッドにおける国際化とローカライゼーションの扱い方

世界中のユーザーに届くソフトウェアを作成するには、インターナショナリゼーション(i18n)とローカライゼーション(l10n)という2つの重要なプロセスが関係します。これらの用語はしばしば同じ意味で使用されますが、2つの異なるプロセスを指します。

この記事では、国際化とローカリゼーションの基本を取り上げ、ローカライズされたAngularアプリケーションのセットアップのステップバイステップの例と、Ignite UI for Angularを使用して多言語データグリッドを作成するための実践的なアプローチを提供します。

So, let’s dive in. 

国際化とは何か？

国際化 (i18n) は、通常、開発者やエンジニアによって行われ、開発者は、後で言語を追加するために大規模な再構築を行うことなく、複数の言語や地域設定をサポートするようにコードベースを設計します。ユーザー向けのテキストはプレースホルダーに置き換えられ、システムは言語ごとに異なる構成に基づいて解釈します。さらに、Unicode 文字エンコードと左から右への書記体系のサポートを計画する必要があります。

ローカライゼーションとは?

ローカリゼーションでは、特定の言語とカルチャに合わせてアプリケーションをカスタマイズします。このプロセスには、テキストの翻訳や、日付、時刻、数値、通貨などのデータ形式を地域の規則に合わせて調整することが含まれます。ローカリゼーションのスペシャリストは、コンポーネントのコンテンツを翻訳して適応させ、各オーディエンスにとって自然に感じられるエクスペリエンスを作り出します。

インターナショナリゼーションとローカライゼーションは密接に関連しており、インターナショナライゼーションは柔軟性を生み、ローカライゼーションはそれを個々のユーザーに適応させます。

なぜi18nとl10nが重要なのか?

インターナショナリゼーションとローカリゼーションは、世界中のユーザーを対象としたあらゆるアプリケーションにとって不可欠です。ほとんどのユーザーは、使い慣れたデータ形式を備えた母国語のコンテンツを好みます。これにより、ユーザビリティとユーザーエクスペリエンスが向上し、アプリケーションはさまざまな地域の多様なオーディエンスに対応できるようになり、ビジネスが新しい国際市場に拡大して成長するのに役立ちます。

Angularにおける国際化

Angularには、多言語アプリケーションの管理を容易にする国際化対応 (i18N) 機能が組み込まれています。これにより、開発者は静的コンテンツを翻訳し、ロケールベースのフォーマットをより簡単に処理できます。

Angularプロジェクトでの i18n の有効化 

以下の例を見て、Angularアプリでローカライゼーションを設定する方法を見てみましょう。

ステップ1:Angularプロジェクトを設定する 

Install Angular CLI  

npm install -g @angular/c

新しい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 という名前のファイルを作成します。

Step 5: Create Translation Files 

Create a locale folder in the src directory: mkdir src/locale 

messages.xlf ファイルをコピーして、韓国語と日本語の翻訳を作成します。

cp messages.xlf src/locale/messages.ko.xlf 
cp messages.xlf src/locale/messages.ja.x

翻訳を含めるようにファイルを編集する

messages.ko.xlf ファイルに追加します。

 <trans-unit id="helloWorld" datatype="html"> 
  <source>Hello World</source> 
  <target>안녕하세요 세계</target> 
</trans-unit> 

ステップ 6: ロケールを使用したアプリケーションのビルド 

angular.json で実稼動コンフィギュレーションを定義して、ローカリゼーション設定を含めます

 "configurations": { 
           "production": { 
            "localize": true, 
    … 
    }

run the command: 

ng build --configuration=production --loca

これにより、プロジェクトで定義されているロケール (en, ko, ja) ごとに個別のビルドが生成され、dist ディレクトリに言語固有のフォルダが作成されます。ビルド後、dist/translation-example 内にサブディレクトリが表示されます

それだけです。これで、アプリケーションを実行すると、翻訳されたページがさまざまなアドレスの下に表示されます。

Angularグリッドにおけるローカライゼーション

Angularアプリケーションでデータグリッドをローカライズする場合、焦点は単純なテキスト翻訳にとどまりません。通常、データ グリッドは動的データの表示に使用されるため、ローカリゼーションは、数値形式、日付と時刻の表示、通貨記号、文化的に関連する並べ替えとフィルタリング オプションなど、さまざまな要素に適応する必要があります。

• 日付と時刻のローカリゼーションは、地域によって大きく異なる場合があります。たとえば、米国では MM/DD/YYYY という形式が一般的ですが、多くのヨーロッパ諸国では DD/MM/YYYY が標準であり、日本の文化では YYYY/MM/DD という形式が一般的です。
• 小数点や千の位の区切り記号を含む数値の書式設定は、ロケールによって大きく異なります。たとえば、英語圏の国では 1,000.00 がよく使用されますが、他の地域では 1.000.00 と表示される場合があります。
• アラビア語やヘブライ語などの言語は右から左に読み取られるため、データ グリッドのレイアウトに影響を与える可能性があります。
• アルファベット順の並べ替えは、フランス語やドイツ語などの言語の一意の文字セットやアクセントにより、ロケールによって異なる場合があります。

Ignite UI for Angularグリッド – グローバル展開のために設計されたグリッド

Ignite UI for Angular Gridには、ローカリゼーションをサポートする機能が組み込まれているため、開発者はユーザーにとって文化的および言語的に適切な方法でデータを提示できます。これには、地域の設定に応じた日付、数値、通貨の書式設定が含まれ、アプリケーションのユーザーエクスペリエンスと使いやすさが向上します。Angular Grid は、開発者が世界中のユーザーにローカライズされたデータ エクスペリエンスをシームレスに提供できるように設計されています。

当社のグリッドは、フランス語、日本語、スペイン語など、20以上の言語に対応したすぐに使えるリソース文字列を提供します。これらは igniteui-angular-i18n パッケージを通じて利用できますが、英語は igniteui-angular のデフォルトローカライゼーションです。igniteui-angular-i18n パッケージを活用することで、開発者はこれらの言語パックをわずか数ステップでロードして適用し、カスタマイズされた文化的に正確なインターフェイスを作成できます。

Ignite UIはさまざまな言語をサポートしていますが、カスタマイズも簡単に行えるため、言語が利用できない場合はローカライズされたリソースを定義できます。この柔軟性により、グリッドは視聴者の言語的および文化的ニュアンスに正確に一致するようになります。

Ignite UIを使用すると、日付と数値の書式設定、通貨記号、およびその他の重要なデータ表現が自動的にローカライズされます。開発者は、必要なリソース文字列をインポートしたり、カスタム言語パックを作成したりすることで、アプリケーションの使いやすさと魅力を世界規模で迅速に向上させることができます。

​i18n とローカリゼーションオプションの詳細については、Ignite UIをご覧ください。