今度はワードのXMLデータで斜体と下線（アンダーライン）の表示にも対応します。まず、斜体から処理します。斜体も太字と同様に<w:rPr>タグ内にあるタグで示されます。この斜体を示すタグは<w:i>です。このタグがあるかどうかを調べる関数をライブラリに追加します。この関数は以下のようになっています。段落のノードをたどってタグを調べます。あとは、斜体を処理するようにスクリプトを作成すればできあがりです（サンプルを
実行する）
●Lib_MSWord.jsに追加した関数
// 単語ブロック（オブジェクト）内に斜体を示すタグがあるかどうか返す
// 引数は単語ブロックデータ（オブジェクト）
// 戻り値：true --- あり、false --- なし
function checkItalicText(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:i") return true;
}
}
}
return false;
}
●実際のプログラム
<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++)
{
if (checkItalicText(wordData[j])) // 斜体かどうかチェック
{
txt += "<i>"+getWordBlockText(wordData[j])+"</i>";
}else{
txt += getWordBlockText(wordData[j]);
}
}
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')">
</form>
<div id="result"></div>
</body>
</html>
同様に下線（アンダーライン）の場合も処理できます。下線（アンダーライン）を示すタグは<w:u>です。以下の関数をらいぶらりに追加します。後は斜体と同様の処理を行います。（サンプルを
実行する）
// 単語ブロック（オブジェクト）内に下線（アンダーライイン）を示すタグがあるかどうか返す
// 引数は単語ブロックデータ（オブジェクト）
// 戻り値：true --- あり、false --- なし
function checkUnderlineText(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:u") return true;
}
}
}
return false;
}
斜体と下線および前項で処理した太字も一括して処理するには、少しプログラムを書き換えます。太字や斜体などが指定されている場合には、前後にタグを連結するように修正します。実際のスクリプトは以下のようになります。（サンプルを
実行する）
<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 = ""; // 下線タグ
if (checkBoldText(wordData[j])) { stBold = "<b>"; edBold = "</b>"; }
if (checkItalicText(wordData[j])) { stItalic = "<i>"; edItalic = "</i>"; }
if (checkUnderlineText(wordData[j])) { stUnderline = "<u>"; edUnderline = "</u>"; }
txt += stBold + stItalic + stUnderline + getWordBlockText(wordData[j]) + 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章 4:色指定に対応させるへ]
[
目次へ]
(2006.2.8)