自分のTweetをjQueryで取得して表示してみたときのメモ

Image may be NSFW.
Clik here to view.

随分前にやってみたことメモです。

REST API Resources に用意されている、statuses/user_timelineを使って、特定のユーザー（自分）のツイートを100件表示してみることにしました。

取得して表示してみたページがこれです。 → Twitter

JSONP形式でタイムラインを取得する

下の xxxxxxxx の部分を自分のアカウントに変更するとそのアカウントのtweetが取得できます。

https://api.twitter.com/1/statuses/user_timeline.json?screen_name=xxxxxxxx

上記は拡張子を json にしていますが、拡張子を変えるだけで xml などのフォーマットでも取得できます。

var userID = 'xxxxxxxx'; // アカウント
var tweetURL = 'https://twitter.com/' + userID + '/status/' // つぶやきのURLに使用する
$(function(){
    $.ajax({
        type : 'GET',
        url : 'https://api.twitter.com/1/statuses/user_timeline.json',
        data : {
            screen_name : userID, // アカウントの指定
            count : '100' // 1回のリクエストで取得するtweetの数
        },
        dataType: 'jsonp',
        success : _getTargetTweet // 通信が成功した場合の処理
    });
});

function _getTargetTweet(data){
    var datas  = data;
    var dataLength  = data.length;
    if(dataLength > 0){
            // ★tweetがあれば
    }else{
            // tweetがなければ
    }
}

特定ユーザー（わたし）のデータを取得結果

JSONP形式で取得した情報を表示する

取得した値を使って、つぶやき・つぶやきのURL・投稿時間をマークアップして適当に append しました。
上のソースの★のところに任意の処理を書けば表示されます。

function _getTargetTweet(data){
    var datas  = data;
    var dataLength  = data.length;
    var taegetElement = $('#TargetTweet');
    taegetElement.append('<ul></ul>').css('display','none');
    if(dataLength > 0){
        $.each(datas, function(i, item){
            var userText = item.text;
            var userDate = new Date(item.created_at);
            var userDayName = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
            var userMonthName = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
            var userNewDate = (userDayName[userDate.getDay()]) + ', ' + (userDate.getDate()) + ' ' + (userMonthName[userDate.getMonth()]) + ' ' + userDate.getFullYear();
            var userStringID = item.id_str;
            var htmlSrc;
                htmlSrc = '<li>';
                htmlSrc += '<p class="tweet"><a href="' + tweetURL + userStringID + '" target="_brank">' + userText + '</a></p>';
                htmlSrc += '<p class="time">'+ userNewDate +'</p>';
                htmlSrc += '</li>';
            taegetElement.find('ul').append(htmlSrc);
        });
        taegetElement.fadeIn("slow").slideDown("slow");
    }else{
        var htmlSrc = '<li>No Tweet :(</li>';
        taegetElement.find('ul').append(htmlSrc);
        taegetElement.fadeIn("slow").slideDown("slow");
    }
}