Ionicでngx-translateを使って多言語対応する方法

はじめに

この記事は、現在参画しているプロジェクトで　Ionicを使っているため、そのときの知見をまとめたものになります。

今回は多言語対応についてです。

バージョンについて

Ionic:

   ionic (Ionic CLI)  : 4.3.1 
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   NodeJS : v11.0.0 
   npm    : 6.4.1
   OS     : macOS
   Xcode  : Xcode 10.1 Build version 10B61

ngx-translateの導入

ターミナルから次のようにinstallします。

npm install @ngx-translate/core --save

package.jsonが以下のような感じで導入されていればOKです。

package.json

...
 "@ngx-translate/core": "^11.0.0",
 "@ngx-translate/http-loader": "^4.0.0",
...

app.module.tsにimport

npm install した ngx-translate を、app.module.tsにimportして、諸々の設定を行います。

app.module.ts

import { HttpClient } from '@angular/common/http';
import { TranslateLoader, TranslateModule} from '@ngx-translate/core'
import { TranslateHttpLoader } from '@ngx-translate/http-loader'

export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
....
TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader, 
         useFactory: (createTranslateLoader), 
         deps: [HttpClient] 
       }
     })
  ]
})

Componentごとに　Moduleがある場合

lazyLoadingなどでComponentごとに　Moduleがある場合、それぞれ以下のようにTranslateModuleをimportしてください。

components.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  declarations: [],
  exports: [
    LoginFormComponent
  ],
  imports: [
    IonicPageModule.forChild({}),
    TranslateModule.forChild()
  ]
})
export class ComponentsModule { }

翻訳するためのjsonファイルを設定

www/assetsディレクトリ配下にi18nディレクトリを作成して、その中に任意の言語のjsonファイルを作成します。

$ mkdir www/assets/i18n
$ touch www/assets/i18n/ja.json

translateしたい言語の設定を記述します。

{
  "Mail": "メールアドレス"
}

それぞれのtsファイルにTranslateServiceをimport

各Componentで使用しているtsファイルに、TranslateServiceをimportして、諸々の設定を行います。

import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'page-hoge',
  template: `  
     <ion-item>
        <!--- {{ 'Mail' | translate }} の部分が多言語対応部分 -->
        <ion-label padding>{{ 'Mail' | translate }}</ion-label>
        <ion-input type="text"></ion-input>
     </ion-item>
  `,
  styles: [],
})

export class HogeComponent {

  /* 多言語対応用プロパティ */
  lang:any;

  /* 多言語対応のconstructorを設定 */
  constructor(private translate: TranslateService) {
    /* プロパティにjaを設定(jsonファイル(例:ja.json)のprefixを記入) */
    this.lang = 'ja';
    /* デフォルトの言語を設定 */
    this.translate.setDefaultLang('ja');
    /* 使用する言語 */
    this.translate.use('ja');
  }
}

参考サイト

Ionic公式サイト

Using ngx-translate

まとめ

比較的ラクにIonicの多言語対応ができましたー。
また知見が溜まったら追記していきたいと思います。