今度はワードのXMLデータで色指定に対応します。色を示すタグは<w:color>です。このタグの属性値に16進数で色情報が格納されています。この色情報はRRGGBB形式になっているため、読み出してそのままスタイルシートのcolor:プロパティの値に設定することができます。属性値はattributes配列で参照しvalueで取得しています。本当は名前で参照する方が良いのですが、とりあえずSafari 2の都合上このようにしてあります。
<w:color>タグがあるかどうかを調べ、色の値を返す関数をライブラリに追加します。この関数は以下のようになっています。今までの関数と同様に段落のノードをたどってタグを調べます。あとは、色を処理するようにスクリプトを作成すればできあがりです（サンプルを
実行する）
●Lib_MSWord.jsに追加した関数
// 単語ブロック（オブジェクト）内に色指定を示すタグがあるかどうか返す
// 引数は単語ブロックデータ（オブジェクト）
// 戻り値：カラーコード --- あり、null --- なし
function checkColorText(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:color")
{
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 = ""; // 色指定
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>"; }
txt += stBold + stItalic + stUnderline + stColor+ getWordBlockText(wordData[j]) + 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>
次項では文字のサイズ指定にも対応させてみます。
[
第13章 5:文字サイズ指定に対応させるへ]
[
目次へ]
(2006.2.8)