プロジェクトサービス提供型のホームページを作る第 1 章プロジェクトの概要 [1] プロジェクトの概要最近のアプリケーション提供の傾向としてホームページを介したサーバーによるサービス提供が目立つようになったこのプロジェクトではこのスタイルのサーバーを作るここで目指すのはそのようなサーバー

(1)

ＣＧＩプロジェクト１ 101

プロジェクトサービス提供型のホームページを作る

第１章プロジェクトの概要

[1] プロジェクトの概要最近のアプリケーション提供の傾向として、ホームページを介したサーバーによるサービス提供が目立つようになった。このプロジェクトでは、このスタイルのサーバーを作る。ここで目指すのは、そのようなサーバーの仕組・構造を理解し使いこなすことであり、実はサービス本体の内容はあまり気にしていない。といっても、つまらないサービスでは作る気がしないので、自分たちで面白いサービスを考えてくれればよい。プロジェクト期間の前半は仕組・構造の理解とそのための予備実験に充て、後半で自分たちの創意工夫に基づくサービス提供を考えよう。但しサービスにはこのプロジェクトの目的から導かれるいくつかの条件を、満たすことを要求する。その範囲内で、自由に工夫して欲しい。 [2] 仕組の概要仕組を理解するのに、２つの見方を示しておく。 ≪見方１：動的なホームページ≫ 旧来のホームページは、予め作られた内容（コンテンツ）がサーバー上のデータ（ファイル）として置かれており、ユーザ端末上のブラウザ（Internet Explorer, Netscape, Firefox などの閲覧アプリケーション）はそのコンテンツをサーバーから取り出して表示する。この時、コンテンツはいつでも同じ内容であり、変化しないので、静的と呼べるだろう。それに対して、サーバーがコンテンツとして何らかの計算処理の結果を送り出すような場合がある。たとえば、オンラインショッピングのサイトでは、ユーザが商品を選択し個数を入力すると、合計金額が表示され、更にクレジットカードなどでの決済の処理が行われる。これは、ユーザが端末から与える情報（商品の選択・個数など）を、サーバーが受け取って計算処理をし、結果をサーバー側に保存すると同時にユーザ端末にも表示している。このようにサーバー側で処理を行いその処理結果（状況によって結果が異なる）を表示するような場合を、動的と呼べるだろう。このプロジェクトで扱うのは、動的なホームページの構築方法である。 ≪見方２：ネット越しのアプリケーションサービス提供≫ たいていの動的なホームページでは、端末に座るユーザが何かの入力データを与え、サーバー側にあるアプリケーションプログラム（上記で言えばオンラインショッピングのアプリケーション）が処理し、出力結果をユーザの端末にホームページの形で表示する。言い換えると、従来のアプリケーションは手元のＰＣにプログラムをインストールし、それを起動して必要な入力を与えるとプログラムが処理し、出力結果を画面に表示するのに対して、ここで構築するアプリケーションはサーバー側に置かれており、ユーザとの入力・出力はホーアプリケーションプログラム静的動的単独ＰＣアプリアプリケーションプログラムアプリケーションプログラムアプリケーションプログラム端末 Web サーバページデータ

(2)

ＣＧＩプロジェクト１

ムページ画面（Web 画面）を通じて行う。つまり、従来の、手元 PC にアプリケーションをインストールする代わりに、サーバー上にアプリケーションを置いて、その入出力だけを手元ＰＣのホームページ画面（ブラウザ上の画面）に引いてきたもの、と考えることが出来る。

上記の２つの見方は同じものを指しており、見る立場が異なるだけである。 [3] Web とアプリケーションの繋がりと、CGI (Common Gateway Interface) アプリケーション提供を考えるとき、サーバー上に置いたアプリケーションの入出力を、Web 経由で行うことが、この方式の特徴である。ネットを越えて入出力を手元のＰＣ端末に見せる方法としては、別にホームページ(Web)技術に頼らなくても、たとえば独自の方法でやり取りしても構わない。のではあるが、このやり取りをホームページ技術にすることによって、たいていのＰＣ（たいていのＰＣにはブラウザが搭載されているから）を入出力端末として使うことが出来るようになる。独自のやり取りだと、それに対応する端末側のソフトを手元 PC にインストールしなければならず、何かと不便になる。手元ＰＣのブラウザの機能は、もちろん万能ではなく制約も多いという欠点もあるが、とにかくどのＰＣでもたいてい使えるという利点がある。手元ＰＣのブラウザと、(Web)サーバーとの間のやり取りの仕方は、インターネット上で標準化されている。データのやり取りの手順は HTTP (HyperText Transfer Protocol) 、データ自体の形式は HTML (HyperText Markup Language) と呼ばれる仕様が標準として定められており、ブラウザはこれにしたがって作られており、この仕様の範囲内での動作はどのブラウザでも利用できる。この約束についてはあとから詳細を学ぶことにする。このやり取りの仕方の約束は、右図にあるようにサーバーと端末の間（図ではネットの線に直交する面を通過するとき）のやり取りの約束であることに注目して欲しい。だから、この約束さえ守れば、端末側のプログラム（Web ブラウザ）がどんな形をしていようと、またサーバー側のプログラム（Web サーバ）がどんな形をしていようと、構わない。たとえば、端末側のプログラムが通常のブラウザと違って、全く表示をしないがその代わりにその内容を溜め込むプログラムでもよいし、サーバーから送られてきたデータを更に別のサイトに送りつけるプログラムでもよい。この約束の決め方こそが、動的ホームページを可能にしている。つまり、Web サーバーの側でどのような形でデータを提供しようと、ネットワークの境界面（図の直交する面）で約束を守っていれば、端末側は普通のブラウザで表示できる。静的な（予め用意したホームページ画面を表示するような）ページでは、保存されたページデータを（ディスクから）読み出してネットワークへそのままの形で送出するが、動的なページでは保存されたページデータの代わりにサーバー側のアプリケーションプログラムが計算処理を行い、その結果を Web サーバを介してネットワークへ送出する。なお、、アプリケーションプログラム（計算処理を担当）と Web サーバ固有アプリ固有のルールＷｅｂブラウザＷｅｂのルール固有サーバＷｅｂサーバＷｅｂブラウザＷｅｂサーバ HTTP：やり取りの仕方「データＸＸを下さい」「了解、以下データです」 HTML：データ中身の書き方タイトルは＊＊＊＊＊本文段落開始ここへ絵を入れるなどページデータＷｅｂブラウザＷｅｂサーバ HTTP：やり取りの仕方「データＸＸを下さい」「了解、以下データです」 HTML：データ中身の書き方タイトルは＊＊＊＊＊本文段落開始ここへ絵を入れるなどアプリケーションプログラム CGI

(3)

（やりとりを担当）の間の受け渡し（境界、インターフェース）を CGI (Common Gateway Interface) と呼ぶことがある。 [4] プロジェクトで使う枠組み

まず初めに、このプロジェクトで使う枠組み（Apache＋PHP＋MySQL）を説明する。動的な Web サイトを作る方法は他にもいくつかあるが、それらはあとから紹介するので、ここではこの枠組みが唯一ではないこと、条件によっては他の方法の方がよいこと、を心に留めておいて欲しい。

≪Apache Web サーバー≫

Apache は Web サーバプログラムであり、最初は（おそらく）静的ページを表示するものだった（注：細かい歴史は apache のホームページ http://www.apache.org/httpd や Wikipedia などで調べてみるとよい）。現在は静的ページと動的ページの両方をサポートしている。動的ページの実現には CGI （Common Gateway Interface）を提供している。

プロジェクトでは、apache の Web サーバーが既に動作しているサーバーマシン上で、ページを作る作業に終始する。言い換えると、apache Web サーバー自体のインストールや設定は自分では行わない。もちろん、興味のある学生は自分の PC へインストールしてみるのもよいだろうし、その環境が自分で用意できないが是非やってみたいという学生には、インストールできる PC を一時的に提供することも考えるので、相談して欲しい。プロジェクトでは、静的なページと動的なページを両方作って見たい。静的なページの内容は、HTML（HyperText Markup Language）という規約（仕様）に従って記述する。これは CGI に入る以前の知識として、一通り試してみたい。 ≪PHP プログラミング言語≫ 動的なページ（実はプログラム）は、PHP （正式名称は PHP: Hypertext PreProcessor）という言語を用いて記述することにする。動的ページの実現方法は多数あり、それぞれに使われているが、比較的簡単で学習が容易、かつ、世の中では結構使われている（いた）、という理由から PHP 言語を選んでいる。PHP の大きな特徴として、静的なホームページデータを格納したのと同じ場所に PHP のプログラムを用意し、実行できることが挙げられる。簡単に使えるので便利なのだが、それによる欠点（たとえば、設定が甘いとプログラムを読まれてしまう）もあり、賛否は分かれる。PHP 言語の詳細はホームページ http://www.php.net を参照のこと。プロジェクトでは PHP を使ってどんどんプログラムを書いて欲しいが、プログラムの書き方については、後からまとめて学習する。 PHP はインタープリタ（逐次解釈）型のプログラミング言語である。PHP 単体でプログラムを作ることも可能であるが、プロジェクトでは Apache Web サーバーの後方に居て、ホームページからデータを受け取って起動され、処理結果をホームページに返す形の使い方をする。PHP で書いたプログラムと Apache Web サーバーとの間のやりとりのインターフェースは、 CGI に相当するもの（mod_php）を使うが、PHP プログラムから見ると、端末から入力されたデータはいくつかの特別な変数によって伝えられる。また端末で「送信」(submit)ボタンをクリックすると、指定した PHP プログラムが起動される。出力側は、普通に文字列を print すると端末のブラウザにそのまま送られて、HTML として解釈される。これらは、後から実例を持って試してみる。

PHP の処理環境、つまり PHP の実行エンジンや Apache Web サーバーとの間のインターフェースモジュール（mod_php）は、プロジェクトではすでに提供されている。これらのインストールや設定は自分では行わない。興味のある学生は、 Apache Web サーバー同様に、自分の環境へインストールしてみるとよい経験になるだろう。

≪MySQL SQL データベース管理システム≫

最後に紹介するのが SQL 型データベース管理システム MySQL である。Apache Web サーバーと PHP で動的 Web ページは作成できるし、そのようなシステムも多数使われているが、ここでは比較的定番である、データベースと組合せた利用についても見ておきたい。そもそも、データベースは授業で理論は学ぶのだが、黒板だけではおよそ実感が湧かない。データベースを体感する（Apache や PHP を抜きにしても）意味でも、プロジェクトの要素にデータベースを入れておく。

(4)

ＣＧＩプロジェクト１データベースは、同じ形のデータをたくさん保持し、検索したり並べ替えたりできる、データ管理のソフトウェアである。たとえば学生に関する情報（氏名・学籍番号・生年月日・現住所…）を１人の学生の記録（レコード）とし、東邦大学全体の学生の記録を集めたデータベースを考えると、右図のようになる。オペレーティングシステムとユーザアプリケーションの中間に位置するこのようなソフトウェアシステムを、ミドルウェアと呼ぶこともある。つまり、いろいろなアプリケーションがデータベース管理システムを使いに来るというモデルである。実はデータベースの種類には（データのモデルの違いによって）いくつかのものがあり、ここでは現在広く用いられている「関係」モデルに基づいた関係データベースに限定して考える。データモデルなどの細かいことはデータベース論の授業で学んで欲しい。このとき、アプリケーションと関係データベースの間のインターフェース（共通の操作言語）として、ＳＱＬが広く使われている。MySQL はこのような関係データベースの管理ソフトウェアの１つである。関係データベース（とＳＱＬ）を提供する管理ソフトウェアは MySQL 以外にもいくつも製品化されており、たとえば PostgreSQL、SQLite、Oracle、IBM DB2 などの名前を聞くことがあるだろう。MySQL の詳細はホームページ http://www.mysql.com を参照のこと。なおホームページは有料版（MySQL Enterprise）と無料版（MySQL Community Server）があり、わかりにくいが、学生が実験するには無料版で十分であろう。

ＳＱＬを使った関係データベースの簡単な操作を、このプロジェクトの中で試して欲しい。

では、そのような関係データベースが利用できるとして、なぜ Apache Web サーバー＋PHP CGI という「Web アプリケーション」と呼ばれるような枠組みの中に出てくるのだろうか？おそらくは、Web アプリケーションのかなりの部分が、サーバーにデータを保存し、検索し、表示するような目的を持っているからではないだろうか。たとえば、皆さんがいつも使う成績のシステムを考えてみると、成績のデータをサーバーに保存しておき、学生は学期の初めに授業登録するときに変更し、教員は学期の終りに成績を出して追記する。成績データをデータベースに保存し、必要に応じて検索したり情報を抽出したり並べ替えたりして、表示したい。別の例として掲示板がある。掲示板に今までに書き込まれたデータをデータベースに保存し、ユーザが書き込むときにはデータベースに追記し、見るときには検索したり抽出したり並べ替えたりして表示する。これもデータベースがあれば簡単にできる。ショッピングも然り、アンケードも然りであろう。検索・抽出・並べ替えなどを自分でプログラムするのは面倒だし、安定して安全にデータを保存できる仕組を作るのも経験が要る。それを、データベースシステムは提供してくれているので、便利に使おうということになる。 Web アプリケーションからデータベースを利用するためには、(1)データ操作のためのＳＱＬ言語、(2) PHP プログラムからデータベースへＳＱＬ言語のコマンドを出す方法と、データベースからの結果を取り出す方法（つまり PHP と MySQL との間のインターフェースの使い方）、の２点を知っている必要がある。幸いなことにいずれもそれほどややこしくない。後から具体的に紹介する。

[5] 余談１ Apache Web サーバー＋PHP 以外の、動的 Web サーバーを作る枠組み ≪CGI を使う方法≫ 佐藤の記録田中の記録山田の記録データベースアプリケーション検索取出しソート追加 … （関係）データベースＯＳアプリアプリアプリ SQL インターフェース

(5)

CGI のインターフェースを使うのだが、Web サーバー（ネットワークとのやり取りをする側）に使うソフト、アプリケーション（CGI インターフェースの裏側で動くプログラム）を作るのに使うプログラミング言語、の２つの要素が変更可能である。 Web サーバー側は、CGI を使うという前提では、おそらく Apache Web サーバーと、Microsoft 社の Windows Server に付随する IIS (Internet Information Server)がほとんどであろう。それ以外のソフトもあるが、あまり多くは使われていないようだ。この２者は、サーバーのＯＳが Windows であれば両方とも利用可能（Apache Web サーバーも Windows 用バイナリが提供されている）であるが、その他のＯＳ、具体的には Linux, Unix, MacOS X（ＯＳコア部分は UNIX 系）では IIS は提供されないので Apache のみとなるだろう。 Web アプリケーションのプログラム言語は、ここで挙げた PHP の他、Perl、Java、Ruby などが多く使われているだろう。本質は、CGI の約束さえ守れば何の言語で記述してもよい。たとえば C 言語でも作ることが出来る。使い勝手やデバッグの容易さから、インタープリタを介するスクリプト言語が多く使われているようだ。Ｃのようなコンパイル言語の場合は、コンパイル済みの実行ファイルを CGI の裏側に準備し、端末の「送信」によって実行ファイルを立ち上げるような形になる。 ≪専用の Web サーバー（コンテナ）を使う方法≫ 裏側でアプリケーションを走らせることを最初から念頭に置いた構造のサーバーが作られ使われている。たとえば、Java のアプリケーションを想定したサーバーとして Apache プロジェクト内で作られている TomCat が挙げられるが、これは Web アプリケーションを記述した Java プログラム（クラスになる）を、サーバー内に取り込んで実行する形になる。コンテナなどと呼ばれることがある。コンテナにするメリットの１つに、実効効率がある。CGI 方式の場合は裏のプログラムをプロセスとして「立ち上げる」のが標準的なスタイルで、立ち上げの時間がかかったり、メモリが余分に必要になったりする。立ち上げ時間を短縮するために予めプロセスをプールしておいて与える方式も使われているが、プールの数が固定されるなど完全に解決しているわけではない。コンテナ方式の場合はサーバーとして動いているプロセスがそのまま変身するので、プロセス立ち上げなどのＯＳ操作に伴う手間は必要なくなる。今回のプロジェクトではこちらは使わない。

(6)

ＣＧＩプロジェクト２

第２章ホームページとＨＴＭＬ（タグ）

ここでは HTML タグについて、今まで使う機会が無かった学生を対象に説明する。既に HTML タグを使ったことのある学生にとっては、知っている話になると思うので、ざっと目を通すだけでよいだろう。初めての学生は、演習等を通じて使い慣れて欲しい。 [1] ＨＴＭＬ通常の（静的な）ホームページは、ホームページサーバー（Web サーバー）から手元の端末に、ページ画面の情報が転送され、それを手元の端末上で動いているブラウザ（Microsoft Internet Explorer とか Netscape Navigator とか Mozilla Firefox とか Opera ブラウザとか）が解釈して画面に表示している。

サーバーから端末に送られてくるページ画面の情報は、たとえば下記の例のようなデータになっている。このような情報の書き方（の規則、言語）を、HTML（HyperText Markup Language）と呼んでいる。

<title>私のページ</title>

<body> </body> この部分が本文（body）ですタグに指定されたように表示

<p> </p> この部分がパラグラフですパラグラフとして表示。上下に１行ずつ空白行。あとは文字列を流し込みこの他にもいろいろな種類のタグが定義され、使われている。たとえば、箇条書き（リスト形式）を作る一連のタグ（ul、ol、 dl などと、その中に項目を書く li タグ）や、表（テーブル）を作る一連のタグ、文字の大きさや色を指定する一連のタグ（文字の大きさ、色、フォントなど）、文字の修飾をする一連のタグ（太字、強調、上付き、下付き、下線など）などは、すぐにでも使うかもしれない。また、上の表にある meta タグは、タグの中で文書のメタ情報を指定する様々なパラメタを書くことができる。ここはタグの参考書ではないので、細かい点は割愛する。参考書が多数出版されているし、ホームページを探してみるといろいろに解説されている。

(7)

ＣＧＩプロジェクト２なお、細かく言うと、HTML にもバージョンがあり 1998 年 4 月の HTML4.01 が使われているが、(1)ブラウザの種類によって機能のサポートに差がある、(2)ホームページデータも厳密に最新の規約に従っていないものが多く散見される、など、細かい点ではかなりあいまいになっているようにも見える。プロジェクトで使う HTML は全体から見るとごく一部で、あまり厳密さも要求されていない部分である。［例題演習２－１］簡単なホームページデータを作って、アップしてみよう。まずは、いろいろなタグを試してみて慣れることにしよう。やることは、 (1) 簡単なホームページデータをファイル（テキスト）として作り、 (2) ホームページとしてアップしてみる、の２段階である。 ≪アップのやり方≫ テキストをタイプインする前に、(2)の点について先に説明しておこう。今作ろうとしているのは、静的な Web ページである。右図にあるような、HTML で書

かれたファイルを、Web サーバーのディスク上に置くと、端末からの閲覧要求に応じて Web サーバーソフト（Apache Web サーバー）がこの内容を端末側に転送する。端末側ではこの内容を受け取ってブラウザが HTML タグを解釈して表示する、というシナリオだったはずだ。だから、この HTML データはサーバーのディスクに置けばよい。普通はこの HTML データをファイルとして作る作業は、ユーザの手元の端末であり、Web サーバーマシン上で編集することはない。もちろん、サーバーマシン上で編集しても構わない。自分用の Web サーバーマシンを手元に立ち上げて、その端末からファイルを編集すれば、直接編集することも可能である。でも大抵はプロバイダや大学が用意したサーバーを使うので、編集は手元の端末ＰＣで行うことになる。手元ＰＣで作成したホームページコンテンツをサーバーのディスクに移すことを、「アップする」と呼ぶ。プロジェクトで使う情報科学科実習室のシステム環境は、上で述べた通常のものと少し異なる。実習室で使う手元のＰＣは、実験室サーバー（これが Web サーバーを兼ねている）のディスクを共有している（正確には、サーバーのディスクを手元のＰＣが≪遠隔参照≫～リモートマウント～している）。具体的にはＰＣ上の Z:ディスク（Z ドライブ）として見えているものが、実体はサーバー上のディスク（正確にはそれぞれのユーザのホームディレクトリ）になっている。であるから、手元の PC 上で Z:ディスクにファイルを置けば、そのファイルはサーバー上のファイルになっている。更に、各ユーザが自由にホームページを持てるように、Web サーバーはサーバーマシンの各ユーザのホームディレクトリの中の特別な名前「 public_html 」のフォルダ（ディレクトリ）を、ホームページとして公開するという設定になっている。したがって、Z:ディスク上の直下にフォルダ（ディレクトリ） public_html を作成し、そのフォルダ内にホームページとして公開したい HTML ファイルを置けば、Web サーバーを介してそのファイルが公開される。 <html> <head> <title>私のページ</title> </head> <body> <p>これは私のページです。</p> </body> </html> ＷｅｂブラウザＷｅｂサーバページデータ HTML ファイルの編集編集アップ（転送）Ｗｅｂサーバユーザ foo のホームディレクトリユーザ foo の中の public_html ユーザ foo の Z-disk サーバー上の foo のホームディレクトリを端末ＰＣ上では Z-disk として見せている Z-disk 上の public_html

(8)

ＣＧＩプロジェクト２なお、このホームページは URL http://venus.is.sci.toho-u.ac.jp/~********/ファイル名として見えている。但し、半角 ~ は波線（正式名称ティルダ tilda）であり、その後の*******の所にメールのユーザ名（本当はこのシステムのユーザＩＤ）8 桁（55??????）を入れたものである。波線 ~ の入力は、キーボードではシフトキーを押しながら上線（キーボード最上段のひらがな「へ」の上）でできるはずである。（場合によってはシフトを押しながら ~ キーのこともある）まとめると、手元の端末ＰＣの Windows 上の Z:ディスクに、public_html という名前のフォルダを作り、その下にホームページとして公開したいファイルを置く。そうすると、上記の URL として公開される。 ≪HTML ファイル作成≫ では、上に掲げた HTML テキストを、Windows のテキストファイルとして入力・作成せよ。Windows であれば、たとえば「秀丸」や、メモ帳（notepad）などのテキストエディタで作ればよい。ファイル名は、Z:ディスク上の public_html の下で、 index.html という名前を付けておこう。（ Z:\public_html\index.html ）この時使う URL は

http://venus.is.sci.toho-u.ac.jp/~*********/index.html

となる。但し、********のところにユーザ ID（メールのユーザ名） 55??????を入れること。

もし既に public_html フォルダを作っていて、そこに index.html などのファイルがある学生は、このプロジェクト用のフォルダ myproject を、public_html の中に作成してもよい（ Z:\public_html\myproject\index.html ）。この時は URL は

http://venus.is.sci.toho-u.ac.jp/~*********/myproject/index.html となる。上と同様に、********のところはユーザ ID 55??????である。ところで、この index.html というファイル名はちょっと特別なものである。普通は URL でページを指定するときは http://venus.is.sci.toho-u.ac.jp/~5599999z/index.html のように、ファイル名 index.html まで記述しなければならない。だが、よくファイル名を書かず、ディレクトリ名（フォルダ名）までで終りになっている URL を見かける。たとえば http://www.toho-u.ac.jp/

のように、ファイル名を書かないとき、Apache Web サーバーの指定で、自動的に index.html というファイル名が使われるようにできる。実験室のサーバーもこの設定がしてあるので、実は

http://venus.is.sci.toho-u.a.cjp/~5599999z/ まで書くだけで、その下の index.html ファイルが表示される。

注） venus サーバー（Windows での名称は isvenus）は UNIX （正確には Linux）を使っている。OS によってどの漢字コード体系を使うかが違うので、注意を要する。Windows 系は Shift-JIS が標準的に使われているし、 UNIX 系は原則的に EUC か UTF-8 を使っていることが多い（最近は UTF-8 が増えてきた）。上で説明したようにディスク空間を共有していると、たとえば Windows で書いた漢字を含むファイルは、Unix では漢字コードが異なるために文字化けして読めない。特に、ファイルの名前については、漢字（かなを含む２バイトコード）を使わないこと。さ

(9)

ＣＧＩプロジェクト２もないと、相手側の環境では一切ファイル名が指定できず、操作できないということになる。注） Windows では、ファイル一覧を表示するときに、ファイル名の拡張子（ファイル名の最後につく、ピリオドから後の文字列、たとえばワープロファイルなら「 .doc 」、エクセルファイルなら「 .xls 」、テキストファイルなら「 .txt 」、写真を撮った JPEG ファイルなら「 .jpg 」など）のうち一部のものについては≪表示しない≫というモードに、初期値が設定されている。たとえば .txt 拡張子を表示しないと、ユーザが index.html というファイルを作ったつもりでも、 index.html.txt となっていたりすることがある。（これは、テキストエディタが自動的に .txt を追加することがあるためである。）これは混乱の元になるので、原則は≪表示する≫モードにしておくのがよい。具体的には、ファイルの一覧表示（Exlplorer というプログラムだが）で、上のほうにある「ツール（Ｔ）」から「フォルダオプション（Ｏ）」を選び、「表示」タブを開いて、次の２つの設定を変更する。 (1) 「ファイルとフォルダの表示」で、「すべてのファイルとフォルダを表示する」を選ぶ。 (2) 「登録されている拡張子は表示しない」のチェックマークを外す。ここでＯＫを押せば、このフォルダだけでこの設定がされるが、後のためには、まず「適用（Ａ）」をクリックした後、上から 1/3 ぐらいにある「すべてのフォルダに適用（Ｌ）」をクリックする。注） public_html フォルダの内容は、外部（学外つまり全世界）からホームページとして見えているので、ファイルの内容に注意すること。たとえば、住所・電話など公開したくない個人情報が含まれないように気をつけること。公開された内容について責任を問われるので、いい加減な情報や虚偽の情報、誹謗中傷などを掲載しないこと。大学としてのサイトであるから、大学を傷つけるような内容を含まないこと。また、このフォルダ内に作りかけのファイル等を不用意に置かないこと。そのままの形で公開されてしまっている。ここまでで、自分の作った HTML ファイルのページが、手元の PC のブラウザで見えただろうか？ページの中には「これは私のページです。」という文字が入り、枠の部分に「私のページ」というタイトル（<title>タグで指定した内容）が入っているはずである。見えない場合、作成したファイル名がおかしいことがある。前に述べたように、拡張子を表示しないモードになっていると気づかないのだが、自分で index.html というファイルを作ったつもりで実は index.html.txt というファイルを作ってしまっていることが起こることがある。拡張子を表示するモードにしてから、ファイル名を確認して欲しい。または、ファイルのリストを表示している中で、そのファイルを右クリックし、最下段の「プロパティ」をクリックすると、そのファイルの属性情報が表示されるが、その中にファイル名が表示されているはずであるので、それで確認することも出来る。注意 Windows のファイルのリストの中で、index.html ファイルをダブルクリックすると、その内容がホームページのように表示される。これは、我々が今意図している見え方（Web サーバーから端末へ送られて見える）ではないので、注意して欲しい。これは、手元にある index.html ファイルの内容を手元 PC にあるブラウザで直接見ているだけで、Web サーバーによる転送を経ていない。＜同じに見えるのだからいいじゃないか＞と思うが、あとで PHP による動的ページを表示したときに、大きく差が出てくる。この節で扱っている静的なページは、どちらで見ても同じになるだろうが、これから学ぶ PHP を使った動的なページでは、Web サーバーが PHP のプログラムを実行しないと結果が出ない。実行させるには、 Web サーバーを経由して表示する必要がある。後のことを考えて、ちゃんとブラウザの URL 欄に venus の名前を入れてアクセスすること。 ≪少し複雑なタグ≫ <body> ．．． </body>の中身を、自由に変えてみよう。 (1) ヘッダー「ヘッダー」は、章・節・パラグラフのタイトルであり、レベルが１から６まである。最も大きい単位はレベル１で、 <h1>この章のタイトル</h1>

(10)

ＣＧＩプロジェクト２のように書く。<h1>が開始タグ、</h1>が終了タグである。 <h1>章タイトル</h1> <h2>節タイトル</h2> <h3>パラグラフタイトル</h3> <p>パラグラフの本文を書く。 <h3>パラグラフタイトル２</h3> <p>パラグラフの本文を書く <h2>節タイトル</h2> <h3>パラグラフタイトル</h3> のように使える。なお、パラグラフ本文は<p>で始める。 (2) 箇条書き箇条書きは、数をつける Ordered List （左側）と、数をつけない Unordered List (右側)がある。Ordered List は<ol></ol>で囲み、 Unordered List は <ul> </ul>で囲む。内容項目はそれぞれ<li>で始める。

このほか、<dl>も使われる。 (3) 絵（イメージ）

絵（イメージ）をホームページに載せるには、

のように、<img>タグを使う。src=の後にイメージファイル（画像ファイル）の URL を指定する。自分の ID のところには ~5599999z のようなＩＤが入る。

HTML 文書と同じサーバー内にイメージファイルを置く場合は、URL の代わりにファイル名だけを書くことも出来る。特に HTML 文書と同じディレクトリにおく場合には、ファイル名で書くと簡単になる（相対パス指定）。

この例では、イメージファイルのファイル名は henohenomoheji.PNG である。その他に絵の表示寸法： width（幅）が 212 ピクセル（画素）、height（高さ）が 200 ピクセルであること、border（周りの線）の太さが 0 つまり枠を描かないこと、最後に align（位置合わせ）が right（右そろえ＝画面の右側のふちに合わせる）であることを指定している。指定しているそれぞれの「値」の部分（212 とか 200 とか 0 とか right）を二重引用符「”」で囲んでいることに注意。なお、イメージファイル本体は予め適当な形式（GIF、JPEG、PNP、TIFF など）で作成して、サーバーに載せておかなければならない。 Img タグを簡単に試してみる目的で、手書きの絵をイメージファイルとして作成して、ホームページに表示してみるのも面白いかもしれない。具体的には、・ Windows のアクセサリの中にあるペイントプログラム（「スタート」⇒「すべてのプログラム」⇒「アクセサリ」⇒「ペイント」）を使って、手書きの絵を描く。描き終わった後で保存する時に GIF、JPEG、 PNG、TIFF などの形式で保存する（「ファイル」⇒「名前を付けて保存」で、「ファイルの種類」欄で JPEG や PNG を選ぶ）。保存場所（フォルダ）は HTML 家で飼う動物には３種類ある 1. 犬 2. 猫 3. うさぎ <ol> <li>犬 <li>猫 <li>うさぎ </ol> 家で飼う動物には３種類ある・犬・猫・うさぎ <ul> <li>犬 <li>猫 <li>うさぎ </ul>

(11)

ＣＧＩプロジェクト２ファイルと同じフォルダにする。・前に作った HTML ファイルの中に<img>タグを追加する。src=のところは、今描いた絵の保存したファイル名を使う。 (4) 表（テーブル）表を書きたい時がある。罫線の入った表だけでなく、単に縦の位置をそろえたい時に罫線を入れない表を使うこともできる。表は右のように書く。１行の単位を<tr>...</tr>で囲み、その中に１項目（１カラム）ずつ <td>...</td>で囲んで書く。このサンプルは右端の図のようになる。罫線（枠）をつけるには、<table border=”1”>のように指定する。”1”は線幅で、数字が大きくなると太くなる。左側のサンプルは枠なし、右図は枠幅「１」の例である。また、項目のところにイメージを入れることも可能である。枠なしの場合枠＝１の場合 (4) ハイパーリンク Web ページは、文字列や絵をクリックすると別のページにジャンプできる「ハイパーリンク」を使うことができる。これは <a href=”…(URL)…”>標的文字列</a> のように書く。但し、”…(URL)…”の部分はジャンプ先のページの URL を書いておく。標的文字列（もしくはイメージ）はこのページに表示される文字列（もしくは絵）であり、ここをクリックするとジャンプするようになる。 ⇒ 上記のサンプルを表示クリックした後のジャンプ先 [課題２－Ａ] HTML を使って自分のオリジナルページを作れ。 <TABLE> <TBODY> <TR> <TD>１行目の１項目目</TD> <TD>１行目の２項目目</TD> </TR> <TR> <TD>２行目の１項目目</TD> <TD>２行目の２項目目</TD> </TR> </TBODY> </TABLE> <p>それでは<a href”nextpage.html”>ここ </a>をクリックしてください

(12)

ＣＧＩプロジェクト２但し時間がないので、余り凝らないこと。第１回目の時間内にとどめ、それ以上のことは後半のプロジェクトに入ってから別途行うこと。注意このサーバーは世界中のインターネットからアクセスできるので、家からでも見ることができる。言い換えれば、誰が見るか分からないので、 (1) 自分が公開したくない情報・しないほうがよい情報は載せてはいけない。実名・電話や住所などは載せないこと。公開は自分の責任で行うこと。公開することによる危険を十分理解すること。自ら公開した情報によって被害を受けた場合、大学は補償できない。 (2) 内容は、法と公序良俗に従うこと。他人の著作権を侵害しないこと。法を遵守すること。いずれも各自の責任とする

(13)

ＣＧＩプロジェクト３

第３章フォームによる入力

[1] フォームとは

「フォーム（form）」とは、本来の意味は（記入の出来る）書類のことで、ＸＸＸ（申請）用紙（Application Form）といったイメージで使われる。

ホームページの世界では、ユーザが端末で入力した情報を、サーバーが読み取るための仕掛けとして使われる。たとえば、会員登録をする画面、インターネットショッピングをする画面（商品を注文したり、配送先を指定したり、支払いのためのクレジットカード番号を入力したりする画面）などとしてよく見かける。また、検索のための入力画面もこの形で実現される。その他にも、Web によるテスト（WBT＝Web-Based Testing）、つまりサーバーが問題を出してユーザが解答し、サーバーが採点する、といった使い方もある。フォームを使って入力をするためには、１）フォームタグを使って、入力が出来るように記入場所を用意した画面をサーバーが準備して、端末に送り表示させる、２）そのフォームに対して、ユーザが端末で情報を入力し、送信ボタンでサーバーに送り返し、サーバーはその情報を受け取って、あらかじめ決めた処理を行う、という２ステップの動作が必要になる。その仕組を簡単に説明する。《入力画面の表示》まず、入力用の穴の開いた画面を表示させる。具体的には Web サーバーが、普通のページ（普通の静的なページ）と同様に、HTML で書かれたページを送出し、端末はそれを受け取って解釈して表示する。ただし、送られるページデータに、入力用の欄を表示するための HTML コマンド <FORM> タグとその関連タグが書かれている点が異なる。端末は、この <FORM>タグとその関連タグが書かれていると、 1) 入力欄を作って表示すると同時に、 2) その欄に対する識別名を与える。前者の入力欄には、単純なテキスト欄だけでなく、選択肢を選べる欄や（プルダウン）メニュー型の欄などを作れるタグが用意されている。後で具体的な例を通じてもう少し詳しく見ることにする。後者の識別名は、入力をサーバーに伝える時に、たくさんの入力欄があるとそれぞれを区別する必要があるので、区別するために識別名を与える。たとえば入力画面にユーザＩＤとパスワードの２つの欄があるとき、サーバー側へ渡された入力のデータの上で、それらを区別する必要があることは、容易に想像できるだろう。また、入力タグの中に、「送信ボタン」タイプを指定することができ、この場合は画面上に送信ボタンが作られる。ユーザは、端末画面上に表示された入力画面で、必要な欄にデータを入力し、最後に

(14)

ＣＧＩプロジェクト３「送信ボタン」をクリックする。このクリックした時点で初めて、入力データはサーバーに送信される。それ以前では、端末上で入力データを扱っているだけであり、サーバーは関知していない。「送信ボタン」の形や文字はある程度自由に作ることができる。たとえば「送信」とか「了解」とか「終了」といったラベルを貼っておく。複数の入力欄がある場合にそれらを区別しなければならないので、各々の入力欄につけた名前（識別名）とキーインされた入力データをペア（対）にして、サーバーに送る。サーバーは、端末から送られてきたデータを読み取る。送られてきたデータはプログラムで処理することになる。たとえばユーザ登録の画面なら登録データをデータベースに書き込んで登録するとか、ショッピング画面ならそのデータを元にして在庫から荷物の発送へ回すと同時にクレジットカードから代金の引き落とし処理をする、などが考えられる。そのためには、送られてきたデータをプログラムで読める形にして渡す仕組が準備されている。これを CGI （Common Gateway Interface）と呼んでいる。サーバー側でこのデータの処理プログラム（図中で「アプリケーションプログラム」と書いたもの）を準備する人は、CGI を介して入力を受け取るプログラムを作ることになる。このときのプログラミング言語は本来なんであってもよいはずのもので、現にいくつかのプログラミング言語が使われている。よく使われているのは Perl や Ruby、PHP、Java などの言語で、いずれもインタプリタ式で実行される言語である（注： CGI アプリケーションを書くためには必ずインタープリタ式でなければならないということではない。たとえばコンパイラ式の C 言語などでも作ることが出来るのだが、あまり使われているのを見たことがない）。またいずれも C 言語と似た構文（文の書き方の規則）をもっていること（注：最近の言語はまあ大体似たような構文を持っている）、文字列の処理などが得意（Ｃ言語では苦手、CGI アプリケーションでは文字列処理が必要なので、文字列処理が簡単だとプログラムが楽になる）なものである。今回使うのは PHP と呼ばれる言語である。要するに端末から送られてきた入力データが決められた形式でプログラムの入力に渡されるので、それを解読して必要な処理ができるプログラムが作れればよいのである。 CGI を使うアプリケーションプログラムは、もちろんカスタムメードで作ることが出来るが、一方で既に出来ているプログラムが提供されることもある。ショッピングやユーザ登録の仕組は、たいていカスタムメードで作られているだろう。また典型的な（つまり、そのままの形で導入したいユーザが多い）CGI アプリケーションプログラムは、（有料の）製品として提供されているものもあるし、またフリーソフトとしてネットに公開されているものもある。典型的な例としては、掲示板システム（BBS＝Bulletin Board System）やそれを日記として扱う WebLog（ブログ）、メールを Web 上で読んだり書いたりする Web メール（キャンパスで提供されている Active Mail や Deep Mail などは有料のパッケージだが）などのソフトが出回っている。たとえば Vector のサイト http://www.vector.co.jp や窓の杜 http://www.forest.impress.co.jp などを覗くとこの種のソフトを見つけることが出来る。このプロジェクトの前半で扱うのは、掲示板や Web メールのうちで、画面とやり取りする基礎部分に限定しよう。細かい画面デザインや入力情報の選択と、掲示板なりメールなりがどう動作するかのアプリケーション機能とを組み合わせれば、完結したシステムになるはずである。前半では入力画面の出し方と、アプリケーションでの入力データの受け取り方に限定する。なお、アプリケーション部分は、その機能に関する固有の知識が必要になるので、それは各自で勉強して欲しい。（個別に質問してくれれば、ある程度は答えられるだろう。）ここまでで分かったことを整理すると、 1. 入力の仕組は 1) <FORM>を使った（入力欄を含む）ページを準備して、それを普通のページと同様に表示する、ＷｅｂブラウザＷｅｂサーバ CGI アプリケーションプログラム入力

(15)

ＣＧＩプロジェクト３ 2) 端末で入力欄にキーインした情報は送信ボタンを押すと、まとめてサーバーに送られる、 3) サーバーでは送られてきた入力データを CGI インターフェースを経由してアプリケーションプログラムに渡す、アプリケーションプログラムは、所定の手続きで入力の情報を受け取るといった手順で行われる。 2. 入力データは、サーバー上に用意した CGI アプリケーションプログラムで受け取ることができるので、それを使って、たとえばデータベースへのユーザの登録なり、クレジットカードからの引き落としなりという、アプリケーション処理をすることが出来る。

CGI アプリケーションプログラムは Perl, Ruby, Java, PHP やそのほかの言語で書くことができ、端末からの入力データを受け取って、それを処理する。プロジェクト前半でやることは、このような CGI アプリケーションプログラムの簡単なものを書いてみて、プロジェクト後半で本格的な仕組を作るための前提知識を得ることである。 [2] フォームの書き方の例

まずはサンプルから見てみることにしよう。

<P><INPUT type="submit" name="exec" value="送信"></P> </FORM> これを、ページの一部として作る。つまり、この前に<HTML><BODY>があって、この後に</BODY></HTML>を置く（ <HEAD>…</HEAD>部分は必要なものを自分で書くこと）。この中で、<P>タグ（パラグラフタグ、パラグラフの先頭を示す）は既に知っているとする。その他の<FORM>タグ, <INPUT>タグは初めてなので、説明を要するだろう。 <FORM>タグは、ここからフォーム（記入用紙）が始まるという意味で、</FORM>で閉じられる。<FORM>タグの中に、引数として、action=と method=が書かれている。 action はこのフォームを端末からサーバーへ送信した時（それはユーザが送信ボタンをクリックして送るのだが）、サーバー側の後ろでフォームから入力データを受け取って動作するプログラム（これをアクションスクリプトと呼ぶことがある）の名前（そのプログラムが置かれているファイル名または URL）を書く。ここでは inputaction.php という名前のファイルに書かれたプログラムが実行される、と指定している。

（注） action には本来は URL つまり http://foo.bar.toho-u.ac.jp/xyz/abc.php のような形を書くように規定されているが、相対パス表現も許されるので、同じディレクトリにあるプログラムファイルを指定する場合はそのファイル名だけを書いてよい。また相対パスを用いて、たとえば../cgi/abc.php のように「自分の１つ上（..）の下の cgi の下の abc.php」を指定することもある。規定に従えば、フルの URL を書いていいのだが、他のサーバーのプログラムを呼び出せるのだろうか？試したことがない。

実行するプログラムのファイルは、大抵の場合は Perl、PHP、Java などのプログラムだろう。ここでは、拡張子が php なの

<P>学生番号 <INPUT type="text" name="student_id"></P> <P>氏名 <INPUT type="text" name="name"></P> <P><INPUT type="submit" name="exec" value="送信"></P> </FORM> 表示クリック学生番号と氏名を受け取ってそれを処理するアプリケーションプログラム inputaction.php

(16)

で、PHP のプログラムが実行されることになる。（注）Web サーバーの指定で、拡張子 php のファイルは PHP のインタープリタが起動されるようにしてある。

method 引数は、FORM のデータを端末からサーバーへ送る時の「送り方」の指定で、選択肢は POST と GET の２種類があるが、このプロジェクトの目的では POST しか使わない。 GET を使う場合については、下記に公式な解説があるので参考にして欲しい。ここでは一切サボることにする。 http://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2.2 次に<INPUT>タグが３回使われている。<INPUT>タグにはいろいろなタイプがあって、type パラメータで指定する。たとえば、最初の<INPUT>タグは、type="text"と指定しているが、これはテキスト型の入力欄を作る（表示する）ということである。type には • text テキスト入力欄（１行のみ）を表示 • textarea 複数行にまたがるテキスト入力欄を表示 • password テキスト入力だが画面には入力文字を表示せず＊などで隠すような入力欄を表示 • checkbox チェックボックスを表示（チェックボックスは１つだけ選択） • radio ラジオボタンを表示（ラジオボタンはいくつ選択してもよい）

• （プッシュ）ボタン類 submit ボタン（送信ボタン）、reset ボタン（入力リセットボタン）、image ボタン（イメージボタン）などなどがある。ここの例では text という指定なので、１行のみのテキスト入力欄を作る。複数行必要なら textarea にしなければならない。次のパラメタ name="student_id" は、この入力欄を（他の入力欄と）区別するためにつける名前である。CGI プログラムからアクセスする時は、複数の欄の入力が一度に入力として入ってくる。それを区別するために、識別名 student_id というのをつけたのである。この名前はプログラマの好きなものを選んで構わない。たとえば、次の行の <input>タグは、タイプは同じ text であるが、識別名は name="name" となっている。CGI プログラムから見ると、識別名 name として入ってくるデータが、画面上の「氏名」と書いたところの入力欄の値になる。

最後に、同じ<INPUT>タグですが type="submit" としたタグが書かれている。これは「送信ボタン」を表示する。submit 型は、これを含む<FORM>…< /FORM>に含まれるすべての入力データを、端末から送出する。このタグのパラメタ name は、もし submit のタグが複数あれば（つまり２つ以上の送信ボタンがあれば）、どちらを押されたかを区別するために使うことが出来る（あまり必要ないかもしれないが）。次のパラメタ value は、画面上に表示されるボタンの上に貼り付けられる文字列を指定する。この場合は「送信」と書かれたボタンが表示される。

なお、value パラメタは、他の INPUT タグ、たとえば TEXT などでは、value で指定した文字列が、枠内に初期値の形で表示される。そのまま送信ボタンを押せば初期値が送出されるし、端末上で値を書き換えれば書き換えた値が送出される。 [3] いろいろなフォーム

これをまねすれば、いろいろなフォームを書くことが出来る。次の例を見て欲しい。 <FORM action="inputaction.php" method="post">

<TR>

(17)

</TABLE> <P>

<input type="submit" name="exec" value="送信"> </P> </FORM> 前の例と殆ど同じだが、フォームの中に<TABLE>タグを使っており、フォームの内容を「表」にしたため、１行目と２行目の入力欄の位置が揃っている。一般に、フォームの内容はどのような形でもよく、<P>を使ってパラグラフにしようと、<UL>や <OL>を使って箇条書きにしようと、この例の様に表を使おうと、構わない。なお、参考資料として、HTML 言語の公式の定義をしている http://www.w3.org/TR/html4/ がもっともオフィシャルなページなので参考にするとよい。英語をいとわずに読む努力をすること。FORM などを含めて難しめの内容に関する解説ページとして面白いと思っているものとして、http://www.cs.tut.fi/~jkorpela/forms/ を挙げておく。 Google などでたとえば「HTML フォームタグ」ぐらいをキーワードに検索してみると、日本語のお手軽な解説ページがたくさん出てくるだろう。これらは上記の w3.org 公式ページと異なり、正確さは下がるだろう。［例題演習３－１］簡単なフォームを含むホームページを作り、どのように見えるか試してみよう。上記の例を参考にして、簡単なフォームを含むホームページを作り、どのように見えるか試してみよ。試すのは、 (a)テキスト、(b)テキストエリア、(c)パスワード、(d)チェックボックス、(e)ラジオボタン、及び (f)送信ボタンをやってみること。ファイルを作る場所は、たとえば Z: ディスク中の public_html フォルダの下に適当なファイル名（testform.html など）で作成（保存）し、ブラウザで（URL） http://venus.is.sci.toho-u.ac.jp/~自ユーザＩＤ/testform.html をアクセスして試せ。書き方は以下の例を参照。

<P><TEXTAREA rows="3" cols="20" name="freecomment">自由にコメントを書き込んでください</TEXTAREA></P> <P>パスワード<INPUT size="20" type="password" name="yourpassword" maxlength="15"></P>

<P>好きな果物

<P>動物がすき？

<INPUT type="radio" name="animal" value="yes">はい <INPUT type="radio" name="animal" value="no">いいえ

<INPUT type="radio" name="animal" value="neither">どちらでもない </P>

１行目はテキストの例。size は欄の大きさ、name は入力欄を識別するための名前、value は初期値（どう現れるか確かめてみよ）、maxlength はここに書き込むことの出来る最大の文字数で、欄の大きさ size より大きく出来る。

（注）一般に、maxlength は指定しておくのがよい。理由は、受け取る CGI アプリケーションプログラムの側で、入力用に用意するバッファが足りなくてあふれてしまうことを防ぐためである。このバッファがあふれると、（場合によって）あふれた部分が悪さをして、CGI アプリケーションを壊したり、最悪時には悪いプログラムを意図的に書き込まれたり

(18)

する可能性がある。これは攻撃に対する脆弱性（この場合はバッファオーバーフローの脆弱性）を提供する可能性があるということで、実際に何かのトラブルが起こらない場合でも、なるべくあらかじめ避けておくのが望ましい。というわけで、実際に使う程度の文字数を maxlength として指定しておくのがよいだろう。

２行目はテキストエリアの例で、rows は欄の行数、cols は欄の長さを指定する。INPUT タグではないので注意。name は入力欄の識別。初期値は value ではなくて、この例のように書くので注意。３行目はパスワードの例。テキストと同じ形だが、ユーザが書き込んだ時に文字を隠してくれる。試してみよ。４～６行目はラジオボタンの例である。ラジオボタンはクリックして選択できるタイプの入力で、同時に複数のものを選ぶことができる（選択肢で複数選択可）。 name は入力欄を識別する名前だが、４行目だけでなく５，６行目も同じ識別名を使っていることに注意。これによって、４・５・６行目は同じ選択群であることがわかる。 value はそのボタンにチェックを入れたときに入力として戻ってくる値。この例では、ユーザがりんごにチェックを入れると、apple という値が戻ってくるようにしてある。もう１つ、「好きな果物」というテキストは INPUT のタグの外側に置かれている。つまり選択群の範囲外である。 FORM の要素はこのように普通のテキストやイメージと混ざって使うことが出来る。７～１１行目はチェックボックスの例である。チェックボックスは、選択肢だが、ラジオボタンと違って唯一選択を強制される。つまりどれか１つをクリックすると、もし他のものにチェックをしていてもそれが消されて、新たにチェックしたものだけが残る。８～１０行目にチェックボックスを書くための INPUT タグがある。name は入力欄の識別で、８～１０行目に共通の名前にしているのは、ラジオボタンと同じである。value はこのボックスにチェックをしたときに入力として戻ってくる値で、yes か no か neither の３つの値のうちの１つが戻ってくるようにしてある。１２行目は送信ボタンの例で、引数は前に説明した。この送信ボタンをクリックすると、このフォームのすべての入力の値が（まとめて）端末からサーバーに送られる。その結果、サーバーのプログラムから見ると、yourname には名前が、yourpassword にはパスワードが、fruits には好きな果物の選択値が、同時に戻ってくるはずである。

戻ってくる値を取り扱うためには、「CGI プログラム」を作らなければならないが、それは次の節で説明する。ここは、とにかく HTML 上でフォームを書いてみて、どのように見えるかだけを試してみよ。 ⇒ つまり「送信」ボタンを押しても、（フォームページだけでは）何も起こらない。

(19)

ＣＧＩプロジェクト４

第４章言語 PHP

[1] PHP とは

言語 PHP （正式には PHP HyperText Processor）は、CGI を実装する言語としては比較的単純で、かつＣや Java 言語を学んだものにとってあまり違和感なく使える言語である。もちろん、CGI には他の言語、たとえば Perl や Java が使われているケースも多いだろう。これらの言語との使われ方の違いを理解すれば、容易に別の言語も使えるだろう。 PHP の特徴は 1. HTML 文書のテキストと、CGI プログラムとが、同じファイルに書かれる。 Perl などの他の言語では、CGI プログラムは HTML テキストとは別ファイルに置かれる。<FORM>タグの action 引数によって、起動したい CGI プログラムのファイルを指定する。しかも通常は HTML 文書の置かれる場所とは異なるディレクトリにおく。 PHP は、同じ場所に、つまり HTML と同じファイルの中に置く。PHP でも<FORM>タグに書かれた action 引数で起動することには変わりないが、その起動される PHP ファイルの中に、HTML のテキスト部分を含んで構わない。PHP のインタープリタ（解釈実行するソフト）は、PHP の部分は実行プログラムとみなして実行し、HTML タグの部分は HTML として表示する。 2. （特に Apache サーバーでは）サーバープログラム内で実行されるので起動が早い。

Perl の CGI プログラムでは、格段の仕込みをしない限りは、CGI プログラムは Web サーバーとは別のプロセスとして立ち上がる。そのときにプロセスの生成と初期化に関わるオーバーヘッドが生じ、アクセス負荷の高いサーバーではこのオーバーヘッドが性能低下をもたらす。それに比べて PHP は、Apache サーバープロセスの一部として実行されるため、このオーバーヘッドがない。と言われている。上記は利点として述べているが、その裏には欠点もあるわけで、１については、①HTML 文書と PHP のプログラムが混在して区別しづらい点や、②PHP のプログラムをページの一部として置いてあるためにセキュリティをかいくぐってソースを見ることが出来る、見られてしまう可能性がある、という問題がある。２については、Apache サーバーではあらかじめ CGI アプリケーションプログラムを走らせるためのプロセスをいくつか立ち上げておき、プログラムが起動されるときにそれを使うことによって回避しています。また Java の場合には、Apache ではなく、たとえば TomCat など全体を Java で書いたコンテナ型のサーバーを使い、CGI プログラムはその中へ取り込んで実行するものもある。とにかく、一般には PHP は CGI プログラムを作成するのに簡便な言語であると評価されている。 PHP のオリジナルホームページは、 http://www.php.net にある。ダウンロードキットやマニュアルなどが整備されている。マニュアルは日本語版も用意されている。また、参考書の類もかなりの数が出版されてきており、書店でもよく見かける。 PHP にはバージョン４と５があり、オブジェクト指向化の動きが強くなっているが、このプロジェクトでは、それほど大きなサーバープログラムを構築することは考えていないので、オブジェクト指向にはこだわらないことにする。流通しているいくつかのパッケージはオブジェクト指向を使っているものもある。 [2] PHP プログラムの基本最初に、サンプルプログラムを動かしてみよう。まずは「フォーム」とは関係の無い、単純な例を試す。［例題演習４－１］ PHP プログラムの実行を試してみる次の PHP のプログラムを、ファイル（自ホーム）/public_html/mysample1.php として作り、ブラウザからアクセスしてみよ。このとき、必ず http://venus.is.sci.toho-u.ac.jp/~(自分の ID)/mysample1.php のように、venus のファイルとしてアクセスすること。

(20)

ＣＧＩプロジェクト４ <html> <head> <title>PHP Test</title> </head> <body> <?php

echo "<p>Hello World</p>"; ?> </body> </html> 右図のような画面が得られるはずである。（注意） Windows 上で秀丸エディタなどを使って上記のファイルを作って、mysample1.php と名づけてセーブしたとする。そのファイルを《ブラウザを使ってどう見えるか見てください》と言ったとき、Windows 上で（ファイル一覧から） mysample1.php ファイルをダブルクリックすると、ブラウザが起動してファイルが見える。しかし、これは上の課題とは違います。そのときのブラウザ内の「アドレス」の欄にどう表示されているだろうか？ファイルをダブルクリックして表示すると、 Z:\public_html\mysample1.html と表示されているだろう。上記の課題で要求しているのは、ブラウザ内の「アドレス」欄に http: //venus.is.sci.toho-u.ac.jp/~（自分の ID）/mysample1.php と表示された状態である。 Z:\public_html\mysample.html と表示されている時は、Windows 上のファイルを直接そのままブラウザで見ているのに対し、 http: //venus.is.sci.toho-u.ac.jp/~（自分の ID）/mysample1.html と表示されている時はホームページサーバーvenus.is.sci.toho-u.ac.jp から送られてきている（つまり venus の apache サーバーを介している）情報をブラウザで見ている。実は、PHP のプログラムは、venus ホームページサーバー上で解釈実行されるので、venus を介さないと PHP は実行されないままの状態になる。表示も、PHP のプログラムがそのまま（文字の列として）表示されているはずである（右図）。それに比べて、 venus を経由した場合（つまり http://venus.is.sci.toho-u.ac.jp/~（自分の ID）/mysample.php の場合）は、上の図にあるように Hello World だけが表示される。これは PHP プログラム中の echo "Hello World" 文（下記に説明する）が実行された結果だからである。この PHP プログラム（PHP ファイル）を読んで解釈してみよう。先頭から５行目までは、ごく普通の HTML のファイルである。まず<html>タグがあって、次に<head>のセクションがあって、その中に<title>として「PHP Test」と書いてある。その次に <body>が始まっている。その次からが新しい構文になる。「 <?php 」から始まって「 ?> 」で終わる部分が、PHP のプログラムとなっている。言ってしまえば全体で <?php … ?> という形なので、 <?php ?> タグの引数が長いプログラムになっている、という形である。この例では、PHP プログラムは「 echo "．．．．"; 」という１行だけである。「echo」は画面にそれ以下セミコロン（；）までの文字列を表示するという構文である。ここでは「<p>Hello World</p>」という文字列を表示せよと言っていることになる。端末は受け取った文字列を HTML だと思って解釈表示するので、<P>と</P>（パラグラフの開始と終了を示すタグ）は画面上には表示されない。