メディア木龍ホームページ お問い合わせ

ツイート

フリーツールのページへ戻る

「RSSを使ったジャンプメニューを作成するXSLTセット」でXSLT実践

このページでは、当サイトで公開している「RSSを使ったジャンプメニューを作成するXSLTセット」の使い方を解説させていただきます。RSS1.0と2.0の構造の理解とXSLTの実践の第一歩としてお役に立てば幸いです。

セットをダウンロードする

XSLTについては、HTML差込ツール EXCEL2HTMLでXSLT超入門も併せて、設置例についてはお役立ちリンクを、とりあえず設置してみたいという方はどこでもRSSもお試しください。

●「RSSを使ったジャンプメニューを作成するXSLTセット」に含まれるもの

RSSを使ったジャンプメニューを作成するXSLTセットを解凍すると、次のファイルが現れます。

sample.xsl
ジャンプメニュー作成用のxslファイルのサンプルです。
RSS1.0、RSS2.0に対応しています。
sample1.xml
RSS1.0のサンプルです。sample.xslへのリンクも入れてありますので、とりあえずこのファイルをダブルクリックするだけで、ジャンプメニューが表示されることを確認することができます。
メディア木龍の新着RSSです。参考にお使いください。
sample2.xml
RSS2.0のサンプルです。sample.xslへのリンクも入れてありますので、とりあえずこのファイルをダブルクリックするだけで、ジャンプメニューが表示されることを確認することができます。
sample1.xmlをRSS2.0に書き直したものです。参考にお使いください。
jump.js
ジャンプ用のJavaScriptファイルです。

サンプルセットの使い方  ページトップへ

各RSSファイルには、XSLファイルへのリンクが入っていますので、とりあえずジャンプメニューが表示できることを確認することができます。これらのファイルをサーバーにアップして、PHP等を使ってサーバー側で変換することにより、動的に作ることもできます。その例がお役立ちリンクです。お役立ちリンクでは、RSSのアドレスとジャンプメニューの幅を指定して動的に取得しています。そのアドレスを簡単に作れるのがどこでもRSSです。ご活用ください。

●RSS1.0とRSS2.0  ページトップへ

1. RSS1.0の構造

このセットの使い方について説明する前に、まず、RSS1.0とRSS2.0の構造についてから説明させていただきたいと思います。
まず、RSS1.0についてです。
RSS1.0サンプル右図(画像をクリックすると拡大表示できます)を見ると、1行目にXML宣言が入り、2行目にはrdf:RDF要素の属性として名前空間が宣言されています(表示のために2行目のXSLTへのリンクをエスケープしています)。RSS1.0では、標準の名前空間はRSS、その他にRDFDCの名前空間にある要素を使用しています。
標準以外の名前空間で指定されている要素には、頭にrdf:やdc:などの接頭辞がつけられています。
その下にchannel要素が入ります。channel要素の下にはtitle、link、dc:date、description、itemsの各要素が入ります。
itemsの下にはrdf:Seq要素が入り、図では折りたたまれていますが、その下にはrdf:li要素がズラッと入ります。
channel要素はここで終わり、その下にはitem要素が続きます。各item要素の下にはtitle、link、dc:date、descriptionの各要素が入ります。先ほどのchannel要素の下にあったものと同じ名前の要素が入りますが、channel要素が、そのサイト全体の情報なのに対し、item要素は、たとえばブログなら各記事の情報になります。同じ名前がついていますが、親の要素が異なるため、後でXSLTやプログラム言語で処理するときに区別ができます。

2. RSS2.0の構造

RSS2.0サンプルRSS2.0では、構造がグッとシンプルになります。
まず、名前空間の宣言がありません(ただし、dc:creatorやcontent:encodedなどの要素も、RSS1.0と同様に使用することができます。その際には、その分の名前空間の宣言をする必要があります。)。XML宣言後、一番上の要素がRSS、その下にchannel要素が続きます(表示のために2行目のXSLTへのリンクをエスケープしています)。
channel要素の下にはRSS1.0と同じくtitle、link、descriptionの各要素が入り、その下にいきなりitem要素が入ります。RSS1.0ではchannel要素とitem要素は別の括りになっていましたが、RSS2.0では一緒になっています。そして、各item要素の下にはtitle、link、description、pubDadeの各要素が入ります。やはりchannel要素直下にある要素と同じ名前の要素が入っていますが、channel要素直下の各要素と、item要素の下の各要素ということで、同じ名前でも区別がつくようになっています。

●sample.xslの解説  ページトップへ

1. XSLTの構造

XSLTは、XML文書を別のXML文書、あるいはHTML、TEXTに変換するための規格です。
sample.xslは、RSSファイルをHTMLに変換するために書かれています。
ここからの説明は、RSS1.0のサンプル、RSS2.0のサンプル、sample.xslを見ながら読んでください。

まず、XSLTもXML文書の一種なので、1行目はXML宣言で始まります。 2行目は、sample.xslがXSLTであるということを示すための要素、xsl:stylesheetという要素になります。ここでは、XSLTのバージョンやxsl、rdf、rss、dcそれぞれの名前空間が宣言されます。
前の項目で説明したとおり、RSS1.0では名前空間が指定されています。RSS1.0にある要素をXSLTやプログラム言語で指定する場合には、名前空間に対応した接頭辞をつける必要があります。

3行目のxsl:output要素では、XSLTで変換したものをどういう形式で出力するかを指定します。ここではHTML形式を指定しています。また、HTMLに出力する際のDOCTYPE宣言を、doctype-public属性で指定します。
なお、2行目にexclude-result-pfixesという属性があり、そこにrdf rss dcと指定されていますが、これを入れていないと、それらの名前空間の宣言がhtmlタグに出力されてしまいます。htmlタグに出力したくない名前空間は、あらかじめ2行目で指定しておきます。

4行目は、これからXML文書のルートノード(スラッシュで表現します)以下の要素に対して、スタイルシートを書きますという宣言です。この宣言は、<xsl:template>で閉じられます。
次の行から、HTMLの表記になっているのがわかると思います。このXSLTでは、HTMLの中でXML文書から指定した要素の中身を表示したいところにその旨を指定していきます。

2. セレクトメニューの構造

セレクトメニューのHTMLタグは、formタグの中に次のように書きます。

<select name="menu" onChange="jumpMenu('parent',this,0)">
<option slected="selected">○○の新着記事はこちら</option>
<option value="【ジャンプ先の記事URL】">【ジャンプ先記事のタイトル】</option>
optionタグをジャンプする先の記事の数分繰り返す
</select>

3. セレクトメニューをXSLTで記述

・RSS1.0の場合

RSS1.0の場合、次のように記述します。RSS1.0の画像またはサンプルと併せてお読みください。

<xsl:if test="//rss:item!=''">
<form name="form" action="">
<select name="menu" class="haba" onChange="jumpMenu('parent',this,0)">
  <option selected="selected"><xsl:value-of select="//rss:channel/rss:title" />の新着記事はこちら</option>
	<xsl:for-each select="//rss:item">
		<xsl:call-template name="バージョン1の場合"/>
	</xsl:for-each>
  </select>
  </form>
</xsl:if>

なお、habaという名前のCSSのクラスがありますが、これはジャンプメニューの幅を動的に指定したいときにお使いください。指定しない場合は、内容に合わせた幅になります。

上の記述は、ジャンプメニューを表示したいRSSのバージョンが1かどうかを判定し、そのitem要素それぞれについて<xsl:call-template name="バージョン1の場合"/>で呼び出すテンプレートの処理を行うという意味になります。
呼び出されるテンプレートは次のように記述されています。

<xsl:template name="バージョン1の場合">
	<option value="{rss:link}"><xsl:value-of select="rss:title"/></option>
</xsl:template>

XSLTでは<xsl:value-of="要素名" />という形で表記することで、XML文書の中の該当要素の中身を差し込みます。
この例では「バージョン1の場合」という名前のテンプレートを定義していますが、item要素それぞれについて、
<option value="【ジャンプ先URL】"><【ジャンプ先記事のタイトル】"/></option>
を繰り返します。
【ジャンプ先URL】については、rss:item要素の子要素であるrss:link要素の中身を差し込みます。
先ほど、XSLTでは<xsl:value-of="要素名" />という形で表記することで、XML文書の中の該当要素の中身を差し込むと説明しました。
ところが、【ジャンプ先URL】は<>の中に記述しなくてはなりません。<>の中にさらに<>を記述することはできないので、ここでは<xsl:value-of="rss:link" />の代わりに{rss:link}と記述します。これで<xsl:value-of="rss:link" />と同じ意味になります。
次に、【ジャンプ先記事のタイトル】になりますが、これは、rss:item要素の子要素であるrss:title要素の中身を差し込みます。

・RSS2.0の場合

RSS2.0の場合は名前空間の指定がないので、RSS1.0のように接頭辞を入れる必要がありません。そのため、RSS1.0と同じ要素名でも、接頭辞が付いていればRSS1.0の方の要素、接頭辞が付いていなければRSS2.0の要素と区別することができます。

RSS2.0の場合のジャンプメニューは、次のように記述します。

<xsl:if test="//item!=''">
<form>
<select name="menu" class="haba" onChange="jumpMenu('parent',this,0)">
  <option selected="selected"><xsl:value-of select="//channel/title" />の新着記事はこちら</option>
	<xsl:for-each select="//item">
		<xsl:call-template name="バージョン2の場合"/>
	</xsl:for-each>
  </select>
  </form>
</xsl:if>

上の記述は、item要素それぞれについて<xsl:call-template name="バージョン2の場合"/>で呼び出すテンプレートの処理を行うという意味になります。
呼び出されるテンプレートは次のように記述されています。

<xsl:template name="バージョン2の場合">
	<option value="{link}"><xsl:value-of select="title"/></option>
</xsl:template>

「バージョン2の場合」という名前のテンプレートを定義し、その中で、item要素それぞれについて、
<option value="【ジャンプ先URL】"><【ジャンプ先記事のタイトル】"/></option>
を繰り返します。
RSS1.0の場合と同じように、【ジャンプ先URL】については、item要素の子要素であるlink要素の中身を差し込みます。
次に、【ジャンプ先記事のタイトル】についても、item要素の子要素であるtitle要素の中身を差し込みます。

●参考にさせていただいたサイト  ページトップへ

ここでは、この記事を書くにあたって参考にさせていただいたサイトをご紹介させていただきます。
こちらのサイトには、RSSやXML、XSLTについて勉強する際に本当にお世話になりました。

The Web KANZAKI RSS--サイト情報の要約と公開