Titaniumで1週間でアプリを作ってみた: UI作成

これから数回の記事で、Titaniumでアプリを作って公開するまでの経緯を公開したいと思います。
作成したアプリはこちらです→http://itunes.apple.com/jp/app/xin-zhe!news2/id548232809?mt=8

私は普段からHTML5ばかり触っていて、最後にiPhoneでアプリを書いたのはもう4年ほど前でした。当時はiOS2に対して Objective-C で直接書いていたのですが、最近はTitaniumやPhoneGap、cocos2dなど多数のフレームワークが登場してきており、それらの勉強をしたいという思いから今回の開発をスタートしました。

自分のMacがなかったので、7月5日にApple Storeで1台購入するところからスタートです。すぐにXcodeとTitanium Mobileを入れて開発環境を作り、サンプルのRSS Readerをビルドしてどんなフレームワークか確認していました。

簡単にいうと、Titaniumは次のような構成を持っていました。

ProjectDir/Resources/ の下にソースコードが格納され、app.jsがエントリポイントである
CommonJSの、requireのような形で複数のJavaScriptを読み込むことが出来る
TitaniumのAPIは、Ti.UI.～のような形で提供される
Interface Builderみたいなものはなく、UIの構成も全てソースコードに書き込む

この中で3つ目のポイントは個人的に嬉しい形でした。一般的にはBuilderがあった方が便利であるのは間違いないのですが、フレームワークの全体像を知るためには具体的なソースコードに落とし込まれているほうが明らかに良いです。

UIは具体的には次のようなコードになります。

var slider = Ti.UI.createSlider({
    min: 0,
    max: 1001,
    value: 500,
    //width: 190,
    left: 15,
    right: 35
});

UI系のAPIは、すべてこのようにオブジェクトを1つ渡す形式になっており、いわゆるnamed parameterを採用しています。そして位置を指定するのはCSSと同じように left, top, width, height, bottom, right などが使え、実際の細かいレイアウトはTitanium側で計算してくれるので非常に便利です。また、特殊な値として'auto'という値をとり、これによって積極的に自動計算させることも出来るようになっています。

とりあえず紙にどのようなアプリにするのかのデザインを書いた後は、軽くUIモックアップを作ってみました。適当な捏造ニュースを表示するところまで作るのに数時間で出来ました。

Titaniumの開発で使うサイトは、ほぼ下記の2つだけです。
http://code.google.com/p/titanium-mobile-doc-ja/w/list
UIカタログ。古い情報や間違った情報が多いけれど、UIを具体的なキャプチャ画像と共に公開しているので入門には適している

http://docs.appcelerator.com/titanium/2.1/#!/api
公式のAPIリファレンス（英語）。凝ったつくりでサイトが重いのがイケてないけれど、とりあえずこのページの情報は大体信用できる

最初のモックアップを作り、実機に転送するところまではほぼ問題なく出来ました。次回は通信関係で嵌ったところについて記事にしようと思います。