JavaScript: 外部RSS読み込み by “Google Ajax Feeds API”

とあるお仕事で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);

で、<head>～</head>の間で、JavaScriptを読み込みます。以下です。

<script type="text/javascript" src="http://www.google.com/jsapi?key=(取得したKey)"></script>
<script type="text/javascript" src="(外部jsのパス)"></script>

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

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

と書けば万事OK！

Popularity: 57% [?]

Rating:

(4.30 / 43)

Loading ...

◇関連記事

◇TrackBack

◇BOOKMARK

◇COMMENTS / 6 COMMENTS

[...] qve.cc と qve.in のドメインを分離しました。理由はいたって明白、やはり「テストサイトが必要になった」からです。そこで、qve.cc と qve.in のトップページに、ドメインを分離した旨のHTMLを設置したわけなんですが、お引っ越しメッセージのような味気なさが気になって…。qve.jp の RSSを表示できないものかと調べてみたところ tokyoportfieldsさんのサイトで紹介されていた「JavaScript: 外部RSS読み込み, Load external RSS Feeds by JavaScript, “Google Ajax Feeds A…」に挑戦してみました。 [...]

Qve [design communication] » Blog Archive » HTMLファイルにfeedを読み込んでみる added these pithy words on 7月 22 08 at 12:03 AM

ブログ記事内からJavaScriptでAmazonのRSSを取得し、表示する(Google Ajax Feeds API利用)

Google Ajax Feeds APIでAmazonのDVD関連RSSを読み、ブログ上に先頭の4件を表示するメモ。
JavaScript: 外部RSS読み込み by “Google Ajax Feeds API” | t.p.fields – web+te…

PE２プレイ記録ほか added these pithy words on 5月 19 09 at 12:01 PM

「Google Ajax Feeds APIを導入しました」

RSSのインポートという機能。
実は簡単に実装できます。
Takumaです。
　
【Google AJAX Feed API】
AJAX Feed API を使用すると、JavaScript だけを使用して、公開されている Atom フィードや RSS フィー…

takumaの「デザインはあれでアートはそれで」 added these pithy words on 9月 01 09 at 3:57 AM