【23日目】見た目に関わる部分をラップする

この記事はアストロナントカ @astronaughts さんの企画「Titanium mobile “early” Advent Calendar 2012」向けに書いています。11月1日 ~ 30日まで毎日誰かが Titanium Mobile についての記事を書いていくというイベントです。

3回目の登場ですが、お付き合いください(・∀・)

Q. Titanium コードがやけに長くなる…

Alloy や Carbon フレームワークが登場して、 柔軟性を保持したまま少ない作業量で Titanium アプリコーディングができるようになってきました。でも、正直これまで通り CommonJS スタイルでガシガシコード書いていく方が、隅から隅まで手を入れられるので良いという場合もありますよね。

でもでも、 CommonJS スタイルで書くと UI に係るコードがながーくなります。

なんの変哲も無いコードですが、 create うんちゃら系メソッドを使うと、どうしてもパラメータを列挙する分長くなります。 TableView のようなデータ列挙系の UI を使ったりすると、さらに長くなります。何とかしたいですよね。

A. CommonJS モジュールにする

さくっとモジュール化しちゃいましょう。例えば、さっきのコードの見た目部分を切り離すとします。ファイル名は app.style.js で保存するとして、

こんな感じでモジュールを書きます。このモジュールを app.js で読み込むので、

書き換えます。 style 変数にスタイル用のモジュールをセットして、 create うんちゃら系のメソッドにモジュールのプロパティを渡しています。随分とすっきりしましたね。流れが非常に分かりやすくなりました。

鋭い方はお気づきでしょうが、 app.style.js に直接 text や title を書き込んでいることに違和感を感じますよね。そんなときは、 set うんちゃらメソッドやプロパティの書き換えで対応しましょう。

app.js の中でこんな感じで使います。上手に使えばアプリケーションに共通するコンポーネントのスタイルを統一することもできます。単一のファイルにスタイルを書いていっても良いですし、うまくファイルを分割しても良いでしょう。

え? JSS で良いんじゃないの?

ははは。またまたご冗談を。 …いえ、 JSS はオススメしません。プロジェクトをいちいちクリーンしないと反映されなかったり、ガチ CSS 記法になっていて、JavaScript 側で使うプロパティ名と差違があったりして混乱の元です。

例えば JavaScript では backgroundColor と書くところを、 JSS では background-color ですからね。 CSS まま過ぎます。良いじゃないですか。 Titanium なんだから backgroundColor だって。でも JSS は CSS リスペクトしちゃってます。

CommonJS モジュールならば JavaScript そのものなので、プロパティ名の混乱は無いですし、定義したスタイルを上書きするようなメソッドを持たせることも簡単にできます。

例えば app.style.js に…

こんな風に extend メソッドを追加してみましょう。
使い方例として app.js 側では…

ラベルを作る部分をこんな感じにすると、「Hello, world」と表示されるところを「Hello, world (extend)」に上書きすることができます。上書きしていない他の部分はそのままなので、部品毎にスタイルの共通化が可能です。

長くなりがちな UI に係るプロパティを外に追い出してあげることで、ロジック部分のコードがスッキリするので流れを追いやすくなります。

というわけで 23 日目は終わりです。明日は @towerofl さんです!