Home > javascript > Google AJAX Feed APIでとても簡単にRSS Readerを作ってみる

Google AJAX Feed APIでとても簡単にRSS Readerを作ってみる

2007-04-20 20:41
javascript

Google AJAX Feed APIを利用すると、Webにある様々なRSS feedが簡単にクロスドメインで手に入れることが出来ます。

どうやってクロスドメインを可能にしているかと言いますと、やはりJSONPです。JSONPを簡単に知りたい方は私の以前のエントリ「超シンプルなJSONP入門」をご覧下さい。

つまりGoogleが指定したRSS feedを読み込んでJSON形式に変換してくれているプロキシの役割をしてくれているようです。

まず、コーディングの前に、GoogleがRSS feedをどのような形のJSONデータにしているのか、そのデータ構造を知っておくと、後のコーディングが楽になります。
以下がそのデータ構造です。

feed

title : feedのタイトル。
link : feedのサイトのURI。
description : サイトの説明。Atomではsubtitleを意味する。
author : サイトの作者
entries[] : エントリが格納された配列。RSSではitemを意味する。
- title : エントリのタイトル
- link : エントリのリンク
- content : エントリの説明。RSSではdescriptionを意味する。
- contentSnippet : contentの抜粋。HTMLタグは含まれない。
- publishedDate : エントリの登録日。
- categories[] : カテゴリの配列。いわゆるタグが格納されています。

このデータ構造を頭の片隅に置き、コーディングしていきます。入門編ということで、最もシンプルなプログラムにしてみました。
今回ははてなブックマークの人気のエントリ、いわゆるホッテントリのRSSを読み込むプログラムを作ってみます。
以下のように設計します。

全体をulタグで囲む。つまり、rootノードがulとなる。
エントリのタイトル(entris.title)にリンク(entris.link)を貼りdtとする。
エントリのタグ(entris.categories)を[]で囲み、dtとする。
エントリの説明(entris.content)をddとする。
2～4をエントリ全てに行う。

では早速プログラムの全体像をご紹介します。

実用性とデザイン性を考慮し、各タグにclass属性を付けています。これによりデザイン変更がCSSで簡単に出来ます。

<script type="text/javascript" src="Feed_API_KEY"></script>
<script type="text/javascript">
 
function readFeed(result) {
//クロスブラウザ
 var cls = "class";
 if(/*@cc_on!@*/false){ cls = "className" };
 
 //rootノードはulタグ(設計1)
 var root = document.createElement("ul");
 root.setAttribute(cls, "rss_items");
 
 if (!result.error) {          
  for (var i = 0; i < result.feed.entries.length; i++) {
   var entry = result.feed.entries[i];
 
   //タイトル(設計2)
   var dt = document.createElement("dt");
   dt.setAttribute(cls, "rss_item_title");
   var link = document.createElement("a");
   link.setAttribute('href', entry.link);
   link.appendChild(document.createTextNode(entry.title));
   dt.appendChild(link);
   root.appendChild(dt);
 
   //タグ(設計3)
   var tags = entry.categories.join("], [");
   var tag = document.createElement("dt");
   tag.setAttribute(cls, "rss_item_tags");
   tag.appendChild(document.createTextNode("["+tags+"]"));
   root.appendChild(tag);
 
   //説明(設計4）
   var dd = document.createElement("dd");
   dd.setAttribute(cls, "rss_item_desc");
   dd.innerHTML = entry.content;
   root.appendChild(dd);
  }
 } else {
  root.appendChild(document.createTextNode("Error."));
 }
  document.body.appendChild(root);
 }
 
 google.load("feeds", "1");
 
 function initialize() {
  var rss = "http://b.hatena.ne.jp/hotentry?mode=rss";
  var feed = new google.feeds.Feed(rss);
  feed.setNumEntries(7);
  feed.load(readFeed);
 }
 google.setOnLoadCallback(initialize);
</script>

それでは説明していきます。

<script type="text/javascript" src="Feed_API_KEY"></script>

このFeed_API_KEYはGoogleのAPIキーです。取得していない方は「Googleからの新たな贈り物、「Google AJAX Feed API」を試そう」を参考に取得してください。これをはじめに読み込むことでGoogle AJAX Feed APIが利用できます。

まずはFeed APIの設定です。

少し飛んで下の方の関数が設定になります。

google.load("feeds", "1");
function initialize() {
 var rss = "http://b.hatena.ne.jp/hotentry?mode=rss";
 var feed = new google.feeds.Feed(rss);
 feed.setNumEntries(7);
 feed.load(readFeed);
}
google.setOnLoadCallback(initialize);

まずgoogle APIをロードします。

google.load("feeds", "1");

第一引数でfeedsを指定することでgoogle.feeds名前空間内のプログラムが利用できるようになります。Javaでいうパッケージの指定です。第二引数はバージョン番号です。現時点では”1″です。

次にページが読み込まれたらinitialize関数を呼び出します。

google.setOnLoadCallback(initialize);

initialize関数でFeed APIの設定をします。

function initialize() {
 var rss = "http://b.hatena.ne.jp/hotentry?mode=rss";
 var feed = new google.feeds.Feed(rss);
 feed.setNumEntries(7);
 feed.load(readFeed);
}

Feedコンストラクタで引数のfeedのオブジェクトを生成します。

var rss = "http://b.hatena.ne.jp/hotentry?mode=rss";
var feed = new google.feeds.Feed(rss);

Feedに含まれるエントリを取得する数を設定します。未設定では4となります。

feed.setNumEntries(7);

そして、feedをロードしたときのコールバック関数を指定します。

feed.load(readFeed);

ここがJSONPらしいですね。

ではメインの処理です

先ほどコールバック関数として登録されたreadFeed関数を見てみます。コメントアウトで設計番号を入れていますので、照らし合わせると分かりやすいと思います。

function readFeed(result) {
 //クロスブラウザ
 var cls = "class";
 if(/*@cc_on!@*/false){ cls = "className" };
 
 //rootノードはulタグ(設計1)
 var root = document.createElement("ul");
 root.setAttribute(cls, "rss_items");
 
 if (!result.error) {          
  for (var i = 0; i < result.feed.entries.length; i++) {
   var entry = result.feed.entries[i];
 
   //タイトル(設計2)
   var dt = document.createElement("dt");
   dt.setAttribute(cls, "rss_item_title");
   var link = document.createElement("a");
   link.setAttribute('href', entry.link);
   link.appendChild(document.createTextNode(entry.title));
   dt.appendChild(link);
   root.appendChild(dt);
 
   //タグ(設計3)
   var tags = entry.categories.join("], [");
   var tag = document.createElement("dt");
   tag.setAttribute(cls, "rss_item_tags");
   tag.appendChild(document.createTextNode("["+ tags+ "]"));
   root.appendChild(tag);
 
   //説明(設計4)
   var dd = document.createElement("dd");
   dd.setAttribute(cls, "rss_item_desc");
   dd.innerHTML = entry.content;
   root.appendChild(dd);
  }
 } else {
  root.appendChild(document.createTextNode("Error."));
 }
 document.body.appendChild(root);
}

クロスブラウザ処理はclass属性を付けるとき、属性名がIE(className)とFirefox(class)とで異なりますので、その処理を行っています。ちなみに、この条件分岐のテクニックは「Dean Edwards: Sniff!」で議論されているものです。

では実行結果です。

素晴しい！クロスドメインではてなのホッテントリが取得できました。
ちなみに、この結果を得たHTMLソースも追加しておきます。

HTMLを付けたソース

上のプログラムにHTMLを付加したソースの一例です。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Google AJAX Feed API - RSS Reader</title>
 <script type="text/javascript" src="Feed_API_KEY"></script>
 <script type="text/javascript">
  function readFeed(result) {
  //クロスブラウザ
  var cls = "class";
  if(/*@cc_on!@*/false){ cls = "className" };
 
  //rootノードはulタグ(設計1)	
  var root = document.createElement("ul");
  root.setAttribute(cls, "rss_items");
 
  if (!result.error) {          
   for (var i = 0; i < result.feed.entries.length; i++) {
    var entry = result.feed.entries[i];
 
    //タイトル(設計2)
    var dt = document.createElement("dt");
    dt.setAttribute(cls, "rss_item_title");
    var link = document.createElement("a");
    link.setAttribute('href', entry.link);
    link.appendChild(document.createTextNode(entry.title));
    dt.appendChild(link);
    root.appendChild(dt);
 
    //タグ(設計3)
    var tags = entry.categories.join("], [");
    var tag = document.createElement("dt");
    tag.setAttribute(cls, "rss_item_tags");
    tag.appendChild(document.createTextNode("["+tags+"]"));
    root.appendChild(tag);
 
    //説明(設計4)
    var dd = document.createElement("dd");
    dd.setAttribute(cls, "rss_item_desc");
    dd.innerHTML = entry.content;
    root.appendChild(dd);
   }
  } else {
   root.appendChild(document.createTextNode("Error."));
  }
  document.body.appendChild(root);
 }
 
 google.load("feeds", "1");
 
 function initialize() {
  var rss = "http://b.hatena.ne.jp/hotentry?mode=rss";
  var feed = new google.feeds.Feed(rss);
  feed.setNumEntries(7);
  feed.load(readFeed);
 }
 google.setOnLoadCallback(initialize);
 
</script>
</head>
<body>
<h1>はてなホッテントリ</h1>
</body>
</html>

とても簡単にクロスドメインでfeedを読み込めることが分かりました。Googleなのでとても高速にレスポンスが帰ってくるのもうれしいですね。本家のリファレンス「Google AJAX Feed API Class Reference」もチェックして、クロスドメインプログラミングを楽しんではいかがでしょうか。

Comments:1

Vidal 08-04-15 (火) 20:41: Hi, I’ve finished my new job search engine - JobGeni - based on Google AJAX Feed API.
It grabs realtime data feeds from several major job sites like indeed, simplyhired, yahoo hotjobs, monster and jobster. have a look
http://www.jobgeni.com

Trackbacks:0

Trackback URL for this entry: http://www.adamrocker.com/blog/107/google_ajax_feed_api_rss_reader.html/trackback/
Listed below are links to weblogs that reference: Google AJAX Feed APIでとても簡単にRSS Readerを作ってみる from throw Life

Home > javascript > Google AJAX Feed APIでとても簡単にRSS Readerを作ってみる

Recent Entries

Twitter

follow me on Twitter

Search

Feeds

Meta

ログイン

Return to page top