Alloy Titanium MVC Framework に触れる

CODESTRONG が始まります。 Titanium 3.0 や Alloy Titanium MVC FrameworkQuickTiGame2d を制作されていた @infosia さんがシリコンバレーで Corona SDK の生みの親と共に立ち上げた Lanica の新ゲームエンジン「Platino」も発表される予定です。

今回は Alloy Titanium MVC Framework に触れてみたいと思います。

Alloy Titanium MVC Framework

Alloy Titanium MVC Framework (Alloy) は合金の名前を持つ Titanium Mobile 用の公式フレームワークです。これまでの Titanium は Titanium SDK が提供する API を JavaScript のコードから直接呼んでアプリケーションを構築していました。

例えば、ウィンドウを作って、ラベルを置いて、ラベルをクリックしたらアラートを出す…といったコードは、

こんな形になります。 UI と処理のコードが一緒くたですね。小さな規模のアプリケーションや、一定の規約に沿ってコーディングをしている分には問題ないでしょうが、段々と管理が面倒になっていきそうです。 Alloy を使ってみましょう。

index.js (Controller)

index.xml (View)

index.tss (View Style)

こんな感じになります。この例では Model はありません。 Alloy を使ってプロジェクトを初期化すると index.js / xml / tss ができます。このファイルが Alloy の基点となるファイル群です。

XML ファイルで View を作り、 TSS ファイルで修飾し、 JS ファイルでコントロールします。 HTML / CSS / JS の関係に似ています。例では XML ファイルで Window をトップレベルコンポーネントに指定していますが、他には

  1. Window
  2. TabGroup
  3. SplitWindow (iPad)

が指定できるようになっています。トップレベルコンポーネントだけしか指定できない、というわけではなく、 TableViewRow を司る Controller / View を作ることもできます。例えば先の index.js と index.xml を以下のように修正し、

index.js

index.xml

row.js / row.xml を作ります。

row.js (Controller)

row.xml (View)

こんな感じですね。 Controller からは同名の View に対して ID を経由して参照できるようになっています。また、 index.js 内の $.index はトップレベルコンポーネントに ID を割り振っていない場合の自動割り当て ID として機能します。

さらに、修正した index.js 内で _.range(10) なるメソッドを使っていますが、 Alloy は Backbone.js と Underscore.js を内部に持つため、これらが持つメソッドを使うことが可能です。 Backbone.js は Alloy の Model 機能も提供しています。

アプリケーションを実行してみると、 TableView に10個の Row が設置され、クリックイベントが処理できていることが分かります。

JavaScript はループ中のイベントリスナの取り回しがちょっと面倒くさいのですが、 Alloy がうまいこと吸収してくれています。

簡単な処理をわざわざ複雑に分割する必要はあるのか? Titanium API を素直に JavaScript から呼んだ方が良いのではないか? と、考える向きもありますが、 Alloy のような公式フレームワークが整備されることで大規模かつ、チームコーディングが行いやすくなるかもしれない点は見逃せません。

これまでの Titanium API を呼ぶ方法がオミットされるわけではないので、 Alloy である程度の大枠 (TSS を使ったスタイリングや Model を使ったデータ処理の隠蔽など) を構築し、内部の細かい処理を今まで通りの API 呼び出しのスタイルでコーディングするのも有りだと思います。

別のサンプルを GitHub 上で公開していますので、そちらもご覧ください。

使ってみて

Alloy のドキュメントがしっかりと整備されているわけではないので、 GitHub 上のリポジトリを読みながら手探りでやってみるしかなかったです。また、処理系が Backbone.js 由来のものも多く、そちらのドキュメントや記事を参考にしながら手を動かしてみる感じですね。

慣れてくれば確かに MVC で綺麗なコードが書けるようになるのかもしれませんが、慣れるまでは大変そうです(ヽ’ω`)