情報通信研究部 藤本 悠希
お客さまからWebサイト構築の相談を受けた際に、
「社内ルールで動的サイトの構築は禁止されています。ボタンクリックやマウス操作によりインタラクティブに表示内容が変わるWebサイトは諦め、「見るだけ」で表示内容が変わらない静的なページを作ってください。」
と要望されることがあります。
よくよく伺うと、お客さまの社内ルールでは、インタラクティブに表示内容が変わるWebサイト自体は禁止されていないことも多く、そのような場合、お客さまに
「静的で動的なWebサイトを構築できますよ。」
とお伝えします。何やらとんち問答のようですが、これは、「静的」・「動的」という用語の多義性によるものです。本記事では、「静的」・「動的」というWebサイトの分類について整理するとともに、「静的で動的なWebサイト」の真意を説明します。第2回、第3回では、実際に動くサンプルを作成しながら説明します。
Webサイトの「静的」・「動的」とは
「静的」Webサイト、「動的」Webサイトについて、インターネット上の情報を検索すると、以下のような説明が見つかります。なお、各項目の説明文の末尾の名称（～Webサイト）は、本記事のために筆者が独自に名付けたものです。
「静的」Webサイト
1a. サーバーは、事前に格納された各種ファイル（HTML、CSS、JavaScript、その他画像ファイル等）を、そのまま配信する…コンテンツ配信型Webサイト
1b. インタラクティブな動作は無く、表示内容が固定である…固定表示Webサイト
「動的」Webサイト
2a. 閲覧者のリクエストに応じたコンテンツを、サーバー内のプログラムで、その場で生成して配信する…サーバー処理型Webサイト
2b. （ボタンクリック等の）閲覧者の入力を受け付け、それに応じて表示内容が変化する…インタラクティブWebサイト
ここで、1a、2aは、サーバーの動作に着目した、いわば開発者視点での「静的」・「動的」の分類で、1b、2bは、閲覧者の視点での分類です。ひと昔、あるいはふた昔前のWebサイトは、ほとんど「1a＝1b」、「2a＝2b」であったため、「コンテンツ配信型Webサイト（1a）は固定表示Webサイト（1b）である」、「サーバー処理型Webサイト（2a）はインタラクティブWebサイト（2b）である」と見做すことができ、開発者視点と閲覧者視点とのズレはありませんでした。
近年、Webフロントエンドと呼ばれる技術が発展し、この状況が大きく変わっています。フロントエンド技術とは、大雑把に言うと、JavaScript等で記述されたプログラムが閲覧者側のWebブラウザー上で動き、表示する内容を動的に組み立てる仕組みです。コンテンツ配信型Webサイトの仕組みで、サーバーから「ユーザーがこのボタンをクリックしたらこの処理を行って結果を表示する」といったことを記述したプログラムを配信することで、閲覧者側の入力に応じてプログラムが動き、サーバーでの処理を介することなく表示内容を変化させることが可能です。
現在は、閲覧者側のマシンの能力向上によるJavaScript処理速度の改善、ライブラリ群の充実等に伴い、複雑なユーザーインターフェースをWebフロントエンドの技術で実現することが可能となっています。この技術を使ったWebサイトは「コンテンツ配信型Webサイト（1a）だが、インタラクティブWebサイト（2b）である」と言え、これこそが、静的で動的なWebサイトです。
コンテンツ配信型Webサイトの利点とは
サーバー処理型Webサイトでは、サーバー上でプログラムを動作させるためのソフトウェア、ライブラリ等を、サーバー上に準備する必要があります。そのため、コンテンツ配信型と比較してサーバーの構成は複雑になりがちで、セキュリティや安定稼働に対する懸念も増大します。特に、ひとつのサーバーで複数のサーバー処理型Webサイトを構築する場合、各Webサイトが使用するソフトウェア、ライブラリ類が干渉しないよう、様々な作業が発生します。Webサイトをコンテンツ配信型に限定することで、サーバーの構築・運用コストを減らせます。また、都度サーバー上での処理や通信が発生するサーバー処理型Webサイトに比べ、サーバーの負担も小さくなります。
以上のことから、企業や団体等のWebサイト構築上の制約として、「静的（=コンテンツ配信型）Webサイトに限る」、としているケースは往々にしてあります。冒頭で紹介したお客さまも、そのような事情があったものと思われます。
インタラクティブなWebサイトの利点とは
固定表示Webサイトでは、すべての閲覧者に同一のコンテンツを提供することとなり、表現力が限定されます。企業や団体等は、インタラクティブなWebサイトを提供することで、情報発信手段の多様化や閲覧者の興味の増大に繋がり、情報発信効果の向上が期待できます。
インタラクティブなコンテンツ配信型Webサイトでどのようなことができるのか、具体例を以下に示します。いずれも、現在のフロントエンド技術を利用すれば、比較的容易に作成することが可能です。
- 地図表示
企業Webサイトの所在地案内等で使われ、ページの一部にGoogleマップや国土地理院「地理院タイル」（ https://maps.gsi.go.jp/development/ichiran.html ）等の最新の地図を表示し、地図上に所在地のマーカーを表示することが可能です。マーカーをクリックすると、その地点の詳細情報を表示することもできます。 - グラフ表示
過去の天気や気温の推移等をグラフで表示するWebページをご覧になったことがあるかもしれません。JavaScriptには、多数のグラフ関連ライブラリがあり、サーバーでの処理無しにWebサイトでグラフ画像を生成できます。グラフ上の点をクリックするとポップアップで座標情報を表示する、グラフを拡大・縮小表示する、メニュー選択で表示するグラフを切り替える（例えば、どの都道府県のデータを表示するか選択する等）といったことも可能です。 - 検索機能
検索対象のデータが大きい場合には、サーバー処理型Webサイトを構築し、閲覧者のリクエストに応じてサーバー上のデータベースを検索することが現実的ですが、検索対象のデータが小さい場合には、すべての検索対象データをサーバーから閲覧者側に予め配信しておき、JavaScriptによって閲覧者側で検索を行うコンテンツ配信型Webサイトとして構築することも可能です。初回配信時の通信量は増えますが、以後の検索では通信が発生しないため、レスポンスの向上が期待できます。
まとめ
今回は、Webサイトの分類としての「静的」・「動的」という言葉について、筆者なりの解釈を含めて説明しました。また、現在のフロントエンド技術によって、コンテンツ配信型Webサイトで実現できるインタラクティブなコンテンツを紹介しました。
次回以降は、既存のコンテンツ配信型Webページに、インタラクティブな要素を組み込む方法を、実際のソースコードとともに説明します。
- *本コラムに記載の製品、サービス名は各社の商標または登録商標です。