とあるお仕事でJavaScriptを用いて外部RSSを読み込む作業をすることになった。 サーバサイドスクリプトを使わずに読み込めることが望ましいとのことで、JavaScriptのみで稼働するものを作ることに。

JavaScriptでのクロスドメイン処理は難しいので、”Google Ajax Feeds API“を使わせてもらうことにした。

“Google Ajax Feeds API”は、かの有名なGoogleが提供してくれる、RSS/Atomなどの各種フィードを取得するためのJavaScript API。JavaScriptでよくひっかかる”XMLHttpRequestメソッド”のクロスドメイン制限（別ドメインのファイル読み込み制限）の問題を簡単に解決してくれる。

「JavaScriptのみでの外部RSS読み込みは難しい」なんて考えは一蹴。(実際はGoogle側のサーバサイドスクリプトで取得してるのかな？)

Start using the Google AJAX Feed API“から、Googleアカウントにてログイン。RSSを表示させたいサイトのURLを入力し…

おぉ！HTMLソースが表示された！！

こいつを自分のサイトのに埋め込めばいいのかな？

当然ながら、指定したドメイン内でしか使えないソースコードのようです。ページ頭に記述してあるなが～い「key」がドメイン判別に使われているのでしょう。

HTMLファイル内にJavaScriptソースを記述するのは好きじゃないので、外部jsファイルに。

以下に試してみます。

**********Google Ajax Feeds API**********
・外部jsのソースコード

google.load("feeds", "1");
function initialize() {
  var feed = new google.feeds.Feed("http://www.plus-blog.sportsnavi.com/feed/bluetag/rss2_0.xml");
  feed.setNumEntries(5)
  feed.load(function(result) {
    if (!result.error) {
      var container = document.getElementById("feed");
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        var div = document.createElement("li");
        var a = document.createElement("a");
        a.href = entry.link;
        var list = entry.title + "(" + entry.publishedDate.substring(5, 11) + ")" ;
        a.appendChild(document.createTextNode(list));
        div.appendChild(a);
        container.appendChild(div);
      }
    }
  });
}
google.setOnLoadCallback(initialize);

で、～の間で、JavaScriptを読み込みます。以下です。

そして、～にて、外部RSSを表示したい箇所に

と書けば万事OK！