#blog2navi()
*NativeScriptでの多言語対応 [#ed961f89]
~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://" class="fas" />
</TabStripItem>
<TabStripItem class="navigation__item">
<Label text="{{ L('tab.browse') }}" />
<Image src="font://" class="fas" />
</TabStripItem>
<TabStripItem class="navigation__item">
<Label text="{{ L('tab.search') }}" />
<Image src="font://" 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: [[[NativeScript>日記/Category/NativeScript]]] - 17:11:06
----
#htmlinsert(20191128_localization.html)
----
RIGHT:&blog2trackback();
#comment(above)
#blog2navi()