One IT Thing

IT業界で飯を食う為の学習系雑記

ionic nodejs typescript

ionicアプリを多言語化する

投稿日:

目的

こういうのを作ります。

ionic公式サイト。

環境

  • ionic3
  • Angular5
  • 上記で作った多言語化未対応の既存アプリがある状態

手順1.インストール

インストールするngx-translateのバージョンは、使用しているAngularのバージョンによって変更する必要があります。公式に対応バージョンが掲載されており、合わせないと翻訳時にエラーが発生します。


今回の場合はAngular5系を使っている為、公式githubに従い@ngx-translate/core@9.0.0、@ngx-translate/http-loader@2.0.0をインストールします。

# npm install @ngx-translate/core@9.0.0
npm WARN rollback Rolling back readable-stream@2.3.6 failed (this is probably harmless): EPERM: operation not permitted, lstat 'C:\src\ionic\memoru\node_modules\fsevents\node_modules'
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @ngx-translate/core@9.0.0
added 1 package in 6.981s
# npm install @ngx-translate/http-loader@2.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @ngx-translate/http-loader@2.0.1
added 1 package in 5.92s

手順2.src/assets/i18nに翻訳ファイルを作成する

ja.json

{
    "search": "検索" 
}

en.json

{
    "search": "Search" 
}

手順3.app.module.tsにngx-translate関連のモジュールを登録する

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

export function createTranslateLoader(http: HttpClient) {
    // src/assets/i18nに配備したja.json、en.jsonを認識させる
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

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

手順4.app.component.ts等でデフォルト言語設定、ブラウザ言語を取得して使用言語として設定

export class MyApp {
        :
    constructor(
           :
        // 翻訳言語を設定する為、TranslateServiceをインジェクト
        translate: TranslateService  
    ) {
            translate.setDefaultLang("en");

            // これをしておかないと次のuseでjaが選ばれないとgetLangs()でjaが返却されないので注意
            translate.addLangs(["en", "ja"]);  

            // カレントのブラウザ言語設定("ja"等)を取得して翻訳設定、ja.jsonが使われるようになる
            translate.use(translate.getBrowserLang()); 

手順5.htmlで翻訳したい箇所を、翻訳ファイルのキーをインターポレーション記述してtranslateパイプにパイプさせる

<ion-searchbar (ionInput)="searchMemo($event)" placeholder="{{ 'search' | translate }}"></ion-searchbar>

以上で、translate.use(”en”);の場合は「Search」、translate.use(”ja”);の場合は「検索」と表示されるようになります。

まとめ

日本語が分かる人口は1億人ちょっと、英語が分かる人口は17億人くらい居るそうです。アプリユーザ母数を増やす為に日本以外も公開先国に加え、英語、余裕があれば対象国の母国語を選択出来るようにしておきたいですね。

-ionic, nodejs, typescript

執筆者:

関連記事

Nodeアプリが依存するnpmモジュールライセンスをlicense-checker & Jenkinsで自動チェック(1)

目次1 目的2 使用するnpmモジュール3 ライセンスを表示してみる3.1 サマリで出す3.2 CSVファイルで出す4 まとめ 目的 ionicやNode.jsアプリが依存するライブラリにライセンス違 …

Typescript 複数の継承インナークラスをI/Fで識別する

目次1 前提2 はじめに3 想定する状況4 環境・準備5 初期の実装例5.1 実行結果6 この設計で生じる課題7 課題に対する回避策7.1 実行結果8 まとめ 前提 インナークラスに型名を持たせられる …

Nodeアプリが依存するnpmモジュールライセンスをlicense-checker & Jenkinsで自動チェック(2)

目次1 目的1.1 動作イメージ2 Jenkinsジョブを設定2.1 前提2.2 Jenkins「シェルの実行」を設定2.3 想定外ライセンスが含まれていた場合の通知3 まとめ 目的 前回の続き。&n …

Angular4.4のHTTP通信処理にタイムアウトを設定をすると「timeout is not a function」エラーが発生する

目次1 事象2 原因3 対処4 まとめ 事象 Angular4.3で追加されたHttpClientModuleに移行せず、HttpModuleを使い続けているアプリで、とある理由からpackage-l …

Typescript3.0以下の環境で発生する「Cannot find name ‘unknown’」に対処する

目次1 事象2 原因3 対処4 まとめ 事象 Typescript2.3.4を使っている息の長いWebシステムでnpm installをし直し、tscビルドし直したらトランスパイルエラーが発生。「un …

 

shingo.nakanishi
 

東京在勤、職歴20年越え中年ITエンジニアです。まだ開発現場で頑張っています。

19歳(1996年)から書き始めた個人日記が5,000日を超え、残りの人生は発信をして行きたいと思い、令和元日からこのサイトを開始しました。勉強と試行錯誤をしながら、自分が経験したIT関連情報を投稿しています。

私と同じく、今後IT業界で生計を立てて行きたいと考えている方や、技術共有したいけどフリーランスで孤独、といった方と一緒に成長、知識共有して行けたら楽しいな、と思っています。