データベース入門 資料 8
XSLT による Web ページ用文書の生成

今野 英明

平成27年6月8日


目次

1 XML 文書から Web ページ用文書を作る

これまでの XSLT の利用目的は,主に XML 文書から必要なデータを抽出することであった。 しかしながら,XSLT は XML 文書を適切な表現形式に変換する目的一般に使用されるものであるので,その一例として,この章では XML 文書を利用した Web ページ用文書作成の基本的な方法を紹介する。

1.1 データと表現形式

Web ページはデータを人に提示するのに適した表現形式の一つであり, XML 文書から Web ページ用の文書を作ることができれば, 人がデータを閲覧するには便利である。

一方で,文書は用紙に印刷して閲覧したいこともある。 もちろん,そのために Web ページをそのまま印刷して使うことも可能であるものの,Web ページはコンピュータ等で読むことを前提として作られているため,そのまま印刷すると用紙上の行数や文字数等が不適切になったり,ハイパーリンクが使えなくなるために読みにくい文書となることがある。 かといって,Web と印刷用に,同じデータを別々に用意するのは適切ではない。 複数の文書用にデータを用意しておくと,データを更新したり,現在の文書をもとに新しい文書を作成する際に,各文書用のデータを更新する必要が生じるため,文書間でのデータの不整合や,複数の文書を変更するための手間が生じるためである。

このような場合,データは一つの XML 文書として作成しておき,データの表現を定める役割を XSLT テンプレートに負わせればよい。 これにより,データを更新する必要が生じた際には元の XML 文書だけを更新し て,予め作成しておいた Web ページ作成用 XSLT テンプレートと印刷文書作成 用のテンプレートを適用するだけで文書の更新が済む。

このように, XSLT による XML の変換を使えば,データを格納したひとつの XML 文書を, 様々な形で表現することが可能になる。

以上のような,データそのものと表現形式を切り離して,データを一元化するという考え方は,データ処理一般において重要である。 人が読む通常の文章の作成においても,文章の意味・論理構造と表示形式を分離を分離して,文章を作成することには意義がある。 XML の利用は,これらを実現する方法の一つである。

1.2 HTML

HTML (HyperText Markup Language) は Web ページ記述用のマークアップ言語である 1。 XML と HTML は共に SGML というマークアップ言語を基に開発されたものなので, 両者の記法や用語は似ている。 XML との違いは使えるタグの名前が予め決められている点や, 開始タグのみの要素があること, タグ名に大文字・小文字の区別がない等である。 また,HTML はあくまで Web ページ (人間が読むもの) の記述用言語であり, XML のような汎用性のあるデータ記述言語ではない。

以下に簡単な HTML の例を示す。 ここでは, body 要素の中のタグ(h1, h2, a, p, table)の使い方が分かれば十分である 2。 (Web ブラウザでの表示はこちら)。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Sample HTML</title>
  </head>
  <body>
    <h1>HTML 文書のサンプル</h1>
    <h2>段落</h2>
    <p>p タグは段落を作ります。</p>
    <h2>ハイパーリンク</h2>
    <p>外部文書へのリンクには href 属性を持つ a タグを使います
      (例:<a href="http://echoes.hak.hokkyodai.ac.jp/db/710/">データベース入門Aのページへのリンク</a>)。
      同じコンピュータ内のファイルにリンクを張るときには,
      href 属性値にファイルのパス名が使えます。
      同じディレクトリ内のファイルであれば,href="ファイル名" でいいです。
    </p>
    <h2>表</h2>
    <p>表を作るには table タグを使います。border 属性は罫線の太さ指定です。
      表の中に行を作るのは tr タグです。
      行の中に何か書くには td タグを使います。行や列や表題は th タグです。
    </p>
    <table border="1">
      <tr>
        <th></th><th>列A</th><th>列B</th>
      </tr>
      <tr>
        <th>行1</th><td>1A</td><td>1B</td>
      </tr>
      <tr>
        <th>行2</th><td>1A</td><td>2B</td>
      </tr>
    </table>
  </body>
</html>

サーバ上の Web ページではなく,自分で作成したファイルを Web ブラウザで直接に表示するには, ブラウザのメニュー等からファイルを読み込ませる(ファイルを開く)ための操作を行うか, URI 欄に file:// に続きファイルの絶対パス名 (例: file:///pub/db_a/xml/sample.html) を入力する等をすればよい。 w3m を使うのであれば,引数に .html で終わるファイル名を指定して実行すると (例: w3m /pub/db_a/xml/sample.html), そのファイルは w3m に HTML 文書として解釈されて表示される。


1.3 XML から HTML への変換

XSLT を使って XML 文書を HTML 文書に変換すれば, XML 文書内のデータを Web ページとして見ることができる。

以下に, 参考文献の入った XML 文書 (/pub/db_a/xml/ref.xml) から HTML 文書を出力するための XSLT スタイルシート例 (/pub/db_a/xml/ref2html.xsl) を示す。 これまでに示した XSLT テンプレートと異なるのは, 次の 3 点である。

  1. xsl:output 要素の method 属性値を html にすることで, テンプレートに記述したタグを出力させる3

  2. テンプレートに XSLT の要素以外のもの (HTML のタグ) を記述している。

  3. HTML の href 属性値を XML 文書から得るために,属性値テンプレート {location-path} を用いている。
    XSLT スタイルシートのテンプレート記述において, タグの属性値部分に XML 文書のデータを埋め込みたければ, { } 内にロケーションパスを記述すればよい。 これを属性値テンプレート (attribute value template) という。
    下記のスタイルシートでは,<a href="{uri}"> において, XML 文書内の uri 要素の文字列値を取得し, それを Web ページのリンク先 URI として使う。


<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" 
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8" />
<xsl:template match="/">
<html>
<head>
<title>Reference List</title>
</head>
<body>
<h1>Reference List</h1>
<h2>book</h2>
<table>
<xsl:for-each select="ref/book">
 <tr>
   <td><xsl:value-of select="@isbn" /></td>
   <td><xsl:value-of select="title" /></td>
   <td><xsl:value-of select="author|editor" /></td>
 </tr>
</xsl:for-each>
</table>
<h2>web</h2>
<table>
<xsl:for-each select="ref/web">
 <tr>
  <td><a href="{uri}"><xsl:value-of select="title" /></a></td>
 </tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

参考文献の XML 文書にこのスタイルシートを適用して HTML 文書を出力するには,

xsltproc /pub/db_a/xml/ref2html.xsl /pub/db_a/xml/ref.xml
とすればよい。 その HTML 文書を w3m を使って Web ページとして閲覧したければ
xsltproc /pub/db_a/xml/ref2html.xsl /pub/db_a/xml/ref.xml | w3m -T text/html
でよい4

また,Firefox や Internet Explore 等の Web ブラウザは XSLT プロセッサの機能を持っている。 その機能を使って生成した Web ページは http://echoes.hak.hokkyodai.ac.jp/tmp/ref_PI.xml で閲覧できる。 Web ブラウザの XSLT プロセッサ機能を利用する方法は第 1.4節で述べる。


1.4 参考:Web ブラウザを使った XSL 変換 -- XML 文書への処理命令の追加

XML パーサを持った Web ブラウザは XML 文書の構造を解析して表示できるが, XSLT プロセッサの機能も併せ持つ Web ブラウザを使えば, XSLT による XML 文書の変換と結果の表示を Web ブラウザのみで行える。

そのためには,変換対象となる XML 文書内に, 適用したいスタイルシートの情報を書き込む必要がある。 これを XML では処理命令 (PI; processing instruction) という。 処理命令を記述する位置は,ルート要素よりも前としなければならない5

次のものは,XSLT による変換を行う処理命令の例である。 適用したい XSLT スタイルシートは href 属性で指定する。 Web サイト上にスタイルシートがある場合には,

<?xml-stylesheet type="text/xsl" 
	href="http://echoes.hak.hokkyodai.ac.jp/db/710/ref2html.xsl" ?>
のような URL によるスタイルシートの指定が可能であり,XML 文書と同じコンピュータにあるファイルをスタイルシートとして指定するのであれば
<?xml-stylesheet type="text/xsl" href="/pub/db_b/xml/ref2html.xsl" ?>
のようにファイルのパス名を記述すればよい6

処理命令が書かれた XML 文書を Web ブラウザで開けば, XSLT 変換の結果を得ることができる 7

2 練習問題

  1. 資料 6 で利用した XML 文書 (/pub/db_a/xml/data_model.xml) に, 第 1.3 節の XSLT スタイルシート例 (/pub/db_a/xml/ref2html.xsl) を適用し,結果を出力しなさい。 xsltproc コマンドを使うこと。

    その出力をパイプと less を使って確認してから,リダイレクトを使ってファイルに保存しなさい。 ファイル名の終り(拡張子)は .html とする。 保存したファイルを Web ブラウザで表示しなさい8

  2. 前の資料「7 XSLT の反復構造」の第 3 章の練習問題 3.3 で作成した XSLT スタイルシートを,HTML を出力するように変更しなさい。

    また,XML 文書に処理命令を追加することにより,xsltproc コマンドを使う代わりに,ブラウザの XSLT プロセッサ機能を使って表を閲覧できるようにしなさい。



脚注

... ページ記述用のマークアップ言語である1
HTML の上位言語として XHTML (eXtensive HyperText Markup Language) がある。 これは HTML を XML の仕様に則った形にしたものと言えるが, ここではより一般的で記述が容易な HTML を使う。
... table)の使い方が分かれば十分である2
body 要素の内容だけを記述しても Web ページは表示される
... テンプレートに記述したタグを出力させる3
これまで利用してきた <xsl:output method="text"> は, xslt:template の内容のうち,タグ等は出力せずに文字データのみを出力する指定である。
... でよい4
w3m のオプションは man w3m を実行して調べることができる。
... 処理命令を記述する位置は,ルート要素よりも前としなければならない5
もちろん XML 宣言より後ろ。
...6
XML 文書と同じディレクトリに存在する XSLT テンプレートを適用する場合,href 属性には,パス名に代え,ファイル名のみ記述してよい。 さらに,絶対パス名の前に file:// というスキームを付けると,ローカルに存在するファイルであることを明記した URL(URI) を記述したことになる。
... 変換の結果を得ることができる7
実際に処理命令を実行できるかどうかは,XML 文書を扱うプログラム (Web ブラウザ) に依存する。
... ブラウザで表示しなさい8
w3m を利用すればよいが,firefox を使うのであればローカル (Windows) で X サーバを起動して X を使える状態にしてから,リモートで firefox -no-remote を実行すれば,firefox をリモートのコンピュータで起動して,ウィンドウをローカルに表示できる。