This page was translated from English by the community. Learn more and join the MDN Web Docs community.

Generating HTML

HTML を生成する

ブラウザ内の XSLT の共通アプリケーションの一つは、クライアント上で XML を HTML へと変換することです。二つ目の例は、前回と同様の記事についての情報を含むドキュメント (example2.xml) を入力し、HTML ドキュメントへ変換します。

今回は、記事の <body> 要素は HTML 要素 (図 2 では <b> タグと <u> タグ) を含みます。XML ドキュメントは HTML 要素と XML 要素の両方を含みますが、一つの名前空間、つまり XML 要素のための名前空間のみが必要です。これには HTML 名前空間が無く、XHTML 名前空間を使用すると HTML ドキュメントのように振舞わない XML ドキュメントを XSL に生成させてしまうため、XSL スタイルシート内の xsl:output によって結果のドキュメントが HTML として扱われるようにします。XML 要素については、私たちの独自の名前空間 http://devedge.netscape.com/2002/de と、それによって与えられる myNS プレフィックス (xmlns:myNS="http://devedge.netscape.com/2002/de") が必要です。

図 2 XML ファイル :(example2.xml)view example | view source XML Document (example2.xml): 

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="example2.xsl"?>
  <myNS:Article xmlns:myNS="http://devedge.netscape.com/2002/de">
    <myNS:Title>My Article</myNS:Title>
    <myNS:Authors>
      <myNS:Author company="Foopy Corp.">Mr. Foo</myNS:Author>
      <myNS:Author>Mr. Bar</myNS:Author>
    </myNS:Authors>
    <myNS:Body>
      The <b>rain</b> in <u>Spain</u> stays mainly in the plains.
    </myNS:Body>
  </myNS:Article>

XSL スタイルシートは二つの名前空間を持つ必要があります。一つは XSLT 要素、もう一つは私たちの独自の XML 要素を XML ドキュメント内で使用するためのものです。XSL スタイルシートの出力は、xsl:output 要素を使用して HTML に設定します。出力を HTML に設定すると結果的に要素 (青色の部分) が名前空間を持たないため、これらの要素は HTML 要素とみなされます。

図 3 : 二つの名前空間をもつ XSL スタイルシート (example2.xsl) XSL Stylesheet (example2.xsl): 

  <?xml version="1.0"?>
  <xsl:stylesheet version="1.0"
                           xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                           xmlns:myNS="http://devedge.netscape.com/2002/de">

    <xsl:output method="html"/>
    ...
  </xsl:stylesheet version="1.0">

XML ドキュメントのルートノードに一致するテンプレートは、基本的な HTML ページの構造を生成するために作成し、使用されます。

図 4 : 基本的な HTML ドキュメントの生成 XSL スタイルシート (example2.xsl): 

  ...
  <xsl:template match="/">
  <html>

    <head>

      <title>
        <xsl:value-of select="/myNS:Article/myNS:Title"/>
      </title>

      <style type="text/css">
        .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
      </style>

    </head>

    <body>
      <p class="myBox">
        <span class="title">
          <xsl:value-of select="/myNS:Article/myNS:Title"/>
        </span> </br>

        Authors:   <br />
          <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
      </p>

      <p class="myBox">
        <xsl:apply-templates select="//myNS:Body"/>
      </p>

    </body>

  </html>
  </xsl:template>
  ...

例を完成するには、さらに三つの xsl:template が必要です。最初の xsl:template は、二番目のテンプレートが body ノードを処理する間、author ノードに使用されます。三番目のテンプレートは、任意のノードや任意の属性に対応する一般的な対応規則を持っています。これは XML ドキュメント内で、HTML 要素のすべてに対応し、変換生成される HTML ドキュメントにコピーする要素を予約しておくために必要です。

図 5 : 最終的な三つのテンプレート XSL Stylesheet(example2.xsl): 

  ...
  <xsl:template match="myNS:Author">
     --   <xsl:value-of select="." />

    <xsl:if test="@company">
     ::   <b>  <xsl:value-of select="@company" />  </b>
    </xsl:if>

    <br />
  </xsl:template>

  <xsl:template match="myNS:Body">
    <xsl:copy>
      <xsl:apply-templates select="@*|node()"/>
    </xsl:copy>
  </xsl:template>

  <xsl:template match="@*|node()">
    <xsl:copy>
      <xsl:apply-templates select="@*|node()"/>
    </xsl:copy>
  </xsl:template>
  ...

最終的な XSLT スタイルシートは次のようになります:

図 6 : 最終的な XSLT スタイルシートview example | view source XSL Stylesheet: 

  <?xml version="1.0"?>
  <xsl:stylesheet version="1.0"
                           xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                           xmlns:myNS="http://devedge.netscape.com/2002/de">

    <xsl:output method="html" />

    <xsl:template match="/">
      <html>

        <head>

          <title>
            <xsl:value-of select="/myNS:Article/myNS:Title"/>
          </title>

          <style type="text/css">
            .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
          </style>

        </head>

        <body>
          <p class="myBox">
            <span class="title">
              <xsl:value-of select="/myNS:Article/myNS:Title"/>
            </span> <br />

            Authors:   <br />
              <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
            </p>

          <p class="myBox">
            <xsl:apply-templates select="//myNS:Body"/>
          </p>

        </body>

      </html>
    </xsl:template>

    <xsl:template match="myNS:Author">
       --   <xsl:value-of select="." />

      <xsl:if test="@company">
       ::   <b>  <xsl:value-of select="@company" />  </b>
      </xsl:if>

      <br />
    </xsl:template>

    <xsl:template match="myNS:Body">
      <xsl:copy>
        <xsl:apply-templates select="@*|node()"/>
      </xsl:copy>
    </xsl:template>

    <xsl:template match="@*|node()">
        <xsl:copy>
          <xsl:apply-templates select="@*|node()"/>
        </xsl:copy>
    </xsl:template>
  </xsl:stylesheet>