twitterのタイムラインを表示するサンプル

Titanium Mobile

今日は、会社の昔の同僚二人との新年会でした。
二人とも自分のやりたい事を見つけ、それに向かって行動を起こし、確実に前進している様子を聞くことができとても刺激になりました。
僕も、早く追いつけるようにできることから頑張ろうと思います。

さて、今日は、先日のTitmenium Mobileセミナー@浜松のライブコーディングにて途中で挫折したtwitterのタイムラインを表示するアプリを作ってみました。
コードを確認してみると、ちょっと足りなかったくらいでした。惜しかった。
スタイルをjssに分けるのはできなかったので、またの機会に検証しようと思います。

実行画面

こんな感じです。

ソースファイル(app.js)

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create tab group
var tabGroup = Titanium.UI.createTabGroup();


//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({  
    title:'@arfyasu',
    id: "window"
});
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'app_ja',
    window:win1,
    id: "tab1"
});


var table1 = Titanium.UI.createTableView({
	id: "table1",
	backgroundColor: "#9Cf"
});
//table1.data = [{title: "TEST1"}, {title: "TEST2"}];

win1.add(table1);

var http = Titanium.Network.createHTTPClient({
	onload: function(e) {
		var tweets = JSON.parse(this.responseText);
		table1.data = tweets.map(function(tweet){
			return {title: tweet.text};
		});
	}
});

http.open("GET", "http://api.twitter.com/1/statuses/user_timeline.json?screen_name=arfyasu");
http.send();

//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({  
    title:'Tab 2',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Tab 2',
    window:win2
});

var label2 = Titanium.UI.createLabel({
	color:'#999',
	text:'I am Window 2',
	font:{fontSize:20,fontFamily:'Helvetica Neue'},
	textAlign:'center',
	width:'auto'
});

win2.add(label2);

//
//  add tabs
//
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  

// open tab group
tabGroup.open();

今日の勉強時間

  • Titanium Mobile 1.0h

今日の気づき・・・

  • 人が喜ぶことを考える。
  • 思いついたら、実際に行動に起こす。
  • 自分にできない事は何一つない状態を仮定したとき何をやりたいか？そこに、自分の本当にやりたい事のヒントがあるような気がする。