今回はAdobe SpryのTipsです。お仕事でJavaScriptを使ったRSSの取得と表示が必要になったこともあって、Spryを使ってみました。XMLの取得と表示は以前にSpryでやったことがあったのですが、それほど難しくありません・・・と言うか簡単です。今回のポイントはRSSから取得した日時がGMTなのをJSTに変換して表示させるところです。

と言うことでまずは普通に取得して表示させてみます。

Spryのライブラリから必要な材料はこの2つ。

  1. xpath.js
  2. SpryData.js

ソースに記入するJavaScript部分はこれだけ。

<script type="text/javascript" src="js/spry/xpath.js"></script>
<script type="text/javascript" src="js/spry/SpryData.js"></script>
<script type="text/javascript">
var RssData = new Spry.Data.XMLDataSet("[取得するRSSのURL]“, “[記事が収まっているXMLパス]“);
</script>

取得するRSSのURLですが、Ajaxの場合クロスサイトでの通信は行えません。例えばTwitterとかのRSSを取得したい場合は、PHPなどで通信を中継する仕掛けが必要です。今回は同じサーバに設置する掲示板のRSSを取得する形でしたので、仕掛けの説明は省略・・・。to-Rさんに簡単なスクリプトの説明がありましたので、リンクしておきます。

【Adobe Spry TIPS】別ドメインの内容を読み取る

記事が収まっているXMLパスですが、これはRSSやAtomなど使いたいフォーマットに合わせて修正が必要です。今回使ったのはRSSバージョン0.92。受け取るデータのフォーマットは以下のような感じ。

<?xml version="1.0" encoding="UTF-8"?>
<rss version=”0.92″ xml:lang=”ja-JP.utf8″>
<channel>
<title>掲示板</title>
<link>http://localhost/index.php</link>
<description><![CDATA[テストの掲示板]]></description>
<item>
<title><![CDATA[Re：新しいスレッドを立ててみた]]></title>
<link>http://localhost/index.php?topic=2.msg4#msg4</link>
<description><![CDATA[hensinnn]]></description>
<author>高田</author>
<category><![CDATA[テスト]]></category>
<comments>http://localhost/index.php?action=post;topic=2.0</comments>
<pubDate>Fri, 14 Dec 2007 10:38:27 GMT</pubDate>
<guid>http://localhost/index.php?topic=2.msg4#msg4</guid>
</item>
<item>
<title><![CDATA[新しいスレッドを立ててみた]]></title>
<link>http://localhost/index.php?topic=2.msg3#msg3</link>
<description><![CDATA[新しいスレッドを立ててみるテスト</description>
<author>高田</author>
<category><![CDATA[テスト]]></category>
<comments>http://localhost/index.php?action=post;topic=2.0</comments>
<pubDate>Fri, 14 Dec 2007 06:11:16 GMT</pubDate>
<guid>http://localhost/index.php?topic=2.msg3#msg3</guid>
</item>
<item>
<title><![CDATA[Welcome!]]></title>
<link>http://localhost/index.php?topic=1.msg2#msg2</link>
<description><![CDATA[とりあえずテスト投稿！]]></description>
<author>高田</author>
<category><![CDATA[テスト]]></category>
<comments>http://localhost/index.php?action=post;topic=1.0</comments>
<pubDate>Thu, 13 Dec 2007 09:11:18 GMT</pubDate>
<guid>http://localhost/index.php?topic=1.msg2#msg2</guid>
</item>
</channel>
</rss>

データ構造を良く見ると、記事データは[rss]->[channel]->[item]タグの中に納まっています。と言うことで、記事が収まっているXMLパスは「/rss/channel/item」としておきます。

これでデータの取得準備が出来ました。細かなことはSpryが勝手にやってくれますのでJavaScriptはこれくらいにしておいて、取得したデータの表示部分をHTMLで作っちゃいましょう。

<h2><a href="">掲示板</a></h2>
<div id="ForumPanel" spry:region=”RssData”>
<table border=”0″ cellpadding=”0″ cellspacing=”0″>
<thead>
<tr>
<th>タイトル</th>
<th>カテゴリー</th>
<th>日付</th>
</tr>
</thead>
<tbody>
<tr spry:repeat=”RssData”>
<td><a href=”{link}“>{title}</a></td>
<td>{category}</td>
<td><div>{pubDate}</div></td>
</tr>
</tbody>
</table>
</div>

今回は珍しくテーブル使ってみました。特にテーブルにしなければならない理由はありませんが、分かりやすいかナァと思ってです。

さて、コードを見ると見慣れない属性が2箇所ほどあります。1つ目のdivタグに書かれている「spry:region=”RssData”」と2つめのtrタグに書かれている「spry:repeat=”RssData”」です。2つとも「=RssData」となっていますが、これはJavaScriptで「var RssData = new Spry.Data.XMLDataSet(”[取得するRSSのURL]“, “[記事が収まっているXMLパス]“);
</script>」としているからです。この変数名(と言うかオブジェクト名)を変えた場合は、各属性の方も変更して下さい。「spry:region」は所得準備したXMLデータをここで使いますよという宣言です。「spry:repeat」はこの属性を含むタグやその中身を表示したいデータの数だけ繰り返しますという宣言です。

表の中には{}で囲まれた文字列があります。{link}に{title}、{category}、{pubDate}です。実際に動かすと、この部分が処理されてRSSのデータと置き換わります。もう一度RSSのデータ構造を見てもらいたいのですが、itemタグの中にlinkタグやtitleタグ、categoryタグ、pubDateタグがあります。つまり、{}の文字列はそれぞれ読み込むデータのどの部分と置き換えるのかを指定しています。

とりあえずRSSを表示するだけなら以上で作業は完了。作業を終えたページを表示すると表の中にRSSの情報が表示されます。

RSSのデータ構造だけしっかり押さえておけば特に問題は無いでしょう。ただ、表示した日時がGMTになっています。RSSの中身がGMTで吐き出されていますし、Spryはこの項目が時間を表しているとは分かっていないのでそのまま表示しているに過ぎません。

と言うことで、もう少し手を加えて日本時間にしたいと思います。SpryにはXMLを読み込む際にデータのフィルターとして指定したJavaScript関数を実行する機能があります。Data Setのfilterメソッドです。

[DatasetName].filter([Filter Function]);

DatasetNameにはXMLデータを用意するときに指定したオブジェクト名を入れます。Filter Functionには事前に準備するフィルター用のJavaScript関数名を()無しで指定します。以下がフィルター用の関数とその関数を指定するフィルターメソッドのコードです。

var objDate = new Date;
function replaceDate(dataSet, row, rowNumber) {
var objDate = new Date(row["pubDate"]);
row["pubDate"] = objDate.toLocaleString();
return row;
}
RssData.filter(replaceDate);

フィルター用の関数はフィルターメソッドより先に作っておきます。フィルター用の関数が用意する引数はSpryが自動的に渡してくれます。rowには読み込んだデータの内容(1件分)、rowNumberには何件目のデータなのかです。

今回はpubDateの内容を日本時間に変更したいのでまずrowの中からpubDateの内容を取り出しJavaScriptのDateオブジェクトを作り出しています。(事前にDateオブジェクトの準備はしておきます。)

次にローカル時間に直した値を同じくrowのpubDateの中に上書きしてしまいます。

最後に「return row;」としてデータを表示部分へ返します。この戻り値を忘れるとデータを表示してくれなくなりますので、注意して下さい。内容によってデータを表示させないようなフィルタを作った場合は「return false;」としてやればそのデータは表示されません。

これで日本時間の表示が出来ました。RSSの内容によってはJavaScriptのDateオブジェクトとして正しく扱われない場合も出てくるかもしれません。その場合はsplitなどして必要な加工をして下さい。

関連記事