zRSSFeedは、RSSのフィードを取得して、記事の一覧を出力することができるjQueryプラグインです。外部サイトの記事一覧を簡単に表示することができます。
zRSSFeedの使い方
ステップ1. zRSSFeedのダウンロードと設置
公式サイトでの配布は終了しているため、GitHubからファイルをダウンロードします。
jquery.zrssfeed.jsをサーバーの適当な場所にアップロードしてください。今回はjsフォルダ内にアップしたと仮定して説明します。
ステップ2. 記事一覧を表示したい場所にHTMLを記述
RSSから取得した記事一覧を表示したい箇所に以下のようなHTMLを記述します。
<div class="rss_area"></div>
rss_areaというクラスは好きなように変更してOKです。クラスはスクリプトを記述する際に使います。
ステップ3. スクリプトの記述
以下のようにjQueryとzRSSFeedを呼び出して、スクリプトを記述します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.zrssfeed.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.rss_area').rssfeed('http://rssblog.ameba.jp/yourblog/rss.html', {
limit: 3, //表示件数
header: false, //見出しの有無
titletag: 'span', //見出しを包括するタグ
content: false, //記事内容の表示有無
linktarget: '_blank', //リンクを別ウィンドウで表示
dateformat:'yyyy/MM/dd' //日付のフォーマット
});
});
</script>
rss_areaの部分はステップ2で指定したクラスを指定します。
headerやcontentは”true”を指定すると、表示されます。
アメブロのPRを非表示にする方法
アメブロのRSSを出力すると、たまにPR記事が表示されます。これを除外する方法を紹介したいと思います。
PR記事の配信を除外するには、jquery.zrssfeed.jsを修正します。
まずは「// Add feed row」のすぐ下に以下を追加します。
// Add feed row
if(entry.title.search("PR:") != 0){ //PR除外
if (options.linkredirect) feedLink = encodeURIComponent(feedLink);
rowArray[rowIndex]['html'] = '<'+ options.titletag +'><a href="'+ options.linkredirect + feedLink +'" title="View this feed at '+ feeds.title +'">'+ entry.title +'</a></'+ options.titletag +'>'
「//PR除外」と入れている行を追加してください。
続いて、「// Sort if required」のすぐ上にある”}”の上にもう1つ”}”を追加します。
} //PR除外
}
// Sort if required
if (options.sort) {
rowArray.sort(function(a,b) {
さらに「// Add rows to output」の2行下に以下を追加します。
// Add rows to output
$.each(rowArray, function(e) {
if(rowArray[e]['html'] !== undefined){ //PR除外
最後に「// Alternate row classes」のすぐ下にあるif分の閉じタグの下に”}”を追加します。
// Alternate row classes
if (row == 'odd') {
row = 'even';
} else {
row = 'odd';
}
}//PR除外
これでPR記事が非表示になります。
PR記事の除外に関連する箇所の全体を載せておきます。
// Add feed row
if(entry.title.search("PR:") != 0){ //PR除外
if (options.linkredirect) feedLink = encodeURIComponent(feedLink);
rowArray[rowIndex]['html'] = '<'+ options.titletag +'><a href="'+ options.linkredirect + feedLink +'" title="View this feed at '+ feeds.title +'">'+ entry.title +'</a></'+ options.titletag +'>'
if (options.date && pubDate) rowArray[rowIndex]['html'] += '<div>'+ pubDate +'</div>'
if (options.content) {
// Use feed snippet if available and optioned
if (options.snippet && entry.contentSnippet != '') {
var content = entry.contentSnippet;
} else {
var content = entry.content;
}
if (options.linkcontent) {
content = '<a href="'+ options.linkredirect + feedLink +'" title="View this feed at '+ feeds.title +'">'+ content +'</a>'
}
rowArray[rowIndex]['html'] += '<p>'+ content +'</p>'
}
// Add any media
if (options.media && xmlEntries.length > 0) {
var xmlMedia = xmlEntries[i].getElementsByTagName('enclosure');
if (xmlMedia.length > 0) {
rowArray[rowIndex]['html'] += '<div class="rssMedia"><div>Media files</div><ul>'
for (var m=0; m<xmlMedia.length; m++) {
var xmlUrl = xmlMedia[m].getAttribute("url");
var xmlType = xmlMedia[m].getAttribute("type");
var xmlSize = xmlMedia[m].getAttribute("length");
rowArray[rowIndex]['html'] += '<li><a href="'+ xmlUrl +'" title="Download this media">'+ xmlUrl.split('/').pop() +'</a> ('+ xmlType +', '+ _formatFilesize(xmlSize) +')</li>';
}
rowArray[rowIndex]['html'] += '</ul></div>'
}
}
} //PR除外
}
// Sort if required
if (options.sort) {
rowArray.sort(function(a,b) {
// Apply sort direction
if (options.sortasc) {
var c = a['sort'];
var d = b['sort'];
} else {
var c = b['sort'];
var d = a['sort'];
}
if (options.sort == 'date') {
return new Date(c) - new Date(d);
} else {
c = c.toLowerCase();
d = d.toLowerCase();
return (c < d) ? -1 : (c > d) ? 1 : 0;
}
});
}
// Add rows to output
$.each(rowArray, function(e) {
if(rowArray[e]['html'] !== undefined){ //PR除外
html += '<li class="rssRow '+row+'">' + rowArray[e]['html'] + '</li>';
// Alternate row classes
if (row == 'odd') {
row = 'even';
} else {
row = 'odd';
}
}//PR除外
});
このように、タイトルに「PR:」が入っている記事を非表示にしています。
あとがき
外部サイトのRSSを簡単に表示できるので、ブログだけ別サイトになっているような時に便利ですね。
アメブロPR記事の非表示については、もっと良い方法があるかもしれません。上記の方法だと、PR記事が配信された際に、limitで指定した表示件数よりも1件少なく表示されます。
それでもPR記事は非表示にしたい、という方はぜひお試しください。