skimemo


skimemo - 日記/2019-11-28/NativeScriptでの多言語対応 のバックアップの現在との差分(No.1)


  • 追加された行はこの色です。
  • 削除された行はこの色です。
#blog2navi()
*NativeScriptでの多言語対応 [#ed961f89]

~NativeScriptで多言語対応アプリを作る場合、以下のプラグインを使用します。
~NativeScriptで多言語対応アプリを作る場合、以下のプラグインを使用します。~
[[nativescript-localization:https://www.npmjs.com/package/nativescript-localize]]
~このプラグインの特徴は以下の通りです。
-- app.tsで2行記述しておけばどこでも使える(XML)。
-- OSの言語に合わせて言語を選択する。(動的変更はiOSのみ対応)~
本当は動的に変更したいのですが、そこは「Androidはまだ未対応」とのことなので、対応されるのを待ちましょう・・・。
** ファイルの構成 [#q4b6b632]
~appディレクトリの下に&inlinecode{i18n};というディレクトリを作り、そこに言語毎のファイルを置きます。
 app
  +-i18n
     +- en.default.json
     +- ja.json
~ファイル名に「default」を付けると、適当な言語ファイルが無いときにそれが選択されます(上記の例ではOSの設定がフランス語の場合、英語が選択されます)。~
それぞれのファイルの中身は以下の通りです。~
~
■en.default.json
#code(php){{{
{
	"app.name": "My App",
	"ios.info.plist": {
		"NSLocationWhenInUseUsageDescription": "This will be added to InfoPlist.strings"
	},
	"hello.world": "Hello World !",

	"action": {
		"back": "Back"
	}
  }
}}}
~
■ja.json
#code(php){{{
{
	"hello.world": "こんにちわ 世界 !",
}
}}}

** 実装 [#x6d0a465]
~アプリに適用するには、app.tsでプラグインを読み込みます。
#code(php){{{
import * as localize from "nativescript-localize";

app.setResources({ L: localize });
}}}
~
~xml内で、以下のように使用します。
#code(php){{{
<Label text="{{ L('hello.world') }}" />
}}}
~
~プログラム内で使用する場合は以下です。
#code(php){{{
import { localize } as localize from "nativescript-localize";

console.log(localize('hello.world'));
}}}
~
~ちなみに上記の例では、日本語環境では「こんにちわ 世界 !」、その他の言語環境では「Hello World !」と表示されます。&inlinecode{ja.json};に定義が無い&inlinecode{action.back};であれば、何語の環境でも「Back」が表示されます。
** app-root.xmlへの適用 [#v57f8ee9]
~[[TabView:https://www.nsdocjp.work/6/ui/components/tab-view.php]]や[[BottomNavigation:https://www.nsdocjp.work/6/ui/components/bottom-navigation.php]]を使用している場合、app-root.xmlにそれらの定義が書かれていると思います。~
~
■app-root.xml
#code(php){{{
<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
#code(php){{{
<BottomNavigation id="bottom_navigation" class="ns-dark" loaded="onLoaded">
    :
}}}
~
■app-root.ts
#code(php){{{
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を効かす
}
}}}
~
以上

#htmlinsert(twitterbutton.html)
RIGHT:Category: &#x5b;[[NativeScript>日記/Category/NativeScript]]&#x5d; - 17:11:06
----
#htmlinsert(20191128_localization.html)
----
RIGHT:&blog2trackback();
#comment(above)
#blog2navi()