スキルシートのXSLTを作る

ベトナム

概要

スキルシートは専用アプリなので、とりあえずアプリをインストールせんでも見れるようXSLだけこさえておいた。
かなりシンプル。
展開的に、近いうちにこのスキルシートのデータ構造くらいは見せられるようになるかも。
シンボリックリンクの実装が中途半端なのでショボショボですが。

ベトナム人エンジニアのXSL

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/skillsheet">
	<html>
	<head>
		<title><xsl:value-of select="header/@title" /></title>
		<style type="text/css" >
			table {
		 		background-color: black;
			}
			tbody {
		 		margin:0px;
		 		padding:0px;
			}
			td, tr, th {
		 		margin:0px;
			}
			td,th {
		 		background-color:white;
		 		padding:0.5ex;
			}
		</style>
	</head>
	<body>
		<h1><xsl:value-of select="header/@title" /></h1>
		<table cellspacing="1" width="100%">
			<tr>
				<th>Name</th>
				<th>Level</th>
				<th>Volition</th>
				<th>Note</th>
			</tr>
			<xsl:call-template name="skillitem" />

		</table>
	</body>
	</html>
</xsl:template>

<xsl:template name="skillitem" match="skill">
  <xsl:if test="@name != ''">
	<tr>
		<td>
		<xsl:number level="multiple" format="1. "/>	
		<xsl:value-of select="@name" /></td>
		<td><xsl:value-of select="@level" /></td>
		<td><xsl:value-of select="@volition" /></td>
		<td><xsl:if test="skillnote != ''" >
				<xsl:value-of select="skillnote" />
			</xsl:if>
		</td>
	</tr>
  </xsl:if>
 <xsl:apply-templates select="skill" />
</xsl:template>
</xsl:stylesheet>

ワテのXSL

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/skillsheet">
	<html>
	<head>
		<title><xsl:value-of select="header/@title" /></title>
		<link rel="stylesheet" href="skillsheet.css" type="text/css" />
	</head>
	<script type="text/javascript" src="metis.js"></script>
	<body onLoad="init()">
		<h1><xsl:value-of select="header/@title" /></h1>
		<table border="1">
		<tbody id="test">
			<tr>
				<th>Name</th>
				<th>Level</th>
				<th>Volition</th>
				<th>Note</th>
			</tr>

			<script type="text/javascript">
			var l;
			<xsl:call-template name="skillitem">
				<xsl:with-param name="count" select="0" />
			</xsl:call-template>
			</script>
		</tbody>
		</table>
	</body>
	</html>
</xsl:template>

<xsl:template name="skillitem" match="skill">
	<xsl:param name="count" />
	<xsl:if test="$count > 0">
	appendElement(
		<xsl:value-of select="$count" />,
		'<xsl:value-of select="@name" />',
		'<xsl:value-of select="@level" />',
		'<xsl:value-of select="@volition" />',
		'<xsl:value-of select="translate(skillnote, '&#xA;',' ')" />'
	);

	</xsl:if>
	<xsl:apply-templates select="skill">
		<xsl:with-param name="count" select="$count + 1" />
	</xsl:apply-templates>
</xsl:template>

<xsl:template name="printTree">
<xsl:param name="index" /><xsl:param name="count" /><xsl:if test="$index &lt; $count">-<xsl:call-template name="printTree"><xsl:with-param name="index" select="$index+1" /><xsl:with-param name="count" select="$count" /></xsl:call-template></xsl:if>

</xsl:template>
</xsl:stylesheet>

ワテのJS

var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}

listNumber = Class.create();
listNumber.prototype = {
 initialize : function(label, name, lv, vl, note) {
  this.ary = new Array();
  
  this.label = label;

  this.name = name;
  this.lv = lv;
  this.vl = vl;
  this.note = note;
 },
 output : function() {
  var tr = document.createElement('tr');
  var td = new Array(4);
  for (var i=0; i<td.length; i++) {
   td[i] = document.createElement('td');
   tr.appendChild(td[i]);
  }
  td[0].appendChild(document.createTextNode(this.label + this.name));
  td[1].appendChild(document.createTextNode(this.lv));
  td[2].appendChild(document.createTextNode(this.vl));
  td[3].appendChild(document.createTextNode(this.note ? this.note : ' '));
  document.getElementById('test').appendChild(tr);
 }
}

var rootElem = new listNumber(null, null, null, null, null);

function appendElement(treelevel, name, lv, vl, note) {
 var elm = getNewElem(treelevel, rootElem);
 elm.name = name;
 elm.lv = lv;
 elm.vl = vl;
 elm.note = note;
}

function getNewElem(treelevel, targetElem, label) {
 if (treelevel-1 > 0) {
  if (targetElem.ary.length == 0) {
   targetElem.ary.push(new listNumber((label ? label : "")+(targetElem.ary.length+1)+".",null,null,null,null));
  }
  return getNewElem(treelevel-1, targetElem.ary[targetElem.ary.length-1], (label ? label : "")+targetElem.ary.length+".");
 }
 var ret = new listNumber((label ? label : "")+(targetElem.ary.length+1)+".",null,null,null,null);
 targetElem.ary.push(ret);
 return ret;
}

function init() {
 for (var i=0; i<rootElem.ary.length; i++) {
  recruciveOutput(rootElem.ary[i]);
 }
}

function recruciveOutput(target) {
 target.output();
 for (var i=0; i<target.ary.length; i++) {
  recruciveOutput(target.ary[i]);
 }
}

総評

むお、ベトナム人エンジニアのがいいじゃないか。
xsl:numberを知らなかったから強引にJSで実装してしまったが、ロクなもんじゃないな。
配列も作るだけ作ってメモリ解放なんてしてなかったり。


とりあえず、再帰処理のあまりよくないサンプル程度に書いておく。