jQueryでRSSリーダーを作成

2008 年 4 月 20 日 – 9:15 PM

前回 Ajaxサンプル集を作ったときの内容を少し発展させjQueryを用いてRSSリーダーを作成しました。

作成したRSSリーダーでは、

  • RSSのURL登録(クッキー使用)
  • RSSのリストを折りたたんで表示
  • RSSのリストをドラッグ可能
  • 選択したリストを最前面に表示
  • リストのカラム数を変更

など色々な処理ができるようになっています。

今回はPHPでRSSの処理を行い、ユーザーインターフェイス上の処理をjavaScriptで行うなど色々な技術を使って作成しました。色々と初めて行う処理が多かったのですが、非常に勉強になりました。

jQuery RSSリーダーを見る

RSSリーダーを作成したきっかけ

このRSSリーダーを作成したのは、効率のいい情報収集ができないかと考えたのがきっかけです。いくつものサイトを横断することなく一度に多くの情報を見ることができれば時間収集の時間も短縮されると思い作成しました。

このRSSリーダーは一度に多くの情報を表示することを一番の主眼として作成しています。そのため文字サイズや文字間隔はかなり小さく設定しています。

ぱっと見た感じではWebページだとは思えないようなデザインなので(Excelに似ている!?)、仕事中に見ていてもきっと目立ちません。visitedサイトは黄色のマーカーっぽくしてどこを見たかを分かりやすく表示したつもりです。

今回はじめてWebアプリケーションらしいものを作成したのですが、それなりに使えるサイトになったのではないかと感じます。

RSSリーダーで学んだ技術

  • PearのRSSでRSSデータを扱う
  • PearのCache_LiteによりRSSのデータをキャッシュで保持する(1時間)
  • 保持していたキャッシュを使用する
  • クッキーにRSSを保存する(PHP, Javascript両方から実施)
  • 保存されているクッキーを使用する
  • リストの折りたたみ処理
  • z-indexによるリストの表示順(前面に移動)の処理
  • CSS全般(U/Iを実現するための設定色々)

全体的にWeb上でU/Iの向上を実現するための処理が多いですね。ユーザーの使い勝手向上はどんな分野でも使える技術なので、今後も色々と学んでいきたいと思います。

jQuery RSSリーダーを見る

 

追記(2008.04.21)

ニコニコ動画にはRSSがないかとおもっていましたが、URLの後に”?rss=feed”のようにRSS用のqueryキーを入れればRSSが取れるようです。

例)総合ランキングの場合

http://www.nicovideo.jp/ranking/mylist/daily/all?rss=feed

RSSリーダーでニコニコ動画の一覧を作っても面白いと思います。 

 

<参考>

Post a Comment