FriendFeed のログをブログのサイドバーへ表示するスクリプト

昔ドコかからいただいてきたモノを利用させていただいていたんだけど、jQuery の勉強ついでに全部書き直した。なので、動作には jQuery が必要。

改善点は、

• FriendFeed のAPIエントリポイントを v2 にした（それに伴ないデータ構造が変わったのでロジックを書き直し）
• 取得したアイテムが時系列じゃない場合があるので、自分でソートした
• アイコン表示のロジックを簡素化、Favicon を直に取りに行くようにした（しかし、16×16 のアイコンが取得できるとは限らなくなったので、スクリプト側でサイズをコントロールする必要が生じたので、アイコンを background ではなく <img> で扱うようにしている）
• アイテム全体にソースへのリンクを貼る方法をやめた。アイテムへURLがあっても、直接クリックしてリンク先へ飛べないため。

var FriendFeed = {};

function W3CDTFtoDate(w3cdtf) {
    // w3cdtf: 2009-10-31T12:00.00Z
    var tmp, date;
    // w3cdtf: 2009-10-31T12:00.00+00:00
    tmp = w3cdtf.replace(‘Z’, ‘+00:00′).split(‘+’);
    // tmp[0]: 2009-10-31T12:00.00 -> 2009/10/31 12:00:00
    tmp = tmp[0].replace(‘T’, ‘ ‘).replace(‘-’, ‘/’).replace(‘.’, ‘:’);
    // parse
    date = new Date(tmp);
    // date: 2009/10/31 12:00:00(UTC) -> 2009/10/31 21:00:00(JST)
    date.setTime(date.getTime() + 9 * 60 * 60 * 1000);
    return date;
}

function DateToString(date) {
    return date.getFullYear() + ‘/’
        + date.getMonth() + ‘/’
        + date.getDay() + ‘ ‘
        + date.getHours() + ‘:’
        + date.getMinutes();
}

FriendFeed.generate = function(data) {
    var list = $(‘<ul></ul>’).addClass(‘friendfeed-feed’);
    var entries = data.entries;
    // entries.date: w3cdtf -> javascript::date
    for (i = 0; i < entries.length; i++) {
        entries[i].date = W3CDTFtoDate(entries[i].date);
    }
    entries.sort(function (a, b){ return b.date – a.date });
    for (i = 0; i < entries.length; i++) {
        var entry = entries[i];
        var favicon = entry.via.url.match(/^https?:\/\/[0-9a-zA-Z\.\-:]+\//i) + ‘favicon.ico’;
        var item = $(‘<li></li>’).addClass(‘friendfeed-feed-item’)
            .css(‘list-style-type’, ‘none’)
            .css(‘padding-left’, ’22px’);
        var meta = $(‘<span></span>’).addClass(‘friendfeed-feed-meta’)
        var link = $(‘<a></a>’).addClass(‘friendfeed-feed-url’)
            .attr(‘href’, entry.url)
            .html(DateToString(entry.date));
        var img = $(‘<img />’)
            .attr(‘src’, favicon)
            .attr(‘alt’, entry.via.name)
            .css(‘display’, ‘inline’)
            .css(‘width’, ’16px’)
            .css(‘height’, ’16px’)
            .css(‘margin’, ’2px’)
            .css(‘margin-left’, ‘-20px’)
            .css(‘vertical-align’, ‘middle’);
        item.html(entry.body).append(meta.append(link)).prepend(img);
        list.append(item);
    }
    $(‘#’ + FriendFeed.element).html(list);
};

FriendFeed.show = function(user, element) {
    FriendFeed.element = element;

//  var api = "http://friendfeed.com/api/feed/user/#USER?callback=FriendFeed.generate";
    var api = "http://friendfeed-api.com/v2/feed/#USER?callback=FriendFeed.generate";
    var script_tag = $(‘<script></script>’)
        .attr(‘type’, ‘text/javascript’)
        .attr(‘src’, api.replace("#USER", user));
    $(‘head’).append(script_tag);
}

以下のようにして使う。

    <div id="friendfeed">
    <script type="text/javascript" src="scripts/friendfeed.js"></script>
    <script type="text/javascript">
        FriendFeed.show(‘daruyanagi’, ‘friendfeed’);
    </script>
    </div>