roy > naoya > 基礎プログラミングII[月2] > (9)CGI[1]
インターネット上の掲示板では、入力エリアにデータを入力し「OK」を押すと、実際に書き込みが行われる。このようにHTML文書内にデータ入力エリアを配置し、適宜入力した上でボタンを押すとあらかじめ定められた処理を行い、結果が表示されるような仕掛けがある。このような仕組みをCGI(Common Gateway Interface)という。
CGIのデータ入力窓の集合を入力フォームという。 以下の入力フォームに値を入力、あるいは選択し「OK」ボタンを押してみよう。
上のフォームで入力もしくは選択された値はCGI変数という特別な変数でCGIスクリプトに送られる。このCGIスクリプトがRubyもしくはPerlという言語で書かれており、そこに書かれた内容に応じて何らかの処理を行い、結果を示すHTML文書を出力する。これを概念的に示すと以下のようになる。
氏名：[山田太郎] 個数を選択： 鉛 筆（100円）：[2] 消しゴム（100円）：[1] ノート （150円）：[0] ファイル（300円）：[3] 蛍光ペン（120円）：[2] [OK][reset] |
→ |
Ruby（Perl）プログラムが値を受け取り、何らかの処理を実行すると同時に、結果出力用のHTML文書を生成する。 |
→ |
<html> <head> <title>結果！</head> </head> <body> <p>うんたら</p> </body> </html> |
CGIは以下の3つのファイルにより構成される。
CGIを構成する3つのファイル
CGIを構成するファイルのうち「入力したデータを受け取って処理をするプログラム」がRubyのプログラムに相当する。
通常は、Rubyプログラムは自分で作成したruby/などのディレクトリに保存していたが、Web上でプログラムを実行させるためには、putlic_htmlの中にプログラムのファイルを置く。htmlファイルと同様に、ブラウザから閲覧させたいファイルは全てpublic_htmlのディレクトリ内に置いておかなければならない。
ここでは、CGIを利用するためのディレクトリをpublic_htmlの中に新たに作成し、CGI関連のファイルは全てその中に保存しておくことにする。
仮に、作成するディレクトリがcgi-binである場合、まず
irsv{c10xxxx}% cd public_html[Return]
irsv{c10xxxx}% mkdir cgi-bin[Return]
というように、mkdirコマンドでcgi-binというディレクトリを作成する。
次に、「このディレクトリ内でCGIを利用する」という宣言を行う。具体的にはcgi-binのディレクトリ内に.htaccessという名前のファイルを作成する（先頭のドットを忘れない！）。
このファイルを作成するためには、emacsでFile:~/public_html/cgi-bin/.htaccess[Return]とすればよい。ファイルを新規作成したら、以下の内容を記述して保存する。
AddHandler cgi-script .rb Options +ExecCGI
これにより、以後このディレクトリに作成する.rbの拡張子を持つファイルは、全てCGIスクリプトと認識される
CGIプログラムの利用宣言
HTML言語を使用したWebページの記述方法については、1年生の情報リテラシーIIで実施済みであるが、入力フォームの作成は多少複雑である。ここでは入力フォームの作り方について確認する。HTML自体に不安がある場合は情報リテラシーIIのページを確認しよう。
冒頭で示した入力フォームとそのソースを見てみよう（form.html）。
<html> <head><title>購入ページ</title></head> <body> <form method="POST" action="./kakaku.rb"> <p class="item">氏名： <input type="text" name="name" maxlength="40"><br> 個数を選択：<br> 鉛 筆（100円）：<select name="pencil"> <option> 0 <option> 1 <option> 2 <option> 3 </select><br> 消しゴム（100円）：<select name="eraser"> <option> 0 <option> 1 <option> 2 <option> 3 </select><br> ノート （150円）：<select name="note"> <option> 0 <option> 1 <option> 2 <option> 3 </select><br> ファイル（300円）：<select name="file"> <option> 0 <option> 1 <option> 2 <option> 3 </select><br> 蛍光ペン（120円）：<select name="pen"> <option> 0 <option> 1 <option> 2 <option> 3 </select><br> <input name="ok" type="submit" value="OK"> <input name="ng" type="reset" value="reset"> </p> </form> </body> </html>
ソースを見ると、入力フォームは、form要素（<form>タグ）を使って書かれていることがわかる。form要素の基本構造は
<form method="メソッド" action="./スクリプト"> </form>
となる。メソッドの部分はGETまたはPOSTのどちらかを指定する。GETは最大で255文字までしか送ることができない（今回は名前と商品の購入数があるが、これらを全て含めて255文字）。項目数が多い場合や長い文章を入力させる場合はPOSTを指定する。ここではPOSTを使うものとして説明を続ける。
スクリプトの部分は入力データの引渡し先である。このソースを見ると、./kakaku.rbとなっており（./は同一ディレクトリをあらわすので）、cgi-binディレクトリの中にあるkakaku.rbがデータを受け取って処理をしていることがわかる。
このformの例では、
をそれぞれ受け取り、kakaku.rbに引き渡していることがわかる。入力フォームに用いる部品の詳細については次週とりあげる。
データ入力用のHTML文書
CGIスクリプトとなるRubyプログラムでは、冒頭で必ず以下を記述する。
#!/usr/bin/env ruby
require 'cgi'
c = CGI.new("html4")
print "Content-type: text/html; charset=EUC-JP\n\n"
1行目は必ず記述するおまじないであるが、CGIスクリプトを書く場合は通常とは異なるので注意しよう。
c = CGI.new("html4")で、HTMLの入力フォームから引き渡された値が、変数cにハッシュ値として代入される。変数cはどんな名前にしても構わない。
cにハッシュ値として代入されていることから、各入力値を取り出すためには、HTMLが引き渡す際に設定したnameやpencilをkeyとするvalueという形で指定すればよい。
例えば
var1 = c["pencil"]
とすれば、keyのpencilに対応するvalueがvar1に代入される。
以下は、上記の入力フォームに入力後、HTMLが引き渡すRubyプログラム（kakaku.rb)である。
注意
#!/usr/bin/env ruby
require 'cgi'
c = CGI.new("html4")
print "Content-type: text/html; charset=EUC-JP\n\n"
name = c["name"]
var1 = c["pencil"]
var2 = c["eraser"]
var3 = c["note"]
var4 = c["file"]
var5 = c["pen"]
sum1 = 100 * var1.to_i
sum2 = 100 * var2.to_i
sum3 = 150 * var3.to_i
sum4 = 300 * var4.to_i
sum5 = 120 * var5.to_i
sum = (sum1 + sum2 + sum3 + sum4 + sum5) * 1.05
print "<html>
<head><title>お会計</title></head>
<body>\n"
print "<h1>#{name}さんのお会計</h1>\n"
print "<p>鉛 筆が#{var1}個で#{sum1}円</p>\n"
print "<p>消しゴムが#{var2}個で#{sum2}円</p>\n"
print "<p>ノート が#{var3}個で#{sum3}円</p>\n"
print "<p>ファイルが#{var4}個で#{sum4}円</p>\n"
print "<p>蛍光ペンが#{var5}個で#{sum5}円</p>\n"
print "<p>税込み合計で#{sum.to_i}円です。</p>\n"
print "</body>\n"
print "</html>\n"
このプログラムでは、上半分でHTMLより送られた値をname、var1、var2、var3、var4、var5、var6に代入し、sum1〜sum5、sumを計算している。
下半分では、結果をHTML形式で出力するために<html>や<body>、<p>などのタグをprintを使って記述している。
プログラムの下部にある#{･･･}という記法は、その部分をRubyの式をしてその値に置き換える働きを持つ。例えば、
print "10+20は#{10+20}です\n"
とすると
10+20は30です
と表示される。また、
x=30
print "10+20は#{x}です\n"
とすると
10+20は30です
と表示される。
CGIを作成するためには幾つかのルールがあった。この点についてまとめよう。
CGI専用ディレクトリの作成
CGIを利用するためのディレクトリcgi-binをpublic_htmlの中に新たに作成する。このためにpublic_htmlディレクトリにcdコマンドで移動してから、ディレクトリ新規作成コマンドのmkdirを使用する。
irsv{c10xxxx}% cd public_html[Return]
irsv{c10xxxx}% mkdir cgi-bin[Return]
.htaccessの作成
.htaccessの記述内容は以下の通り。emacsで作成する際に、File:~/public_html/cgi-bin/.htaccessとする。以下の2行を記述して保存する。
AddHandler cgi-script .rb Options +ExecCGI
入力フォームのHTMLファイルの作成
emacsで~/public_html/cgi-bin/の中にform.htmlを新規作成し、以下をコピーして貼り付け保存（字が小さいが上で示したものと同じ）。
<html> <head><title>購入ページ</title></head> <body> <form method="POST" action="./kakaku.rb"> <p class="item">氏名： <input type="text" name="name" maxlength="40"><br> 個数を選択：<br> 鉛 筆（100円）：<select name="pencil"> <option> 0 <option> 1 <option> 2 <option> 3 </select><br> 消しゴム（100円）：<select name="eraser"> <option> 0 <option> 1 <option> 2 <option> 3 </select><br> ノート （150円）：<select name="note"> <option> 0 <option> 1 <option> 2 <option> 3 </select><br> ファイル（300円）：<select name="file"> <option> 0 <option> 1 <option> 2 <option> 3 </select><br> 蛍光ペン（120円）：<select name="pen"> <option> 0 <option> 1 <option> 2 <option> 3 </select><br> <input name="ok" type="submit" value="OK"> <input name="ng" type="reset" value="reset"> </p> </form> </body> </html>
CGIスクリプト（Rubyプログラム）の作成
以下はCGIスクリプトの例である。kakaku.rbという名前をつけて保存する。cgi-binの中に保存するため、emacsで新規作成する場合、File:~/public_html/cgi-bin/kakaku.rbとする（字が小さいが上で示したものと同じ）。
#!/usr/bin/env ruby
require 'cgi'
c = CGI.new("html4")
print "Content-type: text/html; charset=EUC-JP\n\n"
name = c["name"]
var1 = c["pencil"]
var2 = c["eraser"]
var3 = c["note"]
var4 = c["file"]
var5 = c["pen"]
sum1 = 100 * var1.to_i
sum2 = 100 * var2.to_i
sum3 = 150 * var3.to_i
sum4 = 300 * var4.to_i
sum5 = 120 * var5.to_i
sum = (sum1 + sum2 + sum3 + sum4 + sum5) * 1.05
print "<html>
<head><title>お会計</title></head>
<body>\n"
print "<h1>#{name}さんのお会計</h1>\n"
print "<p>鉛 筆が#{var1}個で#{sum1}円</p>\n"
print "<p>消しゴムが#{var2}個で#{sum2}円</p>\n"
print "<p>ノート が#{var3}個で#{sum3}円</p>\n"
print "<p>ファイルが#{var4}個で#{sum4}円</p>\n"
print "<p>蛍光ペンが#{var5}個で#{sum5}円</p>\n"
print "<p>税込み合計で#{sum.to_i}円です。</p>\n"
print "</body>\n"
print "</html>\n"
CGIスクリプト（Rubyプログラム）への実行属性の付与
保存後には、CGIスクリプトとして実行できるようにするため、ktermで以下を入力する。
irsv{c10xxxx]% chmod 755 kakaku.rb[Return]もしくは
irsv{c10xxxx]% chmod +x kakaku.rb[Return]
これら全ての手順を抜け落ちなく実施すると
http://roy.e.koeki-u.ac.jp/~c10xxxx/cgi-bin/form.html
で入力フォームが表示され、適宜入力してOKを押すと何らかの結果が出るはずである。
表示されるエラーメッセージの内容によって、エラー内容を概ね特定することができる。
ブラウザに入力フォームのURLを入力するとNot Foundと表示される。
URLが間違っている。URLはhttp://roy.e.koeki-u.ac.jp/~c10xxxx/cgi-bin/yyyy.htmlとなる。xxxxは自分の学籍番号（チェックディジットなし）、yyyは作成した入力フォームのファイル名となる。
上記の通り正しく入力している場合は、入力フォームのファイルを保存した場所がそもそも間違っている。ktermでcgi-binのディレクトリに移動し、lsを入力して作成したファイルがあるかどうか確認する。
入力フォームに入力しOKを押すとPermission Deniedと表示される。
.htaccessファイルを作成していない。作成したが保存できていない。
もしくは、CGIスクリプト（Rubyプログラム）に実行属性を付与していない。
入力フォームに入力しOKを押すとInternal Server Errorと表示される。
CGIスクリプト（Rubyプログラム）の書き間違え。変数名の入力間違いがないか確認しよう。
入力フォームに入力しOKを押すと真っ白な画面になる。
CGIスクリプト（Rubyプログラム）の書き間違え。変数名の入力間違いがないか確認しよう。
自分でCGIを設置して動作を確認する。
うまく実行できたら、入力フォームURL（http://roy.e.koeki-u.ac.jp/~学籍番号/cgi-bin/form.html）を報告する。
制限時間は10分程度。出席点は2点。提出要領は下記の通り。
Tips：emacsでの日本語入力のオンオフはCtrl-oです
Tips：Mewによるメールの送り方はMewコマンドを参照