angularのi18nでアプリを国際化対応する!ngx-translateとの比較。

angularのi18nでアプリを国際化対応する!ngx-translateとの比較。

この記事では、Angularの国際化ライブラリであるi18nを使用してアプリを多言語化する方法について説明したい。

近年、国際化の波の中で自社のウェブサイトを英語または中国語対応させたいと考えている企業も増えているだろう。もしかしたら多くの企業は最初から英語ベースでアプリを開発して、サブの言語として日本語を表示しているかもしれない。

今回はAngularの標準の国際化ライブラリであるi18nについてその導入方法や使用方法を解説していきたい。

また、サードバーティー製のi18nライブラリとして人気の「ngx-translate」についても特徴や長所などを説明しているので読んでいってほしい。

Angularアプリの国際化対応

まずはAngularアプリの国際化対応について、なぜライブラリ

むしろを英語を標準言語として考え、そこから日本語を含めた各言語に翻訳していくのが普通だろう。

i18n

i18nはAngularに標準で備わっている国際化対応ライブラリ。

ngx-translate

i18nのサードバーティー製の国際化ライブラリに「ngx-translate」がある。

ngx-translateはシンプルで使いやすく導入している企業も少なくない人気のライブラリだ。

ngx-Translate GitHub レポジトリー:: https://github.com/ngx-translate

ngx-translateは以下のような特徴を持つ。

  • Angularプロジェクトに導入するのが簡単。
  • JSONフォーマットでシンプルな翻訳ファイル。
  • 動的な文字列やHTMLタグを翻訳テキストに使用可能。

ngx-translateは翻訳ファイルの記述のシンプルさからi18nと較べるとだいぶ使いやすくなっている。

i18nを使わなくてはいけない理由がある場合を除いて、こちらのライブラリの導入も検討してみたほうがいいだろう。

i18nの導入方法

ではi18nを自身のアプリへ導入しよう。

i18nを導入するには以下のコマンドをターミナルで実行するだけでいい。

ng add @angular/localize

i18nの使用方法

ではi18nをAngularアプリ内のテキストに対して使用してみよう。

この例では、英語をベースとしてアプリを作成して、のちに翻訳ファイルを基にテキストを日本語に翻訳する。

Angularプロジェクトを用意する

まずは翻訳したいテキストを含めた簡単なアプリを用意する。

ここでは「translate-app」と名付けたシンプルなアプリを作成してapp.component.htmlに以下のようなサンプルコードを記述した。

<h1>Hello {{ name }}</h1>
Text without html tag.
<input type="text" placeholder="write some texts." />

名前をテキスト内に動的に読み込みたいのでnameプロパティをコンポーネント側に定義しておく。

name = 'Yuu'

「ng serve」でアプリをスタートすると以下のような感じに表示されるはずだ。

翻訳する箇所にタグを付ける

ここからは翻訳する箇所にi18nのタグを付けていく。

<div>・<h1>といったタグで囲まれた要素をタグ付けする場合はHTMLタグ内に「i18n」と記述する。

<h1>Hello {{ name }}</h1>
⇓
<h1 i18n>Hello {{ name }}</h1>

タグで囲まれていない要素をタグ付けする場合は<ng-container>タグで囲み「i18n」を記述する。

Text without html tag.
⇓
<ng-container i18n>Text without html tag.</ng-container>

要素内の属性をタグ付けする場合は属性名の頭に「i18n-」を付けた属性を追記する。

<input type="text" placeholder="write some texts." />
⇓
<input type="text" i18n-placeholder="" placeholder="write some texts." />

これですべてのテキストにi18nのタグが付けられた。

テキストの抽出コマンドを実行する

翻訳したい箇所へのタグ付けが終わったら翻訳対象のテキストをファイルに抽出する。

以下のコマンドを実行する。

ng extract-i18n

コマンドを実行するとアプリのルートフォルダに「messages.xlf」というファイルが作成されているだろう。

プロジェクトのsrcフォルダの配下に「locale」というフォルダを作成してmessages.xlfをその中に移動する。

移動したら「messages.xlf」を「messages.en.xlf」とリネームし、さらにそのファイルをコピーして「messages.jp.xlf」とリネームする。

*messages.en.xlfは英語のテキストが、messages.jp.xlfには日本語のテキストが納められる。

日本語のテキストを入力する

では翻訳ファイルに日本語のテキストを入力しよう。messages.jp.xlfを開いてほしい。

以下の写真のように翻訳データが記述されているはずだ。

<file>タグ内のsource-language属性にて言語が設定されている。ここを「jp」に変更しよう。

<trans-unit>タグの内部の情報がひとつの翻訳テキストに対応しており、双方はIDを通じて紐づけられている。

日本語の翻訳データを作成するためには<source>タグ内の英語のテキストを日本語に書き換える

これで翻訳作業は完了だ。

ビルド設定をアップデートする

日本語のテキストが表示されるか確認する前にAngularプロジェクトのビルドに関する設定をアップデートする必要がある。

angular.jsonの設定

まずはangular.jsonの設定から。変更する箇所は3箇所ある。

*以下、説明内容の”translate-app”の部分は自身のプロジェクト名に書き換える。

まず最初にprojects/translate-appの配下に以下の内容を追記する。

"i18n": {
"sourceLocale": "en-US",
"locales": {
"jp": {
"translation": "src/locale/messages.jp.xlf",
"baseHref": ""
}
}
},

次にprojects/translate-app/architect/build/configurationsの配下に以下の内容を追記する。

"jp": {
  "localize": ["jp"],
  "outputPath": "dist/translate-app/",
  "i18nMissingTranslation": "error"
},

最後にprojects/translate-app/architect/serve/configurationsの配下に以下の内容を追記する。

"jp": {
  "browserTarget": "translate-app:build:jp"
}, 

package.jsonの設定

package.jsonの設定を拡張する。

この設定はアプリのスタート設定であり、必ず設定しなければいけない訳ではない。

scriptsの配下に以下の内容を追記する。

"start:jp": "ng serve --configuration=jp",
"build:jp": "ng build --configuration=jp",

これでビルド設定のアップデートは完了だ。

アプリが翻訳されたかテストする

では、アプリが日本語に翻訳されたか確認するためにテストしてみよう。

以下のコマンドを実行して、日本語をローカルとして設定したアプリを新しいポートで実行する。

npm run start:jp -- --port=4201

以下のように日本語で画面が表示されればテストは成功だ。

もしテキストが英語のままの場合はangular.jsonの設定をチェックし直そう。

国際化対応に役立つパイプ

Angularの標準パイプの中にはアプリの国際化対応に役立つものがいくつかある。

最後にそれらのパイプを紹介したい。

I18nPluralPipe

I18nPluralPipeは英語のように単数形と複数形で単語の語尾が異なるパターンがある言語の翻訳に役立つ。

例えば英語で人数を数える場合、人数によって単語「person」の語尾が変化する

  • 0 ⇛ no one
  • 1 ⇛ one person
  • 2 ⇛ two persons

I18nPluralPipeを使えば、入力された数値を基に適切な翻訳を自動で選択することができる。

I18nSelectPipe

I18nSelectPipeはあらかじめ用意したマッピングを基に、適切な単語を返すパイプであり。

キー・バリュー型の翻訳ファイルと考えるといい。

DatePipe

DatePipeはDateオブジェクトを希望するフォーマットで出力するためのパイプ。

フォーマットの設定により月名や曜日名を言語設定に基づき単語として出力することができる。

(例)Janurary・Monday

また、DatePipeを使えば時刻を希望する国の時間に合わせることができる。

CurrencyPipe

CurrencyPipeはnumberオブジェクトを希望する通貨の形式で出力するためのパイプ。

商品の価格を異なる通貨で表示したい場合などには役立つであろう。

Angularのパイプについてさらに知りたい人はこちらの記事を読んでほしい。