簡単に外部RSSをサイトに表示できるGoogle Feed API【複数RSS対応編】

 前回外部のRSSをサイトに表示するのに「Google Feed API」の使い方を解説しました。前回はサイト一つ分のRSSを処理するだけでしたが、今回はご要望の多かった複数のRSSを処理する方法を解説します。

概要

 ※基本的な形は前回記事と同じです。「Google Feed API」の基礎的な部分は、前回の記事を参考にして下さい。 簡単に外部RSSをサイトに表示できるGoogle Feed API【基本編】


 今回は前回の内容を応用して、複数のRSSに対応するようにします。
 全体の処理の流れとしては、複数のRSSを配列に格納して順番にGoogleに送信し、返ってきた全てのエントリーの内容を全部配列に格納して日付でソートかけた上で、HTML化させて表示する流れとなります。

 前回と違うところは、複数のRSSをfor文で繰り返して読み込んでいるところです。表示する部分も1度配列に表示内容を全部貯めてから、HTML化して表示させています。





サンプル 複数RSSに対応する場合

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google AJAX Feed API 複数ブログの場合</title>
<meta name="keywords" content="Google,RSS,Feed,API" />
<meta name="description" content="Google AJAX Feed APIのサンプル" />
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">

// 初期設定
var disp_entry_count = 8; //表示させたい記事の数

// RSS URL
var site = new Array();

site[0] = {
title:'GIZUMODO',
url:'http://feeds.gizmodo.jp/rss/gizmodo/index.xml',
disp_entry:2 // 取得する記事の数
};

site[1] = {
title:'Gigazin',
url:'http://feed.rssad.jp/rss/gigazine/rss_2.0',
disp_entry:3 // 取得する記事の数
};

site[2] = {
title:'ウェブソク',
url:'https://news.7zz.jp/feed',
disp_entry:5 // 取得する記事の数
};

var channel = new Array();
var entry = new Array();
var entries = new Array();
var Feed = "";

google.load("feeds", "1");
function init() {

var site_count = 0;

for (var i=0; i<site.length; i++){

// 読み込むRSSを設定
var feed = new google.feeds.Feed(site&#91;i&#93;&#91;'url'&#93;);
feed.setNumEntries(site&#91;i&#93;&#91;'disp_entry'&#93;)
feed.load(function(rss) {
if (!rss.error) {

// RSSからサイトの情報を配列に格納
channel&#91;'title'&#93; = rss.feed.title;
channel&#91;'link'&#93; = rss.feed.link;
channel&#91;'favicon'&#93; = "http://favicon.hatena.ne.jp/?url=" + channel&#91;'link'&#93;;
channel&#91;'description'&#93; = rss.feed.description;
channel&#91;'author'&#93; = rss.feed.author;

// RSSから記事の情報を配列に格納
for (var j=0; j<rss.feed.entries.length; j++){

var feed_entry = rss.feed.entries&#91;j&#93;;
var entry = {
site_title : channel&#91;'title'&#93;,
site_link : channel&#91;'link'&#93;,
site_favicon : channel&#91;'favicon'&#93;,
title : feed_entry.title,
link : feed_entry.link,
content : feed_entry.content,
contentSnippet : feed_entry.contentSnippet,
publishedDate : feed_entry.publishedDate
};

var date = new Date(entry&#91;'publishedDate'&#93;);
entry&#91;'time'&#93; = date.getTime();
var yy = date.getYear();
var mm = date.getMonth() + 1;
var dd = date.getDate();
if (yy < 2000) { yy += 1900; }
if (mm < 10) { mm = "0" + mm; }
if (dd < 10) { dd = "0" + dd; }
entry&#91;'date'&#93; = yy + "年" + mm + "月" + dd + "日";

entry&#91;'img'&#93; = entry&#91;'content'&#93;.match(/src="(.*?)"/igm);

if (entry&#91;'img'&#93; != null) {
for (var k=0; k<entry&#91;'img'&#93;.length; k++){
entry&#91;'img'&#93;&#91;k&#93; = entry&#91;'img'&#93;&#91;k&#93;.replace(/src=/ig, "");
entry&#91;'img'&#93;&#91;k&#93; = entry&#91;'img'&#93;&#91;k&#93;.replace(/"/ig, "");
}
}
entries.push(entry);
}
}
site_count++;
if (site.length == site_count){ disp(); }
});
}
}

function disp() {

//日付順に並べ替え
entries.sort (function (b1, b2) { return b1.time < b2.time ? 1 : -1; } );

// 記事をhtmlに整形
for (var l=0; l<disp_entry_count; l++){
if (entries.length < l+1){ break; }

if (entries&#91;l&#93;&#91;'img'&#93; != null) { Feed += '<img width="100" src="' + entries&#91;l&#93;&#91;'img'&#93;&#91;0&#93; + '">n'; }
Feed += '<h2><img src="' + entries&#91;l&#93;&#91;'site_favicon'&#93; + '">n'
+ 'n'
+ '<a href="' + entries&#91;l&#93;&#91;'site_link'&#93; + '">' + entries[l]['site_title'] + '</a></h2>n'
+ entries[l]['date']
+ '<h3>n'
+ '<a href="'+ entries&#91;l&#93;&#91;'link'&#93; + '">' + entries[l]['title'] + '</a>n'
+ '</h3>n'
+ '<p>contentSnippet:' + entries[l]['contentSnippet'].substr(0, 100) + '……</p>nn';
}
// 表示するタグに追加
$('#topics').append( Feed );
}

google.setOnLoadCallback(init);

</script>
</head>
<body>
<h1>Google AJAX Feed API 複数ブログの場合</h1>
<!-- RSSを表示するタグ -->
<div id="topics"></div>
</body>
</html>
Google AJAX Feed API 複数ブログの場合 表示例

動作サンプル


 「disp_entry」で、そのRSSから読み込む記事の数を個別に設定できます。また「disp_entry_count」で最終的に表示するエントリーの数を設定するようにしています。


 表示する画像は、記事に含まれている最初の画像を表示するようにしていますが、読み込むRSSによっては、広告のバナーを拾ってしまう場合もあります。その辺りは読み込むRSSに合わせて、適宜調整してください。


 最後の出力の部分を、自分のお好みでHTMLを調整して、CSSでデザインすれば、はい!できあがり!簡単便利です!








コメント

  1. peace より:
    はじめまして。

    今回の記事はとても参考になりました。
    一つご質問なのですが、取得先のブログに画像が無かった場合は、どのように記述すれば良いのでしょうか??
    宜しくお願い致します。
  2. gaito777 より:
    記事中のサンプルでは、画像がなかった場合imgタグが入らないと思うのですが、まだ入ります?
  3. peace より:
    ご連絡ありがとうございます。

    cssで横並びに配置した場合に、imgタグが入らないと高さが合わずにレイアウトが崩れてしまっていましたので、高さを合わせるためにダミー画像が必要でした。

    いろいろ試行錯誤して

    else {
    entry[‘img’]= [‘http://’];
    }

    で、解決しました。ありがとうございました。
  4. gaito777 より:
    解決して良かったです。
    「no image」とか画像がない時用に表示させるものを用意しておくと、
    レイアウトが統一して見えていいですねー
  5. peace より:
    ありがとうございます。

    こちらのページを作って頂いて、本当に感謝しています。
    今までやりたかったコトが実現できて本当に嬉しいです。
  6. gaito777 より:
    喜んでいただけて何よりです。
    RSSが一つの場合のGoogle Feed APIの記事を書いた時に、
    複数RSSの対応の仕方のご質問をいただいたので、
    サンプルを作ってみました。
  7. toton より:
    はじめまして。

    当方生憎javascriptはサッパリなのでまさしくやりたかった事が書かれたこの記事はとても参考になります。

    ところで質問なのですが、画像の表示はそもそも不要なので画像関係の処理を丸々削ぎ落としたいのですが、どのようにしたらよろしいのでしょうか?

    大変恐縮ですがご教授頂ければ幸いです。
  8. gaito777 より:
    こんにちは!
    画像関連は、
    86〜93行目:entry[‘img’]に関わる部分
    112行目:imgタグの追加部分
    などを削除すればいいと思います。
    JavaScript勉強すればちょっとした改造も自分でできるようになりますので、
    ぜひ頑張ってくださいねー
  9. toton より:
    ご教授ありがとうございます。
    早速参考にさせて頂きます。
  10. HAL より:
    はじめまして。
    恐れ入りますが、peaceさんが
    else {
    entry[‘img’]= [‘http://’;
    }
    と記述していた部分は、
    どこに書けばいいのでしょうか・・・
    初心者です。
    よろしくお願い致します。
  11. gaito777 より:
    こんばんは!
    if (entry[‘img’] != null) {
    ………
    ……
    }else{
    entry[‘img’]= ‘http://’;
    }
    この部分だと思います。
    RSSに画像がなかった場合に、
    強制的に決まったURLを入れる処理にしたようです。
  12. HAL より:
    シンタックスエラーがでることなく、記述することができました。
    早速のお返事ありがとうございました。
    一方、指定した画像が表示されないのですが、他に追加で記述する必要があるのでしょうか?
    何度もすみません。
    よろしくお願いいたします。
  13. gaito777 より:
    もちろんそのままではダメです。
    表示するのは、entry[‘img’][0]ですので、
    それに合わせて、
    entry[‘img’][0]= ‘http://***’;
    とすれば表示されるはずです。

    これ以外が原因で画像が表示されない場合、
    予想できる原因が多すぎて、特定するのが難しいですね。
  14. どうしてもわからないのですが より:
    こんばんわ、はじめまして
    じゅんと申します

    大変参考にさせていただきました。

    自分のブログにとりいれたく、頑張っているのですが、
    どうしてもお伺いしたいことがあり、コメントします

    RSSから取り入れた画像にもリンクを張らせるのであれば
    どこをどういじればいいのでしょうか?

    恐れ入りますがおしえて頂けると助かります。
  15. gaito777 より:
    こんにちは!
    サンプルの112行目で、画像がある場合そのタグを追加するようにしているのですが、そのimgタグをaタグで囲めば可能です。
    Feed += ‘n’;

    Feed += ‘n’;

    こんな感じです。
  16. gaito777 より:
    aタグの中の rel=”nofollow” の部分は必要ありませんので、削除して下さい。
    コメントにタグを書き込むと、なぜか自動で入ってしまうようです。
  17. じゅん より:
    ありがとうございます。
    やってみます

    ほんと、これ凄いです!!
  18. じゅん より:
    ありがとうございます。

    きちんとできました。

    もう一つだけ教えてもらってもいいでしょうか?

    今は
  19. じゅん より:
    途中で投稿されちゃったのですみません。

    お時間があればもうひとつ教えてください。

    今はRSSの時間でソートしていますが、ソートせず、登録順での表示は可能ですか?

    例えば、ブログ上のフッターの中に入れようとしたら、CSSで表示方法を指定し、headの中にhead部分・bodyの中のフッターの中にbody部を入れますよね。

    その際に、できればRSS登録順でそのまま表示させるとすると、
    初心者的には「 //日付順に並べ替え
    entries.sort (function (b1, b2) { return b1.time < b2.time ? 1 : -1; } );」ここを消しちゃえばいいのかな?なんて思ったのですが、表示そのものが消えてしまいました。

    表示が消えちゃうということは、プログラムがどこかで止まっている。もしくはバグっっちゃったということですか?

    もっと勉強しないとダメですね

    お手数ですが教えていただけると助かります
     
  20. gaito777 より:
    こんにちは!返信が遅くなってすみませんでした。

    その通りです。
    「//日付順に並べ替え……」の部分を削除するだけです。

    配列「entries」の中身を文字通り日付でソートしているだけなので、
    この部分の処理がされなければそのままのはずです。

    どこか別に原因がありそうですね。
  21. sym より:
    初めまして。google feed apiを設置しようとおもい、このサイトにたどり着きました。いろいろ調べて試してみましたが、web sokuさんのサイトが一番やり方がわかりやすく利用させていただいています。
    そこで質問なんですが、ブログのタイトルがものすごく長いタイトルがあるのですが、このブログタイトルを自分の手入力したタイトルに変更することはできないのでしょうか?
    この記事の
    site[2] = {
    title:’▲▲’,
    url:’http://news.7zz.jp/feed’,
    disp_entry:5 // 取得する記事の数
    };
    ▲▲の部分を入力してなるのかなぁとおもったのですが、現状は▲▲の部分は自分の入力ですが、表示は各ブログオーナーのブログタイトルが表示されています。
    もし、時間がありましたらお返事お待ちしております。
    よろしくお願いいたします。
  22. gaito777 より:
    こんにちは!
    それは変数を変えてあげればいいだけなので、
    そんなに難しくはありません。

    サンプル55行目
    channel[‘title’] = rss.feed.title;

    channel[‘title’] = site[site_count][‘title’];

    こうすれば、最初のsite[0]={title:▲▲};のタイトルが
    反映されるはずです。
  23. sym より:
    早速のご返答ありがとうございます。
    返答の通りに書き換えたらなりました。
    ですが、タイトルがページを更新や開くたびにブログタイトルと記事タイトルがバラバラになってしまいます。実際の中身がタイトルとあわない状態です。
    なにが原因なのでしょうか?
  24. gaito777 より:
    こんにちは!
    残念ながらそれだけでは原因の特定は難しいです。ごめんなさい。
    変数の中身がなにか、一つ一つ順番に追っていくと
    間違いに気がつくと思いますので、
    落ち着いて原因を探してみてください。
  25. sym より:
    見ず知らずのものにお答えいただきありがとうございました。自分で原因探ってみたいとおもいます。
    これからもブログ拝見させていただきます。
  26. gaito777 より:
    こんにちは!
    ブログにはできるだけ役に立つ情報を更新して行きたいと
    思っていますので、また遊びに来ていただけるとうれしいですね!

    プログラムはザックリ見てしまうと失敗に気づかないことが多いので、
    できるだけ細かく処理を追っていくといいと思います。
    面倒ですが、変数の中身をいちいち書き出してみるといいですよ。
    私もそれで間違いに気がつくことが多いです……

gaito777 へ返信する コメントをキャンセル

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください