動的なウェブページを作る技術

16.5. 動的なウェブページを作る技術

今まで説明した HTML と CSS では静的な文書を作ることしかできません。せいぜい CSS の :hover 擬似クラスを使ってマウスカーソルが乗った時にスタイルを変更することが限界でしょう。ここでは、動的なウェブページを作成するのに現在用いられている技術のうち代表的なものについて、簡単に紹介します。

ウェブページはウェブブラウザがウェブサーバーから取得するものですから、動的な技術としてはウェブブラウザ側で実現するものとウェブサーバー側で実現するものの二つに大別されます。前者をクライアントサイドの技術、後者をサーバーサイドの技術と呼びます。

クライアントサイドの技術 #

クライアントサイドの技術は、基本的にウェブブラウザを動かすコンピュータの中で何らかのプログラムを走らせることで実現されます。この手の技術で最も良く用いられているものに JavaScript があります。JavaScript はウェブブラウザ内で動くプログラミング言語で、HTML ソース中に直接プログラムを記述することができます。たとえば body 要素の中に

<script type="text/javascript">
   document.write("Hello!World.");
</script>

と書くと、画面には Hello!World. と表示されます。JavaScript には通常のプログラミング言語が備える機能の他に、HTML 文書をコントロールする手段が用意されています。また HTML にはマウスクリックなどのイベントを捕らえる方法が用意されており、これと組み合わせることでウェブブラウザを見ている人の動作に対するレスポンスとして何かの動きをすることができるようになります。例えば次のように、クリックすると小さい窓を表示させることができます。

ソース

クリックしてみてください出力

クリックしてみてください

こうした機能を組み合わせると、複雑な動作も実現することができます。

また JavaScript 以外に、ブラウザ内で Java のプログラムを動かす JavaApplet というものもあります。これはJavaScriptとは違い、ブラウザとは別に動く Java のプログラムを HTML 文書中に埋め込んだものです。

サーバーサイドの技術 #

クライアントサイドの技術ではページ内で動きが起こるのに対し、サーバーサイドの技術はクライアントサイドと違い、もっぱらウェブページを動的に作成するものです。例えばインターネット上の掲示板に書き込みをすると、プログラムの側では

  1. 掲示板への書き込みの要求をウェブブラウザがウェブサーバーに送る
  2. ウェブサーバーは要求に応じて、掲示板に記事を書き込む
  3. 新しい記事を出力した後の掲示板のデータを、ウェブブラウザに送り返す

という手順が踏まれます。このようにサーバーサイドの技術はウェブブラウザからのリクエストを受けたとき、すなわち皆さんがリンクの文字列をクリックした時に実行されます。その結果として帰ってくるものはただのHTMLのソースなどですから、ウェブブラウザを使う人には動的な技術が使われていると分かりにくいこともあります。

サーバーサイドの技術は、もっぱら CGI(Common Gateway Interface) という技術によって実現されています。CGI は、ウェブサーバー上のプログラムがウェブブラウザからデータを受け取る/ウェブブラウザにデータを送る方法を定めた規格です。CGI によってウェブブラウザと通信を行うプログラム自体は、色々なプログラミング言語で書くことができます。良く使われる言語には例えばPerl, PHP, Python, Rubyなどがありますが、C言語やJavaによって書かれることもあります。

両方を併用した技術 #

上に挙げた二種類の技術はもちろん併用することもできます。それもクライアントサイド・サーバーサイドの技術を独立して動かすだけでなく、両者を連携させて様々なプログラムを作ることもできます。この手のもので最近脚光を浴びているのが Ajax と呼ばれる技術です。Ajax では JavaScript を使って動的に CGI に対するリクエストを出し、データの受信及びHTML文書の書き換えにも JavaScript を使うことで、リンクを押すことなくサーバーとの通信を行うことができます。この技術は Google マップに使われたことで有名になりました。

このような技術を用いると、ウェブページの可能性はまた一段と広がります。Google マップの例からも分かるように、今まではコンピュータにインストールしていたソフトウェアをウェブブラウザの上で実現させることも、最早不可能ではありません。また Ajax を使わずとも、JavaScript だけでも頑張れば様々な機能を実現することができます。動的な技術に興味を持った人は、ぜひ市販の書籍などで勉強してください。

しかし動的な技術も良いことばかりではありません。動的な技術を用いて表現の範囲が広がることは、裏を返せばそれだけ危険が増すということでもあります。変にプログラムを書くとウェブブラウザを動かしているコンピュータや、CGI プログラムを走らせているサーバーにダメージを負わせる可能性も十分にあります。特に CGI のプログラムを書く場合は、リクエストを送ってくるのは世界中の人ですから、何が起こるか分かりません。高度な技術には危険が伴うということを、必ず心に刻んでおいてください。

補足 動的なウェブページを作る技術 参考文献