参考にしたのは、
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
