roy > naoya > 基礎プログラミングII・情報表現[月1] > (10)CGI[2]
入力フォームを作成する場合、まずform要素を使用する。<form></form>の間にラジオボタンや入力フィールドを配置し、<form>内に指定した方法でCGIスクリプトに引き渡す。
form要素については既に説明済みであるが、念のため再掲する。
<form method="メソッド" action="./スクリプト"> </form>
となる。メソッドの部分はGETまたはPOSTのどちらかを指定する。GETは最大で255文字までしか送ることができない（今回は名前と商品の購入数があるが、これらを全て含めて255文字）。項目数が多い場合や長い文章を入力させる場合はPOSTを指定する。ここではPOSTを使うものとして説明を続ける。
スクリプトの部分は入力データの引渡し先である。このソースを見ると、./kakaku.rbとなっており（./は同一ディレクトリをあらわすので）、cgi-binディレクトリの中にあるkakaku.rbがデータを受け取って処理をしていることがわかる。
<form></form>の間に配置するフォームの構成部品について、まずは外観を示し、その後説明を加える。
1行のテキスト入力フィールド：
チェックボックス（複数選択可）：
ラジオボタン（ひとつのみ選択可）：
プルダウンメニュー：
送信ボタン：
リセットボタン：
これらの構成部品はinput要素、textarea要素、select要素を用いて作成することができる。textarea要素は複数行のテキスト入力フィールドの作成に用い、select要素はプルダウンメニューの作成に用いる。それ以外の部品は全てinput要素で作成し、type属性で区別する。
部品名 |
要素名 |
type属性 |
|---|---|---|
1行のテキスト入力フィールド |
input |
text |
チェックボックス |
input |
checkbox |
ラジオボタン |
input |
radio |
複数行のテキスト入力フィールド |
textarea |
不要 |
プルダウンメニュー |
select |
不要（選択肢はoption属性を使用） |
送信ボタン |
input |
submit |
リセットボタン |
input |
reset |
input要素を利用し、type属性としてtextを指定する。
<input type="text" name="namae" size="40" maxlength="40">
maxlength属性を5とすると入力できる文字数が最大5文字となる。
size属性を5とすると入力フィールドの幅が狭くなる。
input要素を利用し、type属性としてcheckboxを指定する。
<input type="checkbox" name="cbx" value="1">チキンカレー
チキンカレー
3つ目のチェックボックスのみchecked="checked"を追加
チキンカレー
シーフードカレー
野菜カレー
input要素を利用し、type属性としてradioを指定する。
<input type="radio" name="rd" value="20代">20代
20代
3つ目のチェックボックスのみchecked="checked"を追加
20代
30代
40代
左側はname属性をいずれもageとした場合（1つしか選択できない）。右側はname属性を順番にage1、age2、age3とした場合（3つとも選択できてしまう）。
20代
30代
40代
20代
30代
40代
textarea要素を利用する。type属性は不要。
<textarea rows="3" cols="30" name="youbou"></textarea>
rowsを2、colsを10にした場合
<textarea></textarea>間に「感想をお願いします」と入れた場合
select要素を利用する。各選択肢にはoption要素を利用する。type属性は不要。
<select name="age">
<option>10代</option>
<option>20代</option>
<option>30代</option>
<option>40代</option>
<option>50代</option>
</select>
select要素にsize属性で、size="3"と指定した場合
input要素を利用し、type属性としてsubmitを指定する。
<input name="ok" type="submit" value="OK">
value属性を「送信する」にした場合
input要素を利用し、type属性としてresetを指定する。
<input name="ng" type="reset" value="reset">
value属性を「やっぱりやめる」にした場合
先週は入力した値に基づいて計算を行い、結果を表示するCGIスクリプトについて見てきた。今週は一歩進んで、入力した値により出力を切り替える例を作成してみよう。つまりif文を用いて結果を切り替える。
今回はラジオボタン（これ→）やチェックボックス（これ→）が追加されている。上述の通りこれらのパーツはいずれもいずれもinput要素で作成できる。パーツの使い分けはtype属性で指定している。
この入力フォームは実際には以下のように書かれている（入力フォームの部分のみ）。
<form method="POST" action="./shinri.rb"> <p class="item">氏名： <input type="text" name="name" maxlength="40"><br> 性別： <input type="radio" name="rd" value="男性">男性 <input type="radio" name="rd" value="女性">女性 <input type="radio" name="rd" value="不明">どちらでもない<br> 以下の各項目について当てはまるものに全てチェックをつけてください。<br> <input type="checkbox" name="box1" value="1"> いろいろ勉強して自分を深めたい<br> <input type="checkbox" name="box2" value="1"> 社会に出て成功したいと思う<br> <input type="checkbox" name="box3" value="1"> いつも何か目標を持っている<br> <input type="checkbox" name="box4" value="1"> 手がけたことは最善を尽くしたい<br> <input name="ok" type="submit" value="OK"> <input name="ng" type="reset" value="reset"> </p> </form>
shinri.htmlのform要素のaction属性を見ると、入力データをshinri.rbに引き渡していることが分かる。shinri.rbは入力データを受け取り、処理をして結果のHTML文書を出力するCGIスクリプトである。前回のkakaku.rbと同じく、変数cのハッシュ値として入力値を取り出しているが、if文が追加されているため若干構造が複雑になっている。このプログラムではチェックをした項目数に応じてif文でメッセージを変化させている。
shinri.rb
#!/usr/bin/env ruby
require 'cgi'
c = CGI.new("html4")
print "Content-type: text/html; charset=EUC-JP\n\n"
namae = c["name"]
seibetsu = c["rd"]
q1 = c["box1"]
q2 = c["box2"]
q3 = c["box3"]
q4 = c["box4"]
point = q1.to_i + q2.to_i + q3.to_i + q4.to_i
print "<html>
<head><title>診断結果</title></head>
<body>\n"
print "<h1>#{namae}さん(#{seibetsu})の診断結果</h1>\n"
print "<p>あなたがチェックをした項目数は#{point}個です。</p>\n"
print "<p>"
if point == 4
print "やる気満々ですね。このまま頑張って!\n"
elsif point == 3
print "結構頑張り屋さんですねえ。この調子で。\n"
elsif point == 2
print "うーん。まあまあですかねえ\n"
elsif point == 1
print "うーん。うーん。もうちょっとやる気見せましょう。\n"
else
print "やる気ないですね。\n"
end
print "</p>\n"
print "</body>\n"
print "</html>\n"
shinri.htmlでは4つのチェックボックスが設置されており、チェックした数に応じて異なるメッセージが表示されるようCGIスクリプトが書かれている。チェックボックスをあと2つ追加し（=shinri.htmlを改良し）、チェックした項目数に応じて異なるメッセージが表示されるように変更してみよう（=shinri.rbを改良する）。
うまく実行できたら、入力フォームURL（http://roy.e.koeki-u.ac.jp/~学籍番号/cgi-bin/shinri.html）を報告する。
制限時間は授業中に指示する。出席点は2点。提出要領は下記の通り。
Tips：emacsでの日本語入力のオンオフはCtrl-oです
Tips：Mewによるメールの送り方はMewコマンドを参照
次回から自由課題実施期間となる。これまで学んできたことを駆使してグループごとにプログラムを作成する。今回は、他の先生のクラスとの整合性を保つため、グループ分けは座席順（縦の列）に行う。人数は5〜6人。当日欠席した場合は、公欠でない限り、事後にどこかのグループに追加で所属することは認めないので注意すること。自由課題の2回目以降から出席した人は、同じ境遇にある人同士でグループを作ってもらいます。
問題（10点満点）：CGIを使って自由に何かを作成する。10点満点だが、単に授業用のページ（他の先生も含む）に掲載されているものを複写し、多少言葉を変えただけの場合はプログラム点の配点を最低点とする。
Tips：emacsでの日本語入力のオンオフはCtrl-oです
Tips：ktermでのプログラムの実行結果をメールに貼り付けるには、コピーしたい箇所をマウスで選択し、emacs（Mew）上でマウスの真ん中ボタンをクリックする
Tips：Mewによるメールの送り方はMewコマンドを参照