ミニRSSリーダーを作ってみよう!

2008年5月23日(金)
林 俊之

AJAX Feed APIのデータからデータストア用の配列を作る

まず、Google AJAX Feed APIを使ってフィードを読み込むことからはじめます。今回のサンプルファイルはダウンロードできますので、この中の「5941/sample/miniRssReader.html」を見ながらStepごとに解説します。ダウンロード(http://www.thinkit.co.jp/article/59/4/5941.zip)(5941.zip/585KB)。

最初に

次に「google.load('feeds', '1');」としてFeed APIを読み込みます。2番目の引数はバージョンを示しており、Google AJAX Feed APIのバージョン1をloadするという意味になります(miniRssReader.html:Step0参照)。将来新しいバージョンのAPIが提供されるのかもしれません。

Step1では、Ajax Feed APIのデータからデータストア用の配列を生成します。Feed APIの読み込み完了時のコールバック関数:feedInitializeを定義します。この関数は「google.setOnLoadCallback(feedInitialize);」とすることでFeed APIの読み込みが完了したときに実行されます。feedInitialize内では図1の処理を行っています。

Gridと詳細ビューを含むパネルを作る

Step2では、Step1で作成した配列からデータストアを生成します。前回(http://www.thinkit.co.jp/article/59/3/2/)解説した「定番のGridを使ってみる」と同様にExt.data.SimpleStoreクラスからデータストアを生成します。

Step3では、Step2で生成したデータストアからGridを生成します。ここでのポイントはcolumnsを指定するときにLinkとContentsはhiddenプロパティをtrueにしています。こうすることで内部的にデータは持っていてもGridの見た目上は表示しないということが設定できます。実際は4カラムのデータを持っていますが見た目上は2カラムになります。ただし、図2のようにカラムのヘッダで表示するオプションで表示させることも可能です。

Step4では、Gridと詳細ビューを含むパネルを生成します。Ext.PanelクラスからGridと詳細ビュー(id: 'detailPanel')を含むパネルを生成します。

NTTレゾナント株式会社
So-net、MSNを経て現在gooを運営するNTTレゾナントでデザインエンジニアとして勤務。UIデザイン、HTML開発、JavaScript開発を主軸に仕事中。iGoogleガジェットコンテストで「インプレスR&D インターネットマガジン賞」を受賞。http://www.goo.ne.jp/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています