日刊はこはこ

jQueryのプラグインでRSSフィードを表示させる方法

2013年6月3日

ふとjQueryでRSSを読み込むプラグインって無いのかなぁと思って、
探してみると、扱い易そうなプラグインが見つかったので、
制作のメモ的な感じでまとめてみました。

まずはプラグインをダウンロードしてください。

zRSSFeed – RSS Feeds Reader for jQuery
上記ページからプラグインをダウンロードしてください。
使い方はとってもシンプルで表示させたい場所にID名を指定して、
あとはスクリプトを実行させる。これだけ。

<header>部分でjQueryとzRSSFeedを読み込ませる

<header>部分でjQueryとzRSSFeedを読み込ませます。
その後に表示させたい、RSSフィードのURLと数を記入します。
今回は読み込ませる場所のID名を#testとしました。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.zrssfeed.js"></script>
<script type="text/javascript">
$(function(){
	$('#test').rssfeed(' **** ここに読み込むRSSのURLを記入します **** ',{
	limit: 5 //表示させるアイテム数
	});
});
</script>
RSSを表示させたい場所の記入

先ほど指定した「#test」を表示させたいブロック要素に指定すると、
RSSが表示されます。

<div id="test"></div>
ライセンスはどうなってる?

ざっくりとした訳です。
「誰でも使っていいけど、いかなるクレームや損害、またはその他の責任は負わないものとします。」
ざっくりとした訳ですんません。原文は以下を参照で。

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

追記:「jquery.zrssfeed.min.js」の中をみると
「http://ajax.googleapis.com/ajax/services/feed」を使用しているようなので、
Googleさんが仕様変更したり停止すると使えなくなるでしょうね・・・。
Googleさんを使いたくなかったら、PHPなどでゴニョゴニョする必要がありそうです。
参考までにURLのファイルを読み込んで、そのまま出力させるもの↓

<?php
$url = "**** ここに読み込むRSSのURLを記入します ****";
$xml = file_get_contents($url);
header("Content-type: application/xml; charset=UTF-8");
print $xml;
?>


ここから、どう料理しようか・・・今のところ未定・・・。