ダイナミック HTML

ダイナミック HTML（DHTML）は、一部のブラウザベンダーが、HTML、スタイルシート、クライアント側スクリプト（JavaScript、VBScript、またはその他のサポートされているスクリプト）の組み合わせを説明するために使用した用語であり、インタラクティブでアニメーション化されたドキュメントの作成を可能にしました。^[1]^[2] DHTML のアプリケーションは、1997年にMicrosoftによってInternet Explorer 4のリリースで導入されました。 ^[3]^{[信頼できない情報源? ]}

DHTML (Dynamic HTML) を使用すると、JavaScript などのスクリプト言語で Web ページの構造内の変数や要素を変更できるようになります。これにより、ページが完全に読み込まれた後や表示プロセス中に、本来は「静的」な HTML コンテンツの外観、動作、機能が影響を受けます。したがって、DHTML の動的な特徴は、ページが読み込まれるたびに一意のページを生成する機能ではなく、ページが表示されているときに機能する方法にあります。

対照的に、動的 Web ページはより広い概念であり、ユーザー、負荷の発生、または特定の変数値ごとに異なる方法で生成される Web ページをすべてカバーします。これには、クライアント側スクリプトによって作成されたページと、Web サーバーがコンテンツを生成してからクライアントに送信するサーバー側スクリプト( PHP、Python、JSP、ASP.NETなど)によって作成されたページが含まれます。

DHTML はAjaxの前身であり、DHTML ページは依然としてリクエスト/リロードベースです。DHTML モデルでは、ページがロードされた後にクライアントとサーバーの間でやり取りが行われない可能性があり、すべての処理はクライアント側で行われます。対照的に、Ajax は DHTML の機能を拡張し、ページがロードされた後でも、追加のアクションを実行するためにページがサーバーにネットワークリクエスト (または「サブリクエスト」) を開始できるようにします。たとえば、ページに複数のタブがある場合、純粋な DHTML アプローチではすべてのタブのコンテンツがロードされ、アクティブなタブのみが動的に表示されますが、AJAX では各タブが本当に必要なときのみロードできます。

用途

DHTML を使用すると、作成者はドキュメントオブジェクトモデル(DOM) とページスタイルを変更することで、他の方法では実現が難しい効果をページに追加できます。HTML、CSS、JavaScript を組み合わせることで、次のことが可能になります。

ドキュメント内のテキストと画像をアニメーション化します。
最新のニュース、株価情報、その他のデータでコンテンツを自動的に更新するティッカーまたはその他の動的ディスプレイを埋め込みます。
フォームを使用してユーザー入力を取得し、データをサーバーに送り返すことなく、そのデータを処理、検証、応答します。
ロールオーバーボタンまたはドロップダウンメニューを含めます。

あまり一般的ではない用途としては、ブラウザベースのアクションゲームの作成があります。1990年代後半から2000年代前半にかけて、DHTMLを使用して多数のゲームが作成されましたが、^[4]ブラウザ間の違いによりこれは困難でした。ゲームを複数のプラットフォームで動作させるには、多くの技術をコードに実装する必要がありました。それ以来、ブラウザはWeb標準に向かって収束し、DHTMLゲームの設計はより実現可能になりました。これらのゲームは、すべての主要ブラウザ、および埋め込みブラウザコンテキストをサポートするデスクトップおよびデバイスアプリケーションでプレイできます。

「DHTML」という用語は、さまざまなウェブブラウザ間でうまく機能しない傾向がある慣行や慣習に関連付けられていたため、近年使用されなくなっています。^[5]

広範な DOM アクセスを備えた DHTML サポートは、 Internet Explorer 4.0で導入されました。 Netscape Navigator 4.0には基本的な動的システムがありましたが、すべての HTML 要素が DOM で表現されたわけではありませんでした。 DHTML スタイルの技術が普及したとき、関連するテクノロジに対する Web ブラウザ間のサポートの程度にばらつきがあったため、開発とデバッグが困難になりました。 Internet Explorer 5.0+、Mozilla Firefox 2.0+、およびOpera 7.0+ がECMAScriptから継承された共有DOMを採用したことで、開発は容易になりました。

その後、jQueryなどのJavaScript ライブラリによって、クロスブラウザ DOM 操作における日常的な問題の多くが抽象化されましたが、ブラウザ間の標準準拠が向上したため、この必要性は減少しました。

ウェブページの構造

通常、DHTML を使用する Web ページは次のように設定されます。

<!DOCTYPE html> 
< html  lang = "en" > 
< head > 
    < meta  charset = "utf-8" > 
    < title > DHTML の例</ title > 
</ head > 
< body  bgcolor = "red" > 
    < script > 
function init () { let myObj = document . getElementById ( "navigation" ); // ... manipulate myObj } window . onload = init ; </ script > <!--    多くの場合、コードは外部ファイルに保存されます。これは、    JavaScript を含むファイルをリンクすることによって行われます。    これは、複数のページで同じスクリプトを使用する場合に役立ちます。    --> < script src = "my-javascript.js" ></ script > </ body > </ html >

例: 追加のテキストブロックを表示する

次のコードは、よく使用される機能を示しています。Web ページの追加部分は、ユーザーが要求した場合にのみ表示されます。

<!DOCTYPE html> 
< html > 
< head > 
    < meta  charset = "utf-8" > 
    < title > DOM 関数の使用</ title > 
    < style > 
a { background-color : #eee ; } a : hover { background : #ff0 ; } # ToggleMe { background : #cfc ; display : none ; margin : 30 px 0 ; padding : 1 em ; } </ style > </ head > < body > < h1 > DOM 関数の使用</ h1 >            
            
                   
    


    
        
    < h2 >< a  id = "showhide"  href = "#" >段落を表示</ a ></ h2 >
        
    < p  id = "toggle-me" >これはリクエストがあった場合にのみ表示される段落です。</ p >
        
    < p >文書の全体的な流れは続きます。</ p >
        
    < script > 
function changeDisplayState ( displayElement , textElement ) { if ( displayElement . style . display === "none" || displayElement . style . display === "" ) { displayElement . style . display = "block" ; textElement . innerHTML = "段落を非表示" ; } else { displayElement . style . display = "none" ; textElement . innerHTML = "段落を表示" ; } } let displayElement = document . getElementById ( "toggle-me" ); let textElement = document . getElementById ( "showhide" ); textElement . addEventListener ( "click" , function ( event ) { event . preventDefault (); changeDisplayState ( displayElement , textElement ); }); </ script > </ body > </ html >

ドキュメントオブジェクトモデル

DHTML は、それ自体が技術ではなく、HTML、カスケーディングスタイルシート (CSS)、JavaScriptという 3 つの関連し補完的な技術の産物です。スクリプトとコンポーネントが HTML と CSS の機能にアクセスできるようにするために、ドキュメントの内容は、ドキュメントオブジェクトモデル(DOM) と呼ばれるプログラミングモデルのオブジェクトとして表現されます。

DOM API は DHTML の基盤であり、ドキュメント内のほぼすべてのものにアクセスして操作できる構造化されたインターフェイスを提供します。ドキュメント内の HTML 要素は、個々のオブジェクトの階層ツリーとして使用できるため、プロパティの読み取りと設定、およびメソッドの呼び出しによって、要素とその属性を調べたり変更したりできます。要素間のテキストも、DOM プロパティとメソッドを通じて使用できます。

DOM は、キーの押下やマウスのクリックなどのユーザーアクションへのアクセスも提供します。イベントハンドラー関数とルーチンを作成することで、これらのイベントやその他のイベントを傍受して処理することができます。イベントハンドラーは、特定のイベントが発生するたびに制御を受け取り、DOM を使用してドキュメントを変更するなど、適切なアクションを実行できます。

ダイナミックなスタイル

動的スタイルは DHTML の重要な機能です。CSS を使用すると、要素を追加または削除することなく、ドキュメント内の要素の外観と書式設定をすばやく変更できます。これにより、ドキュメントのサイズを小さく保ち、ドキュメントを操作するスクリプトを高速化できます。

オブジェクトモデルは、スタイルへのプログラムによるアクセスを提供します。つまり、簡単な JavaScript プログラミングを使用して、個々の要素のインラインスタイルを変更したり、スタイルルールを変更したりできます。

インラインスタイルは、スタイル属性を使用して要素に適用された CSS スタイルの割り当てです。個々の要素のスタイルオブジェクトを取得することで、これらのスタイルを調べて設定できます。たとえば、ユーザーがマウスポインターを見出しの上に移動したときにその見出しのテキストを強調表示するには、次の簡単な例に示すように、スタイルオブジェクトを使用してフォントを拡大し、色を変更します。

<!DOCTYPE html> 
< html  lang = "en" > 
< head > 
    < meta  charset = "utf-8" > 
    < title >動的スタイル</ title > 
    < style > 
ul { display : none ; } </ style > </ head >            
    


< body > 
    < h1  id = "first-header" >ダイナミック HTML へようこそ</ h1 >

    < p >< a  id = "clickable-link"  href = "#" >動的スタイルは DHTML の重要な機能です。</ a ></ p >

    < ul  id = "unordered-list" > 
        < li >テキストの色、サイズ、書体を変更する</ li > 
        < li >テキストを表示または非表示にする</ li > 
        < li >その他多数</ li > 
    </ ul >

    < p >まだ始まったばかりです! </ p >

    <スクリプト> 
function showMe () { document . getElementById ( "first-header" ). style . color = "#990000" ; document . getElementById ( "unordered-list" ). style . display = "block" ; }          
              
              
        

        document.getElementById ( "clickable-link" ). addEventListener ( " click" , function(event){event.preventDefault ( ) ; showMe ( ) ; } ) ; < / script > < / body > < / html >

参照

動的ウェブページ

参考文献

^ 「Document Object Model FAQ」。W3C。2003年10月22日。 2022年2月16日閲覧。
^ 「Webスタイルシート」。W3C。1999年7月22日。 2018年4月7日閲覧。
^ Pedamkar, Priya (2020-07-19). 「DHTML | コンポーネント、機能、ニーズに関する DHTML の概要」. EDUCBA . 2022-10-13閲覧。
^ Downes, Stephen (1999 年 8 月 18 日). 「Fun and Games With DHTML」. Stephen's Web . 2022 年 8 月 27 日閲覧。
^ Ferguson, Russ; Heilmann, Christian (2013). Beginning JavaScript with DOM Scripting and Ajax (PDF) . Berkeley, CA: Apress. pp. 49–68. doi :10.1007/978-1-4302-5093-7. ISBN 978-1-4302-5092-0. S2CID 20526670 . 2022年5月30日閲覧。

外部リンク

QuirksMode は、複数のブラウザーで実行される DHTML コードの記述方法に関するテスト例と手順が記載された総合的なサイトです。
DHTML入門チュートリアル

[1] 「Document Object Model FAQ」。W3C。2003年10月22日。 2022年2月16日閲覧。

[2] 「Webスタイルシート」。W3C。1999年7月22日。 2018年4月7日閲覧。

[3] Pedamkar, Priya (2020-07-19). 「DHTML | コンポーネント、機能、ニーズに関する DHTML の概要」. EDUCBA . 2022-10-13閲覧。

[4] Downes, Stephen (1999 年 8 月 18 日). 「Fun and Games With DHTML」. Stephen's Web . 2022 年 8 月 27 日閲覧。

[5] Ferguson, Russ; Heilmann, Christian (2013). Beginning JavaScript with DOM Scripting and Ajax (PDF) . Berkeley, CA: Apress. pp. 49–68. doi :10.1007/978-1-4302-5093-7. ISBN 978-1-4302-5092-0. S2CID 20526670 . 2022年5月30日閲覧。