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

1. データの内容に基づいた表示の加工

　前回のフロントページのサンプルでは、ニュースのタグを取り出し、それをそのままXHTMLのタグに変換していただけでした。とりあえずこれで用は足りるのですが、もう一工夫してみましょう。例えば、サンプルということで今回はデータの件数自体が非常に少なかったのですが、実際には何十件とあることも考えられます。このような場合、ただ単純にデータを並べて表示するだけでは見る方も大変です。内容の把握ができないような表示の仕方をするのであれば、最初からデータを表示しないのとそう変わりません。

　魅力的で、かつWebサイトの訪問者にとって便利なWebページを作ろうと考えるのであれば、どのデータが重要で、何を一番先に見てもらいたいのか、データをただ漫然とXML化するだけでなく、そのプレゼンテーションについても十分考えることが大切と言えます。

　ここではその出発点として、データの種類や重要度に基づいてそれらを表示するようなサンプルを作成してみましょう

■ブックマークのページを作ろう

　前回サンプルとして取り上げたのは、個人のホームページの入り口をイメージしたフロントページでした。今回はその延長という意味で個人のホームページによくある、ブックマークのページを取り上げてみます。

　ブックマークのページの構成ですが、基本的には以下のような情報の繰り返しになっていることが多いと思います。

  • サイト名
  • URL
  • カテゴリ（分類）
  • 簡単な紹介

　XML文書としてこれらのデータを表現する場合、DTDの設計の仕方にはいくつかバリエーションが考えられますが、ここではリスト1に示すようなXML文書（bookmark.xml）として表現することにしてみます。

<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet href="bookmark.xsl" type="text/xsl"?>

<bookmark>

  <category id="IT" label="IT関連サイト" />
  <category id="holms" label="ホームズ愛好家向けサイト" />
  <category id="portal" label="ポータルサイト" />

  <site url="http://developer.java.sun.com/"
  label="Java Developer Connection" rate="4" category="IT">
  Java を極めるならまずここ。
  </site>

  <site url="http://www.altavista.com"
  label="AltaVista" rate="3" category="portal">
  昔は全然別の会社のページだったんですよ。
  </site>

  <site url="http://www.citsoft.com/holmes.html"
  label="Baker Street Connection" rate="3" category="holms">
  ストランドマガジンの表紙画像が……
  </site>

  <site url="http://www.yahoo.com/" label="Yahoo" rate="3"
     category="portal">
  とりあえず定番。
  </site>

  <site url="http://members.tripod.com/~msherman/holmes.html"   
   label="221 Baker Street" rate="4" category="holms">
  シンプルながら雰囲気あるページです。
  </site>

  <site url="http://www.atmarkit.co.jp/" label="@IT"
   rate="5" category="IT">
  IT 技術者必見。
  </site>

  <site url="http://msdn.microsoft.com/"
  label="Microsoft Developer Network" rate="3" category="IT">
  Windows 技術者ならチェックしておこう。
  </site>

</bookmark>
リスト1　XML文書化されたブックマークのページ

　このXML文書をざっと解説しておきましょう。ルートタグは<bookmark>としてあります。続いて、各サイトの名称（label属性）、URL（url属性）、カテゴリ（category 属性）、そして簡単な紹介を<site>タグで定義するようになっています。さらに上記の項目に加えて、「おすすめ度（rate属性）」の情報も追加してあります。カテゴリは識別子で区別していますが、それぞれの識別子がどんなカテゴリを表すのか<category>タグで定義してあります。ここではとりあえず日本語の見出し（label属性）のみ定義しておきました。

■ブックマークのXML文書をスタイルシートでXHTMLに変換

　さて、これをとりあえず前回のように、ただ単純にXHTML形式に変換してみましょう。リスト1のファイルをリスト2（bookmark.xsl）に示すスタイルシートのファイルとともに、BXSのwebapps/demo/bookmarkの下に置いて、Webブラウザで出力を確認してみてください。BXSがXML文書をスタイルシートに従って変換し、Webブラウザ上にHTMLが画面1のような出力結果が得られましたか？

<?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 />

<dl>
<xsl:apply-templates select="./site">
<xsl:sort order="ascending" select="@category" />
</xsl:apply-templates>
</dl>
<hr />

</body>
</html>

</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>
リスト 2 : bookmark.xsl。とりあえず表示してみる


画面1　bookmark.xmlをbookmark.xslのスタイルシートでHTMLに変換して、Webブラウザで表示した結果

　ここでスタイルシートの内容について一応確認しておきましょう。ルートの<bookmark>タグを、<html>、<head>および<body>タグに展開しています。ここで<body>タグを出力する際に、<apply-templates>を用いて<site>タグをブックマークのリストに展開します。

　これでは<site>タグを順に出力しているだけなので、ただ漠然とサイト名が並んでいるだけに見えます。カテゴリ情報も表示されていないので、どんなサイトが、どんな順で並んでいるのか、一見しただけでは把握できません。もう少し改良してみましょう。

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

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