javascriptでfeedを読み込む


よそのサイトのfeedをjavascriptだけで取り込もうとすると、制限あってできないのよね。テストサイトなんだけどxmlだけは本番の拝借したいとかでひかかったり。
んで、これまでphp経由してやりくりしてたんだが、それGoogleのAPIにあるのね。
Google Feed API – Google Code

まずは、APIキー取得します。
Sign-up for an API Key – Google Loader – Google Code

このAPIのキー使って読み込みます。
いつもは直リンしてるjQueryも今回はgoogle.loadで読み込んでみます。

1
2
3
4
5
6
<script type="text/javascript" src="https://www.google.com/jsapi?key=【取得したAPIキー】"></script>
<script type="text/javascript">
google.load('feeds', '1');
google.load('jquery', '1.4.4');
google.setOnLoadCallback(/* ここに読み込み後の処理を書く */);
</script>

使い方も簡単で、feedのURIと表示数を指定するだけ。

1
2
3
var feed = new google.feeds.Feed('feedのURIを指定する');
feed.setNumEntries(10); // 省略可、省略時は4件
feed.load(/* feed読み込み後の処理 */);

あ、でも、jQueryもgoogle.loadで読み込んでるから、google.setOnLoadCallback以降じゃないと使えんので注意かな。jQueryは直接読んだほうが書きやすいかも。

1
2
3
4
5
6
7
google.setOnLoadCallback(function(){
    jQuery(function($){
        var feed = new google.feeds.Feed(feedUri);
        feed.setNumEntries(10);
        feed.load(feedDraw);
    });
});

あとは取得したfeedによってHTMLに出力するなり加工するなりすれば大丈夫。上の例ならfeedDrawって関数で処理するイメージです。(jQueryのonLoad後にしてるのは、feedDrawで出力時にDOMが生成されていて欲しいから。jsの記述自体をHTMLの最後の方に持ってくる、というのも手ですが)
サンプル(GoogleNewsのfeedを読み込んで表示)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です