2000/5/11
これまでの講義などでもすでに明白だと思いますが、World Wide Web(WWW)が、情報提供、出版などの手法を変えるほどのすばらしいものだということは言うまでもありません。理由を簡単にまとめると、次のような点が言えるでしょう。
Webページを記述するための規格が、HTML（HperText Markup Language）です。ページ自体をテキストで記述します。また、HTTP（HyperText Transfer Protocol）というものもありますが、これは、サーバとクライアントでのやりとりを定めたものです。ページの体裁という意味では、HTMLとHTTPとは同じことですが、包含関係は、HTMLはHTTPに含まれると考えても良いでしょう。
HTMLあるいはHTTPについては、W3Cという機関があり、そこが規格として定めています。規格自体も変わっていっているのですが、HTTP 3.2という規格が今一番普及しているかと思います。しかしながら、近々4.0が一般的になるでしょう。
従来からのHTMLを駆使して、いろいろなページが作られるようになりました。かなりデザイン的に凝った見栄えのするものもありますが、ノウハウ的には落ち着いてきたといえる段階です。Webページを作るうえでは、HTMLを使いこなすというのは必須です。HTMLのテキストでばしばし書けないといけないというわけではありません。FrontPageのようなソフトを使って作ってもかまわないのですが、HTMLでどのようなことができるのかを知っておかないと、FrontPageにないものねだりをするかもしれません。また、クライアントでどう見えるかという点も考えながらページデザインをするのが一般的になっています。
しかしながら、いろいろ工夫をしても、どうしてもできないことが出てきます。たとえば、HTMLだけでは、見出しに枠をつけたり、文字列の背後を塗りつぶすようなことすらできません。グラフィックスで作ったり、あるいはテーブルを応用するなどの技もあるのですが、問題点は前向きに解決されています。
どんな問題点があるのかをざっと考えても次のようにいっぱいあります。
単純に言えば、HTMLでいろいろなことができるとはいえ、限界があるのです。
そこで、これまで、10年と満たない期間の間に、いろいろな手法が考えれてきました。その方法を大別すると、次のようなやり方に区分できます。
HTMLに機能が少ないのなら、HTMLの機能を拡張しようという、いわば当たり前の手法ではあります。手法自体はあたりまえなのですが、それを実現する方法がいろいろあります。
HTMLの規則を大幅に広げるようなものが、CSS（Cascading Style Sheet）です。あるいは、「スタイルシート」などと呼ばれています。HTMLの中で記述できる内容を大幅に増やしますが、出版物的なレイアウトを実現するというのが1つの大きな目的です。（これについては後で説明をします）
HTMLは記述言語であるものの、プログラミング言語ではないといえます。プログラムとは、コンピュータに対して一連の命令を実行するような体系を指します。プログラミングの要素にはいろいろありますが、「繰り返し」「条件判断」「変数」といったものはHTMLには存在しません。一方、プログラミングとなると、手順に従って、複雑に、さらに状況に応じた汎用的な処理ができます。
そのプログラムの代表的なものが、JavaScriptです。HTMLで記述したファイルの中にプログラムを書き込みます。プログラムでは、一般には、HTMLの要素を自分で生成します。たとえば、「今日の日付」というデータを取りだし、その日付をページに表示するようなことは、JavaScriptでできます。一般に「クライアントサイドのスクリプト」という言い方がされています。「スクリプト」はプログラムと同じ意味で考えておいてかまいません。
この手法の問題点としては、クライアントでの動作が必ずしも一致しないということで、プログラムの難しさが出てきます。いろいろなOSの、いろいろなWebブラウザがあり、さらにいろいろなバージョンのものがあります。初期のブラウザでJavaScriptがサポートされていないのは仕方ないにしても、現状でも、ブラウザ間の違いに悩まされます。たとえば、日付データから年の数値を取ると、Internet Explorerは2000（西暦の絶対値）、Netscape Navigatorは100（1900年からの年数）といった、ほとんど2000年問題といえる違いがあります。
一方、プログラムの含んだHTMLテキストをサーバ側でプログラム処理をして、その結果をクライアントに送るという形式があります。代表的なものとして、ASP（Active Server Pages: MicrosoftのIISで利用）や、PHPなどがあります。いろいろな言い方がありますが、「サーバーサイドスクリプト」というのが適切でしょう。この手法だと、プログラムの実行環境はサーバという一定の条件のもとで動くという点で、プラットフォームの違いはあまり気にする必要がありません。一方、Webサーバにこうしたサーバーサイドのスクリプトを動かすという追加の設定をしないといけません。すべてのサーバで使えるわけではなく、動作状況は選びます。プロバイダなどでは使えないことが一般的です。
一方、HTMLあるいはブラウザから別のソフトウエアを起動してさまざまな処理をさせ、結果をWebブラウザで利用するという手法もあります。基本的に、処理自体はプログラムを作るので、OSでサポートしている機能は何でも使えるため、好きなようにシステムを構築できるというメリットはあります。しかしながら、プログラムの作成やそれを稼動させる環境のメンテナンスなど、より高い技術的なバックグランドが必要になります。
まず、クライアントでプログラムを実行させる代表的なものが、Javaのアプレットです。Javaのプログラムを作成し、HTMLファイルと別のファイルでサーバにおいておきます。そして、HTMLファイル内に、Javaのプログラムを呼び出すといった記述を加えます。すると、Webページの中で、Javaのプログラムが動き出します。Javaについては、一時期は大変に注目されたものの、やはりクライアント環境で実行するという点で、さまざまな問題が噴出し、現在は下火です。
Javaの後に出てきて現在、とてもメジャーになっているのが、Flashというものです。やはり、HTMLファイルとは別に、Flashというアプリケーションで作ったアニメーションなどのファイルをアップロードしておきます。そして、HTMLでは、Flashの作成物を取り込むように指定をすると、Webページの中でFlashで作ったものが実行されます。Flashの特徴は、ベクターグラフィックスとそれを動かすという機能です。ベクターグラフィックスとは、グラフィックスを構成要素ごとに記述する手法です。丸や四角形というオブジェクトごとに、時間軸上での動きや変化を定義できます。結果として、非常に小さなファイルなのにアニメーションができるといったようなメリットがあります。
一方、サーバで動かすプログラムは、CGI（Common Gateway Interface）や、SSI（Server Side Include）というのがベースになる機能です。やはり、サーバ上でこうした機能を動かすという設定などが必要になります。いずれも、講義では別のときに詳しくやります。
スタイルシートについて、詳しく見ていくことにしましょう。スタイルシートの機能をHTMLで利用するためには、3種類の手法があります。
場合によっては混在させますが、3つ目の方法は、1つのスタイル定義をたくさんのHTMLファイルで共用できるとうメリットがあります。
スタイルシートでできることを、例を交えて説明しましょう。
日本一 |
| <div style="background-color: #FFCCCC; margin: 10pt 10pt 10pt 10pt; padding: 100 10 10 100; border:thick solid red">日本一</div> |
やってみましょう。
| H1 {color: green} H2 {color: red; background-color:pink} |
既存のHTMLファイルのヘッダに、スタイルシートの適用の記述を加えるだけで、
ページ上に動きをつけたいとき、いろいろな手法が取ることができます。
JavaScriptと、CSSは別のものといえば別なのですが、連動して使うことで、Webページでアニメーションを行うということを目指した次期もありました。
しかしながら、CSSがなかなかまともにサポートされないことと、Internet ExplorerとNetscape Navigatorで別々にDynamic HTML対応をはかったために仕様の不一致を見てしまい、結果的に利用者からそっぽを向かれてしまいました。こうしたものは、きちんと仕様を策定し、それをブラウザが組み込むというプロセスが必要になり、時間がかかります。そうこうしているうちに、Flashがやっぱり取って代わってしまいました。
ただし、いくつかの機能はスタイルシート＋JavaScriptがメジャーに使われています。以下はその例です。
Webページは、HTMLファイルで作った場合、常に、その記述内容のみが表示されます。その意味でスタティックであるといわれます。一方、状況に応じて変化するという意味でのダイナミックなコンテンツといった言われ方もされています。
たとえば、日刊のニュースサイトがあるとしましょう。毎日、たくさんの記事が追加されます。では、誰かが記事を書いたら、それをもとにHTMLファイルを作成し、そしてFTPでアップロード・・・などとやってると、人手がたくさんかかるだけで効率が悪くなります。また、時間もかかります。こうした場合、どういう解決方法があるかを探りましょう。
1つは、ライターが決められたフォーマットで記事のテキストファイルを作ります。写真がある場合の記事の作り方などを決めておきます。こうしたテキスト作りだと、HTMLファイルほどの手間はかかりません（実際にはデスクのチェック後に処理されるのが一般的）。そのテキストファイルを、サーバの一定のフォルダにコピーします。記事がたまっていくと、あるフォルダにどんどんとファイルが増えるとうい具合です。一方、Webサーバにアクセスしたとき、一定の範囲内にあるテキストファイルからHTMLを合成してサイトを作ります。そうした合成は、一般には、CGIを使いますが。
場合によっては、データベースを使います。データベースに書き込むWebページなどを用意しておき、Web上ですべての作業を行えるようにも可能です。記事は全部データベースに蓄積されます。そして、Webサーバにアクセスしてきた場合には、データベースから一定の記事を取り出して、HTMLで構成し、その結果をクライアントに見せます。
たとえば、売上や経理の情報なども、同じように、データベースに蓄積することで、Webからの参照などができるようになります。こうした利用を「ダイナミックなコンテンツ」などと呼んでいます。
セキュリティを考える基礎となるのは、セキュリティに対する脅威である「盗聴」「改ざん」「なりすまし」についてそれぞれ検討すればいいでしょう。
オープンなWebページは、わざわざ盗聴するまでもなく見えます。一方、一部の人にだけ見てもらいたいページの場合は、盗聴は問題になります。Webの場合、ネットワークにデータがそのまま流れるため、たとえば、クレジットカード番号を盗み見ることも不可能ではありません。そうしたことに対応するには、SSL（Scure Socket Layer）という手法が一般的に使われています。これは、通信路を流れるデータを暗号化し、簡単には解読できなくするという手法です。
Webページは基本的には見るものなので、改ざんや破壊の脅威はあまり気にしなくていいかもしれません。ただし、書き込みができる場合や、サーバにWeb以外の機能が入っている場合には、システム全体で考える必要があり、かなり難しい問題があります。改ざんと修正の違いというのは非常にあいまいなため、つい見落としがちなところでもあります。
なりすましというのは、逆にいえば「誰であるか」を特定する必要があり、その手法とかかわりが出てきます。
特定の人にしか見えないようなページを作るという場合、パスワードをかけるとよく言いますが、「パスワードだけ」と「アカウントとパスワード」との違いは一度よく考えて理解をしてください。なぜ、「アカウントとパスワード」の両方があるかといえば、ログイン後、それが誰であるか特定する必要がある場合です。ところで、特定する必要は必ずあるわけではないのです。たとえば、サークルの人だけが参照できるWebページを作った場合を考えます。そこには、たとえば会合やコンパの案内しかないようなページだと、誰がアクセスしたかを管理する必要もありませんし、また、管理する機能も組み込まれていないでしょう。その場合に、アカウントは必要はなく、パスワードだけを入力し、1つのパスワードを共通に使えばいいのです。
Webページでのアカウントとパスワード処理については、Basic認証というやり方がもっともポピュラーです。設定は難しくはないのですが、アカウントとパスワードの登録管理が面倒なこともあり、CGIで自動化を含めて考えるのが一般的です。サーバによってはBasic認証を作成できないこともあります。また、一般のWebページにパスワードをかけたいとき、サーバ側を一切いじらないでパスワードをかけるという手法も実はあります。JavaScriptを効果的に使ってそうしたこともできます。
課題提出のページは、h1やh2タグで、見出しを作っていると思われる。今日の実習のやり方を応用して、h1とh2のタグに対してスタイルシートを使って設定を行ってみること。文字の色を変えるだけでもいいが、枠で囲んだり、いろいろ試してみよう。スタイルシートの設定は、とほほさんのページを参考にすればよいが、他の解説サイトなどがあれば、それも参考にしてみれば良い。
どういう設定を意図しているかを解説を簡単に書くこと。また、やろうとしてもできなかったことや、分からなかったことを書いてくれてもいい。メーリングリストで質問もOK（だが、米国出張中なので・・・）。また、Internet ExplorerとNetscapeの両方で確認をしてみよう。
結果は特に知らせなくてもかまいません。