動的ウェブページ

動的ウェブページとは、ソフトウェアの実行中（ランタイム）に構築されるウェブページである。これは、保存されている通りに配信される静的ウェブページとは異なる。 また、サーバーサイド動的ウェブページとは、サーバーサイドスクリプトを処理するアプリケーションサーバによって構築されるウェブページである。 サーバーサイドスクリプトでは、パラメータが新しいウェブページの組み立て方法を決定し、それによってさらなるクライアントサイド処理が可能である。 クライアントサイド動的ウェブページとは、ブラウザでロードする際にJavaScriptを使用してウェブページを処理するタイプの動的ウェブページである。JavaScriptは、Document Object Model (DOM) を介してページと対話し、ページの状態を問い合わせたり、それを変更したりすることができる。ウェブページがクライアントサイドで動的であっても、サーバーサイドのコードが含まれていない限り、GitHub PagesやAmazon S3などの静的ホスティングサービス上でホストすることができる。

概要

ユーザーやコンピュータプログラムによって、動的ウェブページの内容は再読み込みされて変更される。この更新情報はサーバーから提供されることもあれば、ページのDOM (Document Object Model) に対する変更によってもたらされることもある。これにより、閲覧履歴が削除されたり、戻る機能のための保存ページが作成されることがある。ただ、Ajax技術を使用して動的ウェブページを更新する場合、戻るためのページを新たに作成したり、表示されたページより先の閲覧履歴を削除する必要はない。Ajaxを活用することで、エンドユーザーにはウェブブラウザ上で一つの動的なページとして管理されるように見えるが、そのページでレンダリングされる実際のウェブコンテンツは変わり続けるようにすることができる。Ajaxエンジンはブラウザ上にのみ存在し、クライアントのリクエストに応じてアプリケーションサーバーからDOMの一部を要求する。そして、特定のアプリケーションサーバーはウェブアプリケーションにサービスを提供するために、標準化されたRESTスタイルのインターフェースを提供することがある。

DHTMLは、静的ウェブページではないウェブページを作成するために使用される技術や手法の総称であるが、Ajaxの普及以降、一般的に使われなくなった。クライアントサイドスクリプト、サーバーサイドスクリプト、またはこれらの組み合わせによって、ブラウザ上でのダイナミックなウェブ体験が可能になる。

基本コンセプト

クラシックなハイパーテキストナビゲーションでは、HTMLやXHTMLだけを使用し、「静的」なコンテンツを提供する。つまり、ユーザーがウェブページをリクエストし、そのページとその上の情報を閲覧する。

しかし、ウェブページは「ライブ」、「ダイナミック」、または「インタラクティブ」なUXも提供することができる。ウェブページ上のコンテンツ (テキスト、画像、フォームフィールドなど) は、異なる状況や条件に応じて変更することができる。

このような効果を生み出す方法は2つある。

• 特定のウェブページ内でインターフェースの振る舞いを変更するためにクライアントサイドスクリプトを使用する方法。これはマウスやキーボードのアクション、または指定されたタイミングのイベントに応じて行われる。この場合、動的な振る舞いはルック・アンド・フィールの中で発生する。
• 提供されるページソースをページ間で変更するためにサーバーサイドスクリプトを使用する方法。これにより、ブラウザに供給されるウェブページやウェブコンテンツの順序や再読み込みが調整される。サーバーの応答は、投稿されたHTMLフォームのデータ、URL内のパラメータ、使用されているブラウザの種類、時間の経過、またはデータベースやサーバーの状態などの条件によって決定されることが多い。