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

執筆者:

関連記事

ionicアプリ全体のフォントサイズを変更

設定画面でフォントサイズを変更する、こういうのをionicで作ります。HTML、CSSレベルの概念だけで実現出来ます。 フォント小フォント大 目次1 実装1.1 環境1.2 画面HTML 1.3 ロジ …

ionic-cli 5からcordovaを使ったハイブリッドアプリプロジェクトの作成方法が変わった

久しぶりにハイブリッドアプリを作ろう、ついでにionicとcordovaも最新にしよう。と作業を開始したら今までの手順と違って若干困惑した話です。 プロジェクト新規作成時にcordovaを使うか聞かれ …

ionic3(SPA)のServiceWorkerライブラリをsw-toolboxからWorkboxに切り替える

昨今は閲覧速度向上やオフラインでも使える利便性が求められ、Webアプリ開発とPWAはセットで考えられるようになってきましたね。 PWAは「ServiceWorker API」を使ってキャッシュする資源 …

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

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

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

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

 

shingo.7k24
 

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

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

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