jQuery Feeds|複数RSSをまとめて1ページに表示するプラグイン

2015/12/03 追記
昨日からこの記事にアクセスが妙に増えていてなんだろうと思っていたら、Google AJAX Feed APIが使えなくなっているようですね。
せっかく来ていただいて悪いのですが、こちらは過去に書いてそのまんまなので、解決策等はございません。デモとして提示したページも現在正常に動いていません。申し訳ありません。

2015/12/05 追記

昨日の時点で再び動くようになってるみたいですね。

以下のページで詳しくまとめていただいているようです。

Google AJAX Feed API が「403 : This API is no longer available.」を返す件について

ここから下は、過去に書いた記事そのままです。


複数のRSSを読み込んで、時系列に並べて変えて表示するjQueryプラグインです。PHPSPOT開発日誌さんで紹介されてて便利そうだったので試してみました。

複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」

ダウンロードや本家デモはこちら。

jQuery Feeds
Demo • jQuery Feeds

僕が設置してみたデモはこちら。

デモ

設置

基本は以下の通りです。

これだけで、僕のデモの’デフォルト’部分が生成されます。

feedとしてこのサイトのrssと僕のflickrのrssを指定して。最大記事数として3件を指定しているのでそれぞれから3件ずつ読み込んで、時系列に並べて吐き出されています。

これだけでもよさそうですが、いくつかパラメータがあるのと、テンプレートを別に用意して適用することなんかもできるので、見せ方をもう少しカスタマイズすることが可能です。

カスタマイズ

デモで行ったカスタマイズをいくつか紹介します。
まずは記述から。

feedのURLと件数は基本と同じものを使ってます。その他の部分がカスタマイズのための記述となります。

14行

まずpreprocessというパラメータを使用して、読み込んだエントリーを整形しています。ここではmoment.jsというライブラリを使用して、日付を現在の日付から何日か、という表示に変更しています。moment.jsは、他のライブラリと同様あらかじめ読み込む必要があり、その記述を3行目に追加しています。

19行

次にentryTemplateというパラメータを使用して、表示部分のテンプレートを指定しています。ここに直接HTMLを記述してもよいし、本文中にscriptとしてテンプレートを記述してそのidを指定することもできます。今回は後者の方法を用いています。

以下、デモで使っているテンプレートの記述です。

文中の<!=feedLink!>といった表記は独自タグのようなもので、読み込んだfeedの内容が、ここにそれぞれ反映されます。使えるタグはドキュメントの’Manipulating entries’に一覧があります。

21行

onCompleteで完了時のコールバック処理を指定できます。ここでは、jqueryでaタグにtarget指定を追加しています。


ほかにも色々とできるようです。そちらについては本家サイトをご覧ください。