太字（ボールド）に対応させる

　今度はワードのXMLデータで太字の表示にも対応します。太字を示すタグは<w:b>です。このタグは単語ブロックタグ（<w:r>）内にある<w:rPr>タグ内に存在します。この太字を示す<w:b>タグには属性値やノードの値がないため<w:b/>と記述されています。
　太字かどうかを調べるには、この<w:b>タグが存在するかどうかをノードをたどって調べます。ノードをたどって処理するサンプルは以下のようになります。（サンプルを実行する）

<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"><!--
function displayMSWord(fileName)
{
var httpObject = new Ajax.Request(fileName, { method: 'get', onComplete: displayData });
}
function displayData(httpObj)
{
$("result").innerHTML = "";
xml = httpObj.responseXML;
root = xml.childNodes[1];
if (window.createPopup) root = xml.childNodes[2];
paragraph = null;
for (i=0; i<root.childNodes.length; i++)
{
if (root.childNodes[i].tagName == "w:body")
{
paragraph = root.childNodes[i].childNodes[0].childNodes;
break;
}
}
txt = "";
for (i=0; i<paragraph.length; i++)
{
if (paragraph[i].tagName == "w:p")
{
for (j=0; j<paragraph[i].childNodes.length; j++)
{
if (paragraph[i].childNodes[j].tagName == "w:r")
{
boldFlag = false;
for(k=0; k<paragraph[i].childNodes[j].childNodes.length; k++)
{
if (paragraph[i].childNodes[j].childNodes[k].tagName == "w:t")
{
txt += paragraph[i].childNodes[j].childNodes[k].childNodes[0].nodeValue;
}
//　属性チェック
if (paragraph[i].childNodes[j].childNodes[k].tagName == "w:rPr")
{
for (n = 0; n<paragraph[i].childNodes[j].childNodes[k].childNodes.length; n++)
{
//　太字を示すタグがあるか？
if (paragraph[i].childNodes[j].childNodes[k].childNodes[n].tagName == "w:b")
{
txt += "<b>";
boldFlag = true;
 }
}
}
}
if (boldFlag) txt += "</b>";
}
}
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>

　上記のスクリプトは確かに太文字で表示されましたが、この調子で斜体や下線（アンダーライン）に対応していくとなると非常に大変です。大変というよりも、作っていけば収集がつかなくなり破綻してしまうでしょう。このような場合には、機能別関数を用意して処理すると楽になります。ここでは以下の関数を作成し用意しました。

　この関数を使用したサンプルが以下のものです。（サンプルを実行する）

<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"><!--
function displayMSWord(fileName)
{
var httpObject = new Ajax.Request(fileName, { method: 'get', onComplete: displayData });
}
function displayData(httpObj)
{
$("result").innerHTML = "";
xml = httpObj.responseXML;
root = xml.childNodes[1];
if (window.createPopup) root = xml.childNodes[2];
paragraph = null;
for (i=0; i<root.childNodes.length; i++)
{
if (root.childNodes[i].tagName == "w:body")
{
paragraph = root.childNodes[i].childNodes[0].childNodes;
break;
}
}
txt = "";
paragraph = getParagraph(paragraph); //　段落データを取得
for (i=0; i<paragraph.length; i++)
{
wordData = getWordBlock(paragraph[i]);
for (j=0; j<wordData.length; j++)
{
txt += getWordBlockText(wordData[j]);
}
txt += "<br>";
}
$("result").innerHTML = txt;
}
// --------------------------------------------------------------------------------------
//　段落データ（オブジェクト）を配列で返す
function getParagraph(xmlObj)
 {
var paragraphData = new Array();
for (var i=count=0; i<xmlObj.length; i++)
{
if (xmlObj[i].tagName == "w:p") paragraphData[count++] = xmlObj[i];
}
return paragraphData;
}
//　単語ブロック（オブジェクト）を配列で返す
//　引数は段落データ（オブジェクト）
function getWordBlock(xmlObj)
 {
var wordData = new Array();
for (var i=count=0; i<xmlObj.childNodes.length; i++)
{
if (xmlObj.childNodes[i].tagName == "w:r") wordData[count++] = xmlObj.childNodes[i];
}
return wordData;
}
//　単語ブロック（オブジェクト）内のテキストデータを返す
//　引数は単語ブロックデータ（オブジェクト）
function getWordBlockText(xmlObj)
 {
for (var i=0; i<xmlObj.childNodes.length; i++)
{
if (xmlObj.childNodes[i].tagName == "w:t")
{
return xmlObj.childNodes[i].childNodes[0].nodeValue;
}
}
}
//　単語ブロック（オブジェクト）内に太字を示すタグがあるかどうか返す
//　引数は単語ブロックデータ（オブジェクト）
//　戻り値：true --- あり、false --- なし
function checkBoldText(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:b") return true;
}
}
}
return false;
}
// --------------------------------------------------------------------------------------
// --></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>

　通常は、このような関数群はライブラリとしてまとめられ別ファイルとして用意します。以後はLib_MSWord.jsファイル内に上記の関数を用意して読み込んで利用することにします。機能が増えれば、このような関数群を記述したタイプのライブラリも破綻してしまいますが、ちょっとした用途には、これでも十分でしょう。
　Lib_MSWord.jsを利用したサンプルは以下のようになります。（サンプルを実行する）

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>マイクロソフトワードのXMLデータを表示する (太字対応、その2)</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 (checkBoldText(wordData[j])) //　太字かどうかチェック
{
txt += "<b>"+getWordBlockText(wordData[j])+"</b>";
}else{
txt += getWordBlockText(wordData[j]);
}
}
txt += "<br>";
}
$("result").innerHTML = txt;
}
// --></script>
</head>
<body>
<h1>マイクロソフトワードのXMLデータを表示する (太字対応、その2)</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>

　とりあえず太字のみ対応しましたが、次項では同様の手法で斜体や下線（アンダーライン）にも対応させてみます。

[第13章　3:斜体と下線（アンダーライン）に対応させるへ]
[目次へ]

(2006.2.8)