XHTMLを書いてみましょう(xslを適用してみましょう)

2000年12月17日(日)更新

■XHTMLを表示する(4): Namespace(名前空間)に対応したxslの指定

たけち: じゃあ、今回は前回作った簡単なxhtmlのサンプルにxslを適用してIE 5.xで表示してみようね。

さらら: は〜い。でも、前にxmlテキストを表示するのに作ったxslのサンプルと同じなんじゃないの?

たけち: あっ。ほとんど一緒なんだけど、前回のサンプルにはNamespace(名前空間)を使っているんで、Namespace(名前空間)に対応したxslの指定の仕方(書き方)がちょっと違うんだ。といってもすごく簡単で、「Namespaceを含んでタグ名を指定」すればいいんだよ。たとえば、
  <xsl:value-of select="manyo:歌番号" />
見たいにね。

さらら: あっ、そうなんだ。

たけち: じゃぁ、サンプルを作ってみようね。

■Namespace(名前空間)に対応したxslの指定の概要

たけち: xhmlテキストは前回のテキストに歌をも少し追加したものを使いましょう。で、表示は表形式でね。図のようにしてみるね。

xhtmlを表示するxslの作成

さらら: いままでのxslサンプルとは、xhtmlのhtmlテキスト部分と自分で作ったタグ構造のテキスト部分、このサンプルではmanyo:万葉集だけど、区別してxslを書けば分かりやすいのね。

たけち: うん。これでxhtmlもIEで表示できそうだね。じゃぁ、実際にやってみようね。まず、xhtmlテキストのサンプルのリストを載せるね

■xhtmlサンプルテキストと対応したxslサンプルテキスト

(1) xhtmlサンプルテキスト

<?xml version="1.0" encoding="Shift_JIS"?>
<?xml-stylesheet type="text/xsl" href="xsl1.xsl"?>
<html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:manyo="http://www6.airnet.ne.jp/manyo"
        xml:lang="ja" lang="ja">
<head>
    <title>xhtmlのサンプル-1です</title>
</head>

<body>

<h3>XHTMLのサンプル-1</h3>
<p>XHTMLの簡単な例です。万葉集の歌を載せますね。</p>

<manyo:万葉集 巻="1">
      <manyo:歌>
      <manyo:歌番号>8</manyo:歌番号>
      <manyo:原文>熟田津尓 船乗世武登 月待者 潮毛可奈比沼 今者許藝乞菜</manyo:原文>
      <manyo:作者>額田王(ぬかたのおおきみ)</manyo:作者>
      <manyo:読み>
      熟田津(にきたつ)に、船(ふな)乗りせむと、月待てば、潮もかなひぬ、今は漕(こ)ぎ出(い)でな </manyo:読み>
      <manyo:イメージ>image/m0008.jpg</manyo:イメージ>
      <manyo:意味>熟田津(にきたつ)で、船を出そうと月を待っていると、いよいよ潮の流れも良くなってきた。
さあ、いまこそ船出するのです。
      </manyo:意味>
      </manyo:歌>

*** リストが長くなるので、歌のところは省略しますね。　(^ ^;

</manyo:万葉集>

</body>
</html>

(2) xslサンプルテキスト

<?xml version="1.0" encoding="Shift_JIS"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">
<html>
<head>
<title><xsl:value-of select="html/head/title" /></title>
<link rel="stylesheet" type="text/css" href="manyo.css" />
</head>

<body>
  <xsl:apply-templates select="html/body" />
</body>
</html>
</xsl:template>

<!-- 変換後のhtmlのbody部分にもとのhtmlとmanyo:万葉集を入れます -->
<xsl:template match="html/body">
  <xsl:apply-templates select="h1|h2|h3|p" />
  <xsl:apply-templates select="manyo:万葉集" />
</xsl:template>

<!-- h3やpの部分をそのままコピーします -->
<xsl:template match="h1|h2|h3|p">
    <xsl:copy>
    <xsl:value-of />
    </xsl:copy>
</xsl:template>

<!-- manyo:万葉集の部分をtableの形にして表示します。 -->
<xsl:template match="manyo:万葉集">
<xsl:for-each select="manyo:歌">
<table border="0" width="500" align="center">
<tr>
<th>歌番号: <xsl:value-of select="manyo:歌番号" /></th>
<th><xsl:value-of select="manyo:作者" />の歌</th>
</tr>
<tr>
<td colspan="2">原文: <xsl:value-of select="manyo:原文" /></td>
</tr>
<tr>
<td colspan="2">読み: <xsl:value-of select="manyo:読み" /></td>
</tr>
<tr>
<td><xsl:value-of select="manyo:意味" /></td>
<td>
<img>
    <xsl:attribute name="src">
    <xsl:value-of select="manyo:イメージ" />
    </xsl:attribute>
</img>
</td>
</tr>
</table>
</xsl:for-each>
</xsl:template>

</xsl:stylesheet>

さらら: よ〜く見ると、いままでのxslのサンプルでやってきた事ばかりだわね。

たけち: じゃあ、このXSLテキストを"xslsample1.xsl"というファイルにして、実際にどうなるか見てみようね。いつもと同じように、２行目は として、"xhtml1.xml"というファイルを作成しているからね。また、"image"フォルダーを作って、そこに必要なイメージファイルを入れてあるからね。

万葉集第1巻抜粋のxhtmlファイル xhtml1.xml(上記説明のxsl適用)

下の図のように表示されます。

IE 5.5による表示結果です

さらら: あっ、見えた見えた!! XHTMLに自分で作ったタグを追加して、それにxslを適用して・・・・だいたい感じがつかめた気がするわ。

たけち: よかったね。基本的な感じがつかめたから、これからはもっと詳しくxmlやxhtmlについて勉強しようね。

さらら: は〜い。でも、だいじょぶかしら。。。 (^ ^;

→次は(CSSだけでできること)です・・・・・ (^ ^;