XSLT - クライアント側

ブラウザが XSLT をサポートしている場合、ブラウザ内でドキュメントを XHTML に変換するために使用できます。

JavaScript ソリューション

前の章では、XSLT を使用して XML ドキュメントを XHTML に変換する方法を説明しました。これは、XML ファイルに XSL スタイルシートを追加し、ブラウザで変換を実行するという方法で行いました。

この方法は効果的ですが、XML ファイルにスタイルシート参照を含めることは常に望ましいとは限りません（たとえば、XSLT を認識できないブラウザではこの方法は機能しません）。

より一般的な方法は、JavaScript を使用して変換を実行することです。

JavaScript を使用することで、次のことができます：

  • ブラウザの確認テストを実行する
  • ブラウザやユーザーのニーズに応じて異なるスタイルシートを使用する

これが XSLT の魅力です！XSLT の設計目的の 1 つは、異なるタイプのブラウザや異なるユーザーニーズをサポートしながら、データをある形式から別の形式に変換できるようにすることです。

クライアント側の XSLT 変換は、将来ブラウザが実行する主要なタスクの 1 つになることは間違いありません。また、特定のブラウザ市場（点字ディスプレイ、音声ブラウザ、ネットワークプリンタ、携帯端末など）での成長も見られるでしょう。

XML ファイルと XSL ファイル

前の章で示した XML ドキュメントを見てみましょう：

例

<?xml version="1.0" encoding="UTF-8"?>
<catalog>
<cd>
<title>Empire Burlesque</title>
<artist>Bob Dylan</artist>
<country>USA</country>
<company>Columbia</company>
<price>10.90</price>
<year>1985</year>
</cd>
.
.
</catalog>

XML ファイルを表示。

および付属の XSL スタイルシート：

例

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<body>
  <h2>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th style="text-align:left">Title</th>
      <th style="text-align:left">Artist</th>
    </tr>
    <xsl:for-each select="catalog/cd">
    <tr>
      <td><xsl:value-of select="title"/></td>
      <td><xsl:value-of select="artist"/></td>
    </tr>
    </xsl:for-each>
  </table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

XSL ファイルを表示。

この XML ファイルには XSL ファイルへの参照が含まれていないことに注意してください。

重要事項：上記のことは、XML ファイルが複数の異なる XSL スタイルシートを使用して変換できることを意味します。

XSL ファイルがリンクによってブラウザで正常に開けることを確認してください。次のようにします：

そうしないとエラーが発生する可能性がありますUncaught TypeError: Failed to execute 'importStylesheet' on 'XSLTProcessor': parameter 1 is not of type 'Node'.。

ブラウザで XML を XHTML に変換する

これは、クライアント側で XML ファイルを XHTML に変換するためのソースコードです：

例

<!DOCTYPE html> <html> <head> <script>
function loadXMLDoc(filename) { if (window.ActiveXObject) { xhttp = new ActiveXObject("Msxml2.XMLHTTP"); } else { xhttp = new XMLHttpRequest(); } xhttp.open("GET", filename, false); try { xhttp.responseType = "msxml-document" } catch (err) {} // Helping IE11 xhttp.send(""); return xhttp.responseXML; } function displayResult() { xml = loadXMLDoc("cdcatalog.xml"); xsl = loadXMLDoc("cdcatalog.xsl"); // code for IE if (window.ActiveXObject || xhttp.responseType == "msxml-document") { ex = xml.transformNode(xsl); document.getElementById("example").innerHTML = ex; } // code for Chrome, Firefox, Opera, etc. else if (document.implementation && document.implementation.createDocument) { xsltProcessor = new XSLTProcessor(); xsltProcessor.importStylesheet(xsl); resultDocument = xsltProcessor.transformToFragment(xml, document); document.getElementById("example").appendChild(resultDocument); } }
</script> </head> <body onload="displayResult()"> <div id="example" /> </body> </html>

試してみる »

ヒント：JavaScript の書き方がわからない場合は、次のチュートリアルを参照してください：JavaScript チュートリアル。

例の説明：

loadXMLDoc() 関数

loadXMLDoc() 関数は、XML ファイルと XSL ファイルを読み込むために使用されます。

ユーザーが所有しているブラウザの種類とファイルを読み込むブラウザの種類を確認します。

displayResult() 関数

この関数は、XSL ファイルで定義されたスタイルを使用して XML ファイルを表示するために使用されます。

  • XML ファイルと XSL ファイルを読み込む
  • ユーザーが所有しているブラウザの種類をテストする
  • ユーザーのブラウザが ActiveX オブジェクトをサポートしている場合：
    • transformNode() メソッドを使用して XSL スタイルシートを XML ドキュメントに適用する
    • 現在のドキュメント（id="example"）の body に、スタイルが適用された XML ドキュメントを含めるように設定する
  • ユーザーのブラウザが ActiveX オブジェクトをサポートしていない場合：
    • 新しい XSLTProcessor オブジェクトを作成し、XSL ファイルをインポートする
    • transformToFragment() メソッドを使用して XSL スタイルシートを XML ドキュメントに適用する
    • 現在のドキュメント（id="example"）の body に、スタイルが適用された XML ドキュメントを含めるように設定する

その他の拡張