RSS を XSLT で html に変換して見栄え良く表示する

* RSS を XSLT で html に変換して見栄え良く表示する

この記事の直リンクURL: Permlink | この記事が属するカテゴリ: [XML] [RSS]

Landscape の RSS に XSL (スタイルシート) を付けて、RSS を XSLT (XSL Transformations) を施した html として表示するようにした。

- XSLT で RSS を見栄え良く

当サイト Landscape は直近7日分の記事の全文入り RSS と、全記事・全文入りの RSS を配布している。

直近7日分の記事全文を含む RSS
http://sonic64.com/cl.xml

すべての記事全文を含む RSS
http://sonic64.com/cl-full.xml

これらは生の XML ファイルなので、そのままブラウザで閲覧しようとすると XML データがそのまま表示される。Mozilla などで Landscape の RSS を表示すると、以下のように「XSL が無いから仕方なく XML ドキュメントツリーを表示するよ」といった主旨のメッセージが表示される。

この XML ファイルにはスタイル情報が関連づけられていないようです。以下にドキュメントツリーを表示します。

実際に RSS のデータを利用するときは Bloglines や RSS リーダーで処理して表示させることがほとんどだと思われるので、 XSL が無くても問題はない。ただ、XSL があった方がブラウザで生の XML データを表示させたときに見やすい。というわけで、XSL を書いて RSS を html に変換して表示するようにしてみる。

- 先達の知恵を使え

ゼロから XSL を書き起こすのは大変そうなので、先達の書いた XSL を修正して自分好みの XSL を作ることにする。

日本で RDF/RSS やセマンティックウェブといったら The Web KANZAKI http://www.kanzaki.com/ だ。http://www.kanzaki.com/info/memo.xsl を参考に Landscape の XSL を記述する。

- RSS の content:encoded を XSL 変換後の文書に表示

2004-10-26 の「content:encodedが足りねぇ… じゃんじゃん持ってこい」で書いたように、私は RSS に記事全文を入れる派だ。なので、今回の XSL でも content:encoded のデータをそのまま表示させるようにしたいところだ。

Web KANZAKI の XSL は content:encoded ではなく description を表示するようにしているので、ここは修正が必要。以下のようにした。

content モジュールの指定を追加。
description を呼び出している部分を content:encoded を呼ぶようにし、disable-output-escaping 属性を属性値 yes で追加。

xmlns:content="http://purl.org/rss/1.0/modules/content/"
(略)
<xsl:value-of select="content:encoded" disable-output-escaping="yes"/>

- 完成した XLS

html で使っていたスタイルシート (CSS) を XSL 変換後の文書にも流用したかったので、同じような論理構造で html を出力するように XSL を仕上げた。以下に仕上げた XSL を引用しておく。favicon を呼び出すための記述なども追加しておいた。

http://sonic64.com/rss.xsl

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:rss="http://purl.org/rss/1.0/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
exclude-result-prefixes="rdf rss dc content"
>

<xsl:template match="/">
<xsl:apply-templates select="rdf:RDF"/>
</xsl:template>

<xsl:template match="rdf:RDF">
<html xml:lang="ja" lang="ja">
<head>
<title><xsl:value-of select="rss:channel/rss:title"/></title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="stylesheet" href="diary.css" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://sonic64.com/cl.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS full archive" href="http://sonic64.com/cl-full.xml" />
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<h1><a href="{rss:channel/rss:link}"><xsl:value-of select="rss:channel/rss:title"/></a></h1>

<p><a href="{rss:channel/rss:link}"><xsl:value-of select="rss:channel/rss:title"/></a> の記事<xsl:value-of select="count(rss:item)"/>件の全文です。RSS フィードを XSL 変換して表示しています。この RSS フィードをお使いの RSS リーダーに登録すれば <a href="{rss:channel/rss:link}"><xsl:value-of select="rss:channel/rss:title"/></a> の RSS を購読できます。</p>

<xsl:apply-templates select="rss:item"/>

<p class="credit">斎藤宏明 <a href="mailto:sonic64@infoseek.jp">sonic64@infoseek.jp</a></p>
</body>
</html>
</xsl:template>

<xsl:template match="rss:item">
<div class="day">
<p class="pdate"><span class="date"><a href="{rss:link}"><xsl:value-of select="substring(dc:date, 1, 10)" /> </a></span></p>
<div class="section">
<div class="subtitle"><h2><a href="{rss:link}"><span class="sanchor">*</span></a> <strong class="clitemheader"><xsl:value-of select="rss:title"/></strong></h2>
</div>
<div class="sec_body">
<xsl:value-of select="content:encoded" disable-output-escaping="yes"/>
</div>
</div>
</div>
</xsl:template>

</xsl:stylesheet>

- RSS にスタイルシートを呼び出す記述を追加

RSS からスタイルシートを呼び出すための記述を追加する。

以下を RSS に追加するだけ。非常に簡単。

<?xml-stylesheet href="rss.xsl" type="text/xsl" media="screen"?>

- Mozilla の XSLT プロセッサは disable-output-escaping="yes" を無視する

Mozilla で動作確認をしてみると、content:encoded 部分が意図したとおりに表示されない。content:encoded 中の html タグがエスケープされているような動きをしている。

エスケープされるのを防ぐために、disable-output-escaping="yes" を追加しておいたが、それが効いていないようだ。

<xsl:value-of select="content:encoded" disable-output-escaping="yes"/>

どうやら、Mozilla に搭載されてる XSLT プロセッサは disable-output-escaping="yes" の指定を無視するようだ。その結果、content:encoded の中身がそのまま表示されてしまうわけだ。この現象は Mozilla/5.0 (Windows; U; Windows NT 5.1; ja-JP; rv:1.7.5) Gecko/20041108 Firefox/1.0 の環境で発生した。

なんとかならないかなあ。JavaScript を使って UserAgent が Mozilla のときは document.write でレンダリングさせたりすればいいのかな。なんか手間がかかるなー。仕方ないので今回はとくに対処しないことにする。

追記。2005-03-19 に「Mozillaで XSLT適用後のDOMのinnerHTML にアクセスするとエラー」を書いた。結局問題は解決できなかったけど。

- xsl:output を付けると IE6 で文字化け

実は IE でも問題が発生していた。

<xsl:output method="html" encoding="utf-8" />

XSL に上記の指定を付けると WindowsXP の IE6 では盛大に文字化けしてくれる。どうやら出力を Shift_JIS として解釈してる模様。仕方がないので、xsl:output は指定しないことにした。

- さあ XSLT 付きの RSS を見てみよう

さあ、丹誠込めて作った XSL を適用した RSS をぜひ見て欲しい。

直近7日分の記事全文を含む RSS
http://sonic64.com/cl.xml

すべての記事全文を含む RSS
http://sonic64.com/cl-full.xml

直近7日分の方はせいぜい数十KB のサイズなのですぐにレンダリングされるけど、すべての記事全文の方はかなり重い。そもそも RSS 自体が 3MB 程度もあるからなー。

で、なにが便利なの? って聞かれるとちょっと困る。

「すべての記事全文を含む RSS」の方は利用価値があるかも。ブラウザの検索機能などを使って全文検索をしたいときに使えるだろうしね。あとは、Landscape の中身を全部印刷して読みたいときとかに有用かな。たぶん合計で数百ページ以上になると思うけど。

- 今後の野望

今回は比較的質素な XSL を書いたが、もっといろんな機能を盛り込んだ html を出力する XSL を書いても面白いかも。Google の検索窓を付けたり、amazon のライブリンク付けたり、記事一覧を付けたりして html 版と同じような見た目を再現してみようかな。あんまり意味ないけどね。

あとは http://sonic64.com/rss.xsl にアクセスすると生の XML 文書が表示されるのはなんか中途半端なので、XSL を XSL で見栄え良くするというのはどうだろう。

すべての記事の見出し (全1029件)

全カテゴリの一覧と記事の数

カテゴリごとに記事をまとめ読みできます。記事の表題だけを見たい場合は、すべての記事の見出し (カテゴリ別表示) へ。