トップへ
田村研究室

コンピュータリテラシー2

Computer Literacy 2

メニュー

目次

2011
11/16

第10回

目標

  • フォーム機能を使用したページを作成する
  • CGIの仕組みを理解する．
  • CGIの単純な例を実際に動作させてみる．

入力フォーム

「入力フォーム」とは、HTMLで規定されている、ページ上にボタンや選択肢・入力用の窓などを表示させ、ユーザが指示したり記述した情報をwebサーバへ送信するための仕組みである。サーバ側では、受け取った情報を元に何か処理を行う。

    　　　
  • 例: アンケートを収集し、データベースへ登録する。
    • 　　　
  • 例: ユーザが指示した商品に関する情報をデータベースから取得して、表 示

通常CGIスクリプトと組み合わせて使用する。(CGIスクリプト:サーバ側で動作する自動処理を記述したもの次回以降に説明)

入力フォームの基本形

入力フォームは基本的に次のように記述する

<FORM ACTION= "データの送信先のURL" METHOD="GET(またはPOST)">
      <INPUT>タグ
      <SELECT>タグ
      <TEXTAREA>タグ
        のどれか，またはその組み合わせ
</FORM>

この<form>タグは，入力してもらいたい情報一組にひとつだけでよく，通常1ページには1つだけ記述する．例えばアンケートページやショッピングカートの画面で，それをまとめて1つだけ記述する．

1ページに複数の<form>タグを必要とするのは，例えば「新入生アンケート」と「購入希望アンケート」のように，まったく関係のない2つのアンケートを1ページに同時に用意するような場合だけであるが，そもそも複数のアンケートを1ページに書くとわかりにくくなるため推奨できない．

<form>タグのオプション指定には，ACTIONとMETHODが必要である．

    　　
  • ACTION　　どのページ(CGIスクリプト、メールソフトなどを含む)へ情報を受け渡すのか
    • URLの例: http://zzzzz.zzzzz.zzzz/hogehoge.cgi (通常CGIスクリプトファイルを指定)
    • ページ名の例: zzzzzzz.cgi (通常CGIスクリプトファイルを指定)
    • メールの例: mailto:zzzzzz@zzzzz.zzz.jp (普通のメールアドレス)
    　　
  • METHOD その方法
    • GET 一行分(短い情報)を受け渡す。例えば、
      • url?name1=.....&name2=.....
    • POST 制限無しの長い情報を受け渡す

<form>タグの内側には，次の3種類のタグの組合せを記述する．

INPUTタグ

INPUTタグは次の6つのタイプがある．関係する要素はNAMEに同じ項目名を書くこと．VALUEには初期値を書く．「CHECKED」キーワードが書かれた項目は，最初から選択された状態として扱われる．radioタイプの場合には，どれか一つだけをCHECKDにしておく．

送信されるデータは，「項目名=値」の形で送信される．textとpasswordタイプでは入力された文字データ，checkboxとradioでは「VALUE=」で設定されていた値が送信される．

  1. <INPUT TYPE="submit" VALUE="ボタンに表示する言葉(1)"> 最後に全情報を送信するためのボタン(どのフォームにも必ず1個必要)
    2. 　

  2. <INPUT TYPE ="reset"　VALUE="ボタンに表示する言葉(2)"> 入力情報のリセット(選択項目を初期状態に戻すためのボタン)

    3. 　　　
  3. <INPUT TYPE="text" NAME="項目名" VALUE="初期値(1)">文字入力のためのテキストボックスを表示

  4. <INPUT TYPE="password" NAME="項目名" VALUE="初期値(2)"> パスワード入力専用．タイプした文字が表示されない．
    ※textとpasswordでは必要ならば SIZE="数値" MAXLENGTH="数値"で文字数指定もできる
    5. sizeを指定した例: <input type="password" value="初期値(2)" name="項目4" size=20>

  5. <INPUT TYPE="checkbox" NAME="項目名1" VALUE="値A">　個別にチェックできる-ボックスを用意
    6.   
<OL>
  <LI><INPUT TYPE="checkbox" NAME="hogehoge" VALUE=1 >　項目の説明はここに書く</LI>
  <LI><INPUT TYPE="checkbox" NAME="hogehoge" VALUE=2 > 次の説明 </LI>                
</OL>
    • 項目の説明はここに書く
    • 次の説明
  6. <INPUT TYPE="radio" NAME="項目名1" VALUE="値A">　どれか1つを選択するボックスを用意
    ※checkboxとradioでは必要なら CHECKEDオプションも指定ができる
    7.   
<OL>
  <LI><INPUT TYPE="radio" NAME="hogehoge" VALUE=1 >　項目の説明はここに書く</LI>
  <LI><INPUT TYPE="radio" NAME="hogehoge" VALUE=2 checked > 最初から選択された例 </LI>                
</OL>
    • 項目の説明はここに書く
    • 最初から選択された例

SELECTタグ

セレクトタグは，複数の選択しの中から一つを選択するためのフォームを提供する．ただし「multiple」キーワードが指定されていると，複数選択を可能とする．optionタグで記述した選択肢の一覧のうち，一つにSELECTEDキーワードを書いておくと，それが最初に選択された状態で表示される．

送信されるデータは「選択肢全体の名前=値」の形で送信され，値には「VALUE=」で設定された値が格納される．

使用例

<SELECT NAME="選択肢全体の名前">
   <OPTION VALUE="値A">項目1</OPTION>
   <OPTION VALUE="値B">項目2</OPTION>
   <OPTION VALUE="値C" SELECTED>項目3</OPTION>
</SELECT>

<SELECT ....SIZE="数"></SELECT>で数で指定した行サイズでウィンドウ表示．

<SELECT ....MULTIPLE></SELECT>でもウィンドウ表示，さらにシフトキーを押しながらクリックすることで複数項目を同時選択可能になる．

表示例

標準的な例 MULTIPLE指定の例

TEXTAREAタグ

ある程度まとまった文章を入力可能なウィンドウを表示する．

使用例

<TEXTAREA NAME="項目名" ROWS="数" COLS="数">
     最初から表示しておくテキストの例
</TEXTAREA>

表示例

(応用)リンクボタンとしての入力フォーム

入力フォームのタグを，ただのリンクボタンとしても使用可能

使用例

<FORM METHOD="post" ACTION="リンク先のURL">
   <INPUT TYPE="submit" VALUE="リンク先を示す言葉">
</FORM>

表示例

応用例:Google検索ボックスの表示

以上の機能を組み合わせて，次のようなGoogleの検索ボックスを表示することができる

Google
WWW を検索 nit.ac.jp を検索

このボックスの表示方法はGoogle自身が紹介している

CGI

Webブラウザから入力フォームを通して情報を送信すると，その後，Webサーバ側がそれを受け取ることになる．例えばアンケートなどに利用することを考えれば，アンケートページの作成者がその情報を取得できないと意味がない．

Webサーバ側では，次に説明する「CGI」を介して情報を受け取ることが一般的である．

CGIとは

Webサーバ上で何かプログラムを動作させるためのインタフェース

特定のURLで指示される何かのプログラムファイルにアクセスした時に，そのプログラムをWebサーバ上で動作させるための仕組みのこと．Common Gateway Interfaceの略。例えば，

http://どこかのサーバ/なんとか.cgi

のように，拡張子が「.cgi」のものがCGI対応のプログラムファイルであることが多い．この場合「なんとか.cgi」という名前が付けられたプログラムファイルがWebサーバ上で動作し，プログラムされた目的を果たすように動作する．

このプログラムファイルの目的には，通常次のようなものが考えられる．

  • 動的なHTMLファイルの作成 … 「ようこそ●●さん」や「おはよう/こんばんは」などアクセスされた状況によりページの内容をその場で作成するプログラム，あるいは
  • その場で計算・集計した数値の作成 … アクセスカウンタやアンケートの集計，リアルタイムの数値をその場で計算出力するプログラム
  • 画像データの作成 … ユーザに要求された画像や，その場の状況に応じた画像データを出力するプログラム

こうしたCGIプログラムの部品を使って，次のようなサイトを構築することになる．

  • オンラインショッピングサイト　(選択した商品によって合計金額を変更するバスケット機能に必要)
  • 検索サイト (入力したキーワードによって検索結果をその場で作成)

CGI は，実用場面では通常、WWWサーバの背後(バックエンド)に控えているデータベースシステムとの間のやり取りをするためのインタフェースとして動作す る。必要な情報をその場で加工して、要求されたWebページの情報をその瞬間に新たに作り出すことができるようになる。

(注) 本来CGIという言葉そのものは、WWWサーバと、CGIによって起動されたプログラムとの間のインターフェースそのものを指す。このCGIに基づくプロ グラムのことを「CGIプログラム」と呼ぶ。しかし世間では，正確には「CGIプログラムを利用する」と記述すべきところを「CGIを使う」などと略して 表現することも多く，誤解を招いている．

インターフェースとしてのCGIは，具体的に次を定義している．

  • WWWサーバからCGIプログラムへ情報を受け渡す方法1: 環境変数
  • WWWサーバからCGIプログラムへ情報を受け渡す方法2: 標準入力
  • CGIプログラムからWWWサーバへ情報を受け渡す方法: 標準出力

CGIスクリプトとCGIプログラム

CGIで実行されるプログラムは、C言語やJava、Fortran、COBOLなどどんな言語で書かれたものでもよく、そのサーバ上で動作しさえすればよい

特に、スクリプト言語(簡易言語)で書かれたものを「CGIスクリプト」と呼ぶ

CGIプログラム(スクリプト)の拡張子が「.cgi」であるのは，慣習的なもので深い意味はなく，サーバ側の設定によって変更できる．ただし，サーバによって起動できる拡張子をこのように「.cgi」だけに限定しておくことは，セキュリティを確保する上で重要である．

CGI利用上の注意

  • 自作のCGIプログラム(スクリプト)は、そのプログラムを単独で動作させ、動作確認した上でWebページに組み込むこと
  • 万が一、そのCGIプログラムが暴走した場合、Webサーバ自体が暴走することがありうる
  • Webサーバによっては、ユーザのCGI利用自体を制限している所がある
  • Webサーバによって利用できるスクリプト言語が制限されている

日本工大の学生用サーバでは，残念ながら(?)このCGIスクリプトの動作を制限しており，学生は利用することができない状態である．

CGIスクリプトの起動方法

CGIスクリプトを起動させるには、単にCGI用のURLにアクセスすればよい。またHTML中に<a href>を使ってCGIスクリプトのURLへのリンクを張っておけば、ユーザにCGIをあまり意識させることなく、そのCGIへ誘導することができる。

また，先ほど説明した入力フォームの<form action="CGIのURL">もよく使われる。

(参考)CGIスクリプトの作成方法

学生用サーバで，仮にCGIスクリプトが起動できる場合には，次のようにアンケートページと連携することができる．

CGIスクリプトのサンプル

CGIスクリプトを作成するには、上記に示した入力フォームからのデータ入力方法、Webサーバなどシステムプロセスが実行者となる、といった点が通常のプログラム(スクリプト)と異なるだけで、後は普通のプログラム作成と同様である。

ここでは、シェルスクリプトを利用したCGIスクリプトの例を示す。シェルスクリプトについて参照のこと

例1:あるメッセージを表示するだけのCGI

#!/bin/sh
echo Content-type: text/plain
echo

echo "メッセージ"

1行目は、シェルスクリプトとして必要な部分であり，このシェルスクリプトを実行するコマンドシェルを指定している．

2行目以降がスクリプトの本体である．2行目は出力する情報の形式を指定するための出力命令である。ここで指定するものとしては，次のようなものがある．

  • text/plain: ただのテキスト(書式なし)
  • text/html: HTML形式で書かれたテキスト
  • img/gif: gif形式の画像
  • img/jpeg: jpeg形式の画像

3行目は，空メッセージの表示命令である．この空メッセージはブラウザへの指示(HTMLヘッダの送信)が終了したことを意味し、それ以降の出力がページデータの本体であることを指示する。

4行目でメッセージを表示する．

もしも表示するメッセージに日本語が含まれる場合には，作成したCGIスクリプトファイルを保存する際に，文字コードを日本語EUCにする必要がある．例えば秀丸エディタを使用する場合には，「名前を付けて保存」したときに表示されるファイル保存ダイアログで，「文字コード」の中から「日本語(EUC)」及び「改行コード」として「LF」を選択することを忘れないこと．

例2:メッセージを太字で表示するCGI

#!/bin/sh
echo Content-type: text/html
echo

echo "<html>"
echo "<body>"
echo "<b>"
echo "メッセージ"
echo "</b>"
echo "</body>"
echo "</html>"

例1と違って，echo命令の対象がダブルコーテーション「"」で括られている．これは，出力したいHTMLタグに「<」また「>」が含まれているためである．シェルスクリプトでは，「<」と「>」に特別な意味があるため，そのままHTMLタグを出力しようとすると，コマンドの一部だと誤解されてしまう．シェルスクリプトでは，ダブルコーテーションで括られたものは単なる文字列として扱われるため，この例ではダブルコーテーションを使って出力したいメッセージを括る必要がある．

入力フォームとの連携方法

アンケートページは，通常はCGIを利用して入力されたデータを自動処理する．具体的にいえば，自動的に集計作業を行い，結果を表示させる．

入力フォームを使用したページからのCGIスクリプトの呼出方法

<form　METHOD="POST" ACTION="http://どこかのサーバ/なんとか.cgi">

上記の入力フォームは，データが入力されてsubmitボタンを押されると，cgiスクリプト「なんとか.cgi」が「どこかのサーバ」上でプログラムととして実行されることを示している．

このとき，そのCGIスクリプトへ入力フォームにユーザが入力したデータ内容が受けわたされる．

<form　METHOD="GET" ACTION="http://どこかのサーバ/なんとか.cgi">
も同様だが，GETメソッドを指定した場合とPOSTメソッドを指定した場合には，入力データの受け渡し方法に違いがある．

CGIスクリプト側でのデータの受け取り方

CGIスクリプトに受け渡されるデータは，POSTメソッドの場合には「標準入力」として渡される．GETメソッドの場合には「環境変数」として渡される．

標準入力とは，通常はキーボードから入力されたデータのことである．CGIスクリプトの場合には，フォームに書き込まれたデータをあたかもキーボードから入力されたものであるかのように受け取れることを示している．

POSTメソッドによって標準入力から渡されるデータを読み込むには，プログラム中に次のように書く．

read param

これにより，受け取ったデータを変数「param」に格納する．※paramではなく好きな変数名でもよい．

GETメソッドの場合には

param=$QUERY_STRING

GETメソッドではデータが環境変数「QUERY_STRING」に格納されて渡されてくることになっている．それを変数paramに代入することで受取をおこなえる．※「QUERY_STRING」という名前は変更できないが，「param」の方は変更できる．

入力されたデータがCGIスクリプトに受け渡される形式

受け取ったデータは，POSTメソッドGETメソッド両方ともに，項目名=値&次の項目名=値のような形式である．

例えば，先の例に示した変数paramには，次のような中身が代入される.

　　sex=1&birth=12&select=3
「項目名=値」の形

ここで現れる項目名は，入力フォームの側の「<form name=」として設定したものである．また，その値としては入力フォームで「value=」で指定したも のが入ってくる．