JavaScript製簡易的Twitterクライアント（作り途中）

注意

このJavaScriptは習作です。 至らない点が各所に残っている可能性があるので、参考にする際はご注意ください。

Sample

Code（API部分）

$(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);
  });

});

Code（タブ部分）

$(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();
  });
});

JavaScript1000本ノック トップページへ