Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

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 要素については、私たちの独自の名前空間 https://devedge.netscape.com/2002/de と、それによって与えられる myNS プレフィックス (xmlns:myNS="https://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="https://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="https://www.w3.org/1999/XSL/Transform"
                           xmlns:myNS="https://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="https://www.w3.org/1999/XSL/Transform"
                           xmlns:myNS="https://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>

ドキュメントのタグと貢献者

 このページの貢献者: Marsf
 最終更新者: Marsf,