今度はワードのXMLデータでサイズ指定に対応します。サイズを示すタグは<w:sz>です（もう１つw:sz-csというのがありますが、何のサイズを示しているか不明）。このタグの属性値にサイズの値が格納されています。この値をスタイルシートのfont-size:プロパティの値に設定します。属性値はattributes配列で参照しvalueで取得しています。
あとは、今までどおりに<w:sz>タグがあるかどうかを調べ、サイズの値を返す関数をライブラリに追加します。この関数は以下のようになっています。（サンプルを
実行する）
●Lib_MSWord.jsに追加した関数
// 単語ブロック（オブジェクト）内にサイズ指定を示すタグがあるかどうか返す
// 引数は単語ブロックデータ（オブジェクト）
// 戻り値：カラーコード --- あり、null --- なし
function checkSizeText(xmlObj)
{
for (var i=0; i<xmlObj.childNodes.length; i++)
{
if (xmlObj.childNodes[i].tagName == "w:rPr")
{
for (var j=0; j<xmlObj.childNodes[i].childNodes.length; j++)
{
if (xmlObj.childNodes[i].childNodes[j].tagName == "w:sz")
{
return xmlObj.childNodes[i].childNodes[j].attributes[0].value;
}
}
}
}
return null;
}
●実際のプログラム
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>マイクロソフトワードのXMLデータを表示する (サイズ対応)</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="Lib_MSWord.js"></script>
<script type="text/javascript"><!--
function displayMSWord(fileName)
{
var httpObject = new Ajax.Request(fileName, { method: 'get', onComplete: displayData });
}
function displayData(httpObj)
{
txt = "";
$("result").innerHTML = "";
docBody = getDocumentBody(httpObj.responseXML);
paragraph = getParagraph(docBody); // 段落データを取得
for (i=0; i<paragraph.length; i++)
{
wordData = getWordBlock(paragraph[i]); // 段落ブロックデータを取得
for (j=0; j<wordData.length; j++)
{
stBold = edBold = ""; // 太字タグ
stItalic = edItalic = ""; // 斜体タグ
stUnderline = edUnderline = ""; // 下線タグ
stColor = edColor = ""; // 色指定
stSize = edSize = ""; // サイズ指定
if (checkBoldText(wordData[j])) { stBold = "<b>"; edBold = "</b>"; }
if (checkItalicText(wordData[j])) { stItalic = "<i>"; edItalic = "</i>"; }
if (checkUnderlineText(wordData[j])) { stUnderline = "<u>"; edUnderline = "</u>"; }
if (c=checkColorText(wordData[j])) { stColor = "<span style='color:#"+c+"'>"; edColor = "</span>"; }
if (sz=checkSizeText(wordData[j])) { stSize = "<span style='font-size:"+sz+"pt'>"; edSize = "</span>"; }
txt += stBold + stItalic + stUnderline + stColor + stSize;
txt += getWordBlockText(wordData[j]);
txt += stSize + edColor + edUnderline + edItalic + edBold;
}
txt += "<br>";
}
$("result").innerHTML = txt;
}
// --></script>
</head>
<body>
<h1>マイクロソフトワードのXMLデータを表示する (サイズ対応)</h1>
<form method="get" name="ajaxForm" onsubmit="return false;">
<input type="button" value="sample1.xmlを表示する" onClick="displayMSWord('sample1.xml')">
<input type="button" value="sample2.xmlを表示する" onClick="displayMSWord('sample2.xml')">
</form>
<div id="result"></div>
</body>
</html>
これで、ある程度複雑なワードのXMLデータも表示させることができます。（サンプルを
実行する）
他にもタグを解析して処理すれば、様々なデータを修飾して表示することができます。
[
目次へ]
(2006.2.8)