テーマ別RSS
じげブロカスタマイズ複数フィードをGoogle AJAX Feed APIで読み込み新着順に
テーマ：ＷＥＢ・ＳＥＯ・システム開発
2009年06月02日 00時11分
先日、複数ＲＳＳをＰＨＰで読み込み新着順に表示させた例を紹介したが、今回はそれをGoogle AJAX Feed APIを利用してJavaScriptのみで実現させた。
動作の概要は、
各ブログから最新エントリーを１件ずつ収集し、
新着順に並べて表示させる
というものである。
が、じげブロは現状ではJavaScriptが読み込めない仕様なのでここでの実演は無理。
実際にどんな感じか見たい人はこちら→鳥取県商工会青年部連合会 県下部長ブログリンク
コードは以下の通り。JavaScriptが許可されていればブログサービス等でも動く（はず）。
解説はまたの機会に。
＊コードを簡略化させるためjQueryも利用している。
＊実際のコードはもっと圧縮してある。
＊追記 google.load()以降の処理はコールバックとして定義し実行させたほうが確実かも。
動作の概要は、
各ブログから最新エントリーを１件ずつ収集し、
新着順に並べて表示させる
というものである。
が、じげブロは現状ではJavaScriptが読み込めない仕様なのでここでの実演は無理。
実際にどんな感じか見たい人はこちら→鳥取県商工会青年部連合会 県下部長ブログリンク
コードは以下の通り。JavaScriptが許可されていればブログサービス等でも動く（はず）。
解説はまたの機会に。
＊コードを簡略化させるためjQueryも利用している。
＊実際のコードはもっと圧縮してある。
<ul id='feedControl'><ul>
<script src='http://www.google.com/jsapi' type='text/javascript'>
<script type='text/javascript'>
google.load('feeds', '1');
google.load('jquery', '1.3.1');
var urls = new Array();
var feeds = new Array();
// 読み込むフィードのURLを配列に格納
urls = ['http://blog.zige.jp/8139/rss',
'http://blog.zige.jp/ican/rss',
'http://blog.zige.jp/yuruatsu/rss',
'http://blog.zige.jp/meganemegane/rss',
'http://blog.goo.ne.jp/iwaizumi1877/index.rdf',
'http://blog.zige.jp/mako/rss',
'http://blog.zige.jp/hase/rss',
'http://blogs.yahoo.co.jp/manabu471/rss.xml',
'http://blogs.yahoo.co.jp/syungiku00/rss.xml',
'http://rssblog.ameba.jp/aizawastudio/rss20.xml',
'http://blogs.yahoo.co.jp/syungiku00/folder/1767955.xml',
'http://blogs.yahoo.co.jp/hokueiseinenbu/rss.xml',
'http://blog.zige.jp/kiyo/rss',
'http://blogs.yahoo.co.jp/z_chromeboy/rss.xml',
'http://blogs.yahoo.co.jp/okudakagu/rss.xml',
'http://blog.tori-log.net/garage/?action_rss=xml',
'http://blog.goo.ne.jp/koyamajitugyou/index.rdf',
'http://rssblog.ameba.jp/yane-vol7/rss20.xml'];
// フィードを読み込む毎に行う処理
var iterator = function(num,url){
// 新しい Feed インスタンスを作成
var _feed = new google.feeds.Feed( url );
// 読み込むエントリー数を1
_feed.setNumEntries(1);
// ダウンロード完了時の処理
_feed.load(function(result) {
if (!result.error) {
for (var i = 0; i < result.feed.entries.length; i++) {
var _entry = result.feed.entries[i];
// タイムスタンプ
var _pubTime = new Date(_entry.publishedDate);
// タイムスタンプからローカル（日本）時間を作成
var _locDate = _pubTime.toLocaleString();
// エントリー毎のアンカーテキストを生成
// 形式："日付 エントリータイトル【ブログタイトル】"
var _output = $('<a>')
.attr('href',_entry.link)
.append(_locDate + ' ' + _entry.title)
.append(('【' + result.feed.title + '】'));
// feeds配列に格納
feeds.push([_pubTime.getTime(), _output]);
// 読み込み中の表示
$('<li>').text('読み込み中… ' + num + '件').appendTo('#feedControl');
// 最後のフィード読み込み時の処理
if (num == (urls.length - 1)){
// feeds配列の要素を最新順に並べ替え
feeds = feeds.sort(function(a, b) {
return (parseInt(a[0]) < parseInt(b[0])) ? 1 : -1;
});
// アンカーテキストの格納先エレメントの初期化
$('#feedControl').empty();
// アンカーテキストをDOMに追加
for (var i = 0; i < feeds.length; i++){
$('<li>').append(feeds[i][1]).appendTo('#feedControl');
}
}
}
}});
};
$('#feedControl').text('読み込み中…');
// urlsの全要素に対しiteratorを実行
$.each(urls, iterator);
</script>＊追記 google.load()以降の処理はコールバックとして定義し実行させたほうが確実かも。
google.load('feeds', '1');
google.load('jquery', '1.3.1');
var Onload = function(){
以降の処理;
};
google.setOnLoadCallback(Onload);
コメント
トラックバック
この記事のトラックバック URL :
http://blog.zige.jp/sake/trackback/21781
http://blog.zige.jp/sake/trackback/21781
RSS