Google AJAX Feed API用のjQuery独自関数
ブログで更新を行ったものをRSSを利用して読み込む際に、サーバが別でもJavaScriptのみで実現できるので、何回か使ったことがあるのですが、毎度毎度HTMLの構成が変わったりしたので読み込みのJSを書き換えていました。
もう少し便利に使えないかな?と、jQueryを用いて汎用性高める目的で作ってみました。
関数概要
{target}.gRssFeed({url}, {num}, {option});
- {target}
- 適用する対象
- {url}
- 読み込むRSSのURL
- {num}
- 表示させるエントリー数
- {option}
- [bdate](string) = "<li>"
- 日付の前に挿入する文字列
- [edate](string) = ""
- 日付の後に挿入する文字列
- [btitle](string) = ""
- エントリータイトルの前に挿入する文字列
- [etitle](string) = "<li>"
- エントリータイトルの後に挿入する文字列
- [etitle](dformat) = "y/m/d"
- 日付のフォーマット y:年、m:月、d:日にそれぞれ置き換えられる
サンプルコード
スタンダード
<ul id="liRss"></ul>
$("#liRss").gRssFeed( "http://blog.sus-happy.net/feed/", 5 );
表組みで表示
<table id="tableRss"></table>
$("#tableRss").gRssFeed( "http://blog.sus-happy.net/feed/", 5, { bdate:"<tr><th>", edate:"</th>", btitle:"<td>", etitle:"</td></tr>" } );
定義済みリストで表示
<dl id="dlRss"></dl>
$("#dlRss").gRssFeed( "http://blog.sus-happy.net/feed/", 5, { bdate:"<dt>", edate:"</dt>", btitle:"<dd>", etitle:"</dd>" } );
日付フォーマットの変更
$("#dateRss").gRssFeed( "http://blog.sus-happy.net/feed/", 5, { dformat:"y年m月d日" } );
ソースコード
google.load("feeds", "1");
function initialize() {
/* -------------
ここに読み込み設定を記述する
------------- */
}
jQuery.fn.extend({
gRssFeed : function( url, num, opt) {
var tgt = $(this);
if( !opt ) opt = new Object();
var _bd = opt.bdate!=null ? opt.bdate : "<li>";
var _ed = opt.edate!=null ? opt.edate : " ";
var _bt = opt.btitle!=null ? opt.btitle : "";
var _et = opt.etitle!=null ? opt.etitle : "</li>";
var _df = opt.dformat!=null ? opt.dformat : "y/m/d";
var feed = new google.feeds.Feed(url);
feed.setNumEntries(num);
feed.load(function(result) {
if (!result.error) {
tgt.each( function() {
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var d_d = new Date(entry.publishedDate);
var year = d_d.getYear();
if (year < 2000) year += 1900;
var month = zeroFiller(d_d.getMonth()+1);
var day = zeroFiller(d_d.getDate());
var dateTxt = _bd+_df.replace("y", year).replace("m", month).replace("d", day)+_ed;
var anchorTxt = _bt+'<a href="'+entry.link+'" target="_blank">'+entry.title+'</a>'+_et;
$(this).append(dateTxt+anchorTxt);
}
} );
}
} );
}
});
google.setOnLoadCallback(initialize);
function zeroFiller(num) {
num = num+"";
return num.length < 2 ? '0'+num : num;
}