XMLサーバ／Cocoon自由自在！
第2回 XML文書をCocoonでパブリッシュする

注文データを表形式で出力

　さて、これでCocoonによってXML文書をHTMLに変換する手続きについての概要は理解していただけたでしょう。次はもう少し本格的なサンプルを取り上げてみます。WebコンテンツのXML化のようなものも面白いのですが、いきなり複雑なものを取り上げる前に、XMLで表現された帳票データの表示例を紹介しましょう。

■帳票データサンプルの作成

　帳票データといってもいろいろ考えられますが、ここでは以下のような発注データを想定してみます。

商品コード 商品名 単価 数量
X-200-001 万能耳掻き 300 1000
X-201-002 鍼灸サンダル 1200 500
X-200-005 爪切りセット 1200 2000

　説明の必要はないかと思いますが、左から順に商品コード、商品名、単価、数量となっています。例ということで非常に単純化してありますが、EDI（電子データ交換）でやりとりされるような発注データを想定しています。実際にはここに発注元や発注先などの情報が追加される形になるでしょう。

　このデータがXML形式でやりとりされているという設定で、リスト3のような形式のXMLデータとして表現しておきます。

<?xml version="1.0" encoding="Shift_JIS" ?>
<order>

  <item>
    <product>
      <code>X-200-001</code>
      <name>万能耳掻き</name>
      <price currency="YEN">300</price>
    </product>
    <quantity>1000</quantity>
  </item>

  <item>
    <product>
      <code>X-201-002</code>
      <name>鍼灸サンダル</name>
      <price currency="YEN">1200</price>
    </product>
    <quantity>500</quantity>
  </item>

  <item>
    <product>
       <code>X-200-005</code>
      <name>爪切りセット</name>
      <price currency="YEN">1200</price>
   </product>
    <quantity>2000</quantity>
  </item>

</order>
リスト3　order.xml

　明細ごとのデータを<item>で表現し、それの繰り返しをルートタグである<order>でまとめています。<item>は商品情報を表す<product>と、数量を表す<quantity>から成っています。<product>が表す商品情報は、商品コードを表す<code>、商品名を表す<name>、そして、単価を表す<price>から構成されます。

■HTML化のためのスタイルシートを作成する

　リスト3のXML形式のデータを、Webブラウザで表示できるよう、HTMLに変換してみましょう。ここではWebブラウザに表示させるイメージとして、画面3のようなものを想定してみることにします。

画面3　Webブラウザ上の表示イメージ

　画面3を表示するためのHTMLのソースリストは、リスト4のようになります。

<html>

  <head>
    <title>注文票</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=Shift_JIS">
  </head>

  <body>
    <h1>注文票</h1>
    <table border="1">
      <tr>
        <th>商品コード</th>
        <th>商品名</th>
        <th>単価</th>
        <th>数量</th>
      </tr>
      <tr>
        <td>X-200-001</td>
        <td>万能耳掻き</td>
        <td align="right">300</td>
         <td align="right">1000</td>
      </tr>
      <tr>
        <td>X-201-002</td>
        <td>鍼灸サンダル</td>
        <td align="right">1200</td>
        <td align="right">500</td>
      </tr>
      <tr>
        <td>X-200-005</td>
        <td>爪切りセット</td>
        <td align="right">1200</td>
        <td align="right">2000</td>
      </tr>
    </table>
  </body>

</html>
リスト4　出力イメージのHTMLソース

■再びスタイルシートを作成する

　それではこのHTMLへと、元のXMLを変換するためのスタイルシートを作成していきましょう。既存のHTMLのイメージをもとにXSLTのスタイルシートを作成する場合、いろいろなやり方がありますが、ここでは最も簡単なアプローチをとることにします。

　まず、ルート（/）にマッチするテンプレートを1つだけ作成します。そして、その中に出力イメージをすべて書き込み、必要に応じて<xsl:value-of>などのXSLTの命令を挿入していくのです。少し凝った出力には向かないやり方ですが、ぱっと見て直感的に出力がイメージできるため、今回のような簡単な出力には向いています。

　このやり方で準備したスタイルシートをリスト5に示します。

<?xml version="1.0" encoding="Shift_JIS" ?>

<xsl:stylesheet
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  version="1.0">

<xsl:output method="html"
  encoding="Shift_JIS"
  doctype-public="-//W3C//DTD XHTML 1.0 Strict //EN"
  doctype-system="DTD/xhtml1-strict.dtd" />

  <xsl:template match="/">
    <html>

      <head>
        <title>注文票</title>
        <meta
          http-equiv="Content-Type"
          content="text/html; charset=Shift_JIS" />
      </head>

      <body>
        <h1>注文票</h1>
        <table border="1">
          <tr>
            <th>商品コード</th>
            <th>商品名</th>
            <th>単価</th>
            <th>数量</th>
          </tr>
          <xsl:for-each select="/order/item">
            <tr>
              <td> <xsl:value-of select="product/code" /> </td>
              <td> <xsl:value-of select="product/name" /> </td>
              <td align="right"> <xsl:value-of select="product/price" /> </td>
              <td align="right"> <xsl:value-of select="quantity" /> </td>
            </tr>
          </xsl:for-each>
        </table>
       </body>

    </html>
  </xsl:template>

</xsl:stylesheet>
リスト5　order.xsl

　ここで新しく用いてるXSLのタグは<xsl:for-each>のみです。このタグは、select属性で選択した各要素について、<xsl:for-each>と</xsl:for-each>の間を繰り返し適用します。

　この例では、“/order/item”、すなわちルートタグ<order>の直下にある各<item>タグについて、テーブルの行<tr>〜</tr>を出力しています。<xsl:value-of>を用い、<item>の中から商品情報や個数を取り出していることを確認してください。

■Cocoonで動作確認

　それでは念のために動作を確認しておきましょう。まず最初に、order.xmlの先頭に以下のプロセッシング・インストラクションを追加しておきます。

<?xml-stylesheet type="text/xsl" href="order.xsl" ?>
<?cocoon-process type="xslt" ?>

　Cocoonに対して変換指示を行うために、これらが必要になってくることは先ほど述べました。追加する作業を終えたorder.xmlおよびorder.xslのファイルを、先ほどと同じくsamplesフォルダの下にコピーし、以下のURLをオープンします。

http://localhost:8080/cocoon/order.xml

　Webブラウザで画面4のような出力が確認できればOKです。

画面4　注文データサンプルの動作を確認してみる

　ここでは省略しますが、ソースも表示させてみてください。リスト5のスタイルシートが適用されて、リスト4のようなHTMLが出力されていることが確認できるはずです。

■わざわざCocoonを使うまでもない？

　今回は、Cocoonを実際に用いて、XML文書をHTMLに変換するサンプルを2つほど取り上げてみました。今回の内容だけならば、わざわざCocoonを使うほどのことは……と感じた方もいらっしゃるでしょう。そこで次回はCocoonならではの機能を使い、スタイルシートの切り替えなどに挑戦したいと思います。

　お楽しみに！


Index
XMLサーバ／Cocoon自由自在！
第2回 XML文書をCocoonでパブリッシュする
　 Hello.xmlをWebブラウザに表示する
注文データを表形式で出力

「XMLサーバ／Cocoon自由自在！」


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

注目のテーマ

HTML5＋UX 記事ランキング

本日月間
＠IT