Google AJAX Feed API

FICC 鈴木です。はじめまして。

FICCでは、デザイン・HTMLコーディングを担当しています。FICC LABSではCSSやJavascriptなどのHTMLの周辺について書き進めていければと思います。

初回になるこのエントリーでは、4月に公開された「Google AJAX Feed API」についてお話します。今まで、RSSやAtomなどのフィードをJavascriptなどで取得し使用するには、セキュリティの制限により他サイトで配信されているフィードの情報を扱うことができなかったのですが、このAPIを使用することで、各種フィードを簡単に取り扱うことが可能になるというものです。今回はこれを使用して、Another Bookmarkで配信されているRSSフィードをHTMLで表示するサンプルを作成していきます。

準備：API Keyを取得
Googleのアカウントでログインした状態で、Google AJAX Feed APIのサインアップページにて、コンテンツを設置するページのURLを入力後、「Generate API Key」をクリックすると、入力したURLに応じたAPI Keyが生成されますので、コピーして控えておきます。

Javascript
以下のJavascriptは、http://www.anotherbookmark.com/ab.xmlのフィードで配信されているエントリーにアクセスし、指定した要素に内包されたHTMLコードを作成しています。

google.load("feeds", "1");
 function initialize() {
  //読み込むフィードのURLを指定
  var feed = new google.feeds.Feed("http://www.anotherbookmark.com/ab.xml");
		
  //読み込むフィードの数を指定
  feed.setNumEntries(10);
		
  feed.load(function(result) {
   if (!result.error) {
    //id属性の値がfeedの要素内にフィードを書き出す
    var container = document.getElementById("feed");
			
    for (var i = 0; i < result.feed.entries.length; i++) {
     var entry = result.feed.entries[i];
				
     //各HTML要素を生成
     var div = document.createElement("div");
     var dl = document.createElement("dl");
     var dt = document.createElement("dt");
     var dd = document.createElement("dd");
     var a = document.createElement("a");
     var hr = document.createElement("hr");
				
     //item内、title要素の値を取得
     var entryTitle = entry.title;
				
     //item内、link要素の値を取得
     var entryLink = entry.link;
				
     //item内、description要素の値を取得
     var entryDesc = entry.content;
				
     dt.appendChild(a);
     dt.getElementsByTagName("a")[0].setAttribute("target","_blank");
				
     //a要素に対して、link要素の文字列をhref属性の値として設定
     dt.getElementsByTagName("a")[0].setAttribute("href",entryLink);
				
     //a要素の子要素として、title要素をテキストノードに変換して挿入
     dt.getElementsByTagName("a")[0].appendChild(document.createTextNode(entryTitle));
				
     //dd要素内に、content要素をHTMLコードとして挿入
     dd.innerHTML=entryDesc;
				
     dl.appendChild(dt);
     dl.appendChild(dd);
     container.appendChild(dl);
     container.appendChild(hr);
    }
   }
  });
 }
google.setOnLoadCallback(initialize);

このJavascriptを読み込んだ上で、HTMLコードを作成していきます。
はじめにhead要素内でAPI Keyの設定と、Javascriptの読み込みをします。

<!--　API Keyの設定 -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=ここにAPIKeyをペースト"></script>
<!--　Javascriptの読み込み -->
<script type="text/javascript" src="common/js/feed.js"></script>

次に、フィードの内容を書き出したい要素にid属性を指定します。

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

id="feed"を指定した要素内に、フィードの情報が書き出されます。
以上の手順で作成されたサンプルがこちらです。

今回はフィードの情報をJSONで取得していますが、以下の4行目の指定をすることにより、xmlフォーマットで情報を扱うことも可能です。

function initialize() {
var feed = new google.feeds.Feed("http://ficc.jp/abm/ab.xml");
//xmlフォーマットで情報を取得
feed.setResultFormat(google.feeds.Feed.XML_FORMAT);

Google AJAX Feed APIを使用することで、個人レベルでRSSフィード情報を柔軟に扱うことが可能になりますので、今後はよりパーソナライズされたRSSリーダーのような機能を持ったコンテンツも作成されていくのではないでしょうか。