Ajaxslt実装１ | blog:ponpon-village.net

Googleが公開していたAjaxsltのサンプルに触発され、
Ajaxsltについて調査してみた。

が、Googleのサンプルだけでは、
いくつかの必要なソースが無いこともあり、理解するのが困難だったので、
まずは、Ajaxsltを使用していると言われている Google Maps を解析してみた。

その結果、いくつかわかったことがあるので、公開してみる。

１．XMLファイルをXSLTファイルでトランスフォームする

トランスフォームってのは、XMLファイルにXSLTを
適用するっていう意味だと思えばいいかな。
トランスフォームすることで、XSLTを適用した状態のXMLを出力出来る。

２．IE と Mozilla/Firefox で異なった記述をしなければならない

XMLHｔｔｐRequest でも異なる記述が必要だったが、
ここでもやはり必要となってきた。
クロスブラウザって難しいね。

３．XSLTの生成方法がいくつかある

JavaScriptの中に、テキストとしてゴリゴリと書いておく
あらかじめ用意しておいたXSLTファイルを読み込む
Google のサンプルでは、JavaScriptのコード中で生成しているようだ

残念ながら、Google のサンプルは、全てのファイルが容易されていない為、
現時点では説明出来ない。

というわけで、まずは、他の２種類の方法を説明する。

今回は、私が編み出した（といっても別にすごくもなんともなく、
ただ単にどこにもサンプルがなかっただけの）方法である、
「JavaScriptの中に、テキストとしてゴリゴリと書いておく」を説明する。

用意したXMLはこんなかんじ。ファイル名は「sample001.xml」とした。

<?xml version=”1.0″ encoding=”utf-8″?> <大リーグ> <選手 no=”51″> <氏名> <姓>鈴本</姓> <名>タクロー</名> </氏名> <守備>ライト</守備> <チーム本拠地=”シアトル”>マリナーズ</チーム> </選手> <選手 no=”5″> <氏名> <姓>本庄</姓> <名>武志</名> </氏名> <守備>センター</守備> <チーム本拠地=”ニューヨーク”>メッツ</チーム> </選手> <選手 no=”55″> <氏名> <姓>松田</姓> <名>モジラ</名> </氏名> <守備>レフト</守備> <チーム本拠地=”ニューヨーク”>ヤンキース</チーム> </選手> </大リーグ>

読み込み処理を行うページは下記のようにし、
ファイル名は「sample001.htm」とした。

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”> <html> <META http-equiv=”Content-Type” content=”text/html; charset=utf-8″> <META http-equiv=”Content-Style-Type” content=”text/css”> <META http-equiv=Content-Script-Type content=text/javascript> <head> <title>sample001</title> </head> <body> <!–ココにXSL適用出力が入る–> <div ID=”disp”></div> <!–ココにXSL適用出力が入る–> <script language=”javascript”> <!– function createXmlhttp() { var xmlhttp = false; try { //IE xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”); } catch (e) { xmlhttp = false; } if (!xmlhttp && typeof XMLHttpRequest!=’undefined’) { //Firefox xmlhttp = new XMLHttpRequest(); } return xmlhttp; } function sample001() { var xmlhttp = new createXmlhttp(); var oSource; var oStyle; var disp = document.getElementById(‘disp’); if (xmlhttp) { xmlhttp.open(‘GET’, ‘sample001.xml’); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { oSource = xmlhttp.responseXML; var a = ‘<?xml version=”1.0″ encoding=”utf-8″?>’; a += ‘<xsl:stylesheet xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” version=”1.0″>’; a += ‘<xsl:output method=”html” encoding=”utf-8″/>’; a += ‘<xsl:template match=”/”>’; a += ‘<table border=”1″ align=”center” cellpadding=”2″ cellspacing=”0″ width=”500″>’; a += ‘<caption>選手一覧</caption>’; a += ‘<tr><th>氏名</th><th>守備</th><th>チーム</th></tr>’; a += ‘<xsl:apply-templates/></table></xsl:template>’; a += ‘<xsl:template match=”大リーグ”><xsl:apply-templates select=”選手”/></xsl:template>’; a += ‘<xsl:template match=”選手”><tr align=”center”>’; a += ‘<xsl:apply-templates select=”氏名”/><xsl:apply-templates select=”守備”/>’; a += ‘<xsl:apply-templates select=”チーム”/></tr></xsl:template>’; a += ‘<xsl:template match=”氏名”><td align=”center”>’; a += ‘<xsl:value-of select=”姓”/><xsl:value-of select=”名”/></td>’; a += ‘</xsl:template><xsl:template match=” 守備 | チーム “><td>’; a += ‘<xsl:value-of select=”.”/> </td></xsl:template></xsl:stylesheet>’; var p = createParser(a); var u = new Ajaxslt(p); u.transformToHTML(oSource, disp); } } xmlhttp.send(null); } } function createParser(a){ try{ if(typeof ActiveXObject != “undefined” && typeof GetObject != “undefined”){ //IE var b = new ActiveXObject(“Microsoft.XMLDOM”); b.loadXML(a); return b; }else if(typeof DOMParser != “undefined”){ //Firefox return(new DOMParser()).parseFromString(a, “text/xml”); } }catch(c){ } } function Ajaxslt(a){ this.stylesheet = a; } Ajaxslt.prototype.transformToHTML=function(a, b){ if(typeof a.transformNode != “undefined”){ //IE b.innerHTML = a.transformNode(this.stylesheet); }else if(typeof XSLTProcessor != “undefined” && typeof XSLTProcessor.prototype.importStylesheet != “undefined”){ //Firefox var c = new XSLTProcessor(); c.importStylesheet(this.stylesheet); var d = c.transformToFragment(a, window.document); b.innerHTML = “”; b.appendChild(d); } } –> </script> <button onclick=”sample001()”>実行</button> </body> </html>

中盤あたりにある「a」という変数に、ゴリゴリと文字列を代入している部分があるが、
その文字列こそXSLTそのものである。

記述した文字列を、XSLTとして扱えるように変換しているのが
createParserという関数での処理である。

その後、transformToHTML関数内で、
IEはtransformNode、
FirefoxはtransformToFragmentで
XMLにXSLTを適用し、その結果を出力しているというわけである。

この方法の良いところは、

すでに用意されているXSLTを使用できる（変数に代入すればいいから）
DOMがわからなくても、比較的容易に動的にフィルターを掛けられる

ってことしか思いつかん・・・

悪いところは、ソースが冗長になり可読性が低下しやすいところかな。
意外と使いやすいのではないかと思うけど、いかがでしょうか？