Titanium Mobileで Twitterアプリを作る

Titaniumで、Twitterクライアントを作成してみる。まあ、表示のみだが。
参考にしたのは、
http://gihyo.jp/dev/serial/01/titanium/0002
http://developer.appcelerator.com/blog/2011/06/titanium-studio%E3%81%A8titanium-mobile-1-7%E3%82%92%E3%83%AA%E3%83%AA%E3%83%BC%E3%82%B9%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F.html?lang=ja
http://code.google.com/p/titanium-mobile-doc-ja/wiki/get_started

記事の通りに進めてみたが、うまく表示しない。空のTableViewだけが表示される。
この解析だけで、随分と時間を食ってしまった。
結論から言うと、単なるスペルミスだったのだが....

JavaScriptでは宣言されていない変数もエラーにならない

え！そうだったけ!!
おかげで、いろいろと試行錯誤し、勉強になった。ポイントは以下の通り。

• デバックするためには、Ti.API.info() が便利
• サンプルコードを疑わないためにも、お手本となる動くソースが必要。Appcelerator社が提供しているサンプル集[KitchenSink]をTitanium Studioでダウンロード出来る

KitchenSinkのTwitterソースを参考に、Gihyo.jpのソースを修正したものが以下の通り。


右のように、iPhoneシミュレータで私のツイートを表示することが出来ました。ああ疲れた。

//背景色をセット
Titanium.UI.setBackgroundColor('#000');
//[タブグループ]オブジェクトtabGroupを作成
var tabGroup = Titanium.UI.createTabGroup();
//[ウインドウ]オブジェクトwin1を作成
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
//[タブ]オブジェクトtab1を作成し、win1をプロパティにセットする
var tab1 = Titanium.UI.createTab({
    window:win1
});

// Twitter ここからはTwitter機能の実装
// ======================================================================
// TableViewオブジェクトを初期化
var tableView = Ti.UI.createTableView({
 data: [];
});

// HTTPClientオブジェクトを作成
var xhr = Ti.Network.createHTTPClient();
xhr.timeout = 1000000;
var user = 'silentbaker';

// HTTPClientオブジェクトで Twitter APIを操作。接続用メソッド?をセット
xhr.open("GET","http://api.twitter.com/1/statuses/user_timeline.json?screen_name="+user);

// 読み込み時(onloadイベント)の処理を関数で定義
xhr.onload = function()
{
 // タイムラインを配列に格納。JSON.parseが出来る。従来通り? evalも可能。
 var timeline = JSON.parse(this.responseText);
 //var timeline = eval('('+this.responseText+')');
 var currentData = [];
 // デバックの時には、Ti.API.info()を使いましょう
 Ti.API.info(timeline.length);
 // テーブル行を作成し、そのラベル プロパティにツイート文をセット
 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;
  Ti.API.info(commentLabel.text); // Debugのため
  row.add(commentLabel);
  currentData.push(row);
 }
 // 各行(オブジェクト）の配列をtableViewオブジェクトにセット
 tableView.setData(currentData);
};
// HTTPメッセージを送信する (この時、onloadイベント発生？）
xhr.send();
// end of twitter
// =====================================================================

win1.add(tableView);   // テーブルオブジェクトをウインドウwin1に追加
win1.hideTabBar();     // タブバーは隠す
tabGroup.addTab(tab1); // タブグループにタブtab1を追加
tabGroup.open();       // アプリケーションを起動 tabGroup -> tab1 -> win1 -> tableView