angular

Angularで国際化(i18n化)する方法の概要

今回はAngularでサイトを国際化(i18n化)して公開する方法の概要をご紹介します。

基本的に公式ドキュメントを読めば実現出来ますしむしろ読んで欲しいんですけど、「英語読めない」「公式ドキュメント読むのだるい」っていう怠惰な要求もあるかと思いますので、この通りにすればとりあえず動くっていう最小限度のチュートリアルを提供できたらと思います。

また基本的にAngularは何カ国語でも対応する事ができるんですが、今回は説明を簡易化するために日本語と英語でサイトを作るものとして話を進めていきます。

AngularCLIのインストールと雛形作成

まずはAngular CLIをインストールする必要があります。

Angular CLIは開発用PCにグローバルにインストールする必要は無く、個別プロジェクトごとにインストールしたほうが個人的には良いと思っています(その方がプロジェクトごとにCLIのバージョンを変える事ができる)。

なのでプロジェクトフォルダを作成し、その中でCLIコマンドを実行するスタンスを取ります。以下の記事を参考にインストールして下さい。

以下のコマンドでAngularが起動するか確認します。

npx ng serve

http://localhost:4200/にアクセスして以下のページが表示されれば準備万端です。

ng_serve

基本的な考えは、国際化したい文章にi18n属性をつけるだけ

ごくごく簡単に国際化を済ませたいのならば、国際化したい文章にi18n属性をつけるだけです。一例を上げると

<h2 i18n>私は国際的なサイトを作りたい</h2>

というようなマークアップをするだけです。

さっそく出来たてのAngularサイトにも反映させてみましょう。src > app > app.component.htmlを編集します。

<h2>Here are some links to help you start: </h2>

<h2 i18n>私は国際的なサイトを作りたい</h2>

ファイルに変更をかけるとng serveコマンドにより自動的にビルドされ、以下のように表示されます。

ng_beforei18n

もちろんこの段階では国際化の処理は何もしていませんので、マークアップした内容がそのまま表示されるだけです。

国際化するための翻訳元を作成する

つづいて、国際化するための翻訳元ファイルを作成します。公式ドキュメントだと”translation source file”と呼んでいるようです。

ファイルの作成方法やオプションは色々とあるようですが、自分の場合は以下のコマンドを実行する方法で落ち着きました。

npx ng xi18n --i18n-format xmb --out-file translation.xmb --i18n-locale ja

使うオプションはご自身の環境によって変えてほしいんですけど、後述するPOEditorを使う場合は、xmbファイルで出力しておいた方が無難です。

POEditorで翻訳元ファイルを編集する

上記コマンドを実行するとsrcディレクトリの中にtranslation.xmbファイルが作成されます。

このファイルを元に翻訳元ファイルを作成するのですが、自分の場合はPOEditorというサービスを使っています。なので今回は、このPOEditorを使う事を前提に話を進めて行きたいと思います(他に適当なアプリやWEBサービスが見当たらないので、もしもこのサービスが終了したら詰みます。他にも使えるサービスがあったら教えて下さい)。

言語を追加する

まずPOEditで編集する言語を設定します。

この時気をつけたいのが、追加する言語は翻訳元となる母国語含めて、利用する言語全てを選択します。例えば日本語と英語のサイトを公開しようとしたら、日本語と英語それぞれ追加しなければなりません。

POEditor add language

デフォルトの言語を日本語にする

翻訳元の言語を日本語とするために、設定からデフォルトの言語を日本語に設定します。

POEditor project settings

xmbファイルをインポートする

先ほどのコマンドで作成したxmbファイルをインポートしましょう。

POEditor import translation file

翻訳元の言語は日本語なので”Also import translation in”のプルダウンを”Japanese”に設定します。

インポートが完了すると下画像のような状態になります。

POEditor translation file was imported

プロジェクトのトップページに戻ると、下画像のような状態になっています。

POEditor translation file was imported

編集する言語を選択し入力していく

翻訳先の言語を選択し、翻訳を入力していきます。

POEditor editing

翻訳後ファイルを出力する

全ての翻訳が終了したら「翻訳後ファイル」を出力します。公式ドキュメントでは”completed translation file”と呼んでいるようです。

export translation file

オフィシャルドキュメントではxlfファイルを使っているようですが、POEditorでは出力できない模様です。xtbファイルでもコンパイル出来るので、自分はxtbで出力しています。

なおこの翻訳後ファイルは、言語ごとにexportする必要があります。つまり2カ国語のサイトならば2回、10ヶ国語のサイトならば10回する必要があります。

また出力されたファイルがどの言語のものか分かるように、translation.en.xtbのように拡張子で分かるようにしておくと良いでしょう。

翻訳後ファイルをプロジェクト内のディレクトリに置きコンパイルする

完成した翻訳後ファイルをsrcディレクトリ内に配置します。自分の場合はlocaleディレクトリを作成し、その中に各翻訳後ファイルを置くようにしています。

ng serveでローカルで動かす

では早速ですが国際化されたか確かめて見ましょう。まずはビルドする前に、serveコマンドを使いローカルで確認する作業に入ります。

ng serveコマンドを実行する前に、i18n化するにはひと工夫が必要になります。angular.jsonファイルを下記のように編集します。

          "configurations": {
            "production": {
              中略
            },
            "staging": {
              中略
            },
            "ja": {
              "i18nFile": "src/locale/translation.ja.xtb",
              "i18nFormat": "xtb",
              "i18nLocale": "ja",
              "outputPath": "dist/ja/",
              "baseHref": "/ja/"
            },
            "en": {
              "i18nFile": "src/locale/translation.en.xtb",
              "i18nFormat": "xtb",
              "i18nLocale": "en",
              "outputPath": "dist/en/",
              "baseHref": "/en/"
            }
          }
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "your-project-name:build",
            "aot": true,
          },
          "configurations": {
            "ja": {
              "browserTarget": "your-project-name:build:ja"
            },
            "en": {
              "browserTarget": "your-project-name:build:en"
            }
          }
        },

一番重要なのは

"aot": true

でAOT(Ahead of Time)で動かさないと、翻訳ファイルがコンパイルされませんので注意が必要です。

続いてpackage.jsonファイルのscriptに以下を追加して、serveコマンドを簡単に起動出来るようにしておきます。

"serve:ja": "npx ng serve --configuration=ja",
"serve:en": "npx ng serve --configuration=en",

英語のサイトを表示させたい場合は、下記コマンドを実行します。

npm run serve:en

下画像のように英語化されればOKです。

angular i18n serve

ng buildでビルドする

次は実際にビルドしてデプロイアブルなファイルを作成していきます。まずは以下の記述をpackage.jsonのscripts内に記述します。

"build:ja": "npx ng build --configuration=production --i18nFormat xtb --i18n-file src/locale/translation.ja.xtb --i18n-locale ja --output-path ./dist/ja --base-href /ja/",
"build:en": "npx ng build --configuration=production --i18nFormat xtb --i18n-file src/locale/translation.en.xtb --i18n-locale en --output-path ./dist/en --base-href /en/"

ポイントはpackage.json内のproductionの設定でビルドし、かつ各言語ごとにオプションを設定しています(AngularCLIでconfigurationにproductionとjaの2つの設定を同時に指定できれば良いのだが、探した限りでは見当たらずこのような長いスクリプトになってしまった。どなたか妙案があるかたはコメントして下さい)。

実際にビルドします。

npm run build:ja
npm run build:en

ビルドされたものが実際に動くか確認してみます。distディレクトリに入り、今回はhttp-serverという簡易サーバーを経由してブラウザに表示させてみます。

cd dist
http-server

http://127.0.0.1:8080/ja/http://127.0.0.1:8080/en/にアクセスし、それぞれの言語が表示されていれば完成です。

まとめ

以上Angularで国際化対応サイトを作る方法でした。今回のコードはGitHubに公開しておきます。

もっと国際化について深追いしたい場合は是非とも公式ドキュメントを読んでください。複数形への対応など、国際化は意外と奥が深い事がうかがえます。