【Javascript】YUI+Google AJAX Feed API

YUI+Google AJAX Feed API

---

1: サンプル
2: ソース
3: JSON形式
3: キャッシュ
4: セキュリティ

今月(2007年4月16日)GoogleからJavaScriptだけで別ドメインのRSSも読み込むことができるAPIがリリースされました。 Google AJAX Feed API(以下GAF API)です。

今回は、YUIシリーズの途中ですが、試しに、このリリースされたばかりのGAF APIとYUIを組み合わせて使ってみます。

GAF APIは簡単に言うと、Googleのプロクシサーバーを利用した、RSSリーダーのためのAPIです。

このAPIによって、Web製作者は、別ドメインを含むAtomやRSSフィードをJavaScriptだけで読み込み、 加工することができるようになります。 そして、それらのフィードと、自分のコンテンツや、他のAPI(たとえば、Google Maps API)を簡単にマッシュアップすることもできます。

このAPIを使うには、APIキーの申し込みが必要ですが、実は このキーは、以前に紹介した、Google MapsのAPIキーと共通です。 したがって、Google Mapsとの相性は高いと言えるかもしれません。

今回は、このGAF APIと、前回まで 数回に渡って試してきた、YUIアニメーションを組み合わせたサンプルを作ってみます。

サンプル

まず、最初にGAF APIとYUIを組み合わせたサンプルを見てイメージをつかんでください。[+]/[-] をクリックすると、読み込んだフィードを 表示/非表示 します。 GAFで読み込んでいるのは、All AboutのRSSです。



GAF API経由で、All AboutのRSSのフィードを読み込み、YUIを利用したフェイドインでデータを表示しています。

このページはShift_JISで作成されていますので、RSSのAjaxな読み込みには向いていないため、一度別のドメインの このページで GAF経由で読み込み、それをこのページでiframeで表示してみます。

したがって、実際には別ドメインのRSSを読み込んでいます。

使ったiframeは次の通りです。

<iframe src="http://jsgt.org/about/cu/CU20070430A/gaftest1.htm" 
        width="400" 
        height="300" 
        scrolling="yes" 
        marginwidth="0" 
        marginheight="0" 
        frameborder="0"></iframe> 

次は、このソースです。 次ページ