複数の外部サイトからRSSフィードを取得し、日付順に一覧表示する方法 with はてブ数

2010-07-04 Webサイト

今回は、Google AJAX Feed APIを使って複数の外部サイトからRSSフィードを取得し、日付順時刻順(2桁表示)に並び替えて自分のサイトにまとめて一覧表示する方法を紹介します。ついでにはてなブックマーク数も表示出来ます。


rssapn.png

上の画像が表示のサンプルです。
要するに、「Ayapon RSS!」みたいなものですね。AyaponRSSも悪くはないのですが(うちでも使わせてもらってますし)、↓みたいに使いにくいところが幾つかあるのでその点に不満がある方はこちらのやり方がオススメです。

  • 一番上に広告が入る。
  • 管理画面が凄く重い。
  • 一つのサイトに付き一つの新着記事しか表示出来ない。
  • カスタマイズ性があまり高くない。
  • サイトの登録に時間がかかる。
  • RSS更新の更新間隔が長い。(30分くらい?)

Google AJAX Feed APIを使う方法のいい点悪い点

  • 広告が入らない。
  • 管理はhtml
  • 一つのサイトに付き何個でも新着記事を取得できる。
  • CSSでどんなふうにでもカスタマイズ出来る。
  • RSS更新は、ほぼ即時反映。
  • はてなブックマーク数も表示可能。
  • × 表示し切るまでにコンマ数秒?数秒掛かる。(サンプルサイト参照
  • × htmlが分からないとカスタマイズに少し戸惑う。

というわけで、相互RSSアンテナサイト関連記事の表示にも使えますし、カスタマイズ性が高かったり結構メリットがあります。

それでは、以下導入方法です。

STEP.1 APIキーの取得
以下のサイトに登録してAPIキーを取得する。
http://code.google.com/intl/ja/apis/ajaxfeeds/signup.html

一番上の「生成されたキー」がAPIキーです。メモ帳にでもコピーしておいて下さい。他のは特に使いません。

STEP.2 自分のサイトへjavascriptコードの設置
以下のコードを自分のサイトの設置したい場所にコピペして下さい。
その際APIキーはSTEP.1で入手したものを入力して下さい。



<script type="text/javascript" src="http://www.google.com/jsapi?key=取得したAPIkey"></script>
<script type="text/javascript">
<!--//
google.load("feeds", "1");
var entryArray = new Array();
var entryNum = 0;
function initialize() {
feedAdd("http://japanese.engadget.com/rss.xml", 3);
feedAdd("http://feeds.gizmodo.jp/rss/gizmodo/index.xml", 2);
feedAdd("http://gigazine.net/index.php?/news/rss_2.0/", 1);//取得したサイトのRSSフィードを入力。足りない場合は適宜4,5,6....と増やす
}
function feedAdd(rssUrl, boolNum) {
var feed = new google.feeds.Feed(rssUrl);
feed.setNumEntries(3);//サイト1つあたりの取得するフィード数
feed.load(function(result) {
if (!result.error) {
for (var i = 0; i < result.feed.entries.length; i++) {
entryArray[entryNum] = result.feed.entries[i];
var date = new Date(result.feed.entries[i].publishedDate);
entryArray[entryNum].sortDate = ( date.getFullYear()*1000000 ) + ( (date.getMonth() + 1)*3600*32 ) + ( date.getDate()*3600 ) + ( date.getHours()*60 ) + date.getMinutes();
entryArray[entryNum].blogName = result.feed.title;
entryNum+=1;
}
}
if(boolNum==1){
feedOutput("feed", 100);//フィードの出力
}
});
}
function feedOutput(feedId, listNum){
var useFeed = "";
var useDate = "";
var container = document.getElementById(feedId);
entryArray = asort(entryArray, "sortDate");
if(listNum==100){//出力するリスト数
listNum = entryNum;
}
for (var i = 0; i < listNum; i++) {
var entry = entryArray[i];
var date = new Date(entry.publishedDate);
var m = date.getMonth() + 1;
if (m < 10) {m = "0" + m;}
var d = date.getDate();
if (d < 10) {d = "0" + d;}
var h = date.getHours();
if (h < 10) {h = "0" + h;}
var mn = date.getMinutes();
if (mn < 10) {mn = "0" + mn;}
useDate = m + "月" + d + "日";
useFeed += '<div style="float:left;width:120px;">'+ m + "/" + d + "(" + h + ':' + mn + ')' + '</div><div  style="float: left;width:400px;height:18px;overflow:hidden;"><a href="' + entry.link + '" target="_blank" title="' + entry.title + '【' + entry.blogName + '】">' + entry.title + '</a> <img src="http://b.hatena.ne.jp/entry/image/large/' + entry.link + '"></div><div style="float:right;width:150px;height:18px;overflow:hidden;">' + entry.blogName + '</div><br><hr size="1" />';
}
container.innerHTML = '<div>' + useFeed + '<div>Produced by <a href="http://neta-times.net/" target="_blank">NETA-Times</a></div></div>';
}
function asort(myArray, key){
return myArray.sort ( function (b1, b2) { return b1[key] > b2[key] ? -1 : 1; } );
}
google.setOnLoadCallback(initialize);
//-->
</script>
<div style="height:300px; width:700px; overflow:auto;" id="feed">Loading...</div>

STEP.3 取得したいRSSフィードのURLの入力
デフォルトではGIGAZINE,ギズモード,Engadgetのフィードを取得するように成っているので、そのURLの代わりに取得したいサイトのRSSフィードのURLを入力して下さい。

STEP.4 整形
おそらくそのままではサイトにフィットしないので、widthやheightの数値を適当な大きさに変更して下さい。(主に赤字
デフォでは縦300px,横700px,記事タイトル横400pxです。

やることは基本的にコピペだけなので簡単…だと思います。

ちなみにこれがこのコードを使って作ったサイトです。

「コードが正常に動かないんだけどおおおおおお」等なにか有りましたらコメント下さい。

参考:くらげだらけ



Ayapon, RSS, RSSフィード取得ツール, Webサイト, リーダー, 取得, 無料ソフト

18 Responses to “複数の外部サイトからRSSフィードを取得し、日付順に一覧表示する方法 with はてブ数”

  1. 質問です
    2010-07-01 at 20:13
    1

    毎回すばらしい情報をありがとうございます。
    一つ質問があるのですが、このまま貼り付けるとサイト順に表示されてしまうのですが、日付順に並べるようにするにはどうしたらいいでしょうか

  2. t@tsu
    2010-07-01 at 20:56
    2

    原因(と思われる)箇所を修正しましたので、もう一度お試しください?。
    まだダメな場合はお手数ですがもう一度お知らせ下さい(ノ∀`)

  3. 2010-11-07 at 14:11
    3

    初めまして。
    以前よりこちらのコードを使用させて頂いておりとても感謝しております。
    が、問題が発生致しましたので質問させて頂きます。
    ・http://www.ayushii.net/archives/1333812.html
    に設置している物が私の環境WinXPSP3ではブラウザにより動きません。
    firefox3.6.12 問題無 / IE8、Googlechrome7.0517.44 ほぼ動作せず

    [エラー内容]
    ‘publishedDate’ は Null またはオブジェクトではありません。
    ライン: 174 文字: 1 コード: 0

    ・http://www.ayushii.net/archives/1172606.html
    も同様のエラー頻発。10個程サイト内に設置している他のは頻発はしませんが、やはりIEとchromeだとエラーが出ます。

    記事本文内に直接jsは設置してありますので、お手数ですが一度ご覧頂き、対処方法やアドバイスをお願いできますでしょうか。
    ご多忙中とは思いますがどうか宜しくお願い致します。

  4. 2011-03-30 at 17:40
    4

    いつも更新おつかれさまです
    FireFoxではほぼ完璧に表示されるのですが、IEやsafariなどで閲覧すると、サイトによっては何度も読み込まないと表示されないことがあります
    おそらくブラウザごとのスクリプト演算の違いが原因だと思いますが、なんとかIEだけでも全て表示されるようにはできないでしょうか

  5. 大変参考になりました。ありがとうございました。

  6. 質問
    2011-08-17 at 04:24
    6

    参考にさせていただきました。
    FC2などでたまに、topに常に表示させたい文章を未来の日付で書かれている方がいたりするので多少改定しました。

    暫定的に現在は、feedAdd関数内のentryArray[entryNum].sortDate呼び出しの直前で行うように、現時刻との比較を行うようにさせています。

    イニシャライズの中で本来取得データが未来のものであったら、同一フィード内の次の記事を取りに行くといったコードにさせたいと思っています。
    (イニシャライズの中で日付の正当性を判定する事でフィード取得指定数によらず、現時刻と同等かそれより過去のものを指定取得数分拾ってくる事が可能になると考えている為)
    そこで質問なのですが、同一フィード内の「次の記事を取りに行く」 というのはどのようにGoogleFeedAPIを呼び出したらよいのでしょうか。

  7. aiio
    2011-10-14 at 19:13
    7

    これを同一ページに複数表示する方法はないのでしょうか?

  8. 質問です
    2011-12-03 at 11:26
    8

    大変助かっているのですが、TypeError:’Undefined’ is not an object(evealuating’entry.publishedDate’)というエラーが発生して読み込める時と読み込めない時があるのですが、解決方法を教えていただけないでしょうか・・・

  9. 質問になります。
    2012-02-15 at 12:42
    9

    ”広告が入らない”とあるのですが、気が付いたら
    「PR: パナセンスでWiMAXが格安!キャンペーン実施中」なるものが表示されていました。
    解決方法を教えていただけませんでしょうか?
    よろしくお願いいたします。

  10. Jef Raskin
    2012-02-15 at 12:48
    10

    管理人です。

    不思議ですね。
    おそらくGoogleのAPIの仕様変更ではないかと思われます。したがって、私には解決策が思い浮かびません。

    お力になれなくて申し訳ないです。

  11. tronco
    2013-01-01 at 08:04
    11

    あけましておめでとうございます

    2012/12/31の記事より、2013/1/1の記事が下になってしまうのは、GoogleAPIの仕様でしょうがないでしょうか・・・。

  12. hakolit
    2013-01-09 at 15:49
    12

    はじめまして。
    情報参考にさせていただきまして助かっております。
    troncoさんが仰る通り2012年末の記事が2013年始の記事より上にソートされる現象が私のサイトでも発生しました。

    entryArray[entryNum].sortDate = ( date.getFullYear()*1000000 ) + ( (date.getMonth() + 1)*3600*32 ) + ( date.getDate()*3600 ) + ( date.getHours()*60 ) + date.getMinutes();

    のところで、date.getFullYear()*1000000をdate.getFullYear()*10000000に変更すると、正しい順序で表示される模様です。

    おそらく、sortdateの数値が2013年1月x日より2012年12月31日のほうが上回ってしまうために順序が狂うのかと思われます。

  13. tronco
    2013-01-21 at 00:08
    13

    hakolitさん、ありがとうございました!

    お礼が遅くなってスミマセン。

    うまいこといきました!助かりました^^

  14. 2013-07-20 at 14:40
    14

    複数の外部サイトからRSSフィードを取得し、日付順に一覧表示する方法 with はてブ数 | ネタドキ!

  15. masa
    2014-07-23 at 22:18
    15

    この記事とても参考にさせていただいています。
    私が探していた内容にピッタリで、とても喜んでいます。

    しかし、実際にコピーさせていただき、そのまま動作をしてみますと、
    1つだけどうしてもうまくいかないところがありました。

    読み込むはずの複数の外部ブログが、うまく読み込まれないことが頻繁に起こりました。記事のソースでそのまま動作させますと、
    「engadget」「gizmodo」「gigazine」の3ブログのうち、
    「engadget」「gizmodo」が読み込まないことがあります。
    何度も再読み込みすると、読み込んだり、読み込まなかったり不安定な表示になってしまします。

    他は、全くと言っていいほど完璧で理想通りなのですが、不安定な読み込みの原因がどこにあるのかさっぱり分かりません。

    何卒、ご教示の程、よろしくお願い申しあげます。

Leave a Comment