« JS習作：clearfixジェネレータ | Back To Blog Top | JS習作：IEでもimg要素のlabelを効かせる（ライブラリ無し版） »
JS習作：JavaScriptで簡易的なTwitterクライアントのような物を作ってみる試み その1
概要
12月4週目のJavaScriptです。 Twitter Search的な何かをもう少し発展させてみました。
ソースコード（API部分）
jQueryを使用しています。
$(function () {
$('#friendTweetForm').after('<ul id="friendTweet" class="tweetList"></ul>');
function friendTweet() {
$.ajax({
url: 'http://twitter.com/statuses/home_timeline.json',
data: {
'callback': 'friendtweet',
'count': 100
},
type: 'get',
dataType: 'jsonp',
success: function(friend_data){
$.each(friend_data, function(i, friend_item) {
$('#friendTweet').append('<li class="tweet"><a href="http://twitter.com/'+ friend_item.user.screen_name +'/" class="icon"><img src="'+ friend_item.user.profile_image_url +'" alt="" width="48" height="48" /><span class="name">'+ friend_item.user.name +'</span></a><p class="text">'+ friend_item.text +'<a href="http://twitter.com/'+ friend_item.user.screen_name +'/status/'+ friend_item.id +'">Status page</a></p></li>');
});
}
});
}
$('#friendTweetBtn').click(function(){
$('#friendTweet').empty();
friendTweet();
});
$('#mentionsTweetForm').after('<ul id="mentionsTweet" class="tweetList"></ul>');
function mentionsTweet() {
$.ajax({
url: 'http://twitter.com/statuses/mentions.json',
data: {
'callback': 'mentionstweet',
'count': 20
},
type: 'get',
dataType: 'jsonp',
success: function(mentions_data){
$.each(mentions_data, function(i, mentions_item) {
$('#mentionsTweet').append('<li class="tweet"><a href="http://twitter.com/'+ mentions_item.user.screen_name +'/" class="icon"><img src="'+ mentions_item.user.profile_image_url +'" alt="" width="48" height="48" /><span class="name">'+ mentions_item.user.name +'</span></a><p class="text">'+ mentions_item.text +'<a href="http://twitter.com/'+ mentions_item.user.screen_name +'/status/'+ mentions_item.id +'">Status page</a></p></li>');
});
}
});
}
$('#mentionsBtn').click(function(){
$('#mentionsTweet').empty();
mentionsTweet();
});
$('#searchTweetForm').after('<ul id="searchTweet" class="tweetList"></ul>');
function twitterSearch(searchWord) {
$.ajax({
url: 'http://search.twitter.com/search.json',
data: {
'q': searchWord,
'rpp': 10,
'lang': 'ja'
},
type: 'get',
dataType: 'jsonp',
success: function(search_data){
$.each(search_data.results, function(i, search_item) {
$('#searchTweet').append('<li class="tweet"><a href="http://twitter.com/'+search_item.from_user+'/" class="icon searchResultUser"><img src="' + search_item.profile_image_url + '" alt="" width="48" /><span class="name">'+search_item.from_user+'</span></a><p class="text searchResultText">'+search_item.text+'<a href="http://twitter.com/'+search_item.from_user+'/status/'+search_item.id+'">Status page</a></p></li>');
});
}
});
}
$('#searchTwitter').click(function(){
$('#twitterSearch').empty();
var searchWord = $('#searchWord').val();
twitterSearch(searchWord);
});
});ソースコード（UI部分）
jQueryを使用しています。
$(function () {
$('.wrap').hide();
$('#friendTweetWrap').show();
$('h3.twitterHeadline').css({
'position': 'absolute'
});
$('#twitter h3').click(function(){
$('h3.twitterHeadline').attr('class', 'twitterHeadline');
$(this).attr('class', 'now twitterHeadline');
var clickTabId = $(this).attr('id');
var showTargetForm = clickTabId.replace('Headline', 'Wrap');
var showTargetUl = clickTabId.replace('Headline', '');
$('div.wrap').hide();
$('ul.tweetList').hide();
$('#' + showTargetForm).show();
$('#' + showTargetUl).show();
});
});改良したい点
- 検索以外は再取得する際に新規分のみ追加したいのだけど、since_id がうまい事動かせられない。 eachで回してる最後のidを取得して、2回目以降のみ指定するってやればいいはずなんだけどそれをコードにできていない感じ。
- Postもしたかったのだけど全然だめ。 こちらはさっぱりだめ。 参考になりそうな物を探したけど見つからない。