← 簡単にサムネイルやバナーをスライドにするCarouFredSelの使い方！新型iMacが製造問題で発売は2013年になるかも！ →

2012-11-18

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

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

概要

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

　今回は前回の内容を応用して、複数のRSSに対応するようにします。

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

　前回と違うところは、複数のRSSをfor文で繰り返して読み込んでいるところです。表示する部分も１度配列に表示内容を全部貯めてから、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:'http://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[i]['url']);
		feed.setNumEntries(site[i]['disp_entry'])
		feed.load(function(rss) {
			if (!rss.error) {
				
				// RSSからサイトの情報を配列に格納
				channel['title'] = rss.feed.title;
				channel['link'] = rss.feed.link;
				channel['favicon'] = "http://favicon.hatena.ne.jp/?url=" + channel['link'];
				channel['description'] = rss.feed.description;
				channel['author'] = rss.feed.author;

				// RSSから記事の情報を配列に格納
				for (var j=0; j<rss.feed.entries.length; j++){
					
					var feed_entry = rss.feed.entries[j];
					var entry = {
						site_title : channel['title'],
						site_link : channel['link'],
						site_favicon : channel['favicon'],
						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['publishedDate']);
					entry['time'] = 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['date'] = yy + "年" + mm + "月" + dd + "日";
					
					entry['img'] = entry['content'].match(/src="(.*?)"/igm);
					
					if (entry['img'] != null) {
						for (var k=0; k<entry['img'].length; k++){
							entry['img'][k] = entry['img'][k].replace(/src=/ig, "");
							entry['img'][k] = entry['img'][k].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[l]['img'] != null) { Feed += '<img width="100" src="' + entries[l]['img'][0] + '">n'; }
		Feed += '<h2><img src="' + entries[l]['site_favicon'] + '">n'
					+ 'n'
					+ '<a href="' + entries[l]['site_link'] + '">' + entries[l]['site_title'] + '</a></h2>n'
					+ entries[l]['date']
					+ '<h3>n'
					+ '<a href="'+ entries[l]['link'] + '">' + 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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

<html>

<head>

<title>Google AJAX Feed API 複数ブログの場合</title>

// 初期設定

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:'http://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[i]['url']);

feed.setNumEntries(site[i]['disp_entry'])

feed.load(function(rss) {

if (!rss.error) {

// RSSからサイトの情報を配列に格納

channel['title'] = rss.feed.title;

channel['link'] = rss.feed.link;

channel['favicon'] = "http://favicon.hatena.ne.jp/?url=" + channel['link'];

channel['description'] = rss.feed.description;

channel['author'] = rss.feed.author;

// RSSから記事の情報を配列に格納

for (var j=0; j<rss.feed.entries.length; j++){

var feed_entry = rss.feed.entries[j];

var entry = {

site_title : channel['title'],

site_link : channel['link'],

site_favicon : channel['favicon'],

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['publishedDate']);

entry['time'] = 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['date'] = yy + "年" + mm + "月" + dd + "日";

entry['img'] = entry['content'].match(/src="(.*?)"/igm);

if (entry['img'] != null) {

for (var k=0; k<entry['img'].length; k++){

entry['img'][k] = entry['img'][k].replace(/src=/ig, "");

entry['img'][k] = entry['img'][k].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[l]['img'] != null) { Feed += '<img width="100" src="' + entries[l]['img'][0] + '">n'; }

Feed += '<h2><img src="' + entries[l]['site_favicon'] + '">n'

+ 'n'

+ '<a href="' + entries[l]['site_link'] + '">' + entries[l]['site_title'] + '</a></h2>n'

+ entries[l]['date']

+ '<h3>n'

+ '<a href="'+ entries[l]['link'] + '">' + 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>

</body>

</html>

動作サンプル

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

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

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

peace より:

2013年2月17日 11:53 PM
はじめまして。

今回の記事はとても参考になりました。
一つご質問なのですが、取得先のブログに画像が無かった場合は、どのように記述すれば良いのでしょうか？？
宜しくお願い致します。
返信
gaito777 より:

2013年2月19日 10:59 AM
記事中のサンプルでは、画像がなかった場合imgタグが入らないと思うのですが、まだ入ります？
返信
peace より:

2013年2月26日 8:09 PM
ご連絡ありがとうございます。

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

いろいろ試行錯誤して

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

で、解決しました。ありがとうございました。
返信
gaito777 より:

2013年2月27日 10:06 PM
解決して良かったです。
「no image」とか画像がない時用に表示させるものを用意しておくと、
レイアウトが統一して見えていいですねー
返信
peace より:

2013年2月28日 1:48 PM
ありがとうございます。

こちらのページを作って頂いて、本当に感謝しています。
今までやりたかったコトが実現できて本当に嬉しいです。
返信
gaito777 より:

2013年2月28日 3:19 PM
喜んでいただけて何よりです。
RSSが一つの場合のGoogle Feed APIの記事を書いた時に、
複数RSSの対応の仕方のご質問をいただいたので、
サンプルを作ってみました。
返信
toton より:

2013年3月1日 3:33 PM
はじめまして。

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

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

大変恐縮ですがご教授頂ければ幸いです。
返信
gaito777 より:

2013年3月2日 11:41 AM
こんにちは！
画像関連は、
86〜93行目：entry[‘img’]に関わる部分
112行目：imgタグの追加部分
などを削除すればいいと思います。
JavaScript勉強すればちょっとした改造も自分でできるようになりますので、
ぜひ頑張ってくださいねー
返信
toton より:

2013年3月2日 1:17 PM
ご教授ありがとうございます。
早速参考にさせて頂きます。
返信
HAL より:

2013年4月8日 11:24 PM
はじめまして。
恐れ入りますが、peaceさんが
else {
entry[‘img’]= [‘http://’;
}
と記述していた部分は、
どこに書けばいいのでしょうか・・・
初心者です。
よろしくお願い致します。
返信
gaito777 より:

2013年4月9日 12:48 AM
こんばんは！
if (entry[‘img’] != null) {
………
……
}else{
entry[‘img’]= ‘http://’;
}
この部分だと思います。
RSSに画像がなかった場合に、
強制的に決まったURLを入れる処理にしたようです。
返信
HAL より:

2013年4月9日 11:02 PM
シンタックスエラーがでることなく、記述することができました。
早速のお返事ありがとうございました。
一方、指定した画像が表示されないのですが、他に追加で記述する必要があるのでしょうか？
何度もすみません。
よろしくお願いいたします。
返信
gaito777 より:

2013年4月9日 11:31 PM
もちろんそのままではダメです。
表示するのは、entry[‘img’][0]ですので、
それに合わせて、
entry[‘img’][0]= ‘http://***’;
とすれば表示されるはずです。

これ以外が原因で画像が表示されない場合、
予想できる原因が多すぎて、特定するのが難しいですね。
返信
どうしてもわからないのですがより:

2013年6月29日 7:25 PM
こんばんわ、はじめまして
じゅんと申します

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

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

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

恐れ入りますがおしえて頂けると助かります。
返信
gaito777 より:

2013年6月30日 11:40 AM
こんにちは！
サンプルの112行目で、画像がある場合そのタグを追加するようにしているのですが、そのimgタグをaタグで囲めば可能です。
Feed += ‘n’;
↓
Feed += ‘n’;

こんな感じです。
返信
gaito777 より:

2013年6月30日 11:45 AM
aタグの中の　rel=”nofollow”　の部分は必要ありませんので、削除して下さい。
コメントにタグを書き込むと、なぜか自動で入ってしまうようです。
返信
じゅんより:

2013年6月30日 2:21 PM
ありがとうございます。
やってみます

ほんと、これ凄いです！！
返信
じゅんより:

2013年7月1日 12:11 AM
ありがとうございます。

きちんとできました。

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

今は
返信
じゅんより:

2013年7月1日 12:22 AM
途中で投稿されちゃったのですみません。

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

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

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

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

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

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

お手数ですが教えていただけると助かります
　
返信
gaito777 より:

2013年8月5日 2:42 PM
こんにちは！返信が遅くなってすみませんでした。

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

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

どこか別に原因がありそうですね。
返信
sym より:

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

2013年8月15日 10:13 AM
こんにちは！
それは変数を変えてあげればいいだけなので、
そんなに難しくはありません。

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

こうすれば、最初のsite[0]={title:▲▲};のタイトルが
反映されるはずです。
返信
sym より:

2013年8月16日 1:06 PM
早速のご返答ありがとうございます。
返答の通りに書き換えたらなりました。
ですが、タイトルがページを更新や開くたびにブログタイトルと記事タイトルがバラバラになってしまいます。実際の中身がタイトルとあわない状態です。
なにが原因なのでしょうか？
返信
gaito777 より:

2013年8月17日 12:29 AM
こんにちは！
残念ながらそれだけでは原因の特定は難しいです。ごめんなさい。
変数の中身がなにか、一つ一つ順番に追っていくと
間違いに気がつくと思いますので、
落ち着いて原因を探してみてください。
返信
sym より:

2013年8月17日 1:16 PM
見ず知らずのものにお答えいただきありがとうございました。自分で原因探ってみたいとおもいます。
これからもブログ拝見させていただきます。
返信
gaito777 より:

2013年8月17日 5:30 PM
こんにちは！
ブログにはできるだけ役に立つ情報を更新して行きたいと
思っていますので、また遊びに来ていただけるとうれしいですね！

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