複数のコンテンツ配信チャンネルがあるため、WebサイトやWebアプリケーションは海外のオーディエンス向けに最適化する必要があり、その結果、カスタムユーザーエクスペリエンスの必要性が生じます。 海外のユーザーは、ローカル言語または好みの言語でコンテンツを表示できる必要があり、より多くのトラフィックとコンテンツのリーチを拡大することができます。 国際化とは、これを可能にするためのプロセスです。

Angular ローカリゼーションは、アプリケーションが複数の言語でのレンダリングをサポートするようにするプロセスです。 国際化では、サイトのローカライズが容易になるように Web サイトを開発します。 これは、ユーザーの言語設定またはユーザーのロケーションに応じた動的なコンテンツのロードが全体的に簡略化されることを意味します。 国際化は、エンタープライズグレードのアプリケーションをグローバルに販売するための標準的なビジネスプラクティスであると考えられてきました。

この記事では、Angular i18n ライブラリを使用した Angular アプリケーションの国際化とローカライズのプロセスを説明し、その後、ButterCMS のようなヘッドレス CMS でどのようにうまく処理できるかを説明します。

Why: Importance of Angular Localization for your business

言語は世界中のさまざまな文化にとって不可欠の要素となっています。 現地の言語で Web コンテンツを表示することは、一部の現地の人々にとって喜ばしいことです。 ローカライゼーションには、次のような利点があります。

• 好みの方法でサイトを表示することにより、ユーザー エクスペリエンスを向上させる
• 個別のコンテンツに対するユーザーの関心が高まるため、トラフィックが増加する
• サポートにより世界中で製品の売上が向上する。 アプリケーションの国際化により、多言語サイトの構築と保守に費やす全体的な時間と労力が削減されます。 8146>

  国際化は、国際化のために定義された標準である i18n としてしばしば略記されます。 次のセクションでは、Angular ローカリゼーションの用語、概念、およびアプリケーションの内部化のプロセスを Angular ローカリゼーションの例とともに理解します。

  What: Angular Localization Terminologies and Process

  国際化は主に、Web サイト コンテンツをローカライズする障壁を取り除き、Bidirectional text、標準外文字マップのサポート、垂直テキストのサポート、主に世界中の地域言語のサポートなどいくつかの旧機能に対応したWebサイトを作ることに焦点を当てます。

  このプロセスに入る前に、いくつかの用語と概念を理解しておきましょう。

  ロケール

  ロケールは、コンテンツがアクセスされる場所を示す識別子です。 ロケールは、Webコンテンツがアクセスされている場所を識別するためのキーワードの標準化されたリストを意味する。 すべてのWebアプリケーションフレームワークは、従うべきロケールコードのセットを独自に定義しています。 しかし、簡単に識別できるように、一定の基準に従っています。

  Bidirectional text

  世界中のほとんどの言語は、左から右へ記述されます。 しかし、今日でも、右から左へ書いて読む言語がいくつか存在する。 このため、国際化プロセスでは、文字をこれらの方向のいずれかで表示する機能をサポートする必要があります。

  Unicode

  Unicode は記号と絵文字の標準です。 世界中のいくつかの古代言語には、記号の形をしたスクリプトが含まれています。 Web アプリケーションは、アプリケーションを国際化できるようにするために、これらのシンボルをすぐにサポートする必要があります。

  国際化のプロセスは、主に次のステップに基づいています。

  • サポートする予定の各ロケールのラベルを作成する
  • Web アプリケーションを変更し、静的なラベルを削除して、動的にロードされるラベルに置き換える
  • 日付や時刻などのコンテンツに変換を適用する。 画像、時間、カレンダーなど
  • アプリケーションのデフォルトロケールを設定する

  次のセクションでは、Angular アプリケーションのこのプロセスを説明します。

  ButterCMS と Angular を使用して、マーケティング担当者が更新できる動的コンテンツを有効にします。

  Getting started

  アプリケーションの国際化を開始するには、使用するベースの Angular アプリケーションを準備する必要があります。 持っていない場合は、ここからダウンロードできるアプリケーションを利用できます。

  このチュートリアルでは、Angular v9 を使用します。 Angular v9 のコア ライブラリに加えて、このプロセスでは Angular i18n ライブラリを利用します。 チュートリアルでは、かなり単純なビジネスウェブサイトを国際化する予定です。 最終結果のホームページのスクリーンショットを以下に表示します。

  

  Installing required packages and set up your app

  国際化のプロセスを始めるために、最初のステップは Angular プロジェクトで必要な Internationalization プラグインを追加することです。 これを行うには、以下のコマンドを実行します。

  ng add @angular/localize

  インストールされるパッケージは、国際化の実装を容易にするためにすべてのサポート機能を提供します。 ロケールを定義する定数の事前定義されたセットと、日付や時間のようなテキストをフォーマットするためのいくつかの標準的なメソッドを提供します。 ロケールの意味については、前のセクションですでに説明しました。 ロケールのサポートリストを設定する目的は、ビューアのローカルに基づいて、アプリケーションがどのロケールをレンダリングするかを決定できるようにすることです。 Angular は、特定のロケールがアプリケーションでサポートされていない場合、デフォルトのロケールとして en-US を使用してコンテンツをレンダリングします。

  import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module';import { AppComponent } from './app.component';import { AboutComponent } from './about/about.component';import { ContactComponent } from './contact/contact.component';import { NavComponent } from './nav/nav.component';import { HomeComponent } from './home/home.component';import { FooterComponent } from './footer/footer.component';import { registerLocaleData } from '@angular/common';import localeFr from '@angular/common/locales/fr';import localeDe from '@angular/common/locales/de';registerLocaleData(localeFr);registerLocaleData(localeDe);@NgModule({ declarations: , imports: , providers: , bootstrap: })export class AppModule {}

  ここで、フランス語とドイツ語の2つの異なるロケールファイルをインポートし、同じものを登録していることに注意してください。 サポートしたい地域の正しいロケールを識別するために、Angular ロケールを調べることができます。

  次のステップは、この実装が動作することをテストすることです。 これを行うには、静的ラベルを国際化をサポートするようにマークする必要があります。 これを行うには、以下に示すように HTML タグに i18n 属性を付けます。

  <h6 i18n>we are ready to help you</h6>

  これは Angular コンパイラーによって知られている属性で、翻訳モジュールがロケール固有の翻訳で修正されるタグを識別するのに役立ちます。 さらに、より具体的に言うと、以下のようにタグに一意の識別子、意味または説明を追加することができます。

  Meaning & Description

  <h6 i18n="slidersubheading|Pointer text for the customer">we are ready to help you</h6>

  上記のコードスニペットでは、i18n用の値の最初の部分はコンテンツの意味、パイプ（ | ）の後の他の部分はその説明である。 これは、翻訳者がコンテンツが何であるかを正確に識別し、それに応じてカスタムテキストをレンダリングするのに役立ちます。

  さらに、さらに

  識別子

  タグをより簡単に識別するために、タグに一意の識別子を与えることに頼ることもできる。 これは、該当するラベルをより速く特定するのに役立ちます。 識別子なしで直面する問題については、この後の節で説明します。 今のところ、識別子を追加するには、次の構文を使用します。

  <h6 i18n="@@subtopicslider">we are ready to help you</h6>

  Creating Locale files

  アプリケーションでカスタム ラベルを表示できるようにするには、サポートしようと計画している各ロケールのカスタム ラベル ファイルを生成する必要があります。 デフォルトのロケールファイルを生成するには、次のコマンドを使用します。

  ng xi18n

  このコマンドは、すべてのタグ付きラベルを抽出し、そこから message.xlf ファイルを生成するために使用されます。 以下は、抽出された message.xlf ファイルからのラベル コンテンツを示すコード スニペットです。

  <trans-unit datatype="html"> <source>About Us</source> <context-group purpose="location"> <context context-type="sourcefile">src/app/about/about.component.html</context> <context context-type="linenumber">7</context> </context-group></trans-unit>

  気づくように、スニペットにはソース ファイル名、ラベルの固有 ID、英語での対応ラベルが含まれています。 ここで、コンテンツを別の言語（この例ではフランス語とドイツ語）で表示できるようにするには、2 つの別のロケールファイル（messages.fr.xlf と messages.de.xlf）を作成する必要があります。 これらのファイルは、対応する言語用にアプリケーションをビルドするときに利用されます。 翻訳を簡単にするために、xlf-translate モジュールを利用することができます。

  Loading locale-based content for the application

  Finally, it is the time to configure the application to build and incorporate the desired labels.最後に、アプリケーションをビルドして希望のラベルを組み込むために設定する時が来ました。 これを行うには、まず、フランス語のロケールでアプリケーションを構築しましょう。 アプリケーションを構築する前に、作成したファイルを利用するようにアプリケーションを設定する必要があります。

  設定ファイルangular.jsonを以下のように変更します

  { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "internationalisation": { "projectType": "application", "i18n": { "locales": { "fr": "messages.fr.xlf", "de": "messages.de.xlf" } }, ... "architect": { "build": { ... "configurations": { "production": { ... }, "fr": { "localize": , ... }, "de": { "localize": , ... } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "internationalisation:build" }, "configurations": { "production": { "browserTarget": "internationalisation:build:production" },"fr": { "browserTarget": "internationalisation:build:fr" }, "de": { "browserTarget": "internationalisation:build:de" } } }, ... } }}, "defaultProject": "internationalisation"}

  上記の変更で、以下の操作を行いました。

  • サポートされているロケールとそのロケールファイルの場所をアプリケーションに通知するための i18 の設定を追加
  • フランス語 (fr) とドイツ語 (de) のビルド属性を設定
  • フランス語とドイツ語で異なるブラウザのターゲットを設定

  ButterCMS with Angular を使用して、マーケティング担当者が更新できる動的コンテンツを使用できるようにします。

  ここで、以下のコマンドを実行して、フランス語の開発ビルドを取得します:

  ng serve --configuration=fr

  上記のコマンドは、フランス語のラベルを持つ Angular アプリケーションを提供します。 フランス語アプリケーションのトップページは以下のようになります。

  

  Localized buildを作成するために、コマンドを利用することができます。 以下のように、dist ディレクトリに出力を見ることができます:

  

  Challenges with Angular application localization

  Angular のローカリゼーション プロセスはかなり簡単ですが、同じことに伴う特定の課題もあります。 これらの課題のいくつかを紹介します。

  • 各ロケール用に別々のアプリケーションを展開すること
  • 各ロケール用のラベルの設定
  • 時間を要すること。開発には時間がかかる
  • 新しいコンテンツが出るたびに、すべてのロケールのビルドの再デプロイが必要
  • ビルドとデプロイのプロセスを自動化するのが難しい

  これらの課題は、ButterCMS のようなヘッドレス CMS エンジンで解決できます

  Localization of Angular applications using ButterCMS

  ButterCMSはコンテンツをスムーズに管理するバックエンドとなる、ヘッドレスエンジンです。 コンテンツのローカライズは、あらゆる企業規模のプロジェクトにおける主要な要件です。

  ButterCMSを使用すると、Angularローカリゼーションプロセスで次のような利点が得られます。

  • Google 翻訳を使用したコンテンツの簡易な自動翻訳
  • 翻訳プロセスのカスタマイズ
  • 多数のロケールをサポート
  • 1 つの Angular プロジェクトのビルドで複数の言語でコンテンツをレンダリング可能
  • 新しいコンテンツは再展開の必要なく複数の言語で表示可能
  • Time->
  • ローカリゼーションに必要な時間は、2 週間です。2622>
  • コンテンツの更新に開発者の干渉が不要

  ButterCMSを使ったローカライズの詳しいプロセスはこちらでご覧になれます。

  Conclusion

  大規模な組織では国際化が必要であり、プロセスを単純化することは全体の開発コストに劇的な影響を与えることがあります。 Angular は、開発中にアプリケーションを国際化するための十分なリソースを提供します。 ButterCMS と統合すると、バックエンドの管理は楽になり、再展開の必要なく新しいコンテンツを多言語でレンダリングできます。

  Angular と ButterCMS に関する記事とチュートリアルを受け取るには、サインアップしてください。