From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../api/xsltprocessor/generating_html/index.html | 178 +++++++++++++++++++++ 1 file changed, 178 insertions(+) create mode 100644 files/ja/web/api/xsltprocessor/generating_html/index.html (limited to 'files/ja/web/api/xsltprocessor/generating_html') diff --git a/files/ja/web/api/xsltprocessor/generating_html/index.html b/files/ja/web/api/xsltprocessor/generating_html/index.html new file mode 100644 index 0000000000..5dd0bc1f01 --- /dev/null +++ b/files/ja/web/api/xsltprocessor/generating_html/index.html @@ -0,0 +1,178 @@ +--- +title: Generating HTML +slug: Web/API/XSLTProcessor/Generating_HTML +translation_of: Web/API/XSLTProcessor/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>
+
+
+
+{{ languages( { "en": "en/XSLT_in_Gecko/Generating_HTML", "fr": "fr/XSLT_dans_Gecko/G\u00e9n\u00e9ration_de_HTML", "ko": "ko/XSLT_in_Gecko/Generating_HTML" } ) }} -- cgit v1.2.3-54-g00ecf