紅孔雀 このページをアンテナに追加 RSSフィード

2007-01-20 ajaxslt で XSLT を実行する

[][][] ajaxslt で XSLT を実行する

ajaxslt(JavaScript による XSLT の実装)を用いて XSLT を適用するサンプル・コードです。


関数

XSLT を適用するには、xsltProcess() 関数を使用します:

function xsltProcess(xmlDoc, stylesheet)

引数の xmlDoc には入力ドキュメントの DOM-Node、stylesheet には適用するスタイルシートの DOM-Node を指定します。そして、xsltProcess() 関数は、xmlDoc に stylesheet を適用した結果を文字列として返します。

サンプル・コード

以下にサンプル・コードを示します。このコードでは lib ディレクトリに ajaxslt の JavaScript ファイルが置かれているとして記述しています。また、動作確認は ajaxslt 0.7、Firefox 1.5、Internet Explorer 6.0 で行いました:

<html>
<head>
<script src="lib/xmltoken.js" language="javascript" type="text/javascript"></script>
<script src="lib/util.js" language="javascript" type="text/javascript" /></script>
<script src="lib/dom.js" language="javascript" type="text/javascript" /></script>
<script src="lib/xpath.js" language="javascript" type="text/javascript" /></script>
<script src="lib/xslt.js" language="javascript" type="text/javascript" /></script>
</head>
<body>

<div id="transformed">
</div>

<script language="javascript" type="text/javascript">

// 変換に使用する XSL.
var stylesheet_string = ''
    + '<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">'
    + '  <xsl:template match="/">'
    + '        <xsl:apply-templates />'
    + '  </xsl:template>'
    + '  <xsl:template match="persons">'
    + '    <table border="1" cellspacing="0" cellpadding="3">'
    + '      <tr><th>id</th><th>name</th><th>age</th></tr>'
    + '      <xsl:apply-templates />'
    + '    </table>'
    + '  </xsl:template>'
    + '  <xsl:template match="person">'
    + '    <tr>'
    + '      <td><xsl:value-of select="@id" /></td>'
    + '      <td><xsl:value-of select="name" /></td>'
    + '      <td><xsl:value-of select="age" /></td>'
    + '    </tr>'
    + '  </xsl:template>'
    + '</xsl:stylesheet>'

// 変換元 XML.
var source_string = ''
     + '<persons id="source">'
     + '  <person id="0001">'
     + '    <name>太郎</name>'
     + '    <age>10</age>'
     + '  </person>'
     + '  <person id="0002">'
     + '    <name>次郎</name>'
     + '    <age>20</age>'
     + '  </person>'
     + '  <person id="0003">'
     + '    <name>花子</name>'
     + '    <age>30</age>'
     + '  </person>'
     + '</persons>'

// source_string をパースして DOM-Tree に変換.
var source = xmlParse(source_string)

// stylesheet_string をパースして DOM-Tree に変換.
var stylesheet = xmlParse(stylesheet_string)

// XSLT を実行.
var transformed = xsltProcess(source, stylesheet)

// 変換結果を <div id="transformed"> に設定.
document.getElementById("transformed").innerHTML = transformed

</script>

</body>
</html>

ajaxslt に関する過去のエントリへのポインタ

2007-01-16 ajaxslt で XPath を使用する

[][][] ajaxslt で XPath を使用する

ajaxslt(JavaScript による XSLT の実装)を用いて XPath 式を評価するサンプル・コードです。


サンプル・コード

以下にサンプル・コードを示します。lib ディレクトリに ajaxslt の JavaScript ファイルが置かれているとして記述しています。また、動作確認は ajaxslt 0.7、Firefox 1.5、Internet Explorer 6.0 で行いました:

<html>
<body>
<script language="javascript" type="text/javascript" src="lib/util.js"></script>
<script language="javascript" type="text/javascript" src="lib/xmltoken.js"></script>
<script language="javascript" type="text/javascript" src="lib/dom.js"></script>
<script language="javascript" type="text/javascript" src="lib/xpath.js"></script>
<script language="javascript" type="text/javascript">

// 文字列形式の XML データ.
var xml_string = ""
    + "<persons>"
    + "    <person id='0001'>"
    + "        <name>太郎</name>"
    + "        <age>10</age>"
    + "    </person>"
    + "    <person id='0002'>"
    + "        <name>次郎</name>"
    + "        <age>20</age>"
    + "    </person>"
    + "    <person id='0003'>"
    + "        <name>花子</name>"
    + "        <age>30</age>"
    + "    </person>"
    + "</persons>"

// DOM-Tree に変換.
var xml_dom = xmlParse(xml_string)

// XPath 式をコンパイル => expression オブジェクト.
var xpath_expression = xpathParse("/persons/person/name/text()")

// context オブジェクトを作成.
var xpath_context = new ExprContext(xml_dom)

// XPath を評価 => value オブジェクト.
var xpath_value = xpath_expression.evaluate(xpath_context)

// ノード・セットを取得.
var node_set = xpath_value.nodeSetValue()

// 表示.
for(var i = 0; i < node_set.length; i++)
{
    document.write(node_set[i].nodeValue + "<br />")
}

</script>
</body>
</html>
出力結果
太郎
次郎
花子

あとがき

今回 ajaxslt で XPath を使用する方法を調べたのは、XML データを扱うアプリケーションで、DOM 関数よりも簡単に扱えるかどうか評価するためでした。(XML から必要な情報を取り出して表示する、という処理は Google Gadgets を作るときに、よく必要となりました)。

実際に使ってみての感想ですが、XML 中の欲しいデータ(要素)に id が振ってある場合は、getElementById() を使えば簡単ですが、そうでないには XPath によって目的のノードに一発で辿り着けることは便利であると思いました。

話は変わりますが、既に述べたように、ajaxslt は JavaScript による XSLT の実装です。ajaxslt に XPath の実装が含まれるのは、XSLT の内部で XPath が使用されるためです。ajaxslt は「 d:id:benikujyaku:20070103 ajaxslt で文字列から DOM-Tree に変換する」でも紹介しました。前回も今回も、ajaxslt の本来の役割である XSLT は使用していません…。次に ajaxslt を取り上げるときは、XSLT の機能について調べたいと思います。(XML から必要な情報を取得して表示、という処理は、まさに XSLT の役割なので)。

関連

2007-01-03 ajaxslt で文字列から DOM-Tree に変換する

[][][] ajaxslt で文字列から DOM-Tree に変換する

何らかの事情で文字列として XML データが渡されたとします。そのままでは DOM の関数が使えないので、パースして DOM-Tree に変換します。そのための手段として ajaxslt を利用する方法があります。


ajaxslt は JavaScript による XSLT の実装です。ajaxslt のプロジェクト・サイトは、元々は SouceForge にあったのですが、現在 Google Code に引っ越し中のようです:

そして ajaxslt に含まれる xmlParse という関数を使用することで、文字列として与えられた XML をパースして DOM-Tree に変換することができます。

ajaxslt にはいくつかの JavaScript ファイルが含まれていますが、今回の目的には misc.js と dom.js が必要となります。以下に xmlParse を使用したコードを示します*1

<html>
<head>
<script language="JavaScript" src="misc.js"></script>
<script language="JavaScript" src="dom.js"></script>
</head>
<body>
<script language="JavaScript">

// string 型の XML.
var xml_string = '<hoge piyo="fuga"><aaa bbb="ccc">XXX</aaa></hoge>'

// パースして DOM-Tree に変換.
var xml_tree = xmlParse(xml_string)

// 適当に DOM 関数を使う.
document.write(xml_tree.getElementsByTagName('aaa')[0].firstChild.nodeValue)
</script>
</body>
</html>

今回は「文字列として与えられた XML を DOM-Tree に変換する」ために ajaxslt の機能のほんの一部を利用したに過ぎません。正道ではない使い方をしたといえます。本来、ajaxslt は XSLT を行うためのライブラリであり、内部には XPath の実装も含まれます(XSLT の実装に使われるため)。

*1:動作確認は ajaxslt 0.4、FireFox 1.5、Internet Explorer 6 で行いました。