【XSL】 属性値にデータを埋め込む方法 ~変数を使う~

XML文書のスタイルを定義するXMLベースのフォーマット XSL で、XML中のデータを属性値に挿入する方法をメモする。

XMLから取得したデータを出力するのに、<xsl:value-of>タグが使える。

<xsl:value-of select="(XPath)" />

しかし、これを使って<img>タグのalt属性に値を埋め込もうとすると、<xsl:attribute>タグと組み合わせて次のようにする必要があり、書きにくい。

<img src="sampleimage.gif">
  <xsl:attribute name="alt">
    <xsl:value-of select="(XPath)" />
  </xsl:attribute>
</img>

書きにくいのは、実際に出力される<img>タグと大きく姿が違うから。XSLはそれ自体もまたXML文書であるため、XML形式として成立していなくてはならないのでこうなる。

だが、次のような書き方をすれば、実際の<img>タグの記述に近い形で同じことを表現できるそうだ。

<xsl:variable name="xmldata" select="(XPath)" />
<img src="sampleimage.gif"
  alt="XMLからのデータ反映「{$xmldata}」"
/>

<xsl:variable> は、name属性に与えた名前で変数を定義するタグ。select属性で、XMLのどこから値を取得するかを指定している。

このタグで定義した変数の値は、属性値の中で {$変数名} と書くことで出力することができるようだ。

この書き方なら、普通の<img>タグに近い書き方で、テンプレート化することができて便利だ。

下記は固定値を変数化する書き方みたい。

<xsl:variable name="sample">testText</xsl:variable>
<img
    src="sampleimage.gif"
    alt="サンプルテキスト「{$sample}」"
/>

{$sample} の部分には、文字列 testText が挿入される。

今回試してみたサンプルデータはコチラから
画像のalt属性値に値を埋めているのでわかりづらいが、マウスを乗せてしばらく待ってみたり、画像表示をオフにしたりして確認してみて頂きたい。


プロフィール

ときにはデザイナ、ときにはディレクタ、ときにはプログラマ、ときには何でも屋と、ウェブの世界で未熟ながらもいろいろやっている、コヤナギトモヤです。

ツイッター上ではこのヒト。
@tomk79

RSSフィード

ページの先頭へ戻る