お客様が developerWorks に初めてサインインすると、プロフィールが作成されます。プロフィールで選択した情報は公開されますが、いつでもその情報を編集できます。お客様の姓名（非表示設定にしていない限り）とディスプレイ・ネームは、投稿するコンテンツと一緒に表示されます。

送信されたすべての情報は安全です。

developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

送信されたすべての情報は安全です。

My developerWorks：

通知：

サイン・アウト

言語を選択する：

Internet Explorer 4以降でJavaScriptを使用して動的HTMLを作成する

Beginning JavaScript (Wrox社刊) からの抜粋

Paul Wilton, Author, Beginning Javascript

Paul Wiltonは、英国国防省でVisual Basicアプリケーション・プログラマーとして最初の経験を積んだのち、ネットに引き込まれていきました。インターネット開発会社に入社後、最近3年間はインターネット・ソリューションの構築を支援する業務に携わり、現在は英国の大手銀行のe-commerce Webサイトに関する仕事をしています。Paulが得意にしているのは、DHTML、JavaScript、VBScript、およびVisual Basicを使用してWebフロントエンドを開発することと、ASP、Visual Basic、およびSQL Serverを使用してバックエンド・ソリューションを開発することです。現在、Windows 2000アクティブ・ディレクトリーのADSIプログラミングなどを含め、その得意分野を広げつつあります。

概要： この記事は、Paul Wilton著Beginning JavaScript の第12章『Dynamic HTML』からの抜粋です。ここでは、HTMLページ内のタグにアクセスしてそれらを動的に変更し、ユーザー対話を強化するための方法について、概要を述べます。この記事は、MicrosoftのInternet Explorerブラウザー、バージョン4.0以降でJavaScriptを使用してHTMLページに動的コンテンツを作成するための、いくつかの簡単な (しかも面白い) 例を紹介しています。それぞれの例ではフル・コードをリストし、動作の仕組みも説明されています。例を使用するためには、テキスト・エディターに打ち込み、それを .htmファイルとして保管したうえで、Internet Explorerにロードしてください。

タグを付ける!

日付: 2001年 4月 01日
レベル: 初級
この記事の原文: 英語
アクティビティー： 3995 ビュー
お気軽にご意見・ご感想をお寄せください：

Internet Explorer 4.0以降での動的HTML

Internet Explorerでは、ほとんどのタグは、<P> タグのような単純なものも、オブジェクトによって表されます。これらのタグの属性は、多くの場合オブジェクトのプロパティーとして表されます。オブジェクトには、ほかにも驚くほど多くのプロパティー、メソッド、およびイベントがあり、その数は合計でおそらく100近くになると思われます。これらのプロパティーのいくつかは、それ自体がオブジェクトであって、さらにプロパティーとメソッドを備えています。

このセクションでは、IEによるDHTMLの基礎の部分を説明します。基礎が分かると、Beginning JavaScript の付録EおよびFを見てIE BOMを参照することにより、あるいはWrox Pressから刊行されているDHTML関連の上級者用の書籍を参照することにより (参考文献を参照)、IEで使用可能なプロパティー、メソッド、およびイベントについてさらに調べることができます。

ページ・タグへのアクセス

HTMLタグのオブジェクトにアクセスし、そのプロパティーを変更したり、メソッドを呼び出してイベントにフックしたりするには、どのようにすればよいのでしょう?参照しようとする個々のタグを指定する方法が必要なことは明らかです。本書のこれまでの部分で、私たちはタグにName 属性を与え、それを使用してタグにアクセスしていました。たとえば、フォーム内のテキスト・ボックスをこのように定義することができます。

リスト1a

                
    <FORM
NAME="myForm">
       <INPUT TYPE="text" NAME="text1">
    </FORM>

その後で、フォームの名前myForm を使用してJavaScript内の対応するForm オブジェクトを参照し、名前 text1 を使用してテキスト・ボックスのText オブジェクトを参照します。

リスト1b

                
    document.myForm.text1.value

ただしIEのDHTMLでは、別の方法で (タグのID 属性を使用して) タグを固有に識別します。これはNAME 属性と非常によく似た働きをします。フォームやフォームのコントロールなどの、特定の要素は、NAME 属性を必要とします。フォームがポストされるときにサーバーに渡されるのはこの属性だからです。しかし、その他のほとんどの要素では、ID 属性だけを使用することができます。

たとえば、段落タグ<P> にスクリプトでアクセスしたい場合、次のようなコードを書きます。

リスト1c

                
    <P ID="myPara">A Paragraph</P>

私たちのJavaScriptコードでこれにアクセスするには、ID 値を使用します。たとえば、段落からテキストを検索したい場合には、P オブジェクトのinnerText プロパティーを次のコードで使用します。

リスト1d

                
myPara.innerText;

私たちの例では、これは "A Paragraph" になります。innerText プロパティーについては、この章の後の部分で詳しく説明します。

タグに関連付けられたオブジェクトにアクセスするもう1つの方法は、文書オブジェクトのall 配列プロパティー (より正確には、コレクション・プロパティー) です。このプロパティーには、そのページのソース・コードで定義されているすべての要素が、ソース・コード内の順序で含まれています。要素の参照は、配列内のその索引を使用して行うことも、all というワードの後の大括弧内のそのID 値を使用して行うこともできます。たとえば、上の段落を参照するには、次のコードを使用します。

リスト1e

                
document.all["myPara"];

ただし、この章の目的を考えると、前の方法であるタグのオブジェクトの参照を使用するほうが簡単です。

上に戻る

外観の変更

ページがロードされた後でHTMLタグの外観を変更するための鍵は、style オブジェクトです。ほとんどすべてのタグのオブジェクトは、これをプロパティーとして備えています。style オブジェクトは、前に見たタグのスタイル・シートをJavaScriptで表現したもので、スタイル・シートで設定可能なほとんどのプロパティーは、style オブジェクトでも設定することができます。付録EおよびFにstyle オブジェクトのプロパティーの説明があります。

style オブジェクトのプロパティーの例としてcolor があります。名前から明らかなように、これを使用してオブジェクトのカラーを変更することができます。たとえば、myPara というID を持つ段落のstyle オブジェクト・プロパティーのcolor プロパティーを変更するには、次のような方法を使用します。

リスト1f

                
myPara.style.color='red';

特定のタグを表すオブジェクトのstyle オブジェクト・プロパティーを使用してそのタグの外観を変更するという、この技法は、ほとんどのタグに有効であり、広範囲にわたる外観変更を行うことができます。背景のカラーからテキストのスペーシング、テキスト・サイズ、さらにはタグをユーザーに見えるようにするかどうかということまで、すべてのことがstyle オブジェクトによって決定できます。

実際にstyleオブジェクトを使ってみましょう

style オブジェクトを使用する単純な例を示します。リスト2 を見てください。

リスト2

                
    <HTML>
	
    <HEAD>
	
    <SCRIPT LANGUAGE=JavaScript>
	

    function myPara_onmouseout() 
	
    {
	
       myPara.innerText = "Roll your mouse over my text";
	   
       myPara.style.color = "Black"
	   
    }

    function myPara_onmouseover() 
	
    {
	
       myPara.innerText = "Wow that feels good!!!";
	   
       myPara.style.color = "Red"
	   
    }

    </SCRIPT>
	
    </HEAD>
	

    <BODY>
	
    <P ID="myPara" 
	
       onmouseout="return myPara_onmouseout()" 
	   
       onmouseover="return myPara_onmouseover()">
	   
          Roll your mouse over my text
		  
    </P>
	
    </BODY>
	
    </HTML>

これをrollover_IE.htm という名前で保管します。これをブラウザーにロードすると、"Roll your mouse over my text" というテキストを含む段落が表示されます。(図1 を参照してください。)

図1: テキストを含む段落

マウスをテキストの上に移動させると、テキストのカラーが赤に変更され、テキスト・メッセージが "Wow that feels good!!!" に変更されます。(図2 を参照してください。)

図2: 赤のテキスト・カラー

マウスをテキストからはずすと、テキストは元のカラーおよびメッセージに戻ります。

動作のしくみ

ページの本体で、myPara というID の段落を定義してあります。この段落のonmouseout イベント・ハンドラーを関数myPara_onmouseout() に結合させ、onmouseover イベント・ハンドラーを関数myPara_onmouseover() に結合させています。これらの関数はページのヘッドのスクリプト・ブロックで定義されています。

ユーザーのマウスが段落の上に置かれたときに呼び出されるmyPara_onmouseover() 関数は、まず、段落のテキストを変更します。これは、上で見たinnerText プロパティーを使用して行われます。リスト3a を参照してください。

リスト3a

                
    function
myPara_onmouseover() 

    {
	
       myPara.innerText = "Wow that feels good!!!";

この関数はさらに、myPara オブジェクトのstyleオブジェクト・プロパティーのcolorプロパティーを使用して、段落のカラーを変更します。リスト3b を参照してください。

リスト3b

                
myPara.style.color = "Red"

    }

ユーザーのマウスが段落から外にはずされたときに呼び出されるmyPara_onmouseout() 関数も、非常によく似た機能を果たします。テキストを元の値に戻し、style オブジェクトのcolor プロパティーを黒に戻します。

上に戻る

コンテンツの位置決めと移動

ページがロードされたときのページにおけるHTML要素の正確な位置を決めるための、スタイル・シートの使用法については、前に説明しました。JavaScriptを使用することにより、ページがロードされた後で、要素の絶対位置または相対位置を変更することができます。今回もstyle オブジェクトを使用します。この場合は、style オブジェクトのleft およびtop プロパティーを使用して、HTML要素の左および上位置を変更することができます。

実際にテキストを移動してみましょう

JavaScriptを使用してロード後のコンテンツを移動させる例を示します。この例では、2つの段落を左から右にスクロールさせ、さらに連続ループで元に戻すことにします。タグの移動を維持させるには、タイマー機能を使用します。リスト4a を参照してください。

リスト4a

                
    <HTML>

    <HEAD>

    <SCRIPT LANGUAGE=JavaScript>

                

    var paraOneLeft = 100;

    var paraTwoLeft = 400;

    var switchDirection = false;

                

    function window_onload() 

    {

       window.setInterval("moveParas()",50);

    }

                

    function moveParas()

    {

       if (switchDirection == false)

       {

          paraOneLeft++;

          paraTwoLeft--;

                

          if (paraOneLeft == 400)

          {

             switchDirection = true;

          }

       }

       else

       {

          paraOneLeft--;

          paraTwoLeft++;

                

          if (paraOneLeft == 100)

          {

             switchDirection = false;

          }

       }

                

       para1.style.left = paraOneLeft + "px";

       para2.style.left = paraTwoLeft + "px";

    }

                

    </SCRIPT>

    </HEAD>

                

    <BODY LANGUAGE=JavaScript onload="window_onload()">

                

    <P STYLE="position:relative;left:100px;top:30px" ID="para1">Para 1</P>

    <P STYLE="position:relative;left:400px;top:10px" ID="para2">Para 2</P>

                

    </BODY>

    </HTML>

このページをMovingTags_IE.htm という名前で保管し、Internet Explorer 4.0以降のブラウザーにロードしてください。2つのタグのコンテンツ (Para 1およびPara 2) が画面をそれぞれ左右反対方向に滑らかにスクロールし、連続して行ったり来たりするはずです。

動作のしくみ

ページの本体に2つの<P> 要素があります。それぞれの要素に固有のID値 (para1 とpara2) が与えられています。これを使用して、それぞれのタグに関連付けられたP オブジェクトを参照します。リスト4b を参照してください。

リスト4b

                
    <P STYLE="position:relative;left:100px;top:30px" ID="para1">Para 1</P>

    <P STYLE="position:relative;left:400px;top:10px" ID="para2">Para 2</P>

STYLE 属性で、段落を座標100,30 および400,10 に位置付けてあります。para2 がpara1 よりも上になることに注意してください。

2つの<P> タグが他のタグの中に含まれていないにもかかわらず、段落の位置付けは、絶対位置ではなく相対位置で行われています。なぜでしょうか?

これは、ブラウザーの互換性を考慮してのことです。IE 4は <P> タグの絶対的位置付けをサポートせず、相対的位置付けをサポートしています。IE 5.0以降は、 <P> タグの絶対的位置付けと相対的位置付けの両方をサポートしていますので、問題は生じないはずです。この例で、他のタグに含まれていないときに相対的位置付けを使用すると、絶対的位置付けと同じ効果が得られます。

別の方法として、コンテナー・タグである <DIV> タグを使用することができます。コンテナー・タグは、何も表示することはなく、その中でタグをグループ化するために使用されます。これにより、IE 4とIE 5で絶対的位置付けおよび相対的位置付けがサポートされるようになりますので、それぞれ別に絶対的位置付けを行った <DIV> タグの中に各段落を入れて、<DIV> タグを動かすことができます。

ページのヘッドのスクリプト・ブロック内で、段落の左位置およびスクロール方向を決めるために使用する3つの変数を宣言した後で、 window_onload() 関数を定義しています。リスト4c を参照してください。

リスト4c

                
    function window_onload() 

    {

       window.setInterval("moveParas()",50);

    }

ここでは、 window オブジェクトの setInterval() メソッドを使用してタイマーを動かします。これにより、50ミリ秒ごとに moveParas() 関数が呼び出されるようになります。 moveParas() 関数は、スクリプト・ブロック内でこの次に定義されます。この関数は、段落のテキストを実際に移動させるために使用されます。

段落のテキストをどのように動かしたいですか?

上の段落para2 は、左位置400から開始させて、左位置が100になるまで1ピクセルずつ減少させ左に移動させることにします。その位置になったときには、方向を切り替えて1ピクセルずつ左位置を増分させることによって段落を逆方向に移動させ、左位置が400になったときには、再び方向を切り替えて同じプロセスを開始させます。

下の段落para1 は、上の段落とちょうど逆の動きをします。左位置100から開始させて、左位置が400になるまで1ピクセルずつ右にスクロールさせます。その位置になったときには、方向を切り替えて、左位置が再び100になるまで逆方向にスクロールさせます。

これを行うためのmoveParas() 関数の最初のタスクは、段落をスクロールさせる方向を決定することです。これは、switchDirection 変数を使用して行います。この変数の値は、 para1 が右方向にスクロールしているときにはfalse になり、para1 が左方向にスクロールしているときにはtrue になります。この変数は、スクリプト・ブロックの先頭でfalse に初期化されています。

最初のif 文では、switchDirection の値がfalse になっているかどうか、条件検査が行われます。そのようになっている場合には、para1 の左位置を1ずつ増やし、para2 の左位置を1ずつ減らします。そして、その内側のif 文で、para1の左位置が400になっているかどうかを検査します。そのようになっている場合には、スクロールの方向を切り替える必要がありますので、変数switchDirection の値をtrueに設定します。リスト4d を参照してください。

リスト4d

                
    function moveParas()

    {

       if (switchDirection == false)

       {

          paraOneLeft++;

          paraTwoLeft--;

                

          if (paraOneLeft == 400)

          {

             switchDirection = true;

          }

       }

次に、else 文に、switchDirection がtrue の場合、つまり反対方向にスクロールする場合のための類似のコードがあります。リスト4e を参照してください。

リスト4e

                
      
else

       {

          paraOneLeft--;

          paraTwoLeft++;

                

          if (paraOneLeft == 100)

       {

             switchDirection = false;

       }

    }

最後に、段落の左位置を、前の例のcolor で行なったときとまったく同じ方法で、つまり、各P オブジェクトのstyle オブジェクト・プロパティーを使用して設定します。リスト4f を参照してください。

リスト4f

                
      
para1.style.left = paraOneLeft + "px";

       para2.style.left = paraTwoLeft + "px";

    }

これで、moveParas() 関数、そしてスクリプト・ブロックが完成しました。

参考文献

本書およびその他のWroxの刊行物の詳細については、www.wrox.com を訪問してください。
本書をBorders.comから購入するには、ここをクリックしてください。
DHTMLの詳細については、Instant DHTML Scriptlets (Dino Esposito著) とInstant IE4 Dynamic HTML Programmer's Reference (Alex HomerおよびChris Ullman著) を参照してください。ともにWrox Pressより出版されています。

著者について

閉じる [x]

不正使用の報告のヘルプ