skimemo


skimemo - 日記/2019-11-28

_ 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への適用

TabViewBottomNavigationを使用している場合、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

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



 
Last-modified: 2019-11-28 (木) 17:11:06 (370d)