Google AJAX Feed API用のjQuery独自関数

ブログで更新を行ったものをRSSを利用して読み込む際に、サーバが別でもJavaScriptのみで実現できるので、何回か使ったことがあるのですが、毎度毎度HTMLの構成が変わったりしたので読み込みのJSを書き換えていました。

もう少し便利に使えないかな?と、jQueryを用いて汎用性高める目的で作ってみました。

関数概要

{target}.gRssFeed({url}, {num}, {option});

{target}
適用する対象
{url}
読み込むRSSのURL
{num}
表示させるエントリー数
{option}
bdate = “<li>”
日付の前に挿入する文字列
edate = “”
日付の後に挿入する文字列
btitle = “”
エントリータイトルの前に挿入する文字列
etitle = “<li>”
エントリータイトルの後に挿入する文字列
etitle = “y/m/d”
日付のフォーマット
y:年、m:月、d:日にそれぞれ置き換えられる

サンプルコード

スタンダード

1
<ul id="liRss"></ul>
1
$("#liRss").gRssFeed( "http://blog.sus-happy.net/feed/", 5 );

表組みで表示

1
<table id="tableRss"></table>
1
$("#tableRss").gRssFeed( "http://blog.sus-happy.net/feed/", 5, { bdate:"<tr><th>", edate:"</th>", btitle:"<td>", etitle:"</td></tr>" } );

定義済みリストで表示

1
<dl id="dlRss"></dl>
1
$("#dlRss").gRssFeed( "http://blog.sus-happy.net/feed/", 5, { bdate:"<dt>", edate:"</dt>", btitle:"<dd>", etitle:"</dd>" } );

日付フォーマットの変更

1
$("#dateRss").gRssFeed( "http://blog.sus-happy.net/feed/", 5, { dformat:"y年m月d日" } );

ソースコード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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 : "&nbsp;";
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;
}
Author: SUSH
Link: http://blog.sus-happy.net/google-feed-jquery/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.