前回の記事で環境構築と土台となるプロジェクとの作成ができたので，今回から実用的なアプリの制作に入ります。数回にわけてTwitterクライアントを作成しますので，ネットワーク周りや画像の取り扱いまでTitaniumの簡便さを体験していただければと思います。

どんなものを作るか

まずは，実際に作るアプリのイメージを固めましょう。TwitterアプリはiPhoneアプリの中でも優れたアプリが多く激戦区となっているジャンルです。一方でTwitterを使い込んでいくと自分のよく使うWebサービスと連携させたくなり，自分の使い方にカスタマイズしたアプリも欲しくなるものです。ということで，Twitterのひと通りの機能を実装しつつ拡張しやすいシンプルなアプリを目指しましょう。

画面構成としてはこのようなアプリをイメージしておきましょう。

まずはTableView

Twitterアプリを作るなら，まずはタイムラインを表示しないことには始まりません。タイムラインといえば ユーザーアイコン，ユーザー名，コメント，時刻が，時系列順に並んだものですね。今回はこれを単純にTableViewというリストの表示に格納します。iPhone開発者の方はUITableViewを使うのと同じだと考えてください。

では早速TableViewを作成します。前回作ったプロジェクトのResources/app.jsを以下のように変更してください。

Titanium.UI.setBackgroundColor('#000');
var tabGroup = Titanium.UI.createTabGroup({});
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
    window:win1 //前回，必要な引数まで削除していました。すいません!
}); 

//label1 に関するコードを削除
//ここから追加
var tableView = Ti.UI.createTableView({
    data:[]
});
win1.add(tableView);
//追加終わり

win1.hideTabBar();
tabGroup.addTab(tab1);  
tabGroup.open();

不要になったコードを削除していますが，実質的には4行のコードを追加しただけです。たったこれだけで，空のTableViewが描画されます。一度Titaniumの画面に戻って，エミュレータを起動し，実際に動くことを確認してみてください。短いコードなのであまり解説することがありませんが，TitaniumオブジェクトがTiと省略できることに注意してください。

TableViewにデータを表示しよう

空のテーブルを表示していても仕方がないので，続いてTableViewにデータを入れていきます。Twitterからタイムラインを取得する前に仮のデータで実装してみましょう。

先の追加したところを次のように変更します。

var tab1 = Titanium.UI.createTab({
    window:win1 //前回必要な引数まで削除されていました。すいません!
}); 
//label1 に関するコードを削除
//ここから変更

var timeline = [{text:'コメント1'},{text:'コメント2'},{text:'コメント3'}];//仮のデータです
var data = [];
for (var i=0;i<timeline.length;i++) {
    var tweet = timeline[i];
    var row = Ti.UI.createTableViewRow();
    var commentLabel = Ti.UI.createLabel();
    commentLabel.text = tweet.text;
    row.add(commentLabel);
    data.push(row);
}
var tableView = Ti.UI.createTableView({
    data:data
});

//変更ここまで
win1.add(tableView);

先程は，Ti.UI.createTableViewの引数に渡していたオブジェクトでdataパラメータに対して空配列を渡していました。しかし，実際にテーブルに何かを表示するには，TableViewRowオブジェクトが格納された配列が必要です。よって，上のサンプルコードでは仮のデータの配列を用意し，その要素一つ一つに対してTableViewRowオブジェクトを作成しています（for文の中を参照してください）⁠。