【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}のみが表示されて非常に見苦しいです。
それらが問題ない場合でしたら、非常に簡単にRSSリーダーをwebサイトに導入できるでしょう。
スポンサードリンク
«【Adobe Spry TIPS】Spryを準備する。 | メイン | パスワードを表示するブックマークレット»
- このエントリーのトラックバックURL
- http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/93
WEB製作者の為のSEOチートシート
jQuery基礎文法最速マスター 
ユーザーがページのどこをクリックしたか解析するツール 
SEO対策ツールまとめ
ブロックレベル要素の高さを揃えるheightLine.js
西畑一馬(
はじめまして。
このサイトでSpryを勉強させていただき、たいへん助かっています。
ありがとうございます。
さて、この記事を見てSpryで外部RSSを取り込むことができたのですが、文字参照（&など）が変換されず、そのまま「&」と表示されてしまいます。
もし対処法をご存知でしたら教えていただけませんでしょうか？
斉藤
＞斉藤さん
うーん。ちょっとわからないですね。
もしかしたら、他のライブラリを利用したほうが良いかもしれませんね。
西畑さん
お返事ありがとうございました。
了解です。
別の方法を考えてみます。
斉藤
西畑さん
先日はありがとうございました。
Spryの変わりにGoogle AJAX Feed API を使ってRSSを取得したら
文字参照がきちんと変換されました。
斉藤