ダイナミックコンテント

  • [アーティクル]
Dynamic Content Dynamic Content *
*前のトピック: スタイルシートと印刷
*次のトピック: TextRangeオブジェクトの使用

ダイナミックコンテント

Microsoft® Internet Explorer 4.0以前のバージョンでは、いったんWebページがブラウザに読み込まれてしまうと、そのページに表示されている情報を変更するにはサーバーにもう一度アクセスする必要があった。ユーザー インタラクション（フォームの送信や、別ページへのリンクのクリック）があると、サーバーは新しいページをクライアントに送ってくる。たとえテンプレートを使ってこの処理を高速化しようとカスタマイズしても、サーバー側でユーザーリクエストを処理する時間はかかる。 また、Webページにコンテキストを持たせようとすれば、フレームセットを使う以外に方法がなかった。つまり、コンテントを一定にしておくフレームでユーザーアクションを受け付け、その応答を別のフレームに反映させるわけである。

ダイナミックコンテントでは、（エレメントやエレメントのコンテントの挿入／削除など）HTMLドキュメントのコンテントの変更はすべて可能である。その変更は、ドキュメントがロードされる前はもちろん“後”ですら可能である。 次に、ダイナミックコンテントの例を示す。テキスト ボックスにテキストを入力すると、入力したテキストに表示が変更される。

ダイナミックコンテントはクールだ

Internet Explorer 4.0では、プロパティやメソッドが数多く用意されており、Webページを動的かつ高速に構築したり変更できる。例えば、スクリプトを使うと、ドキュメントの先頭に章タイトルの目次リストを作成して挿入したり、そのリストをクリックすると実際の章に置き換えるといった操作も可能となる。

Webページのコンテントに対する動的にアクセスしたり変更する方法については、次のトピックで説明している。

TextRangeオブジェクトを使う高度なテキスト処理については、TextRangeオブジェクトの使用を参照すること。

HTMLコンテントの変更

Internet Explorer 4.0では、各エレメントで使えるプロパティやメソッドを提供していて、これらを使うとドキュメントを非常に簡単に変更することができる。ページ上のエレメントを調べ、別のコンテントに置き換えるプロパティとして、innerText、outerText、innerHTML、outerHTMLという4つのプロパティがある。

これらのプロパティにテキスト（文字列）を指定すると、エレメントのコンテントはそのテキストに置き換えらえれる。次のH1見出しを例に説明しよう。 

<H1 id=myH1>Dynamic Content is Very Cool!</H1>

上記のH1のコンテントを、innerTextプロパティで変更するには、以下のように指定する。 

document.all.myH1.innerText = "DHTML is Very Cool"

H1のコンテントが新しい文字列"DHTML is Very Cool"に変更されるまで、H1エレメントはドキュメント中ではそのままである。innerTextプロパティでは、文字列中にHTMLタグを指定してもテキストとして扱われ、HTMLとしては処理されない。文字列中にHTMLタグを挿入するには、次のようにinnerHTMLプロパティを使う必要がある。 

document.all.myH1.innerHTML = "DHTML is <I>Very</I> Cool!"

新しい文字列でH1のコンテントに置き換えられ、"Very"という単語がイタリックで表示される。

これで、置き換えられたコンテントで、"Very"という単語がイタリックで表示される。

outerTextプロパティとouterHTMLプロパティは、エレメントでの指定どおりに表示する。上記の例がBODYエレメントに含まれている場合、H1でouterTextプロパティを使うと、エレメント全体をその文字列で置き換えることができる。次のスクリプトでは、H1を完全に取り除き、指定した文字列でBODYのコンテントを置き換える例を示す。 

document.all.myspan.outerText = "DHTML is VERY Cool!"

outerTextプロパティとouterHTMLプロパティは、エレメントでの指定どおりに表示する。例えばH1内でouterTextプロパティを使うと、H1タグは無効となる。次の例では、H1タグを無効にして、指定した文字列でコンテントが置き換えられる。 

document.all.myH1.outerText = "DHTML is VERY Cool!"

outerHTMLプロパティでは、リッチHTMLでエレメントを置き換える。上記のouterTextプロパティの例ではH1タグが無効になっただけなのに対して、outerHTMLプロパティを使うと、H1タグを他のエレメントに置き換えることができる。 

document.all.myH1.outerHTML = "<SPAN STYLE='height:0;width:200;FILTER:Shadow(color=#00FF00)'>RICH HTML</SPAN>";

ドキュメント コンテントの追加

プロパティを使って新しい文字列でエレメントの全コンテントを置き換える方法はすでに説明した。しかし、新しいテキストやHTMLエレメントを挿入したいだけで、ドキュメントを変更したくない場合もあるだろう。このような目的で使えるメソッドが2つ用意されている。

そのメソッドは、insertAdjacentHTMLメソッドとinsertAdjacentTextメソッドであり、既存のコンテントはそのままでエレメントの前あるいは後ろに新しいコンテントを挿入することができる。これらのメソッドは、新しいコンテントを挿入する位置を指定する必要がある。BeforeBegin、AfterBegin、BeforeEnd、AfterEndの4つのパラメータのいずれかで指定する。

次の例は、ドキュメントがロードされた後、ドキュメントの最後に新しい段落を追加する。 

<HTML>
<HEAD>
<TITLE>Dynamic Content: Inserting Elements</TITLE>
<SCRIPT LANGUAGE="JScript">
function insertPara()
{
document.body.insertAdjacentHTML("BeforeEnd", "<P>But adding a line makes it less so.");
}
</SCRIPT>
</HEAD>
<BODY onload="insertPara()">
<P>This is a <B>very</B> short document.
</P>
</BODY>
</HTML>

例：目次を自動生成させる

ダイナミックコンテントを使った例として、ここでは目次（Table of contents）を自動生成する方法を紹介する。簡単なスクリプトによって、ドキュメントのコンテントの詳細目次を自動生成させることができる。

この例では、3つの関数（buildTOC関数、setAnchor関数、setLink関数）を使っている。BuildTOC関数は、アンカーを適用してリンクを挿入する他の2つの関数を呼び出して、目次を生成する。この例は、（ドキュメント中に“<DIV id=MyTOC>”のように）識別子が設定されたDIVあるいはPなどのエレメントがあることが前提となっている。このエレメントにSetLink関数はリンクを挿入する。ドキュメントが完全にロードされるまでは、buildTOC関数は呼び出されない。

buildTOC関数は、allコレクションを使って各エレメントを調べ、見出しエレメント（H1、H2、H3、またはH4）かどうかをチェックする関数である。buildTOC関数が呼び出されると、BODYエレメント以降にあるエレメントに対して検索が開始される。見出しエレメントを検出すると、"level"変数を設定し、setAnchor関数とsetLink関数が呼び出される。 

function buildTOC() {
var coll = document.all;
var level;
var id;
for (i=document.body.sourceIndex+1; i<coll.length; i++) {
switch (coll[i].tagName) {
case "H1":
level = 0;
break;
case "H2":
level = 1;
break;
case "H3":
level = 2;
break;
case "H4":
level = 3;
break;
default:
level = -1;
}
if (level!=-1) {
id = i;
setAnchor(coll[i], id);
i++;
setLink(coll[i], level, id);
i+=2;
}
}
}

setAnchor関数やsetLink関数を呼び出されると、変数"i"は更新される。これらの関数がドキュメントに新しいエレメントを挿入するため、allコレクションが直ちに更新され、見出しエレメントに対する新しいインデックス値が必要となる。SetAnchor関数では、見出しエレメントの前に1つのエレメントを挿入するのでインデックス値が1つインクリメントされる。また、setLink関数では。ドキュメントの先頭に2つのエレメントを挿入するので、インデックス値が2つインクリメントされる。

setAnchor関数は、検出された見出しエレメントに対してAエレメントを追加する（見出しエレメントの前後に、アンカータグの開始タグと終了タグを挿入する）。そして、この追加したAエレメントでのNAME=属性に、関数に渡すために同じ"id"パラメータを設定する。 

function setAnchor(el, id) {
el.insertAdjacentHTML("BeforeBegin", "<A NAME="" + id + "">");
el.insertAdjacentHTML("AfterEnd", "</A>");
}

setLink関数は、見出しエレメントに対するリンクのためのAエレメントを追加する。つまり、HREF=属性には、setAnchor関数で設定されたNAME=属性に対応する"id"値が設定される。setLink関数では、（以下のように"BeforeEnd"パラメータを設定することで）"MyTOC"識別子のあるエレメントの終了位置の直前にリンクを挿入する。 また、このエレメントとリンクとの間はBRエレメントで区切って、リンクどうしは&nbsp;によってスペースを挿入している。 

function setLink(el, level, id) {
document.all.MyTOC.insertAdjacentHTML("BeforeEnd", "
");
var s = "&nbsp;";
for (j=0; j<level; j++)
s = s + s;
document.all.MyTOC.insertAdjacentHTML("BeforeEnd",
s + "<A HREF="#" + id + "">" + el.innerText + "</A>");
}

Webページで動的にコンテントを変更する場合に、注意すべきことがいくつかある。

  • ドキュメントがロードされた後でないと、コンテントを変更することはできない。：ドキュメントが完全にロードされるまで（つまり、onloadイベントが発生するまで）は、これらのプロパティを使って文字列の挿入や置換などが行えない。完全にロードされる前に行うと、エラーとなる。
  • ドキュメントにエレメントを追加すると、変更を反映されて、allコレクションやその他のエレメント コレクションは自動的に更新されることに注意すること。また、エレメントを追加すると、後続するエレメントのsourceIndex値が影響を受ける。エレメントのインデックス値を保存する場合、その値が更新され、ドキュメントにエレメントを追加・削除するときに新しいインデックス値で読み出せるようにしなければならない。
  • ドキュメントに無効なHTMLタグを置かないこと。：無効なHTMLタグを含んだ文字列をinnerHTMLやouterHTMLに割り当てることはできない。例えば、Pエレメントのコンテントを他のPエレメントで置き換えようとしても失敗する。Pエレメントには、テキストやインライン エレメントしか含めることができない。しかし、すべてのPエレメントを他のPエレメントに置き換えることはできる。

コンテント変更における注意点

コンテントを動的に変更するために、innerText、outerText、innerHTML、outerHTMLの4つのプロパティ、およびinsertAdjacentHTML、insertAdjacentTextの2つのメソッドを利用できることはすでに説明した。しかし、エレメントによっては、これらのプロパティやメソッドが期待どおりに機能しない場合がある。以下に、その注意点をいくつか示す。

  • ドキュメントのBODY中のエレメントだけが、これらのプロパティで変更できる。BODYのコンテントは置き換えられるが、BODY自体を置き換えることはできない。
  • INPUTやIMGでは、これらのプロパティやメソッドを使って、そのエレメントのコンテントを置き換えることは当然できない。
  • TDのコンテントは変更可能（innerText、innerHTMLが利用できる）であり、TABLEエレメント自体も置き換え可能（outerText、outerHTML）だが、他の表エレメントやそのコンテントはこれらのプロパティでは変更できない。

追加トピック

テキスト処理のさらなる応用については、以下のセクションで説明する。

Up トップに戻る
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.