icon Titaniumの基礎 (2011/06/28)
先週から、Titanium の勉強会に通っています。
仕事だとTittanium まで手を伸ばしている時間がないのと、JavaScriptの勉強もかねて。

果たして本当に効率よく作れるか?限界はどこまでか?


スクリプト言語なんでファイル構成が悩ましいところですが、まずは簡単なサンプルから。

Tabウィンドウを作る

//TabGroup作成
var tabGroup = Titanium.UI.createTabGroup();

//Window作成
var topWindow = Titanium.UI.createWindow({  
    title:'Top',
    backgroundColor:'#000000'
});

//タブ画面作成
var topTab = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Top',
    window:topWindow
});

//ラベル作成
var label1 = Titanium.UI.createLabel({
	color:'#999',
	text:'I am Window 1',
	font:{fontSize:20,fontFamily:'Helvetica Neue'},
	textAlign:'center',
	width:'auto'
});

//Window に Label を追加
topWindow.add(label1);

//TabGroup に Tabページを追加
tabGroup.addTab(topTab);  

//TabGroup を開く
tabGroup.open();
非常にわかりやすくて、簡単ですね。

ただ、全部コーディンしなきゃいけない

って事を考えると、画面設計を作るのはちょっと???という印象です。
InterfaceBuilder がいかに素晴らしいかってのがよくわかります。

しかし、Objective-C や Java では書くのが面倒くさい事を Titanium で簡単に実装できてしまったりします。

外部APIとの連動

例えば UITableView ないし ListView に Twitter のタイムラインを表示させる処理。
var twitterTableView = Titanium.UI.createTableView();
twitterWindow.add(twitterTableView);

var url = "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=yoo_yoo_yoo";
if (Titanium.Network.onLine == false) {
	alert('オフラインです');
} else {
	var xhr = Titanium.Network.createHTTPClient();
	xhr.open("GET", url, false);
	xhr.onload = function () {
		var json = JSON.parse(this.responseText);
		var tableViewData = [];
		for (var i = 0; i < json.length; i++) {
			tableViewData.push({title :json[i].text});
		}
		twitterTableView.data = tableViewData;
	};
	xhr.onerror = function (error) {
		alert(error);
	}
	xhr.send();
}
iPhone は UITableView Delegateメソッド 、Android は ArrayAdapter を記述しますが、
結構長いコーディングになりがちです。
(それだけ細かい事ができるという事ですが)
Titanium の場合、上記のような処理だけで動いてくれます。

素晴らしいのは、createHTTPClient() 移行の書き方です。
ちなみに、 open() の第3引数は同期/非同期の設定で、iPhone のみ有効です。

という訳で、何の処理が簡単に書けるか?を知るのが大切かと思います。
ちなみに、Twitter に関しては、iOS5ではもっと簡単にかけてしまいますが(笑)