XMLファイルの作成、テンプレートの適用、繰り返し

演習内容

ここでは、簡単なXMLファイルの作成、および表示のためのXSLTについて演習し ます。まず、全く知識がないという前提に基づき、配布資料の説明を行います。 必要に応じて、線を引くなり、書き込むなり、ノートにメモを取るなりして下さ い。 その後で、下に示す演習問題に自分自身で挑戦してもらいます。

  1. XMLファイル用のディレクトリの作成：

    ~/public_htmlの下に、xmlという ディレクトリを作りましょう。今後はその下にファイルを保存していくとします。 課題のファイルを私だけでなく、他の受講生もWeb上で確認できるようにするために、 public_htmlの下にディレクトリを作ってもらうというわけです。

  2. XMLファイルの作成：

    下記のファイルをテキストエディタ（秀丸やメモ帳など）上で作成し、 building1.xmlという名前で保存しましょう。

    保存したら、Internet Explorer上でツリー上のデータ構造が表示されるか 確認してください。ファイルをダブルクリックしても大丈夫ですし、

    http://www.edu.tuis.ac.jp/~e01000ab/xml/building1.xml

    というURLを指定しても確認できるはずです（「e01000ab」は適宜自分の ユーザIDに置き換えてください）。ちなみに このように見えるはずです。

    3. *********** building1.xml （ここから下を書いていく）************ 
    <?xml version="1.0" encoding="Shift_JIS"?>


<buildings title="東京情報大の建物一覧">

<building id="1">
  <name>本館棟</name>
  <floor>7</floor>
  <comment>講義室、演習室、事務局、ゼミ室</comment>
</building>

<building id="2">
  <name>体育館棟</name>
  <floor>2</floor>
  <comment>アリーナ、トレーニングルーム</comment>
</building>

<building id="3">
  <name>学術フロンティア共同研究推進センター</name>
  <floor>3</floor>
  <comment>「社会環境」「自然環境」「環境情報システム開発」の国際共同研究の拠点</comment>
</building>

</buildings>
  3. XSLTスタイルシートの作成（1）：

    次に、下に示すように、赤く示された1行だけ追記して保存してください。 XSLTでのスタイルシートを指定することで、見栄えをよくしていきます。

    *********** building1.xml （赤い1行を追加するだけ）************ 
    <?xml version="1.0" encoding="Shift_JIS"?>
<?xml-stylesheet type="text/xsl" href="building1-1.xsl" ?>

<buildings title="東京情報大の建物一覧">

<building id="1">
  <name>本館棟</name>
  <floor>7</floor>
  <comment>講義室、演習室、事務局、ゼミ室</comment>
</building>

<building id="2">
  <name>体育館棟</name>
  <floor>2</floor>
  <comment>アリーナ、トレーニングルーム</comment>
</building>

<building id="3">
  <name>学術フロンティア共同研究推進センター</name>
  <floor>3</floor>
  <comment>「社会環境」「自然環境」「環境情報システム開発」の国際共同研究の拠点</comment>
</building>

</buildings>

    そして、XSLTスタイルシートを作成します。building1-1.xslとい うファイル名で保存してください。 このように見えるはずです。 この段階では、単に「buildings」の属性の「title」のデータだけを引っ張ってき て表示に利用しているだけです。これから発展させていきます。

    *********** building1-1.xsl ************ 
    <?xml version="1.0" encoding="Shift_JIS"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html" />

<xsl:template match="/" >
  <html>
  
  <head>
  <title>
  <xsl:value-of select="buildings/@title" />
  </title>
  </head>
  
  <h1><xsl:value-of select="buildings/@title" /></h1>

  <table border="1">
  <tr>
    <th>名前</th>
    <th>階数</th>
    <th>特徴</th>
  </tr>
  </table>
  
  
  </html>
</xsl:template>

</xsl:stylesheet>
  4. XSLTスタイルシートの作成（2）：

    次に、building1-1.xslを元に、下に示された赤い行を追記して、 building1-2.xslというファイルを作ってください。

    保存後は、building1.xmlの2行目の 「building1-1.xsl」という記述を、 「building1-2.xsl」に修正してから、building1.xmlをIE上で表示させて確認 しましょう。 このように見えるはずです。

    *********** building1-2.xsl ************ 
    <?xml version="1.0" encoding="Shift_JIS"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html" />

<xsl:template match="/" >
  <html>
  
  <head>
  <title>
  <xsl:value-of select="buildings/@title" />
  </title>
  </head>
  
  <h1><xsl:value-of select="buildings/@title" /></h1>

  <table border="1">
  <tr>
    <th>No.</th>
    <th>名前</th>
    <th>階数</th>
    <th>特徴</th>
  </tr>
  
  <xsl:apply-templates select="buildings" />
  
  </table>
  
  
  </html>
</xsl:template>


<xsl:template match="buildings">
  <xsl:for-each select="building">
    <tr>
      <td><xsl:value-of select="@id" /></td>
      <td><xsl:value-of select="name" /></td>
      <td><xsl:value-of select="floor" /></td>
      <td><xsl:value-of select="comment" /></td>
    </tr>
  </xsl:for-each>
</xsl:template>


</xsl:stylesheet>
  5. XSLTスタイルシート（3）：

    今度は、building1-2.xslを元に、下に示された赤い行を追記して、 building1-3.xslを作成しましょう。ここでは、 ソートをかけています。ソートの書式は次の通りです。

    <xsl:sort select="式" lang="言語コード" data-type="text|number" order="ascending|descending" />

    「ascending」は昇順、「descending」は降順を意味しています。 このように見えるはずです。

    *********** building1-3.xsl ************ 
    <?xml version="1.0" encoding="Shift_JIS"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html" />

<xsl:template match="/" >
  <html>
  
  <head>
  <title>
  <xsl:value-of select="buildings/@title" />
  </title>
  </head>
  
  <h1><xsl:value-of select="buildings/@title" /></h1>

  <table border="1">
  <tr>
    <th>No.</th>
    <th>名前</th>
    <th>階数</th>
    <th>特徴</th>
  </tr>
  
  <xsl:apply-templates select="buildings" />
  
  </table>
  
  
  </html>
</xsl:template>


<xsl:template match="buildings">
  <xsl:for-each select="building">
  
  <xsl:sort select="floor" data-type="number" order="ascending" />

    <tr>
      <td><xsl:value-of select="@id" /></td>
      <td><xsl:value-of select="name" /></td>
      <td><xsl:value-of select="floor" /></td>
      <td><xsl:value-of select="comment" /></td>
    </tr>
  </xsl:for-each>
</xsl:template>


</xsl:stylesheet>

課題

  1. XMLファイル作成の練習（1）

    こちらのページを参考にして、上記のbuilding1.xmlの「building」のデー タを、「部室棟I・II」まで増やせ。そのXMLファイル名は building1-2.xmlにして保存せよ。 こちらのページは一例である。 その後、 こちらの見本ページのように表示される か、building1-2.xslを用いてIE上で表示を確認せよ。

  2. XMLファイル作成の練習（2）

    上記のbuilding1-2.xmlをコピーして、スタイルシートの指定を 「building1-4.xsl」に変更した上で、 building1-4.xmlというファイル名で保存せよ。その後、 こちらの見本ページのように表示させる XSLTスタイルシート、building1-4.xslを作成して、 IE上で表示を確認せよ。ちなみに、見本ページでは、各建物名を <h2>〜</h2>で表示させ、階数、特徴を リスト表示させている。

    見本ファイル
  3. XMLファイル作成の練習（3）

    こちらのページの 「実習室の状況」を参考にして、各実習室に関するXMLファイルを作りたい。 こちらの見本ページのようなページを作成するため に、XMLファイル（room1-1.xml）、および XSLTスタイルシート（room1-1.xsl）を作成せよ。

    XMLファイルがどうしても作れない場合には、上記の見本ページにて「ソースの 表示」を実行すれば、ソースを閲覧することはできる。しかしながら、できるだ け独力で作成してみてほしい。

  4. XSLTスタイルシートの操作（1）

    building1.xmlでは、各buildingにおいて、 <comment>〜<comment>の要素数は1つずつで あったが、 この見本のように、2つ以上の要素を 持つ場合を想定する。building1.xmlに多少のデータを追加して、 building2-1.xmlを作成し、それに対応する XSLTファイル、building2-1.xslを作成せよ。

    見本ファイル
  5. XSLTスタイルシートの操作（2）

    問題3と同様に、room1-1.xmlにおいてもこの見本 のように、<comment>〜 <comment>の要素数が2つ以上設定できる状況を想定する。 room1-1.xmlに必要なデータを追加して、 room2-1.xmlを作成し、それに対応するXSLTファイル、 room2-1.xslを作成せよ。

    見本ファイル
[XMLのページ] [環境情報システム論のページ]
須崎純一　京都大学大学 工学研究科都市環境工学専攻 環境情報学講座