javascriptから外部のRSSフィードを読み込みたいとき、基本的にクロスドメイン制約により読み込むことができません。そんな問題を解決するのがGoogleFeedAPIです。
今回はGoogle Feed APIを使って非同期でRSSやATOMを読み込む方法をご紹介していきます。
追記
GoogleFeedAPIは12月2日午前で廃止となりました。
現在はリクエストを投げることはできますが、503403エラーが返ってくるそうです。
追記
GoogleFeedAPIは12月4日午前に復活したそうです。
一時的な障害だったのか、騒動への配慮なのかは不明ですが非推奨であることには変わりないので、移行を考えたほうが良いでしょう。
Google Feed API Terms of Service
Google Feed APIの使い方
Google Feed APIを読み込むにはGoogle Libraries APIを読み込みます。
<!DOCTYPE html>
<html>
<head>
<!-- Google Libraries APIを読み込む -->
<script src="https://www.google.com/jsapi"></script>
<script src="sample.js"></script>
</head>
<body>
<!-- Feedを書き出すdiv -->
<div id="feed"></div>
</body>
</html>
Google Libraries APIを使用するとjavascriptのライブラリを動的に読み込む事ができ、今回使用するGoogle Feed APIはここから読み込みます。
ちなみにGoogle Feed API以外ではjqueryなども読み込むことができます。
では実際にjavascriptのコードを読んでいきましょう。下記コードはGoogle公式のサンプルコードを一部書き直したものです。
// GoogleJavascriptAPIでfeedAPIとバージョンを指定して読み込む
google.load('feeds', '1');
// 初期化処理
function initialize() {
var feed = new google.feeds.Feed('http://example.com/your/rss/url/feeds');
// 読み込むエントリーの数
feed.setNumEntries(1);
// feedを読み込む
feed.load(function(result) {
if(result.error || !('feed' in result)) {
return;
}
// feedのデータをdivに書き出していく処理
var container = document.getElementById('feed');
var entries = result.feed.entries;
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var div = document.createElement('div');
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
});
}
// Google Ajax Feed APIが読み込まれた後の処理
google.setOnLoadCallback(initialize);
Google Feed APIを読み込むと、google.feeds.Feedオブジェクトが使用可能になります。
読み込み先はgoogle.feeds.Feedオブジェクトのコンストラクタに渡すことで設定は完了です。読み込み数はFeed読み込み先のURLでパラメータを指定しなくても、google.feeds.Feed.setNumEntryiesで絞る事ができます。
最後にコールバックとして実行する関数をgoogle.setOnLoadCallbackに渡し、フィードを読み込んでいけば完成です。
コールバックのコードを削減するのであれば下記の書き方でも問題ありません。
google.loadの第三引数にオプションでcallbackを指定すると、GoogleAjaxFeedAPIが読み込まれたタイミングで初期化処理を走らせることができます。
// GoogleJavascriptAPIでfeedAPIとバージョンを指定して読み込む
google.load('feeds', '1', {
callback: function() {
var feed = new google.feeds.Feed('http://example.com/your/rss/url/feeds');
// 読み込むエントリーの数
feed.setNumEntries(1);
// feedを読み込む
feed.load(function(result) {
if(result.error || !('feed' in result)) {
return;
}
// feedのデータをdivに書き出していく処理
var container = document.getElementById('feed');
var entries = result.feed.entries;
for (var i = 0; i < entries.length; i++) {
var entry = entries[i];
var div = document.createElement('div');
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
});
}
});
いかがでしたでしょうか。Google Feed APIを使用することで意外と簡単にRSSフィードを読み込むことができます。
RSSをサーバサイドで読み込むよりもフロントエンドで遅延ロードするほうが速い場合もあるので、是非試してみてください！
コメント
こんにちは。はじめまして。
この方法、ここ数日動作しないのですが、いかがでしょう。
困っていますので、何かお分かりでしたら教えていただけると助かります。
コメントありがとうございます。
12月2日午前にGoogleがこのAPIを廃止したとのことです。
以前から将来的に廃止することは告知されていたそうですが、
明確な日時が不明であったため混乱を招いたようです。。
こちらに詳細が記載されています。
Google Feed API Terms of Service