フォームとCGI

フォームとは?

Webブラウザ上に、ユーザがテキストを入力する枠や、選択するボタンを表示 する機能。CGIプログラムと組み合わせてユーザ側のデータをサーバ側に送信 するためや、Javascript などと組み合わせて、ユーザ側(ブラウザ側)でのデー タ処理に必要なデータを入力するために使われる。

CGIとは?

Common Gateway Interface の略。フォームデータを処理するプログラムとhttp サーバのやり取りを行う通信手順を定義したもの。簡単に言えば、フォームに入 力されたデータを、サーバにおいて集計したり処理するプログラムのこと。

サーバ上で動作するプログラム言語であれば、なにを使って作成してもよい。通 常は、文字列処理が得意な perl がよく使われる。この演習では、CGIプログラ ムを作成することはせずに、こちらが用意した既成のCGIを利用するやりかたを 学ぶ。

フォームの作り方

formタグで囲まれた範囲に、フォームを設定することができる。フォームの中に は、コントロールと呼ばれる、ユーザがデータ入力を行う際に使用する部品を配 置する。

フォームタグの属性

formタグの属性として重要なものは、method と action である。method は フォームデータのサーバへの転送方法を指定する。methodの種類には、post と get があるが、CGIプログラムの作成を自分で行わない限り、これら２つに大き な違いはない。action にはフォームデータの処理を行うCGIプログラムを指定す る

例

下記は、postメソッドを利用し、adlib.rsch.tuis.ac.jp というサーバにある formdisp.cgi という名前のCGIプログラ ムを使って、フォームデータを処理する場合の例である。

<form method=post action="http://adlib.rsch.tuis.ac.jp/~akira/lect/webprog/cgi/formdisp.cgi">
コントロールを記述
</form>

コントロール

コントロールは、ユーザがデータ入力に使うためのインタフェースである。 コントロールには、いくつかの選択肢の中から、１つだけ選ぶ(ラジオボタン、 メニュー)タイプ、選択するかしないかを選ぶ(チェックボックス)タイプと、文 字を入力する(テキスト、テキストエリア)タイプに分けられる。

コントロールには、データ処理の際に、データの区別を行いやすくするため に、name属性を使って、名前を付けておく。また、その選択肢が選択されたとき に得られるデータの値を、value 属性にて指定する。CGIプログラムには、

名前=value値

<input type=radio name=car value=1>
トヨタ<br>
<input type=radio name=car value=2>
日産<br>
<input type=radio name=car value=3>
ホンダ<br>
    

<input type=checkbox name=toyota value=1>
トヨタ<br>
<input type=checkbox name=nissan value=1>
日産<br>
<input type=checkbox name=honda value=1>
ホンダ<br>
    

<select name=car>
  <option selected value=0>特になし</option>
  <option value=1>トヨタ</option>
  <option value=2>日産</option>
  <option value=3>ホンダ</option>
</select>
    

<input type=text size=7 maxlength=6 name=number>
    

<textarea name=comment rows=3 cols=20>
最初に入れておきたい文字
</textarea>
    

ボタン

フォームに入力されたデータを、サーバに転送したり、Javascirptなどで処理 するには、「きっかけ」が必要である。この「きっかけ」にはボタンが通常使 われる。

<input type=submit value="送っちゃうよ〜">
    

<input type=reset value="やりなおし">
    

<input type=button value="意味なし">
    

<input type=button value="計算" onclick=calc()>
(注: calc()という Javascript を作成している場合)
    

フォーム設計

CGIによるフォームデータの集計

ここでは、フォームに入力されたデータをブラウザに表示するだけのCGIと、サー バのディスクに保存するだけのCGIを使った、フォームデータの処理例を示す。

本学の教育ドメインでCGIを動作させるには、public_html以下に存在する フォルダやファイルのパーミッション(読み書き実行許可モード)を詳細に変更 する必要があるので、この演習では実施しない。

ここではそのような方法は行わず、西村の管理しているWEBサーバ上のCGIプ ログラムを、各自が作成したフォームより呼び出すことによって、CGIによるフォー ムデータ処理を体験する。なお、ここで紹介するCGIプログラムは、getとpostの いずれのmethodで送られたデータも処理できる。

フォームデータをブラウザ画面に表示する

<form method=post
action="http://adlib.rsch.tuis.ac.jp/~akira/lect/webprog/cgi/formdisp.cgi">

のように、action属性の値に、CGIプログラムのURLを与えることができる。 formdisp.cgi は、コントロールの名前と、そこに入力されたフォームデータと の対応関係をブラウザに表示する CGI である。

実際のところ、このCGIプログラムはほとんど役に立たない。perl を勉強して、 このプログラムを参考に、さまざまなCGIによる処理を考えてもらいたい。

フォームデータをサーバのファイルに保存する

データをサーバに記録する CGIプログラムは、運用に非常に注意を払わなけれ ばならない。なぜならば、

• 他人が、フォームの目的とは別に、関係ないデータをCGIに送りつける可能 性がある。
• その結果、フォームデータを保存するファイルがどんどん大きくなっていき、 正常なファイル処理ができなくなる。(ディスクが一杯になる)

このようなフォームデータを保存するCGIプログラムに限らず、CGI全般にお いて、送り付けられて来るフォームデータの安全性には十分注意を払う必要があ る。たとえば、フォームデータを元に、任意のファイルの内容をWEBブラウザに 表示する、任意のコマンドを実行する、というような仕様のCGIは、パスワード 等重要ファイルの漏洩やシステムの破壊に繋がるので、避けるべきである。

ここでは、安全性を考えて、演習の時間内に、本学の実習室から送られて来た データだけに対してのみしか、集計しないよう設計を施した CGIプログラムを利 用する。

<form method=post
action="http://adlib.rsch.tuis.ac.jp/~akira/lect/webprog/cgi/formout.cgi">

保存されたデータは、CSV形式なので、表計算ソフトに読み込んで、別途集計 処理を行うことができる。

CGIによるフォームデータ処理の例: google検索の作成

検索サイトは、ユーザがフォームに入力したデータを用いて、CGIによっ て検索結果ページを表示する機能を備えている。つまり、検索サイトにわざわ ざアクセスしなくても、自分が作ったフォームから検索サイト内のCGIに直接 検索データを送り付ければ、検索サイトと同等の検索画面を得ることができる。 (注: CGIプログラムやWeb サーバが、特定のマシン以外からのフォームデータ の送信を受け付けない、という設定にすることも可能であるので、いつもこの ようなことができる訳ではない)

例えば、検索サイトの大手である、Googleでは、Google検索の作り 方 として、自分のWebページに Google検索機能を実現するフォームを作成 する手順を説明している。自分で作成したGoogle検索を公開する場合、サービス 製品の販売目的又は広告販売など商業目的で Web サイトへの訪問者数を増加さ せるために Google 検索サービスを使用することは禁じる、などのGoogleサービス利用規約 があるので、これをよく読むこと。