Windows版マイクロソフトWORD 2003で作成されたXMLデータを読み込んで解析し表示てみましょう。まず、WORD 2003で簡単な文章を作成します（サンプルXMLを
表示する。プログラムで読み込んで
表示してみる）。
かなり、多くのタグがありますが、ここで取り扱うタグは以下の3つです。
<w:p> 段落を示す。
<w:r> テキストブロックを示す。
<w:t> 実際のテキスト。
それではFirefoxでデータを読み込み表示させてみます。ただし、単純にgetElementsByTagName()を使ってタグ名を指定してもFirefoxでは取得することができません。w:pタグの場合pと指定しないと取得することができないようです。
読み込み方法としては、まず段落を読み込みます。その段落内にあるw:tタグの情報をgetElementsByTagName()で取得します。そのタグの最初のノードの値がテキストデータになります。これを段落の数だけ読み出し表示すればワードの文章が表示できます。（サンプルを
実行する）
<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"><!--
function displayMSWord(fileName)
{
var httpObject = new Ajax.Request(fileName, { method: 'get', onComplete: displayData });
}
function displayData(httpObj)
{
$("result").innerHTML = "";
xml = httpObj.responseXML;
paragraph = xml.getElementsByTagName("p");
for (i=0; i<paragraph.length; i++)
{
textList = paragraph[i].getElementsByTagName("t");
txt = "";
for (j=0; j<textList.length; j++)
{
txt += textList[j].childNodes[0].nodeValue;
}
$("result").innerHTML += txt + "<br>";
}
}
// --></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')">
<input type="button" value="sample2.xmlを表示する" onClick="displayMSWord('sample2.xml')">
<input type="button" value="sample3.xmlを表示する" onClick="displayMSWord('sample3.xml')">
</form>
<div id="result"></div>
</body>
</html>
このプログラムはFirefoxとOperaでは動作しますが、SafariやInternet Explorerでは動作しません。簡単な方法では処理できないあたりが何とも困った点です。とりあえず、Internet Explorer 6で表示できるように改良します。IE6の場合、getElementsByTagName()で指定するのはw:pとします。Firefoxではpと指定しないと駄目でしたが、IE6ではw:pやw:tとタグ名を、そのまま指定します。これでIE6でも表示できるようになります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>マイクロソフトワードのXMLデータを表示する(IE)</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;
paragraph = xml.getElementsByTagName("w:p");
for (i=0; i<paragraph.length; i++)
{
textList = paragraph[i].getElementsByTagName("w:t");
txt = "";
for (j=0; j<textList.length; j++)
{
txt += textList[j].childNodes[0].nodeValue;
}
$("result").innerHTML += txt + "<br>";
}
}
// --></script>
</head>
<body>
<h1>マイクロソフトワードのXMLデータを表示する(IE)</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')">
<input type="button" value="sample3.xmlを表示する" onClick="displayMSWord('sample3.xml')">
</form>
<div id="result"></div>
</body>
</html>
タグ名部分だけが異なるのであれば対応は簡単にできそうです。ところが、Safari 2でも動作させようとすると、Firefox, IE6いずれのプログラムも動作しないことが分かります。他の章でも書きましたが、getElementsByTagName()でタグ内にあるタグ情報を取得できないため、上記のような手法が使えません。このため、Safari 2の場合ドキュメントのルートからノードをたどっていく必要があります。ノードのタグ名を調べw:tであればテキストとして連結していきます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>マイクロソフトワードのXMLデータを表示する(Safari 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"><!--
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];
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")
{
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;
}
}
}
}
txt += "<br>";
}
}
$("result").innerHTML = txt;
}
// --></script>
</head>
<body>
<h1>マイクロソフトワードのXMLデータを表示する(Safari 2)</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')">
<input type="button" value="sample3.xmlを表示する" onClick="displayMSWord('sample3.xml')">
</form>
<div id="result"></div>
</body>
</html>
このようなノードをたどっていく方法であればブラウザを問わず利用できそうです。が、困った事にIE6では動作しません。というのも、どうもドキュメントの基準位置（ドキュメントルート）が他のブラウザと異なるみたいで、ノードが1つずれているためです。このため、以下のようにドキュメントルートを1つずらすとIE6でも動作するようになります。しかし、他のブラウザでは以下のサンプルは動作しません。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>マイクロソフトワードのXMLデータを表示する (IE)</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[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")
{
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;
}
}
}
}
txt += "<br>";
}
}
$("result").innerHTML = txt;
}
// --></script>
</head>
<body>
<h1>マイクロソフトワードのXMLデータを表示する (IE)</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')">
<input type="button" value="sample3.xmlを表示する" onClick="displayMSWord('sample3.xml')">
</form>
<div id="result"></div>
</body>
</html>
仕方ないので、以下のようにしてブラウザチェックを行いIE6とそれ以外でドキュメントルートの位置を調整します。これで、IE6, Safari 2, Firefox, Operaで動作するようになります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>マイクロソフトワードのXMLデータを表示する (IE,Firefox,Opera,Safari)</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")
{
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;
}
}
}
}
txt += "<br>";
}
}
$("result").innerHTML = txt;
}
// --></script>
</head>
<body>
<h1>マイクロソフトワードのXMLデータを表示する (IE,Firefox,Opera,Safari)</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')">
<input type="button" value="sample3.xmlを表示する" onClick="displayMSWord('sample3.xml')">
</form>
<div id="result"></div>
</body>
</html>
とりあえずワードの文章は表示できました。次の項では太文字の場合、文字を太く表示させる処理を行ってみます。また、ワード文書データを処理するための簡易ライブラリも用意してみます。
[
第13章 2:太字（ボールド）に対応させるへ]
[
目次へ]
(2006.2.8)