素材の壺

RSSは今でも更新情報を通知するための重要なファイルで、多くのブログやニュースサイト等で公開されています。javascriptやPHPでRSSをパースする事で最新情報としてサイトに表示したりする事もよくあるかと思いますが、今回はGoogleが公開しているRSSをパースするためのAPI「Google Feed API」の簡単なサンプルをご紹介します。

「Google Feed API」はjavascriptで動作するため、PHPが動作しない環境でも導入できる場合が多い優れもの。TITLE、LINK、DESCRIPTIONといった情報を簡単に取得できます。まずは下記のコードをHTMLの</head>直前あたりに記述します。

<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
var xmlUrl = "http://labo.520328.jp/feed/";
var setNum = 5;
var setID = "feed";
google.load("feeds", "1");
function initialize() {
    var html = '';
    var feed = new google.feeds.Feed(xmlUrl);
    feed.setNumEntries(setNum);
    feed.load(function(result) {
        if (!result.error){
            var container = document.getElementById(setID);
            for (var i = 0; i < result.feed.entries.length; i++) {
                var entry = result.feed.entries[i];
                var title = entry.title;
                var link = entry.link;
                var description = entry.contentSnippet;
                html += '<p><a href="' + link + '">' + title +　'</a><br />' + description + '</p>';
            }
            container.innerHTML = html;
        }
    });
}
google.setOnLoadCallback(initialize);
</script>

そしてこの情報を表示したい箇所に下記のとおりdivを記述します。

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

この例のまま記述すると、当ブログの最新記事が5件表示されたかと思います。それではカスタマイズに必要な箇所を確認していきます。

カスタマイズ

var xmlUrl = "http://labo.520328.jp/feed/";

ここにはパースしたいRSSのURLを記述します。

var setNum = 5;

ここは取得したい件数を記述します。RSSフィードに登録されている件数以内の数値を入れて下さい。

var setID = "feed";

ここで指定したID名の箇所に情報が表示されます。

var title = entry.title;
var link = entry.link;
var description = entry.contentSnippet;

ここでTITLEとLINKとDESCRIPTIONを定義しているわけですが、一点だけ不可解な箇所がありますね。TITLEとLINKはそのままの名前ですが、DESCRIPTIONだけ「contentSnippet」となっています。この仕様に気付くまで「DESCRIPTIONは取得出来ないの？」と困惑しましたが、この記述ですんなり取得出来ます。

html += '<p><a href="' + link + '">' + title +　'</a><br />' + description + '</p>';

あとはここで表示用に整形すれば、完了です。

特に引っかかったのはDESCRIPTIONが表示されないというところでしたが、それも含め理解すればかなりシンプルな書き方でRSSフィードをパース出来ます。「Google Feed API」のサンプル一例でした。