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

執筆者:

関連記事

mkcertとhttp-serverでHTTPS環境を作りAndroid(chrome)、iPhone(safari)から接続

簡単にパーフェクトなオレオレ証明書が作れるとgithub上で人気上昇中の「mkcert」。 GitHub  135 UsersFiloSottile/mkcerthttps://github …

Mac、Linux、Windows(WSL無し環境)でNode.jsバージョン切り替え方法を統一したい

一時期ローカルPCにインストールされたNode.jsのバージョンを切り替えるツールが乱立してどれを選べばいいの状態で、当然オプションも違うのでOSによって違うツールが入っているとオプションを覚えるのが …

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

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

podmanとNode.js公式コンテナイメージでnodeコマンドを使う

REHL8(CentOS8)からデフォルトインストールされるようになったpodmanでnodeコマンドが使える環境を作ってみます。 目次1 環境2 やること3 Node.jsイメージの導入4 コンテナ …

History APIを使ってIonic(3以前のSPA)でブラウザの戻るボタンやAndroidバックキーを押すと前サイトに戻ってしまう件に対応する

Ionic2や3ではまだAngular Routerを採用していなかったので、ページ遷移をしてもブラウザ履歴が積まれず、Androidのバックキーやブラウザの戻るボタンを押すとサイトに入ってくる前のペ …

 

shingo.nakanishi
 

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

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

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