Angularで国際化(i18n)を使用する方法
序章
国際化は、アプリケーションで複数の言語をサポートするプロセスです。
これは、 ngx-translate などのサードパーティライブラリを介してAngularアプリケーションで実行できます。または、組み込みのi18n機能を使用することもできます。
注:「i18n」はヌメロニムです。ここで、「18」は単語の最初の文字(「I」)と最後の文字(「N」)の間の文字数を表します。 「国際化」。 アプリケーションを開発するときに、アクセシビリティのヌメロニムである「a11y」に遭遇することもあります。
このチュートリアルでは、Angularアプリケーションで組み込みのi18n機能を使用する方法を学習します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
- AngularプロジェクトのセットアップおよびAngularコンポーネントの使用にある程度精通していると有益な場合があります。
このチュートリアルは、ノードv14.13.1、npm
v6.14.8、angular
v10.1.6、および@angular/localize
v10.1.6で検証されました。
ステップ1—プロジェクトの設定
@ angle / cli を使用して、新しいAngularプロジェクトを作成できます。
ターミナルウィンドウで、次のコマンドを使用します。
- npx @angular/cli new angular-internationalization-example --style=css --routing=false --skip-tests
これにより、スタイルが「CSS」(「Sass」、「Less」、「Stylus」ではなく)に設定され、ルーティングがなく、テストがスキップされる新しいAngularプロジェクトが構成されます。
新しく作成されたプロジェクトディレクトリに移動します。
- cd angular-internationalization-example
翻訳プロジェクトの基礎を作成するには、コードエディタでapp.component.html
を開き、コードを次の行に置き換えます。
<section>
<article>
<h1>Under Construction!</h1>
<p>This page is under construction.</p>
</article>
</section>
このコードは、"Under Construction!"
および"This page is under construction"
メッセージを表示します。
次に、app.component.css
を開き、コードを次の行に置き換えます。
section {
background: #8e2de2; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #4a00e0, #8e2de2); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #4a00e0, #8e2de2);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
article {
border: 1px solid white;
box-shadow: 1px 1px 100px 10px rgba(0, 0, 0, 0.8);
color: white;
padding: 40px;
text-align: center;
}
このコードは、フレックスボックス、ビューポートの高さの値、線形グラデーションの背景、およびボックスシャドウを使用して、"Under Construction!"
メッセージを画面の中央に配置します。
次に、styles.css
を開き、コードを次の行に置き換えます。
html,
body {
padding: 0;
margin: 0;
}
これにより、ブラウザのユーザースタイルがデフォルトで配置する傾向のあるパディングとマージンが削除されます。 これらのスタイルを使用することにより、デフォルトが異なるすべてのブラウザー間で一貫したベースラインを作成できます。
ターミナルウィンドウで、アプリケーションを起動します。
- npm start
Webブラウザでlocalhost:4200
にアクセスします。
アプリケーションが期待どおりに動作していることを確認できたら、翻訳するメッセージの抽出を開始できます。
ステップ2—xi18n
を使用してmessages.xlf
を抽出する
アプリケーション内で翻訳したいテキストをマークすることから始めましょう。 このチュートリアルでは、アプリケーションをフランス語(fr
)とドイツ語(de
)に翻訳し、Google翻訳で翻訳を提供します。
翻訳するすべてのテキストにi18n
ディレクティブを追加します。
<section>
<article>
<h1 i18n>Under Construction!</h1>
<p i18n>This page is under construction.</p>
</article>
</section>
次に、AngularCLIを使用してapp.component.html
からmessages.xlf
ファイルにマークされたアイテムを抽出するnpmスクリプトをpackage.json
内に作成する必要があります。
{
// ...
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"i18n:extract": "ng xi18n"
},
// ...
}
これを追加した後、ターミナルウィンドウで新しいスクリプトを実行します。
- npm run i18n:extract
次に、messages.xlf
を開くと、次のようなものが表示されます。
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="en-US" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="48a16ab522feaff81571155668deb1a4304291f4" datatype="html">
<source>Under Construction!</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.html</context>
<context context-type="linenumber">3</context>
</context-group>
</trans-unit>
<trans-unit id="84c778d7a95cb5dc26c9cc9feb5b7abb4d295792" datatype="html">
<source>This page is under construction.</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.html</context>
<context context-type="linenumber">4</context>
</context-group>
</trans-unit>
</body>
</file>
</xliff>
翻訳が必要な(つまり、i18n
ディレクティブがある)アイテムごとに、trans-unit
が作成されます。
この構造を使用して、翻訳に関する詳細情報を提供することもできます。 これは、各メッセージをサードパーティによって翻訳してもらい、より多くの情報を提供したい場合に役立ちます。
app.component.html
内で、i18n
アイテムを説明で更新します。
<article>
<h1 i18n="Title for the under construction card">Under Construction!</h1>
<p i18n="A description for the under construction card.">This page is under construction.</p>
</article>
パイプ文字(|
)を使用して、これにコンテキストをさらに追加できます。 これにより、アイテムの意味が得られ、同じの意味を持つ各アイテムの翻訳は同じになります。
<article>
<h1 i18n="Card Header|Title for the under construction card">Under Construction!</h1>
<p i18n="Card Descritpion|A description for the under construction card.">This page is under construction.</p>
</article>
また、アットマーク文字(@@
)を2つ使用して、各i18n
アイテムにid を指定し、翻訳を生成するときに永続性を適用することもできます。
<article>
<h1 i18n="Card Header|Title for the under construction card@@constructionHeader">Under Construction!</h1>
<p i18n="Card Descritpion|A description for the under construction card.@@constructionDescription">This page is under construction.</p>
</article>
もう一度翻訳を作成しましょう。
- npm run int:extract
アイテムは、 id 、意味、および説明で更新されます。
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="en-US" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="constructionHeader" datatype="html">
<source>Under Construction!</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.html</context>
<context context-type="linenumber">3</context>
</context-group>
<note priority="1" from="description">Title for the under construction card</note>
<note priority="1" from="meaning">Card Header</note>
</trans-unit>
<trans-unit id="constructionDescription" datatype="html">
<source>This page is under construction.</source>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.html</context>
<context context-type="linenumber">4</context>
</context-group>
<note priority="1" from="description">A description for the under construction card.</note>
<note priority="1" from="meaning">Card Descritpion</note>
</trans-unit>
</body>
</file>
</xliff>
複数のtrans-unit
、説明、意味、およびIDを含むmessages.xlf
ファイルを作成したら、フランス語とドイツ語の翻訳の作成を開始できます。
ステップ3—フランス語とドイツ語の翻訳を作成する
デフォルトでは、Angularはすべてが「アメリカ英語」(en-US
)ロケールであると見なします。 他のロケールを追加し、それらをサポートするように構成を更新する必要があります。
これらのロケールは、ロケール識別子(ID)によって参照されます。 たとえば、「アメリカ英語」はIDen-US
を使用します。 最初の2文字(en
)は、「英語」のロケール識別子を割り当てます。 最後の2文字(US
)は、「米国」のロケール拡張子を割り当てます。 これらの識別子は、BCP47によって確立されたルールから派生しています。
プロジェクトディレクトリが乱雑にならないようにするには、翻訳ファイルを新しいディレクトリに保存すると便利な場合があります。 output-path
オプションをi18n:extract
スクリプトに提供して、locales
ディレクトリに配置できます。
{
// ...
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"i18n:extract": "ng xi18n --output-path src/locale"
},
// ...
}
既存のmessages.xlf
ファイルを削除します。
- rm messages.xlf
そして、i18n:extract
コマンドを再実行します。
- npm run i18n:extract
スクリプトの変更が期待どおりに機能し、locales
ディレクトリにmessages.xlf
ファイルがあることを確認したら、翻訳用にtarget
の追加を開始できます。
フランス語
まず、messages.xlf
をmessages.fr.xlf
にコピーします。
- cp src/locale/messages.xlf src/locale/messages.fr.xlf
次に、アイテムごとにtarget
を追加します。
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="en-US" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="constructionHeader" datatype="html">
<source>Under Construction!</source>
<target>En construction</target>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.html</context>
<context context-type="linenumber">3</context>
</context-group>
<note priority="1" from="description">Title for the under construction card</note>
<note priority="1" from="meaning">Card Header</note>
</trans-unit>
<trans-unit id="constructionDescription" datatype="html">
<source>This page is under construction.</source>
<target>Cette page est en construction</target>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.html</context>
<context context-type="linenumber">4</context>
</context-group>
<note priority="1" from="description">A description for the under construction card.</note>
<note priority="1" from="meaning">Card Descritpion</note>
</trans-unit>
</body>
</file>
</xliff>
各trans-unit
には、英語のsource
メッセージとフランス語のtarget
メッセージが含まれるようになりました。
ドイツ人
次に、messages.xlf
をmessages.de.xlf
にコピーします。
- cp src/locale/messages.xlf src/locale/messages.de.xlf
次に、アイテムごとにtarget
を追加します。
<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file source-language="en-US" datatype="plaintext" original="ng2.template">
<body>
<trans-unit id="constructionHeader" datatype="html">
<source>Under Construction!</source>
<target>Im Bau</target>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.html</context>
<context context-type="linenumber">3</context>
</context-group>
<note priority="1" from="description">Title for the under construction card</note>
<note priority="1" from="meaning">Card Header</note>
</trans-unit>
<trans-unit id="constructionDescription" datatype="html">
<source>This page is under construction.</source>
<target>Diese Seite befindet sich im Aufbau</target>
<context-group purpose="location">
<context context-type="sourcefile">src/app/app.component.html</context>
<context context-type="linenumber">4</context>
</context-group>
<note priority="1" from="description">A description for the under construction card.</note>
<note priority="1" from="meaning">Card Descritpion</note>
</trans-unit>
</body>
</file>
</xliff>
各trans-unit
には、英語のsource
メッセージとドイツ語のtarget
メッセージが含まれるようになりました。
ステップ4—フランス語とドイツ語のビルドを作成する
locale
に基づいて翻訳されたアプリケーションのバージョンがあります。
Angular CLIを使用して、サポートするロケールごとに特定のビルドを生成できます。
まず、@angular/localize
をインストールする必要があります。
- ./node_modules/@angular/cli/bin/ng add @angular/localize
コードエディタでangular.json
を開き、fr
およびde
ロケールを追加します。
{
"projects": {
"angular-internationalization-example": {
// ...
"i18n": {
"sourceLocale": "en-US",
"locales": {
"fr": {
"translation": "src/locale/messages.fr.xlf",
"baseHref": ""
},
"de": {
"translation": "src/locale/messages.de.xlf",
"baseHref": ""
}
}
},
"architect": {
// ...
}
}},
// ...
}
そして、build
の下にfr
とde
の構成設定を作成します。
{
"projects": {
"angular-internationalization-example": {
// ...
"architect": {
"build": {
// ...
"configurations": {
"production": {
// ...
},
"fr": {
"localize": ["fr"],
"outputPath": "dist/under-construction-fr/",
"i18nMissingTranslation": "error"
},
"de": {
"localize": ["de"],
"outputPath": "dist/under-construction-de/",
"i18nMissingTranslation": "error"
}
}
},
// ...
}
}},
// ...
}
注:以前は、このチュートリアルでは"i18nFile"
、"i18nFormat"
に別々の値を使用していましたが、「i18nLocale」. These have since been deprecated and
localize`が推奨されるアプローチです。
serve
で構成設定を更新することもできます。
{
"projects": {
"angular-internationalization-example": {
// ...
"architect": {
"serve": {
// ...
"configurations": {
"production": {
"browserTarget": "angular-internationalization-example:build:production"
},
"fr": {
"browserTarget": "angular-internationalization-example:build:fr"
},
"de": {
"browserTarget": "angular-internationalization-example:build:de"
}
}
},
// ...
}
}},
// ...
}
package.json
内で、新しいロケールを構築して提供する機能を含む、さらにいくつかのスクリプトを作成できるようになりました。
{
"scripts": {
"ng": "ng",
"start": "ng serve",
"start:fr": "ng serve --configuration=fr",
"start:de": "ng serve --configuration=de",
"build": "ng build",
"build:fr": "ng build --configuration=fr",
"build:de": "ng build --configuration=de",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"i18n:extract": "ng xi18n --output-path src/locale"
}
}
ターミナルで次のコマンドを実行すると、すべてのプロジェクトを開始できます。
- npm start
そして、別のターミナルウィンドウで、フランス語のビルドを開始します。
- npm run start:fr -- --port=4201
そして、別のターミナルウィンドウで、ドイツ語のビルドを開始します。
- npm run start:de -- --port=4202
これにより、デフォルトのポートで英語、ポート4201でフランス語、ポート4202でドイツ語のアプリケーションが実行されます。
アプリケーションの翻訳バージョンを作成しました。
結論
このチュートリアルでは、Angularで利用可能な組み込みのi18nツールを使用して、フランス語とドイツ語で翻訳されたビルドを生成しました。
組み込みのi18nツールの使用方法の詳細については、公式ドキュメントを参照してください。
Angularについて詳しく知りたい場合は、Angularトピックページで演習とプログラミングプロジェクトを確認してください。