Carbon Framework に触れる (Titanium Mobile)

MakeTi の開発で著名な Apperson Labs から、新しい Titanium Mobile 用フレームワークである「Carbon」が発表されました。既に GitHub からダウンロードして使えるようになっていますので、味見をしてみました。

Carbon Framework

カーボンと聞くと、 Apple の Cocoa API の前身を思い浮かべますが、これは Titanium 用です。最近は Appcelerator から公式フレームワークである Alloy が提供されていますが、 Alloy が MVC Framework であるのに対して Carbon は異なるアプローチを取っています。

これまで提供されてきた Titanium 用フレームワークは「小規模アプリの迅速な開発」に焦点が当てられていて、糖衣構文のカタマリになっていたが、 Carbon ではより信頼性が高くて速いコードの構築を目的としている。

…そうです。

Native JSON UI

UI を JSON で定義します。詳しくは API Documentation を見ていただければと思いますが、 Titanium API を呼び出すときに使っていたプロパティを閉じ込めた JSON を階層的に構築 (TabGroup -> Tab -> Window のように) すると、 Carbon Framework が JSON を読み取って UI を組み立ててくれるようです。

各 UI コンポーネントを定義する際に id プロパティを与えることで Carbon.UI.find(“#id_name”) として対応する Titanium UI オブジェクトを取得することができるみたいです。 API Documentation を読むと CSS セレクタに対応しているようなので、 ID / Class 共にいけそうです。

味見してみよう

早速味見してみましょう。 tiapp.xml に

モジュールを読み込む設定を書きます。モジュールは iPhone / Android 両対応のようですが、味見では iPhone に絞っていきます。

プロジェクトディレクトリに ui ディレクトリを作り、 base.json を作ります。

TabGroup を使うアプリの基本 UI はこのような JSON を記述します。 NavigationGroup も使ってみたかったのですが、 Window -> NavigationGroup -> Window のような構造で記述しても UI は組み立てられませんでした。

ドキュメントを読むとプラットフォーム依存の UI コンポーネントは iOSToolbar のように記述するらしいのですが、 iPhoneNavigatoinGroup や iOSNavigationGroup プロパティを作っても UI が組み立てられなかったので、非対応なのでしょうか?

次に secondWin.json を記述します。

とてもシンプルです。 base.json と secondWin.json 共に children というプロパティがあります。 Window へ直接 Label などを配置しようと思っても配置されず、 children プロパティ (配列) にコンポーネントを配置する必要があります。

最後に app.js (今回は CoffeeScript なので app.coffee) を記述します。

このようなコードを書きました。 require で Carbon モジュールを読み込み、 UI.load メソッドで JSON を開きます。 JSON の第一階層にあるプロパティに対応したコンポーネントが返ってくるようなので、 base.json は Ti.UI.TabGroup が、 secondWin.json は Ti.UI.Window が返ってきます。

UI.load メソッドで読み込んだ後は、 UI.find メソッドでプロパティの探索が行えるようになります。今回の例では #firstLabel や #firstButton を読み込んでいます。また、タブ自体にも id を割り当ててあり、

  1. TabGroup の focus イベントで開いているタブの id を取得
  2. グローバルで使うオブジェクトのプロパティに id (文字列) をセット
  3. 必要な場面で UI.find メソッドにセットした id を引数で渡す
  4. 現在開いている Ti.UI.Tab オブジェクトを取得する

という流れを組んであります。右のタブにあるボタンをクリックしたときに、新しいウィンドウを開くためのものです。アプリのスクリーンショットは

こんな感じですね。

ざっと触れてみた感想

これまでも Ti.include を使ったり require を駆使して見た目に関わるプロパティだけを別のファイルに分割したりする手法はありました。また、 JSS という仕組みも用意されていました。しかし、オブジェクトの深い探索によるパフォーマンスの劣化や、編集するたびにプロジェクトクリーンが必要といった問題がありました。

結局は UI に関するコードやイベント処理、関数、メソッド、モデルの処理などなど、全てのコードが一緒くたに混じったコードを書かざるをえない状態が続き、対する解として Alloy が登場しました。 Alloy は確かに MVC によるキレイなコードの分割を推進してくれますが、小さなアプリケーションをわざわざ Alloy で書くのは面倒です。

そこで今回登場した Carbon の出番かなと感じています。少なくとも基本的な見た目に関しては JSON で定義することができますし、 CSS セレクタを使ったアクセスや Carbon でラップしながら新しいコンポーネントを動的に作るためのメソッドも用意されています。

語弊もあるかもしれませんが、 Alloy が Titanium の Rails ならば、 Carbon は Titanium の Sinatra になるかもしれません。まだ登場したばかりのフレームワークですが、今後が非常に楽しみです。

CODESTRONG!