2010年10月20日水曜日

[memo] Google AJAX Feed APIでクロスドメイン制約を回避

PHP等で外部ドメインのAtomフィードやRSSフィードを収集し,Flashを設置するサーバに格納する事が出来れば,クロスドメイン制約を回避することが可能ですが,自前のサーバが利用できる環境がない場合,このような方法をとることが出来ません.
そこで,自前でサーバを用意する必要のないGoogle AJAX Feed APIを利用すれば,クロスドメイン制約を回避することが可能となります.
※商用利用等では問題はありますが...

Google AJAX Feed API登録画面
http://code.google.com/intl/ja/apis/ajaxfeeds/signup.html



Now Loading ...

javascript
<script type="text/javascript" src="http://www.google.com/jsapi?key=(APIキー)"></script>

<script type="text/javascript">
google.load("feeds", "1");
function initialize() {
    var feed = new google.feeds.Feed("http://www.kccollege.ac.jp/news/feed.xml");
    feed.setNumEntries(5);
    feed.load(function(result) {
  var html;
  // 読み込みに成功したときの処理
  if (!result.error) {
   // サイトのタイトルを出力
   html = '<h1>
<a href="' + result.feed.link + '">' + result.feed.title + '</a></h1>';
   // 各記事の情報を順に出力
   if (result.feed.entries.length) {
    html += '<ul>';
    for (var i = 0; i < result.feed.entries.length; i++) {
     // 各記事のタイトルと概要を出力
     var entry = result.feed.entries[i];
     html += '<li><a href="' + entry.link + '">' + entry.title + '</a>';
     html += '<span class="content">' + entry.contentSnippet + '</span></li>';
    }
    html += '</ul>';
   }
  }
  // 読み込みエラー時の処理
  else {
   html = '<p>Error</p>';
  }
  // 読み込み結果を、idが「feed」の要素に流し込む
  var container = document.getElementById("feed");
  container.innerHTML = html;
    });
}
google.setOnLoadCallback(initialize);
</script>

<div id="feed"><p>Now Loading ...</p></div>


ちなみに,Google AJAX Feed APIはJavascriptからだけではなく,URLに引数を付ける形で利用することも出来ます.
以下は,XML形式で10件のデータを取得する場合の例になります.
http://ajax.googleapis.com/ajax/services/feed/load?q=http%3A%2F%2Fwww.kccollege.ac.jp%2Fnews%2Ffeed.xml&v=1.0&num=10&output=xml

0 件のコメント: