伸び縮みマークアップ言語 XML
★本ページはプロモーションが含まれています★
■ DOM(Document Object Model)

■ API(Application Programing Interface)

DOMの説明の前にAPIについて説明します。

API(Application Programing Interface)とは、プログラミング言語などでアプ リケーションを開発したりする際に、使用可能な命令や関数などの集合のことです。 全ての機能をプログラミングするのは無駄が多いため、多くのアプリケーションが共通し て利用できる機能などはまとめて提供されます。これにより、開発者はその機能を呼び出 すだけで簡単にその機能を使用したアプリケーションの開発を行う事が出来るのです。 これから説明するDOMと、SAXは、 XMLパーサがもつAPIなのです。

■ DOM(Document Object Model)

DOM(Document Object Model)とはW3C で勧告されている仕様の一つであり、 様々なソフトウェアがXML文書を読み取ったり、表示形式を変更して表示する事などを可能にす るという、XMLパーサが提供するアクセスの手段です。

多くのXMLパーサはDOMに準拠しています。なぜなら、もしもXMLパーサごとにこのような 機能が独自に実装されていた場合、XMLパーサを切り替えるたびに、アクセスするソフトウェア などに変更が必要になってしまうからです。 DOMには「Level1」 「Level2」「Level3」現在公開されており、Levelが上がるほど高機能にな ります。しかし、levelが上がると処理に時間がかかってしまう為、使用するlevelは必要に応じて決めます。

DOMはXML文書中のデータをXMLパーサが読み込むと、 データをツリー構造としてメモリ上 に展開します。そして、この展開されたツリーに対し、様々な操作を行う事になるのです。しかし 、DOMはデータを全て展開する為に、 データの大きなXML文書を扱う場合は多くのメモリ領域が必要になります。

  XML文書
   ▲ ▼
   DOM    ««»»   ツリー
   ▲ ▼
 プログラミング言語

■ SAX(Simple API for XML)

上記のようなDOMの欠点を解消する為に現れたのが SAX(Simple API for XML)です。 これもDOMと並んで広く利用されているAPIです。 こちらはDOMとは違い、XML文書を先頭から順番に読んでいき、 要素が出現するたびに処理を実行していきます。 そうして解析結果を保持しない為、データの大きなXML文書を扱っ てもメモリに負担がかからず、高速な処理を行うことができるのです。

しかし、DOMのように始めにツリーに変換してしまうので、自由にツリー構造の中を行き来出 来るのに対し、SAXは自由に構造をたどれない為に、XML文書の構造が複雑になると、プロ グラムが複雑になってしまいます。 どちらを使用するかはプログラムなどの特性を考慮した上で選択するのが望ましいといえます。 なお、ここではDOMとjavascriptとの説明を順にしていきます。


■ DOMとjavascript

■ javascript

小規模なプログラムを書くのに利用しやすい「javascript」で、DOMを使用して XML文書にアクセスします。その前に簡単に「javascript」にふれてみることにします。

「javascript」のようなプログラミング言語を「スクリプト言語」と呼びます。 他にアプリケーションを使用したりする必要が無く、ブラウザだけで利用できます。以下をご覧下さい。

<html>
 <body>
  <script language="JavaScript">
   document.write("test");
  </script>
 </body>
</html>

■ 表示結果

test

このように、「javacript」はscriptタグの中に記述します。 この例では、文字列を表示させていますが、行う処理により書く位置は変わります。 「javascript」はオブジェクト指向という考え方で作られており、 上の例ではscriptタグのなかに書かれた「document」がオブジェクトです。 オブジェクトとは、画面を構成する部品だと考えます。そして、その後に続く 「write」はメソッドと呼ばれ、命令文の事です。 つまり、 document.write("test");  は「documentオブジェクトにtestという文字を書き込め」と書かれていることがわかります。

オブジェクトとメソッドについて

オブジェクトは元となるもので、 メソッドはそのオブジェクトの実行機能です。 javascriptでDOMを使用する前に、この考え方を頭に入れておく必要があります。

■ DOMの使用手順

DOMを使用してXML文書を読み込んだりする為の手順は以下のようになります。

1  DOMでXML文書を扱うためのオブジェクトを作成

▼ ▼ ▼ ▼ ▼ ▼

2  XML文書を読み込む

▼ ▼ ▼ ▼ ▼ ▼

3  DOMを使用してツリーのノードにアクセス

▼ ▼ ▼ ▼ ▼ ▼

4  処理結果をwebブラウザで表示

では、実際の記述の仕方を説明します。

1  DOMでXML文書を扱うためのオブジェクトを作成

var XMLdoc = new ActiveXObject('microsoft.XMLDOM');

XMLdoc」を変数として、 varで宣言します。変数の名前を変えたいときは 「XMLdoc」の部分を変更します。 右辺の「ActiveXObject('microsoft.XMLDOM');」 はオブジェクトの元になるものです。そして、前に書かれた 「new」で オブジェクトを新たに生成、つまりオブジェクトの元である 「ActiveXObject('microsoft.XMLDOM');」と同じものが生成されます。 そしてそれら右辺が「XMLdoc」に代入され、 この変数名を使って、XML文書の読み込みやDOMを使用しての ツリーの各ノードへのアクセスなどを行う事ができるようになります。 ややこしいですが、ここはこう書かなければならないものと思っておくと良いでしょう。

2  XML文書を読み込む

XMLdoc.load('XMLファイル名');

オブジェクト「XMLdoc」のメソッドを使用します。 「load」はファイルを読み込む為のメソッドで、 読み込ませるファイル名を指定します。

3  DOMを使用してツリーのノードにアクセス

XMLdoc.documentElement.nodeName;

documentElement」はXML文書のルートノードを示し、 「nodeName」は ノード名を返します。但し、ノードのタイプによって返す内容は違います。 これらにより、ツリーのルートノード名(XML文書のルートノード名)を取得します。

ツリーを操作する為のメソッドはいくつか用意されています。 次回、これらを利用した簡単なサンプルで、ノードへアクセスしてみます。


■ ノードにアクセスする

■ ルートノード名を表示

まずはじめに簡単な例として、DOMを利用してXML文書にアクセスし、 ルートノード名をブラウザで表示してみます。なお、ある程度javascriptを理解しているものとして ファイルを記述します。(簡単な説明は入れます)ここでは、2つのファイルを利用します。 ファイル名は「sam01.html」と「samp01.xml」とします。

■ samp01.xml

<?xml version="1.0" encoding="shift_jis"?>
<会員データ>
<氏名>伸縮○二郎</氏名>
<住所>大阪</住所>
</会員データ>

■ sam01.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<title>ルートノードを表示</title>
<script language="JavaScript">
function Test()
{
Docm = new ActiveXObject('microsoft.XMLDOM');
Docm.async = false;
Docm.load('samp01.xml');
var string = "";
string = "samp01.xml文書のルートノード名は・・・"
+Docm.documentElement.nodeName;

hyouji.innerHTML = string;
}
</script>
</head>

<body onload="Test()">
<div id="hyouji"></div>
</body>
</html>

1  Docm.async = false;
「async」に「false」を設定すると、XML文書の読み込みを同期にします。 こうすることで、XML文書の読み込みが完了するまで処理を待ちます。

2  Docm.load('samp01.xml');
「load」メソッドで、「samp01.xml」ファイルを読み込みます。

3  var string = "";
変数「string」を宣言し、その変数「string」に「""」を代入しています。 「""」とは空の文字列、すなわち「string」は空だということです。

4  string = "samp01.xml文書のルートノード名は・・・"
+Docm.documentElement.nodeName;

空の変数「string」に「samp01.xml文書のルートノード名は・・・+Docm.documentElement.nodeName;」 を代入しています。「Docm.documentElement.nodeName」とは「samp01.xml」のルートノード名です。

5  hyouji.innerHTML = string;
「inner.HTML」とはダイナミックHTMLの機能であり、Microsoftの独自の仕様です。 ここでは、「hyouji.innerHTML」 に「string」を代入しています。こうする事で「hyouji」というid属性を持ったHTMLのタグの位置に 「string」の内容を表示する事ができます。

<body>に記述された「onload="Test()"」 により、ファイルが全て読み込まれた後に「onload」属性で指定された関数を実行します。 <div id="hyouji"></div> の「id」属性に「hyouji」が指定されているので、 上記の「」で「hyouji」に代入された 「string」の中身である 「samp01.xml文書のルートノード名は・・・+Docm.documentElement.nodeName;」 、即ち「samp01.xml文書のルートノード名は・・・会員データ」 を<div></div>の 間に表示します。

sam01.htmlの実行結果は以下のようになります。

samp01.xml文書のルートノード名は・・・会員データ


■ ノードにアクセスする 2

■ 子ノードを調べる

前回はDOMを使用してツリーのノードにアクセスし、ルートノード名(XML文書のルートノード名)を取得 しました。使用したDOMは 「documentElement(XML文書のルートノードを示す)」と 「nodeName(ノード名)」です。 ここでは、「hasChildNode」 「childNodes.length」 「childNodes.item(index番号).text」を使用してノードにアクセスし、子ノードを調べます。

ではまず、その3つのインターフェースの説明からはじめましょう。

1  ツリーに子ノードがあるかどうかをチェック

hasChildNode

hasChildNodes()」を記述する事で、 DOMツリーに子ノードがあるかどうかをチェックします。子ノードが存在する場合は 「true」を返し、存在しない場合「false」を返します。

1  子ノードが存在する場合、子ノードの個数をチェック

childNodes.length

子ノードが存在する場合に子ノードの個数を返します。

1  子ノードのテキストを取得

childNodes.item(index番号).text

item(index番号)に記述された index番号目の子ノードを指します。0から始まる連番でアクセスでき、 最初の子ノードなら「item(0)」2番目だと「item(1)」となります。 「text」は示されたノードのテキストを取得します。

では、例題を取り上げてみましょう。
以下の2つのファイルをご覧下さい。XML文書を「samp02.xml」、 HTML文書を「sam02.html」とします。

■ samp02.xml

<?xml version="1.0" encoding="shift_jis"?>
<会員データ>
<ID>2</ID>
<氏名>伸縮○二郎</氏名>
<住所>大阪</住所>
</会員データ>

■ sam02.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<title>子ノードを調べる</title>
<script language="JavaScript">
function Test()
{
Docm = new ActiveXObject('microsoft.XMLDOM');
Docm.async = false;
Docm.load('samp02.xml');
var string = "";
if(Docm.documentElement.hasChildNodes())
{
var i = 0;
var n_num = Docm.documentElement.childNodes.length;
while (i < n_num)
{
string += Docm.documentElement.childNodes.item(i).text += " ";
i++;
}
}
else
{
string +="子ノードはありません。";
}

hyouji.innerHTML = string;
}
</script>
</head>

<body onload="Test()">
<div id="hyouji"></div>
</body>
</html>

if文を使用して子ノードがある場合とそうでない場合の処理方法を記述します。始めに if文のブロックを実行して、子ノードがある場合は子ノードのテキストを取得して表示します。 子ノードがない場合は、else文を実行して「子ノードはありません。」という文字列を表示します。 if文の条件式として「Docm.documentElement.hasChildNodes()」を記述、 DOMツリーに子ノードが存在するかのチェックを行います。

子ノードが存在する場合、「Docm.documentElement.childNodes.length」 で子ノードの個数を取得して「n_num」に代入します。さらに while文により全ての子ノードのテキストを取得して「string」へ代入し、 最後に変数「string」の内容を「hyouji.innerHTML」に代入します。 ブラウザには「hyouji.innerHTML」へ代入された値が表示されます。

sam02.htmlの実行結果は以下のようになります。

2 伸縮○二郎 大阪 


■ ノードにアクセスする 3

■ その他の属性

次は、子ノードの属性を調べてテキストを取得してみます。 属性のテキストを調べるには「attributes.item(index番号).text」 を使用します。

1  子ノードの属性を調べてテキストを取得

attributes.item(index番号).text

item(index番号)に記述された index番号目の属性を指します。0から始まる連番でアクセスでき、 最初の子ノードの属性なら「item(0)」2番目だと「item(1)」となります。 「text」は示された属性のテキストを取得します。 子ノードのテキストを取得する場合とほぼ同じです。

では、例題を取り上げてみましょう。
以下の2つのファイルをご覧下さい。XML文書を「samp03.xml」、 HTML文書を「sam03.html」とします。

■ samp03.xml

<?xml version="1.0" encoding="shift_jis"?>
<会員データ>
<氏名 kana="しんしゅくまるじろう">伸縮○二郎</氏名>
<氏名 kana="しんしゅくまるみ">伸縮○美</氏名>
<氏名 kana="しんしゅくまるこ">伸縮○子</氏名>
</会員データ>

■ sam03.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<title>子ノードの属性を調べる</title>
<script language="JavaScript">
function Test()
{
Docm = new ActiveXObject('microsoft.XMLDOM');
Docm.async = false;
Docm.load('samp03.xml');
var string = "";
if(Docm.documentElement.hasChildNodes())
{
var i = 0;
var n_num = Docm.documentElement.childNodes.length;
var a = "";
while (i < n_num)
{
a=Docm.documentElement.childNodes.item(i).attributes.item(0).text;
string += Docm.documentElement.childNodes.item(i).text += "(";
string += a+")<br/>";
i++;
}
}
else
{
string +="データがありません。";
}
hyouji.innerHTML = string;
}
</script>
</head>

<body onload="Test()">
<div id="hyouji"></div>
</body>
</html>

子ノードのテキストを取得する時と要領はほぼ同じなので簡単です。 if文で子ノードの数を調べ、さらにwhile文により 全ての子ノードのテキストを取得します。子ノードのテキストだけを取得する時と違う点は、 「attributes.item(i).text」によって子ノードの属性のテキストも 取得して「string」へ代入している事です。

最後に変数「string」の内容を「hyouji.innerHTML」に代入します。 ブラウザには「hyouji.innerHTML」へ代入された値が表示されます。

sam03.htmlの実行結果は以下のようになります。

伸縮○二郎(しんしゅくまるじろう)
伸縮○美(しんしゅくまるみ)
伸縮○子(しんしゅくまるこ)

«««« back          next »»»»
 
XMLとは
XML文書作成の大まかな流れ
XML文書の記述
XML文書ブラウザでの表示
XSLTスタイルシートの適用
XSLTの構造
XML文書の宣言
文字コードの設定
タグ付けのルール
要素名・属性の指定について
階層構造
実体参照・文字参照について
その他・コメントや処理
DTDの記述
名前空間の指定
情報をデータ化する
階層構造の作成
データからXML文書を作成する
会員情報の記述ルールを定義したDTD..
個々のXML文書を作成する
外部実体参照
テンプレートルール
XSLTスタイルシートを記述する 【ノード】
構造を変換する仕組み
テンプレートルールの定義
テンプレートの動作確認
XPathの仕組み  【XPathの関数】
XPathの表記方法
テキストの抽出  xsl:value-of
ノードのコピー  xsl:copy-of
テキストの生成  xsl:text
コメントの生成  xsl:comment
要素の生成  xsl:element
属性の生成  xsl:attribute
属性値の生成  【属性値テンプレート】
出力方法の指定  xsl:output
変数1  xsl:variable
変数2  xsl:param
変数3  xsl:with-param
繰り返し処理  xsl:for-each
再帰処理  xsl:if test
データの並べ替え  xsl:sort
データに番号をつけて出力  xsl:number
条件式に一致時のみ変換処理を実施 xsl:if
複数条件を設定して処理 xsl:choose
XSLTに別のXSLT.. xsl:import xsl:include
XSLT関数について
データを1件表示
データを決められた件数だけ表示
テキストと要素混在時のテキスト抽出法
データを全て表示する
表示するデータを並べ替える
条件式を設定して表示を変える
データを表にして表示する
複数件のデータを1つの表にして表示
リンクを加える  xsl:element xsl:attribute
データをCSV形式で出力する
DOM(Document Object Model)
DOMとjavascript
ノードにアクセスする
ノードにアクセスする 2
ノードにアクセスする 3
XSLTスタイルシートを読み込む
XSLTスタイルシートの切り替え
DOMとjavascriptで検索機能を作成する 1
DOMとjavascriptで検索機能を作成する 2
DOMとjavascriptで検索機能を作成する 3
DOMとjavascriptで検索機能を作成する (XSLTスタイルシート適用)
SVG(Scalable Vector Graphics)
SVG(Scalable Vector Graphics)の基本
「g」タグによるグループ化
図形の座標変換 transform属性
アニメーションを作成する animate要素
アニメーションを作成する animate要素2
イベント
DOMとJavaScriptを使用したイベント処理
XMLとXSLTからSVGを生成する
msxsl.exeのオプション
エラーメッセージの表示
LINK
XML(eXtensible Markup Language) バナーはダウ
ンロードして
お使い下さい。




Copyright © 2004 - ykr414 . All Rights Reserved.