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シミュレータで私のツイートを表示することが出来ました。ああ疲れた。

view plainprint?

1. //背景色をセット  
2. Titanium.UI.setBackgroundColor('#000');  
3. //[タブグループ]オブジェクトtabGroupを作成  
4. var tabGroup = Titanium.UI.createTabGroup();  
5. //[ウインドウ]オブジェクトwin1を作成  
6. var win1 = Titanium.UI.createWindow({    
7.     title:'Tab 1',  
8.     backgroundColor:'#fff'  
9. });  
10. //[タブ]オブジェクトtab1を作成し、win1をプロパティにセットする  
11. var tab1 = Titanium.UI.createTab({  
12.     window:win1  
13. });  
14.   
15. // Twitter ここからはTwitter機能の実装  
16. // ======================================================================  
17. // TableViewオブジェクトを初期化  
18. var tableView = Ti.UI.createTableView({  
19.  data: [];  
20. });  
21.   
22. // HTTPClientオブジェクトを作成  
23. var xhr = Ti.Network.createHTTPClient();  
24. xhr.timeout = 1000000;  
25. var user = 'silentbaker';  
26.   
27. // HTTPClientオブジェクトで Twitter APIを操作。接続用メソッド?をセット  
28. xhr.open("GET","http://api.twitter.com/1/statuses/user_timeline.json?screen_name="+user);  
29.   
30. // 読み込み時(onloadイベント)の処理を関数で定義  
31. xhr.onload = function()  
32. {  
33.  // タイムラインを配列に格納。JSON.parseが出来る。従来通り? evalも可能。  
34.  var timeline = JSON.parse(this.responseText);  
35.  //var timeline = eval('('+this.responseText+')');  
36.  var currentData = [];  
37.  // デバックの時には、Ti.API.info()を使いましょう  
38.  Ti.API.info(timeline.length);  
39.  // テーブル行を作成し、そのラベル プロパティにツイート文をセット  
40.  for(var i=0 ; i < timeline.length ; i++){  
41.   var tweet = timeline[i];  
42.   var row = Ti.UI.createTableViewRow();  
43.   var commentLabel = Ti.UI.createLabel();  
44.   commentLabel.text = tweet.text;  
45.   Ti.API.info(commentLabel.text); // Debugのため  
46.   row.add(commentLabel);  
47.   currentData.push(row);  
48.  }  
49.  // 各行(オブジェクト）の配列をtableViewオブジェクトにセット  
50.  tableView.setData(currentData);  
51. };  
52. // HTTPメッセージを送信する (この時、onloadイベント発生？）  
53. xhr.send();  
54. // end of twitter  
55. // =====================================================================  
56.   
57. win1.add(tableView);   // テーブルオブジェクトをウインドウwin1に追加  
58. win1.hideTabBar();     // タブバーは隠す  
59. tabGroup.addTab(tab1); // タブグループにタブtab1を追加  
60. tabGroup.open();       // アプリケーションを起動 tabGroup -> tab1 -> win1 -> tableView  

//背景色をセット
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