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

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を準備する。 | メイン | パスワードを表示するブックマークレット»