アメブロのPR非表示も紹介!RSSから記事の一覧を出力することができるjQueryプラグイン「zRSSFeed」

アメブロのPR非表示も紹介!RSSから記事の一覧を出力することができるjQueryプラグイン「zRSSFeed」

アメブロのPR非表示も紹介!RSSから記事の一覧を出力することができるjQueryプラグイン「zRSSFeed」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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記事は非表示にしたい、という方はぜひお試しください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。