XMLデータをIEで表示(基礎編): XSLTスタイルシート
xsl:attribute　で属性を作る

2002年8月24日(日)更新

■xsl:attributeで属性を作る

たけち: じゃあ、image要素について考えてみようね。

さらら: ええ。やさしくね。

たけち: そうだねぇ〜、さらら。イメージの表示はhtmlではどんな風に指定する?

さらら: うっ、う〜ん、と。。。imgタグのなかにsrc="イメージのファイル名"って書けばよかったと思うけど・・・

    <img src="イメージファイルのありか"
            altなどの属性(ここでは省略します) />

■xsl:attributeの書き方

たけち: そうだね。そのimg要素のsrc属性のような属性を生成するには、xsl:attributeを使うんだ。

さらら: あらら、なんだかまた面倒そうね。直接img要素に、src属性を書いたらだめなの?

たけち: ひとつだけだったらそれでもいいかもしれないけど、たくさんあって、それぞれのイメージのファル名が違うものを書くとしたらどうかな?

さらら: そっか。そしたら、全部HTMLで書いたのと変わんないからXSLTスタイルシートで変換する意味がなくなっちゃうわね。

たけち: xsl:attributeは次の図のように書くんだよ。name属性で属性名を指定するんだ。

xsl:attributeの書き方

さらら: あっ、そんなに難しくはなさそうね。。。。えっ〜と、namespaceってなぁに?

たけち: あっ、これについては別のところ(例えば､Namespaceってなあに?)で学習するから今は気にしなくていいよ。今回は使わないし。

さらら: はい。

■xsl:attributeでimg要素のsrc属性を生成

たけち: じゃあ、今回のサンプルでimg属性にsrc属性をつけてイメージを表示できるようにしようね。図にその様子を載せておくね。

HTMLのimg要素を生成する例

さらら: うん。わかるわ!! imgの開始タグと終了タグの間に書くのね｡

たけち: そうだね。img要素の属性を作るんだからね｡

さらら: 書くのはずいぶん面倒だけど、これだけ書いておけば、歌の全部のイメージが表示できるんでしょ、たけち。

たけち: そうそう。そうでなきゃ、こんな面倒なことしないよね。じゃぁ、いままで説明したものをぜんぶ入れたXSLTスタイルシートのリストを次に載せるね。

※XSLTスタイルシート例: 万葉集第1巻抜粋のすべての内容を表示

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

<xsl:template match="/">
   <html>
   <head>
   <title>たのしいXML: XSLTスタイルシート例-3</title>
   <link rel="stylesheet" type="text/css" href="manyo.css" />
   </head>

   <body>
   <p align="center">万葉集第1巻抜粋: 歌のすべての要素を表示</p>

   <xsl:apply-templates />

   </body>
   </html>
</xsl:template>


<xsl:template match="poem">

<table border="0" width="500" align="center">
      <tr>
         <th>歌番号: <xsl:value-of select="pno" /></th>
         <th><xsl:value-of select="poet" />の歌</th>
      </tr>
      <tr>
         <td colspan="2">原文: <xsl:value-of select="mkana" /></td>
      </tr>
      <tr>
         <td colspan="2">読み: <xsl:value-of select="yomi" /></td>
      </tr>
      <tr>
         <td><xsl:value-of select="mean" /></td>
      <td>
         <img>
         <xsl:attribute name="src">
             <xsl:value-of select="image" />
         </xsl:attribute>
         </img>
      </td>
   </tr>
</table>

</xsl:template>

</xsl:stylesheet>

さらら: これでどんな風に表示されるのかしら。たのしみだわ。

たけち: じゃあ、このXSLテキストを"basic_3.xsl"というファイルにして、実際にどうなるか見てみようね。次のテキストをクリックしてみて。あっ、そうそう。前回のXMLテキストと同じように、２行目は
<?xml-stylesheet type="text/xsl" href="basic_3.xsl"?>
として、"basic_3.xml"というファイルを前回とは別に作成しているからね。また、"image"フォルダーを作って、そこに必要なイメージファイルを入れてあるからね。

万葉集第1巻抜粋のXMLファイル basic_3.xml(上記説明のXSL適用)

こんな風に表示されます・・・

さらら: わぁ〜、すごい、すごい!! これでずいぶんそれらしくなったわね。もとのXMLテキストからは、とても想像がつかないわね。でも、うれしいわぁ。

たけち: やっとここまで来たって感じだね。でも、まだ基本中の基本ってとこなんだけどね。もう少し基本的なテンプレートの書き方を勉強しよう。

さらら: うん。よろしくね。

次回は、XSLTスタイルシートの要素です。。。(^ ^)v

注 1) img要素などの要素を生成するためのxsl:elementという要素があります。これについては別途説明いたします｡ちなみに今回の例はつぎのように書くことができます。

<xsl:element name="img">
    <xsl:attribute name="src">
       <xsl:value-of select="image" />
    </xsl:attribute>
</xsl:element>