端末ごとにデザインを変更するjssの使い方と注意点|Titanium Mobile

ひとつのロジックをAndroid/iOS両アプリに使用することができるTitanium Mobileですが, 画面サイズや使用できるUIの違いに対応するためにはデザインを別々のファイルに記載するのが得策です.

今回は端末ごとのjssファイルを作成してデザインの表示分けを行う方法と注意点を記します.

■JSSとは…?

JavaScript Stylesheetsといい, CSSに似た記法でUI部品のプロパティができるファイルのこと.
.jsファイル.jssファイルは対応しており, 例えばapp.jsというファイルに適用するスタイルを用意する場合はapp.jsというファイルを作成すれば大丈夫です. どの場所においても構いません.

・app.js

var label_top = Titanium.UI.createLabel({id: ‘label_top’});
label_top.text = ‘hoge’;

・app.jss

#label_top{
color: ‘#000′;
top: 10;
font-size: 40;
}

こうやってlabel_topに関するプロパティを外部ファイルに分けることで, ロジックとレイアウトをコードから分離したり, 端末ごとに異なるデザインを適用したりすることが可能です.

jssファイルではidまたはclassによってレイアウトの適用元を決定します. #から始まるセレクタはid, .から始まるセレクタはclassに対応します.
また, CSSになぞらえた記法を用いるので, 各要素ごとの区切りは”;”
フォントサイズの指定は”font-size”を用いる点にお気をつけ下さい.

端末ごとに参照するjssファイル名にはルールがあり,
・〜.iphone.jss
・〜.android.lowjss
・〜.android.medium.jss
・〜.android.high.jss
というファイル を用意しておけば, 上から順にiPhone用, 低解像度, 中解像度, 高解像度Andoid用のデザインを別々に指定することができます.
Android3段階の閾値はディスプレイのdpi値によって決められるようです.
Android Developersサイトに詳細が載っていますので一度ご確認ください.

 

■JSSを使用する際の注意点

Titanium Mobileは現在も発展途上ということもありJSSには既知のバグが見られます.

JSSは変更を保存してもビルド時に反映されない場合があります.
(反映されている時もある.不安定.)
上で例に挙げたソースコードで説明すると, colorを’#000′から’#333′に変えて保存, 実行してもエミュレータ上で何も変わらない, といった現象です.

こういうときは現在のProjectをCleanして再ビルドしましょう.

メニューバー>Project>Clean を選択.

全てのProjectをCleanするかと聞いてくる.
毎度全てのProjectに適用していては非効率なので, ここではjssファイルを書き換えたProjectを選択してOKを押す.

するとCleanが完了します!
次回ビルドする際には時間がかかりますがCleanした状態で実行することが可能です.
無事jssの更新が確認出来れば成功です.

TitaniumのVer1.6で解消されたバグのはずなのですが, やはりまだ不安定な模様…
次回アップデートでの解消に期待しましょう.

■関連記事:

Comments are closed.