【Adobe Spry TIPS】RSSを取得して表示する。

このエントリーをはてなブックマークに追加

Spryでもっとも使い勝手がよいと思うのは、RSSを表示する機能です。

正確にはSpry.Data.XMLDataSetを利用してXMLファイルを取得して表示するのですが、もっとも普及しているXMLであるRSSフィードを取得し表示してみます。

ひとまずは、Sparyの簡単さを味わってもらいたいです。

head要素内などで以下の2つのファイルを読み込みます。

ファイルはそれぞれダウンロードしたSpry本体のincludesディレクトリにあります。

<script type="text/javascript" src="./includes/xpath.js"></script>
<script type="text/javascript" src="./includes/SpryData.js"></script>

xpath.jsはXML文書の中の特定の要素を指し示す記述方法を定めた規格XPathを利用するためのjsファイルです。SpryData.jsはXMLデータを取得表示するためのjsファイルです。

次にRSSフィードを取得するための命令を書きます。

<script type="text/javascript">
var RssData = new Spry.Data.XMLDataSet("RSSフィードのURL", "取得する情報のXPath");
</script>

RSSフィードのURLと取得する情報のXPathだけを指定すればよいです。
注意点としてはRSSフィードのURLは、ブラウザのセキリュティ上、公開するサイトと同じURLでなくてはならない。
(他のURLを利用する方法は後で解説、XPathについても後で説明)

当サイトの場合だと、このような感じになる。

<script type="text/javascript">
var RssData = new Spry.Data.XMLDataSet("http://blog.webcreativepark.net/atom.xml", "/feed/entry");
</script>

次に表示部分の設定を行います。

<ul spry:region="RssData" spry:repeat="RssData">
<li><a href="{link/@href}">{title}</a></li>
</ul>

繰り返して表示したいものの含有要素にspry:region="RssData"とspry:repeat="RssData"を設定して、繰り返す場所に{title}中にはのようにxml要素、xml要素の属性は{link/@href}という形で抽出します。(XMLとXPathについては後で詳しく説明します)

これだけでRSSフィードより新着情報を取得表示するパーツが完成します。

サンプル

欠点としてはJavaScriptで吐き出される為SEO上の効果がなかったり、JavaScriptがoffの場合{title}のみが表示されて非常に見苦しいです。

JavaScriptがoffの場合のサンプル

それらが問題ない場合でしたら、非常に簡単にRSSリーダーをwebサイトに導入できるでしょう。

【Adobe Spry TIPS】 目次

スポンサードリンク

«【Adobe Spry TIPS】Spryを準備する。 | メイン | パスワードを表示するブックマークレット»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1167
コメント

はじめまして。
このサイトでSpryを勉強させていただき、たいへん助かっています。
ありがとうございます。

さて、この記事を見てSpryで外部RSSを取り込むことができたのですが、文字参照(&など)が変換されず、そのまま「&」と表示されてしまいます。

もし対処法をご存知でしたら教えていただけませんでしょうか?

斉藤

投稿者:斉藤 | 2008年12月 2日 16:44

>斉藤さん

うーん。ちょっとわからないですね。

もしかしたら、他のライブラリを利用したほうが良いかもしれませんね。

投稿者:西畑一馬 | 2008年12月 2日 17:58

西畑さん
お返事ありがとうございました。
了解です。
別の方法を考えてみます。
斉藤

投稿者:斉藤 | 2008年12月 3日 13:14

西畑さん
先日はありがとうございました。
Spryの変わりにGoogle AJAX Feed API を使ってRSSを取得したら
文字参照がきちんと変換されました。
斉藤

投稿者:斉藤 | 2008年12月 9日 15:21
コメントを投稿