アウレリア-ローカリゼーション

Aureliaは i18n プラグインを提供しています。この章では、このプラグインを使用してアプリをローカライズする方法を学びます。

ステップ1-プラグインをインストールする

コマンドプロンプト*ウィンドウを開き、次のコードを実行して *i18n プラグインをインストールします。

C:\Users\username\Desktop\aureliaApp>jspm install aurelia-i18n

バックエンドプラグインもインストールする必要があります。

C:\Users\username\Desktop\aureliaApp>jspm install npm:i18next-xhr-backend

ステップ2-フォルダーとファイルの作成

プロジェクトのルートフォルダーに、 locale ディレクトリを作成する必要があります。

C:\Users\username\Desktop\aureliaApp>mkdir locale

このフォルダーに、必要な言語の新しいフォルダーを追加する必要があります。内部に translation.js ファイルを含む en を作成します。

C:\Users\username\Desktop\aureliaApp\locale>mkdir en
C:\Users\username\Desktop\aureliaApp\locale\en>touch translation.json

ステップ3-プラグインを使用する

このプラグインを使用するには、手動ブートストラップを使用する必要があります。詳細については、構成の章を確認してください。 i18n プラグインを main.js ファイルに追加する必要があります。

main.js

import {I18N} from 'aurelia-i18n';
import XHR from 'i18next-xhr-backend';

export function configure(aurelia) {
   aurelia.use
   .standardConfiguration()
   .developmentLogging()

   .plugin('aurelia-i18n', (instance) => {
     //register backend plugin
      instance.i18next.use(XHR);

     //adapt options to your needs (see http://i18next.com/docs/options/)
      instance.setup({
         backend: {
            loadPath: '/locales/{{lng}}/{{ns}}.json',
         },

         lng : 'de',
         attributes : ['t','i18n'],
         fallbackLng : 'en',
         debug : false
      });
   });

   aurelia.start().then(a => a.setRoot());
}

ステップ4-翻訳JSONファイル

これは、翻訳値を設定できるファイルです。公式ドキュメントの例を使用します。 de-DE フォルダーは、実際にはドイツ語に翻訳するために使用する必要がありますが、わかりやすくするために、代わりに英語のフレーズを使用します。

translation.json

{
   "score": "Score: {{score}}",
   "lives": "{{count}} life remaining",
   "lives_plural": "{{count}} lives remaining",
   "lives_indefinite": "a life remaining",
   "lives_plural_indefinite": "some lives remaining",
   "friend": "A friend",
   "friend_male": "A boyfriend",
   "friend_female": "A girlfriend"
}

ステップ5-ロケールの設定

*i18n* プラグインをインポートし、 *de-DE* フォルダーからJSONコードを使用するように設定するだけです。

app.js

import {I18N} from 'aurelia-i18n';

export class App {
   static inject = [I18N];

   constructor(i18n) {
      this.i18n = i18n;
      this.i18n
      .setLocale('de-DE')

      .then( () => {
         console.log('Locale is ready!');
      });
   }
}

ステップ6-表示

データを変換する方法はいくつかあります。 t という名前のカスタムValueConverterを使用します。次の例では、データをフォーマットするさまざまな方法を見ることができます。これを translation.json ファイルと比較すると、フォーマットに使用されるパターンがわかります。

<template>
   <p>
      Translation with Variables: <br/>
      ${ 'score' | t: {'score': 13}}
   </p>

   <p>
      Translation singular: <br/>
      ${ 'lives' | t: { 'count': 1 } }
   </p>

   <p>
      Translation plural: <br/>
      ${ 'lives' | t: { 'count': 2 } }
   </p>

   <p>
      Translation singular indefinite: <br/>
      ${ 'lives' | t: { 'count': 1, indefinite_article: true  } }
   </p>

   <p>
      Translation plural indefinite: <br/>
      ${ 'lives' | t: { 'count': 2, indefinite_article: true } }
   </p>

   <p>
      Translation without/with context: <br/>
      ${ 'friend' | t } <br/>
      ${ 'friend' | t: { context: 'male' } } <br/>
      ${ 'friend' | t: { context: 'female' } }
   </p>

</template>

アプリを実行すると、次の出力が得られます。

Aureliaローカリゼーションの例

Aurelia-localization

目次