ash | サーバ構築 | Linux | ホームページ作成 | プログラム | その他

XMLとスタイルシートについて

スタイルシート(XSL)とは

　XMLのスタイルシートは、XSL(eXtensible Style Language)とも呼ばれ、XMLデータの表現方法を定義するための言語です。 XMLデータに対して、スタイルシートを指定することで、整形して表示することができます。 XMLでは、HTML4.0+CSSと同様、XML+XSLとして、文章の内容と表現(書式)は分離して管理できます。
HTMLベースのXMLでは、スタイルシートとして、XSLとCSSの両方を使うことができます。

　このページでは、IE5.0を利用して、スタイルシートのテンプレートを利用して、繰り返しデータの表示などをサンプルソースを掲載しています。

住所録（帳票）を作成してみよう!

　住所録は、複数の個人情報が格納される形式となります。 個人情報は、<名前><郵便番号><住所><電話番号>などのような論理タグで定義できるため、HTMLファイルやCSVファイルよりもわかりやすくなります。
　住所録のように、複数のレコードを表形式で表示するものを帳票と呼びます。
　では、まず以下の内容のaddr.xmlと、addr.xslと、addr.cssを作成しましょう。 XMLがデータの定義で、XSLとCSSがスタイルの定義となります。

addr.xml
<?xml version="1.0" encoding="ISO-2022-JP" ?>
<?xml:stylesheet type="text/xsl" href="addr.xsl" ?>

<住所録>
  <個人情報 ID="1">
    <名前>升村 丞</名前>
    <郵便番号>920-0967</郵便番号>
    <住所>金沢市菊川1-9-6</住所>
    <電話番号>076-261-4921</電話番号>
  </個人情報>
  <個人情報 ID="2">
    <名前>北陸 太郎</名前>
    <郵便番号>920-0000</郵便番号>
    <住所>金沢市大手町1-1-1</住所>
    <電話番号>076-111-3333</電話番号>
  </個人情報>
  <個人情報 ID="3">
    <名前>金沢 花子</名前>
    <郵便番号>920-0123</郵便番号>
    <住所>金沢市片町1-2-3</住所>
    <電話番号>076-123-4567</電話番号>
  </個人情報>
</住所録>

　IE5.0で、スタイルシートの指定をしないで表示すると、データの階層構造が表示されます。

　XMLで定義したデータは、スタイルシートによって、HTMLの表形式で表示されます。
　個人情報はデータの繰り返しブロックとなりますので、別のテンプレートとして定義してあります。 さらに、各項目も別のテンプレートで定義することもできます。
　このようにXMLスタイルシートでは、apply-templatesで、検索した内容をテンプレートを使って表示することにより、記述が簡略化できます。

addr.xsl
<?xml version="1.0" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">

<html lang="ja">
<head>
  <title>住所録</title>
  <link rel="stylesheet" type="text/css" href="addr.css"/>
</head>

<body>
  <h1>住所録</h1>
  <table>
    <tr>
      <th>名前</th>
      <th>郵便番号</th>
      <th>住所</th>
      <th>電話番号</th>
    </tr>

    <xsl:apply-templates select="住所録/個人情報"/>
  </table>
</body>
</html>

</xsl:template>

<xsl:template match="個人情報">
  <tr>
    <td><xsl:value-of select="名前"/></td>
    <td><xsl:value-of select="郵便番号"/></td>
    <td><xsl:value-of select="住所"/></td>
    <td><xsl:value-of select="電話番号"/></td>
  </tr>
</xsl:template>

</xsl:stylesheet>

　次に、以下のHTMLスタイルシートファイル(addr.css)を作成します。
　スタイルシートは、XMLスタイルシート(*.xsl)とHTMLスタイルシート(*.css)の2種類を使用しています。
　XMLスタイルシートでは、XMLデータに依存する表現を定義します。
　HTMLスタイルシートでは、タグ全体の表現や、すべての画面に共通な定義をします。 見出しの色や大きさや、表の背景色などのデザインは、HTMLスタイルシートで定義してあります。 HTMLスタイルシートは、なくてもデフォルトで表示されます。

addr.css
<style>
body {
  background-color:#ffffff;
  color:#000000;
}
h1 {
  color:#00007f;
}
table {
  border:1 solid;
}
th {
  background-color:#cfffcf;
  border:1 solid;
  padding:4px;
  margin:4px;
}
td {
  background-color:#ffffcf;
  border:1 solid;
  padding:4px;
  margin:4px;
}
</style>

　作成したら、IE5.0で表示してみましょう。

　これで、XMLで定義した住所録データを、スタイルシートによって、HTMLの表形式で表示することができました。 XMLスタイルシートを使うと、データの表示順序を変更したり、レイアウトを自由に変更することができます。

　IE5.0では、for-eachを使って、手続き的なスタイルシートを定義することもできます。 表示イメージは、前の例と全く同じです。 perlでCGIを作成している人には、こちらの方が使いやすいかもしれません。

addr01.xsl
<?xml version="1.0" encoding="ISO-2022-JP" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">

<html lang="ja">
<head>
  <title>住所録</title>
  <link rel="stylesheet" type="text/css" href="addr.css"/>
</head>

<body>
  <h1>住所録</h1>
  <table>
    <tr>
      <th>名前</th>
      <th>郵便番号</th>
      <th>住所</th>
      <th>電話番号</th>
    </tr>

    <xsl:for-each select="住所録/個人情報">
      <tr>
        <td><xsl:value-of select="名前"/></td>
        <td><xsl:value-of select="郵便番号"/></td>
        <td><xsl:value-of select="住所"/></td>
        <td><xsl:value-of select="電話番号"/></td>
      </tr>
    </xsl:for-each>
  </table>
</body>
</html>

</xsl:template>

</xsl:stylesheet>

住所カード（単票）を作成してみよう!

　今作成した住所録のXMLデータを利用して、スタイルシートを切り替えることにより、住所カードを作成してみましょう。 他にも、名刺などの形式で表示することもできます。
　このように、1件のデータの内容の詳細を表示するものを単票と呼びます。
　では、住所カード用のXSLデータを作成してみましょう。

addrcard.xsl
<?xml version="1.0" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">

<html lang="ja">
<head>
  <title>住所録</title>
  <link rel="stylesheet" type="text/css" href="addr.css"/>
</head>

<body>
  <h1>住所録</h1>
  <xsl:apply-templates select="住所録/個人情報[@ID = 1]"/>
</body>
</html>

</xsl:template>

<xsl:template match="個人情報">
  <table><tr>
    <th>名前</th>
    <td><xsl:value-of select="名前"/></td>
  <tr></tr>
    <th>郵便番号</th>
    <td><xsl:value-of select="郵便番号"/></td>
  <tr></tr>
    <th>住所</th>
    <td><xsl:value-of select="住所"/></td>
  <tr></tr>
    <th>電話番号</th>
    <td><xsl:value-of select="電話番号"/></td>
  </tr></table>
</xsl:template>

</xsl:stylesheet>

　XMLデータから1件のデータを抽出するためには、select指定で、XMLタグ名[@属性名 = 属性値]という形式で指定します。 この条件指定は、value-ofやapply-templatesで利用することができます。
　実際にIE5.0で表示してみましょう。 データが1件だけ表示できたと思います。

複数のXMLファイルをマージしてみよう!

　個人単位でXMLデータを管理したり、グループ単位でXMLデータを管理する場合は、複数のXMLファイルをマージする必要があります。 そこで、今作成した住所録のXMLデータを個人単位に分割してみましょう。 スタイルシートは共通ですから、表示された結果は、全く同じとなります。
　分割する場合は、DTDのエンティティを作成しますので、以下のように記述します。

addr10.xsl
<?xml version="1.0" encoding="ISO-2022-JP" ?>
<?xml:stylesheet type="text/xsl" href="addr.xsl" ?>

<!DOCTYPE addr [
  <!ENTITY addr11 SYSTEM "addr11.xml">
  <!ENTITY addr12 SYSTEM "addr12.xml">
  <!ENTITY addr13 SYSTEM "addr13.xml">
]>

<住所録>
  &addr11;
  &addr12;
  &addr13;
</住所録>

　DTDのENTITYの定義で、SYSTEMで、ファイル名を指定します。
　&エンティティ名で、参照できます。

[ASHのホームページへ]
Copyright (C)1998-1999 ASH multimedia lab.
mail : wmaster@ash.or.jp