Titanium MobileのAlloyで多言語化(i18n)対応する #titaniumjp

Titanium Mobile 3.0以降の標準フレームワークになったAlloyで、多言語化対応の方法が分からなかったので調べてみました。
※Titaniumは3.0、Alloyは、0.3.3のバージョンで確認しました。

対応については、今はまだviwesで多言語化の指定が出来ないそうで、ControllersかStyles(JSS)で指定することになります。

Controllersでの指定の仕方は、Alloyを使わない時と同じなので、今回はstylesで指定する場合を取り上げます。

ポイント1:多言語化したい部分にはテキストを入力しないようにする。

viwesにテキストを入力しているとそちらが優先されてしまいます。

<Alloy>
	<TabGroup>
		<Tab title="Tab 1" icon="KS_nav_ui.png">
			<Window title="Tab 1">
				<Label id="label01"></Label>
			</Window>
		</Tab>
	</TabGroup>
</Alloy>

ポイント2:多言語化の指定を先に書く

index.tss

"#label01": {
    text: L('label01')
},
"Label": {
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color: "#000",
	font: {
		fontSize: 20,
		fontFamily: 'Helvetica Neue'
	},
	textAlign: 'center'
}

Labelと#label01の順番を変えるとテキストが反映されませんでした。

"Label": {
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color: "#000",
	font: {
		fontSize: 20,
		fontFamily: 'Helvetica Neue'
	},
	textAlign: 'center'
},
"#label01": {
    text: L('label01')
}

なので、多言語化の指定を先に書いて、共通部分の文字色や横幅などを後に書く必要があります。
普段CSSを書く時は共通部分を先に書いて、固有な部分を後に書くようにしていたので、少し意識を変える必要がありました。

ちなみに、titleidを使って書くことが出来ませんでした。

"#label01": {
    titleid: 'label01'
}

L()を使用する必要があります。

"#label01": {
    text: L('label01')
}

ポイント3:各言語毎の設定ファイルはTi標準でOK

i18nディレクトリはappの配下におくと上手く動作しなかったので、appと同列に配置する必要があります。

i18n/en/strings.xml

<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <string name="label01">Hello, World!</string>
</resources>

i18n/ja/strings.xml

<?xml version="1.0" encoding="UTF-8"?>
<resources>
    <string name="label01">こんにちは</string>
</resources>

結果こんなかんじに

Hello, World!こんにちは

Alloyはまだまだ発展途上でこれからな印象ですが、一応多言語化は出来ます。(viewsに指定出来ないのはアレですが)
その点は安心して大丈夫そうでした!

コメントは受け付けていません。