実践！ XMLアプリケーションサーバ「BXS」

2. さらにXSLTスタイルシートを改良

■見やすくしよう

　ブックマークのページだからといって、サイトを単純に並べただけでは見づらくて仕方ありません。そこでリスト3に示すようなスタイルシート（bookmark-1.xsl）を用いて、以下のように表示を加工してみることにします。

  • カテゴリ別に表示する
  • カテゴリの見出しを表示する
  • そのうえでさらにおすすめ順に表示する

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<!-- ページ全体の枠組み -->
<xsl:template match="/bookmark">

<html>
<head><title>ブックマークのページ</title></head>
<body>

<center><h1>私のブックマーク（カテゴリ別＆おすすめ順）</h1></center>
<hr />

<xsl:apply-templates select="./category" />

<hr />

</body>
</html>

</xsl:template>

<!-- カテゴリ別見出し -->
<xsl:template match="category">
<!-- カテゴリ名称を変数に退避しておく -->
<xsl:variable name="cname"><xsl:value-of select="@id" /></xsl:variable>
<h2><xsl:value-of select="@label" /></h2>
<dl>
<!-- 各 site タグについて -->
<xsl:for-each select="/bookmark/site">
<xsl:sort order="descending" select="@rate" />
<!-- カテゴリ名がマッチするもののみ展開 -->
<xsl:if test="@category=$cname">
<xsl:apply-templates select="." />
</xsl:if>
</xsl:for-each>
</dl>
</xsl:template>

<!-- サイト紹介 -->
<xsl:template match="site">
<dt><a href="{@url}"><xsl:value-of select="@label" /></a></dt>
<dd><xsl:value-of select="." /></dd>
</xsl:template>

</xsl:stylesheet>
リスト3　bookmark-1.xsl。カテゴリ別に表示

　Webブラウザの出力結果は画面2に示すようになります（このスクリーンショットでは、bookmark-1.xslを用いるようにbookmark.xmlを修正して、bookmark-1.xmlとしています）。


画面2　bookmark-1.xsl の出力結果

　各カテゴリごとに分類したうえで見出しを出力しているのが確認できるかと思います。XML文書の内容と突き合わせてみれば、各カテゴリ内の項目も、おすすめ順にソートしてあることが分かるでしょう。図1の出力結果と比べて、どんなサイトがリストアップされているのか非常に把握しやすいですね。

■改良してどんなスタイルシートになったのか

　では、実際にこのスタイルシートを見てみましょう。15行目付近の<body>タグの展開内容に注目してください。bookmark.xslでは<site>タグを1つずつ取り出して展開していましたが、ここでは<category>タグを1つずつ展開しています。この<category>タグの展開部分（24〜39行）がポイントです。この部分では以下のXSLTのタグが新しく登場しています。

<xsl:variable>
XSLTでは、普通のプログラム言語のように変数を宣言して、値を代入しておくことが可能です。ここでは、カテゴリの識別子をあとで比較するためにcnameという変数に記録しています。

<xsl:for-each>、<xsl:sort>
select 属性で指定したタグについて、<xsl:for-each>で囲んだ処理を繰り返します。ここでは<xsl:sort>と組み合わせて、rate属性の値順に<site>タグを処理しています。

<xsl:if>
test属性に指定した条件が成立した場合のみ、<xsl:if>タグで囲んだ内容を処理します。ここでは、現在処理しているカテゴリの識別子と同じ category 属性を持つ<site>タグのみ展開するように指定しています。

　内容が理解できたら、以下のことにチャレンジしてみると面白いでしょう。

  • オススメ度が高いものは見出しを bold で表示する
  • オススメ度が低いものはコメントを表示しない
  • カンマで区切って複数のカテゴリを指定できるようにしてみる

　最初の2つについては<xsl:if>タグをうまく使えば実現できます。複数のカテゴリ指定は少し難易度が高くなりますが、<xsl:if>の条件を工夫します。条件式で利用できるXPathの豊富な文字列操作関数を調べてみることがヒントになると思います。

「3. Webブラウザ別のスタイルシートを用意」

Index
実践！ XMLアプリケーションサーバ「BXS」
第1回 XMLでWebサイトを作ろう
　 1. Baykit XML Serverとは
　 2. インストールしよう
　 3. XMLのサンプルを表示させてみる
　 4. XMLでWebページを作ろう
第2回 XSTLによるダイナミックな変換の実際
　 1. データの内容に基づいた表示の加工
2. さらにXSLTスタイルシートを改良
　 3. Webブラウザ別のスタイルシートを用意
　 4. Webブラウザごとに出力を切り替える


XML & SOA フォーラム 新着記事
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

HTML5＋UX 記事ランキング

本日月間
＠IT