skimemo

skimemo - 日記/2019-11-28

[skimemo - 日記/2019-10-05] [skimemo - 日記/2019-12-05] [skimemo - 日記]

_ NativeScriptでの多言語対応

NativeScriptで多言語対応アプリを作る場合、以下のプラグインを使用します。
nativescript-localization

このプラグインの特徴は以下の通りです。

  • app.tsで2行記述しておけばどこでも使える(XML)。
  • OSの言語に合わせて言語を選択する。（動的変更はiOSのみ対応）
    本当は動的に変更したいのですが、そこは「Androidはまだ未対応」とのことなので、対応されるのを待ちましょう・・・。
↑

_ ファイルの構成

appディレクトリの下にi18nというディレクトリを作り、そこに言語毎のファイルを置きます。

app
 +-i18n
    +- en.default.json
    +- ja.json

ファイル名に「default」を付けると、適当な言語ファイルが無いときにそれが選択されます（上記の例ではOSの設定がフランス語の場合、英語が選択されます）。
それぞれのファイルの中身は以下の通りです。

■en.default.json

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11

{
    "app.name": "My App",
    "ios.info.plist": {
        "NSLocationWhenInUseUsageDescription": "This will be added to InfoPlist.strings"
    },
    "hello.world": "Hello World !",
 
    "action": {
        "back": "Back"
    }
  }


■ja.json

  1
  2
  3

{
    "hello.world": "こんにちわ 世界 !",
}
↑

_ 実装

アプリに適用するには、app.tsでプラグインを読み込みます。

  1
  2
  3

import * as localize from "nativescript-localize";
 
app.setResources({ L: localize });


xml内で、以下のように使用します。

  1

<Label text="{{ L('hello.world') }}" />


プログラム内で使用する場合は以下です。

  1
  2
  3

import { localize } as localize from "nativescript-localize";
 
console.log(localize('hello.world'));


ちなみに上記の例では、日本語環境では「こんにちわ 世界 !」、その他の言語環境では「Hello World !」と表示されます。ja.jsonに定義が無いaction.backであれば、何語の環境でも「Back」が表示されます。

↑

_ app-root.xmlへの適用

TabViewやBottomNavigationを使用している場合、app-root.xmlにそれらの定義が書かれていると思います。

■app-root.xml

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28

<BottomNavigation id="bottom_navigation" class="ns-dark">
    <TabStrip>
        <TabStripItem class="navigation__item">
            <Label text="{{ L('tab.home') }}" />
            <Image src="font://&#xf001;" class="fas" />
        </TabStripItem>
        <TabStripItem class="navigation__item">
            <Label text="{{ L('tab.browse') }}" />
            <Image src="font://&#xf884;" class="fas" />
        </TabStripItem>
        <TabStripItem class="navigation__item">
            <Label text="{{ L('tab.search') }}" />
            <Image src="font://&#xf013;" class="fas" />
        </TabStripItem>
    </TabStrip>
 
    <TabContentItem>
        <Frame defaultPage="home/home-page" />
    </TabContentItem>
 
    <TabContentItem>
        <Frame defaultPage="browse/browse-page" />
    </TabContentItem>
 
    <TabContentItem>
        <Frame defaultPage="search/search-page" />
    </TabContentItem>
</BottomNavigation>

しかし、実はこのままでは言語が展開してくれません。bindingしなければ文言が置き換わらないからです。
従って、以下のようにloadedイベントでbindingをしてあげる必要があります。

■app-root.xml

  1
  2

<BottomNavigation id="bottom_navigation" class="ns-dark" loaded="onLoaded">
    :


■app-root.ts

  1
  2
  3
  4
  5
  6
  7

import { Page } from "tns-core-modules/ui/page/page";
import { EventData } from "tns-core-modules/data/observable";
 
export function onLoaded(args: EventData) {
    let page = <Page>args.object;
    page.bindingContext = {};   // localizationを効かす
}


以上

Category: [NativeScript] - 17:11:06
こちらは製造業のローカライゼーション。グローバル化でも現地に合わせるローカライゼーションが必要というお話のようです。何をするにしてもターゲットを拡げるには手間がかかりますね・・・。

[skimemo - 日記/2019-10-05] [skimemo - 日記/2019-12-05] [skimemo - 日記]
 
Link: skimemo - 日記/2019-12-05(319d) skimemo - 日記/2019-10-05(380d) 日記/Category/NativeScript(551d) skimemo - 日記(1488d)
Last-modified: 2019-11-28 (木) 17:11:06 (326d)