skimemo

skimemo - 日記/2019-11-28/NativeScriptでの多言語対応

[skimemo - 日記/2019-10-05/wkhtmltopdfをApacheから呼ぶ際にはまった話] [skimemo - 日記/2019-12-05/CentOS7+ApacheでPHP5とPHP7を共存させる] [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/wkhtmltopdfをApacheから呼ぶ際にはまった話] [skimemo - 日記/2019-12-05/CentOS7+ApacheでPHP5とPHP7を共存させる] [skimemo - 日記]
 
Link: skimemo - 日記/2019-10-05/wkhtmltopdfをApacheから呼ぶ際にはまった話 skimemo - 日記/2019-12-05/CentOS7+ApacheでPHP5とPHP7を共存させる 日記/Category/NativeScript skimemo - 日記
Last-modified: 2019-11-28 (木) 17:55:57