要素、属性

演習内容

  1. 画像ファイルのコピー：

    ここでは、情報大の建物等の画像ファイルを取り扱った処理を演習します。 まずは、画像ファイルを保存するディレクトリを、 ~/publich_html/xmlの下に、imageという名前で 作成してください。

    画像ファイルは下記のディレクトリにあります。

    Y:\env\susaki\envinfo\image

    上記にある画像ファイルのうち、.JPGの拡張子以外の画像ファ イル（.jpgの拡張子の画像のみ）を全て、自分の~/publich_html/xml/image へコピーして下さい。

  2. XMLファイルの作成：

    下記のファイルを テキストエディタ（秀丸やメモ帳など）上で作成し、 builiding3-1.xmlという名前で保存しましょう。 これは、「XML文書の作成」のページで 作成したbuilding1-2.xmlに赤い行を追加したものです。

    ※注意：下記の赤い行のうち、URLは上記で画像を保存した 自分自身のURLを記述するように。

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

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

<building id="1">
  <name>本館棟</name>
  <floor>7</floor>
  <comment>講義室、演習室、事務局、ゼミ室</comment>
  <image>
    <url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/mainbuilding1.jpg</url>
    <thumnail_url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/mainbuilding1_min.jpg</thumnail_url>
  </image>
</building>

<building id="2">
  <name>体育館棟</name>
  <floor>2</floor>
  <comment>アリーナ、トレーニングルーム</comment>
  <image>
    <url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/gym1.jpg</url>
    <thumnail_url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/gym1_min.jpg</thumnail_url>
  </image>
</building>

<building id="3">
  <name>学術フロンティア共同研究推進センター</name>
  <floor>3</floor>
  <comment>「社会環境」「自然環境」「環境情報システム開発」の国際共同研究の拠点</comment>
  <image>
    <url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/froniter1.jpg</url>
    <thumnail_url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/frontier1_min.jpg</thumnail_url>
  </image>
</building>

<building id="4">
  <name>総合情報センター棟</name>
  <floor>3</floor>
  <comment>電子図書館、メディア・ホール、スタジオ</comment>
  <image>
    <url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/infocenter1.jpg</url>
    <thumnail_url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/infocenter1_min.jpg</thumnail_url>
  </image>
</building>

<building id="5">
  <name>学生会館「ピオーネ」</name>
  <floor>2</floor>
  <comment>部活動、サークル、学園祭などの課外活動の拠点</comment>
  <image>
    <url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/student1.jpg</url>
    <thumnail_url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/student1_min.jpg</thumnail_url>
  </image>
</building>

<building id="6">
  <name>食堂棟</name>
  <floor>1</floor>
  <comment>八角形の建物</comment>
  <image>
    <url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/restaurant1.jpg</url>
    <thumnail_url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/restaurant1_min.jpg</thumnail_url>
  </image>
</building>

<building id="7">
  <name>野球部グラウンド</name>
  <floor>1</floor>
  <comment>野球専用グラウンド</comment>
  <image>
    <url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/ballpark1.jpg</url>
    <thumnail_url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/ballpark1_min.jpg</thumnail_url>
  </image>
</building>

<building id="8">
  <name>グラウンド</name>
  <floor>1</floor>
  <comment>多目的グラウンド</comment>
  <image>
    <url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/field1.jpg</url>
    <thumnail_url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/field1_min.jpg</thumnail_url>
  </image>
</building>

<building id="9">
  <name>テニスコート</name>
  <floor>1</floor>
  <comment>テニスコート</comment>
  <image>
    <url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/court1.jpg</url>
    <thumnail_url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/court1_min.jpg</thumnail_url>
  </image>
</building>

<building id="10">
  <name>駐車場</name>
  <floor>1</floor>
  <comment>学生駐車場</comment>
  <image>
    <url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/parking1.jpg</url>
    <thumnail_url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/parking1_min.jpg</thumnail_url>
  </image>
</building>

<building id="11">
  <name>部室棟I・II</name>
  <floor>2</floor>
  <comment>部室、翔風祭実行委員会の準備作業部屋</comment>
  <image>
    <url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/club1.jpg</url>
    <thumnail_url>http://www.gi.ce.t.kyoto-u.ac.jp/user/susaki/envinfo/image/club1_min.jpg</thumnail_url>
  </image>
</building>

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

    そして、XSLTスタイルシートを作成します。building3-1.xslとい うファイル名で保存してください。 この段階では、単に「buildings」の要素の「image/url」のデータ だけを引っ張ってきて表示しているだけです。

    このファイルは、上記の演習と同 様に、building1-2.xslを元に、赤い行を追加して作成しました。 このように見えるはずです。

    *********** building3-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>No.</th>
    <th>名前</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>
      <td><xsl:value-of select="image/url" /></td>
    </tr>
  </xsl:for-each>
</xsl:template>


</xsl:stylesheet>
  4. 要素、属性の指定：

    ここでは、各建物の画像を表示させるため方法を演習します。画像を表示させる HTML (XHTML) のタグは、

    <img src="画像ファイル名" />

    です。 参考： HTMLのタグのページ

    このような表示をXSLTで実現するために、

    • 要素名「img」を「xsl:element」で指定
    • 属性名「src」を「xsl:attribute」で指定
    • 属性値「画像ファイル名」は「xsl:value-of」で抽出

    という方法で行ってみます。

    それでは、building3-1.xslを元に、下に示された赤い行を追記して、 building3-2.xslというファイルを作ってください。 また、building3-1.xmlをコピーして、スタイルシートの指定先を変更した上で、 builiding3-2.xmlという名前で保存しましょう。 このように見えるはずです。

    *********** building3-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>
    <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>
      <td>
        <xsl:element name="img">
          <xsl:attribute name="src">
            <xsl:value-of select="image/thumnail_url" />
          </xsl:attribute>
          <xsl:attribute name="width">100</xsl:attribute>
          <xsl:attribute name="height">75</xsl:attribute>
        </xsl:element>
      </td>
    </tr>
  </xsl:for-each>
</xsl:template>


</xsl:stylesheet>

課題

  1. 要素、属性の利用

    上記では、imgタグを使用した画像の表示まで演習した。 今度は、imgタグで表示したサムネール画像をクリックすると、原画像が表示さ れるようにリンクを張りたい。 こちらのページのように表示するために、 まず、building3-1.xmlをコピーして、スタイルシートの指定先を変更した上で、 builiding3-3.xmlを作成し、ついで XSLTファイル（building3-3.xsl）を作成せよ。

    表示確認は、Webブラウザ上でURLを

    http://www.edu.tuis.ac.jp/~e01000ab/xml/building3-3.xml

    のように指定することで行う。

    2. 解答例

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