TOPシステム開発【これならわかる!JavaScript/Ajax】Ajaxライブラリ入門> 第4回:ミニRSSリーダーを作ってみよう! (1/3)




【これならわかる!JavaScript/Ajax】Ajaxライブラリ入門

【これならわかる!JavaScript/Ajax】
Ajaxライブラリ入門

第4回:ミニRSSリーダーを作ってみよう!

著者:林 俊之

公開日:2008/5/23(金)

はてなブックマークの登録数

Google AJAX Feed APIとは?
 Google AJAX Feed APIはRSS/Atomなどの各種フィードを取得するためのJavaScript APIです。最大の特徴はクロスドメインでも他のサイトのフィード情報を簡単に取得できることです。Ajaxで使われるXMLHttpRequestはセキュリティの都合上、同一ドメインでしか通信できない仕様ですが、Google AJAX Feed APIはJSONPという仕組みを使うことでクロスドメインでの通信を実現しています。

 詳細は省きますが、JSONPでは<script>タグが外部ドメインのjsファイルの読み込みが可能なことを利用して非同期な通信を行っています。またGoogle AJAX Feed APIではAtom 1.0/0.3、RSS 2.0/1.0/0.94/0.93/0.92/0.91/0.9と対応フォーマットも幅広く、それらフォーマットを意識することなく一元的にフィードデータを扱うことができます。Google AJAX Feed APIは機能がシンプルなので、とても使いやすいAPIです。

 Google AJAX Feed APIを使うにはまず、Googleアカウントでログインし、Google AJAX Feed APIのサインアップページで自サイトのURLを入力し、API Keyを発行をする必要があります。サインアップページはこちらです。APIのリファレンスサンプルも充実しています。
図1:GridコンポーネントでRSS情報を表示させるためのステップ

GridコンポーネントでRSS情報を表示させるためのステップ
 今回は図1のようなステップでミニRSSリーダーを作成します。前回解説した「定番のGridを使ってみる」で紹介したものに「Ajax Feed APIのデータからデータストア用の配列を生成する」「詳細ビューのテンプレートを作成」「Gridの行に対してイベントを登録」といった、いくつかステップを追加しただけの非常にシンプルなものです。

 実はEXT Jsのデータストアは外部XML読み込みにも対応しており、読み込まれたXMLからデータストアへのバインディングも行うことができます。ここで「Google AJAX Feed APIなんて使う必要がないのでは?」と思われるかもしれませんが、クロスドメインでの取得には対応していないので、その場合はサーバ側にプロキシをおく必要もありますし、またRSSのフォーマットは多々あるため、フォーマットの種類によって処理を変える必要があります。

 Google AJAX Feed APIであればどんなフィードであれ、1元的に同じロジックを扱えるので非常にシンプルです。またJSONPのためローカルファイルでも動作するのでお手軽に試すことも可能です。なお、データストアのXML読み込みのサンプルは、Ext JSからダウンロードしたファイルの「ext-2.1/examples/grid/binding.html」にありますので興味のある方はそちらもご覧になってみてください。

 では次ページでは実際のコードで解説します。 次のページ



林 俊之
著者プロフィール
林 俊之
So-net、MSNを経て現在gooを運営するNTTレゾナントでデザインエンジニアとして勤務。UI設計、HTMLコーディング、JavaScript開発を主軸に仕事中。iGoogleガジェットコンテストで「インプレスR&D インターネットマガジン賞」を受賞。

この記事の評価をお聞かせください
ボタンをクリックしますとウインドウが開きます。
ご意見、ご要望にお応えします! インプレスIT INSIDE

INDEX
第4回:ミニRSSリーダーを作ってみよう!
-> Google AJAX Feed APIとは?
  AJAX Feed APIのデータからデータストア用の配列を作る
  Gridに対して詳細表示するためのイベントを登録する
【これならわかる!JavaScript/Ajax】Ajaxライブラリ入門
第1回 Ajaxの基礎知識
第2回 Ajaxライブラリの変遷
第3回 いま注目のExt JS
第4回 ミニRSSリーダーを作ってみよう!
第5回 Ajax開発の未来
関連記事
即実践!HTML+CSS
Webデザイナは知っていた

Think IT 過去人気記事

注目おすすめ情報

Think IT人気ライター BEST 5