【Google Feed APIを使用して、複数のサイトのRSSフィードを取得して更新日順でソート（並び替え）して、さらにそれを「サムネイル付きで」表示する方法】

API このページをあとで読む

以前、下のようなページを書きました。

【見た目も中身も大切だ】WordPressで画像つきのrssフィードを取得。静的htmlに表示このページをみる

記事の趣旨はタイトルの通り、「静的ページにブログの最新の更新情報を画像付きで表示する方法」を書いたものです。これを読んでいただいた方の多くから、

「複数のサイトのRSSをこうやってまとめて表示できないかな。サムネイル付きでよ！」

みたいな会話が出てきてましたんで、ちょっと調べてみましたが、やり方がありました。結構使えると思いますので、興味がありましたらご参考ください。

2015/12/02追記

2015/12/02からGoogle Feed APIが403エラーになって使えない、という方が多いという話を聞いたので、Google Feed APIのページを見ると以下のように書かれていました。

This API is officially deprecated. See our deprecation policy in our Terms of Service for details.

このAPIは非推奨となっていますね。詳細は追いかけている途中です。

2015/12/04追記

「なんか使えるようになっていた」という話を聞いて、私も動作確認しましたが動いていますね。

とは言え、非推奨となっていることには変わりありません。代替手段は今のうちに考えておいた方がいいです。ちなみにGoogle Feed APIを使わない方法の１つとして、以下のリンク（英文）のようにjQueryを使うとできます。

How to parse an RSS feed using JavaScript?

また、WordPressで似たようなことを行うには「fetch feed」を使うとできます。

この記事の内容をある程度ご理解頂けている方は、上記の方法で代替するのはそれほど難しくないんじゃないかな、とは思っています。

というわけで、ちょっとこの先の動向が読めませんが・・・もし今後使えなくなった後でも、コードの書き方や考え方などはどこかで使うかもしれないと思っているので、このままページは掲載いたします。

Google Feed APIを利用しましょう

１．まずは・・・Google Feed APIとは何か

ブログなどで用意されているRSSフィード（最新情報を配信してくれるもの）を読み込んで、任意の場所に表示させることができます。

もっと単純に言うと、「他のサイトの最新の更新情報を、自分のホームページに表示させる」 これができます。（※以前は利用の際にAPIキーが必要だったんですが、現在は不要です）

２．最初に「Google Feed API」を使用するためのスクリプトを読み込みます

下のコードを書きます。コードの意味は「これからAPIを使用しますよ～」って感じです。

<head>～</head>内に書きます。

<script src="https://www.google.com/jsapi" type="text/javascript"></script>

これを書いてようやくスタート・・・。

３.それでは、コードを書きます（サンプルです）

ちょっと長いですけども、下のような感じで書きました。コード内で特に注意する点は、コメントを書いています。<head>～</head>内に書きます。

<script type="text/javascript">
google.load("feeds", "1");
var FA = new Array( //配列です。ここに、取得したいRSSフィードを加えるだけです
 "https://www.imamura.biz/blog/feed/", //私のブログのフィードURL
 "http://attrip.jp/feed", //attripさんのブログのフィードURL（なぜか「/」を入れると取得できない）
);
function initialize() {
 var feedsArr = new Array();
 var numEntr = 1; //各サイトのフィードを読み込む数（3サイトなので、投稿が3つ表示されます）
 var container = document.getElementById("feed");
 var cnt = FA.length;
 for (var k=0; k<FA.length; k++) {
  var feed = new google.feeds.Feed(FA[k]);
  feed.setNumEntries(numEntr);
  feed.setResultFormat(google.feeds.Feed.JSON_FORMAT); //JSONフォーマットに整形
  feed.load(function(result) {
  if (!result.error) {
   for (var i = 0; i < result.feed.entries.length; i++) {
    var entry = result.feed.entries[i];
    var eimg = "";
    var imgCheck = entry.content.match(/(http:){1}[\S_-]+((\.png)|(\.jpg)|(\.JPG)|(\.gif))/); //データを取得する拡張子を指定
    if(imgCheck){
     eimg += imgCheck[0]; //配列の1番目に格納されたデータを取得（つまり、1枚目の画像を取得）
    } else {
     eimg += 'https://www.imamura.biz/blog/wp-content/themes/alltuts/images/logo_blog8.png'; //画像が取得できなかった場合の代替画像のURLを指定
 }
var attributes = ["title", "link", "publishedDate", "contentSnippet"];
 var ind = feedsArr.length;
 feedsArr[ind] = new Array();
 feedsArr[ind][0] = Date.parse(entry[attributes[2]]); // 日付でソート（並び替え）
 feedsArr[ind][1] = entry[attributes[1]]; // link
 feedsArr[ind][2] = entry[attributes[2]]; // publishedDate
 feedsArr[ind][3] = entry[attributes[3]]; // contentSnippet
 feedsArr[ind][4] = entry[attributes[0]]; // title
 feedsArr[ind][5] = result.feed.title; // site title
 feedsArr[ind][6] = eimg; // thumbnail
 }
 }
 cnt--;
 if (cnt == 0) {
 feedsArr.sort();
 feedsArr.reverse();
 for (var j = 0; j < feedsArr.length; j++) {
 var aE = document.createElement("A");
 var h3 = document.createElement("H3");
 var p = document.createElement("P");
 var spanD = document.createElement("SPAN");
 aE.href=aE.title=feedsArr[j][1];
 aE.appendChild(document.createTextNode(feedsArr[j][4]));
 h3.appendChild(aE);
 spanD.appendChild(document.createTextNode(feedsArr[j][2]));
 spanD.appendChild(document.createTextNode(" ("+feedsArr[j][5]+")"));
 p.appendChild(document.createTextNode(feedsArr[j][3]));
 p.appendChild(spanD);
 container.appendChild(h3);
 container.appendChild(p);
 var img_link = document.createElement("img");
 img_link.setAttribute("src", feedsArr[j][6] );
 img_link.setAttribute("width", "100" ); //幅：width属性に100pxを指定
 container.appendChild(img_link); //img（画像）タグを出力
 }
 }
 });
 }
}
google.setOnLoadCallback(initialize);
</script>

やっていることはそれほど難しくなくて、RSSフィードで取得した情報をJSON形式に変換して、HTMLで出力しているだけのことです。

４.最後に、フィードを表示させるhtmlを書きましょう

下のコードをhtmlファイルの<body>～</body>内に書きます。

<div id="feed"></div>

これは何かと言うと、先ほど長々と書いたコードを、表示させる場所を作っているって感じでOKじゃないかと思います。まあ・・・よくわからないですかね。この表現がいつも難しいと感じます。

が、とりあえず以上です。

それでは、具体的にどんな表示になるの？ってのが知りたいことだと思いますので、下に書きました。

上のサンプルを実行すると、こうなります

更新順に並んで、サムネイルもばっちりです。もちろん、この3サイトが更新されると、表示順も変わります。（新しい更新が一番上に表示されるってことになります）

Attripさんの更新は、とにかく早すぎ！ｗ

おまけ：私はこう使っています

例えば私は、コードをカスタマイズして、さらにCSSなどで整形して横並びにしています。

表示の方法も、例えばあらかじめ一定数のサイトを登録しておいて、ページ表示の度に、ランダムで表示させるってのも面白いかもですね。

まとめ

Google Feed APIは、複数のサイトをまとめるようなよくある「ポータルサイト」でよく利用を見かけます。

今回ご紹介した方法は、

  • 読み込んだサイトのRSS全体を更新日でソートして
  • 視覚的にも目に留まりやすい画像（サムネイル）をつけて表示できます

ので、用途はポータルサイトに関わらず、いろいろ想像できます。

例えば私が今回設置しているように、普段から交流あったり、自分が好きで読んでいるブログやサイトなどを表示することで、「あ～、このサイト、自分も読んでますよ！おもしろいですよね！」などと言うような、思わぬ共通点も得られるんじゃないか、と思います。

また、今回ご紹介した「Google Feed API」は、フィードの形で配信されているものならば、概ね取得できます。加えて、例えば同じGoogleのサービスで「Feedburner」といった外部サービスからも取得できますので、わざわざフィードのURLにアクセスしてデータを取得しに行く工程も省略でき、トラフィックも軽減できることも、メリットの1つだと思います。

今回はWordPressで作った私のブログでやってみましたが、「Google Feed API」はJavascriptが利用できる環境でしたら、だいたいどこでもできます。詳しくは、こちらの公式サイトでどうぞ。

参考リンク

画像取得のコード以外は、ほぼこちらのサイトを参考にいたしました。

Google AJAX Feed API and multiple feeds |xhtml.ru

とても勉強になりました。大変助かりました！

今のところ問題なく動作していますが、ご紹介した内容で、もしかしたらもっと効率のいいコードの書き方があるかもしれないです。

もっとこうすればいいよ！みたいなのがございましたら、是非ともご教示いただけますと幸いです。

著者:bouya Imamura