roy > naoya > 基礎プログラミングII[月2] > (9)CGI[1]
インターネット上の掲示板では、入力エリアにデータを入力し「OK」を押すと、実際に書き込みが行われる。このようにHTML文書内にデータ入力エリアを配置し、入力後にボタンを押すとあらかじめ定められた処理を行い、結果が表示されるような仕掛けがある。このような仕組みをCGI(Common Gateway Interface)という。
CGIのデータ入力窓の集合を入力フォームという。 以下の入力フォームに値を入力、あるいは選択し「OK」ボタンを押してみよう。
上のフォームで入力もしくは選択された値はCGI変数という特別な変数で、入力結果を処理するプログラムであるCGIスクリプトに送られる。このCGIスクリプトは一般にRubyもしくはPerlという言語で書かれており、何らかの処理を行った結果を、HTML文書として出力する。これを概念的に示すと以下のようになる。
氏名：[公益太郎] 身長：[1][7][0]cm 体重：[0][6][5]kg [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である場合、まず
pan{c10xxxx}% cd public_html[Return]
pan{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="./bmi.rb"> <p class="item">氏名： <input type="text" name="name" maxlength="40"><br> 身長: <select name="height1"> <option> 1</option> <option> 2</option> </select> <select name="height2"> <option> 0</option> <option> 1</option> <option> 2</option> <option> 3</option> <option> 4</option> <option> 5</option> <option> 6</option> <option> 7</option> <option> 8</option> <option> 9</option> </select> <select name="height3"> <option> 0</option> <option> 1</option> <option> 2</option> <option> 3</option> <option> 4</option> <option> 5</option> <option> 6</option> <option> 7</option> <option> 8</option> <option> 9</option> </select>cm 体重：<select name="weight1"> <option> 0</option> <option> 1</option> <option> 2</option> <option> 3</option> </select> <select name="weight2"> <option> 0</option> <option> 1</option> <option> 2</option> <option> 3</option> <option> 4</option> <option> 5</option> <option> 6</option> <option> 7</option> <option> 8</option> <option> 9</option> </select> <select name="weight3"> <option> 0</option> <option> 1</option> <option> 2</option> <option> 3</option> <option> 4</option> <option> 5</option> <option> 6</option> <option> 7</option> <option> 8</option> <option> 9</option> </select>kg<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を使うものとして説明を続ける。
スクリプトの部分は入力データの引渡し先である。このソースを見ると、./bmi.rbとなっており（./は同一ディレクトリをあらわすので）、cgi-binディレクトリの中にあるbmi.rbがデータを受け取って処理をしていることがわかる。
このformの例では、
をそれぞれ受け取り、bmi.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やheight1をkeyとするvalueという形で指定することで取り出すことが可能となる。
例えば
var1 = c["height1"]
とすれば、keyのheight1に対応するvalueがvar1に代入される。
以下は、上記の入力フォームに入力後、HTMLが引き渡すRubyプログラム（bmi.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["height1"]
var2 = c["height2"]
var3 = c["height3"]
var4 = c["weight1"]
var5 = c["weight2"]
var6 = c["weight3"]
height = (100 * var1.to_f + 10 * var2.to_f + var3.to_f) / 100
weight = (100 * var4.to_f + 10 * var5.to_f + var6.to_f)
bmi = weight / (height ** 2)
print"<html>
<head><title>BMI値</title></head>
<body>\n"
print"<h1>#{name}さんのBMI値</h1>\n"
print"<p>身長:#{height}m</p>\n"
print"<p>体重:#{weight}kg</p>\n"
printf("<p>BMI:%3.1f (理想は女性:21.5、男性:22)</p>\n",bmi)
printf("<p>理想体重は%4.1fkgです(男性の場合)。</p>\n",height ** 2 * 22)
printf("<p>理想体重は%4.1fkgです(女性の場合)。</p>\n",height ** 2 * 21.5)
print"</body>\n"
print"</html>\n"
このプログラムの上部では、HTMLより送られた値をname、var1、var2、var3、var4、var5、var6に代入し、height、weight、bmiを計算している。
下部では、結果をHTML形式で出力するために<html>や<body>、<p>などのタグをprintやprintfを使って記述している。プログラムの下部には#{･･･}という記法があるが、{}内には計算式や変数を指定することができる。例えば、
print"10+20は#{10+20}です\n"
とすると{}内の10+20の計算が行なわれ、
10+20は30です
と表示される。また、
x=30
print"10+20は#{x}です\n"
とすると、xに代入された値である30が入れ込まれ、
10+20は30です
と表示される。これらは、いずれもprintfで書き直すことができる。すなわち、
x=30
print"10+20は#{x}です\n"
と
x=30
printf("10+20は%dです\n",x)
の出力結果は同一となる。
CGIを作成するためには幾つかのルールがあった。この点についてまとめよう。
CGI専用ディレクトリの作成
CGIを利用するためのディレクトリcgi-binをpublic_htmlの中に新たに作成する。このためにpublic_htmlディレクトリにcdコマンドで移動してから、ディレクトリ新規作成コマンドのmkdirを使用する。
pan{c10xxxx}% cd public_html[Return]
pan{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="./bmi.rb"> <p class="item">氏名： <input type="text" name="name" maxlength="40"><br> 身長: <select name="height1"> <option> 1</option> <option> 2</option> </select> <select name="height2"> <option> 0</option> <option> 1</option> <option> 2</option> <option> 3</option> <option> 4</option> <option> 5</option> <option> 6</option> <option> 7</option> <option> 8</option> <option> 9</option> </select> <select name="height3"> <option> 0</option> <option> 1</option> <option> 2</option> <option> 3</option> <option> 4</option> <option> 5</option> <option> 6</option> <option> 7</option> <option> 8</option> <option> 9</option> </select>cm 体重：<select name="weight1"> <option> 0</option> <option> 1</option> <option> 2</option> <option> 3</option> </select> <select name="weight2"> <option> 0</option> <option> 1</option> <option> 2</option> <option> 3</option> <option> 4</option> <option> 5</option> <option> 6</option> <option> 7</option> <option> 8</option> <option> 9</option> </select> <select name="weight3"> <option> 0</option> <option> 1</option> <option> 2</option> <option> 3</option> <option> 4</option> <option> 5</option> <option> 6</option> <option> 7</option> <option> 8</option> <option> 9</option> </select>kg<br> <input name="ok" type="submit" value="OK"> <input name="ng" type="reset" value="reset"> </p> </form> </body> </html>
CGIスクリプト（Rubyプログラム）の作成
以下はCGIスクリプトの例である。bmi.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["height1"]
var2 = c["height2"]
var3 = c["height3"]
var4 = c["weight1"]
var5 = c["weight2"]
var6 = c["weight3"]
height = (100 * var1.to_f + 10 * var2.to_f + var3.to_f) / 100
weight = (100 * var4.to_f + 10 * var5.to_f + var6.to_f)
bmi = weight / (height ** 2)
print"<html>
<head><title>BMI値</title></head>
<body>\n"
print"<h1>#{name}さんのBMI値</h1>\n"
print"<p>身長:#{height}m</p>\n"
print"<p>体重:#{weight}kg</p>\n"
printf("<p>BMI:%3.1f (理想は女性:21.5、男性:22)</p>\n",bmi)
printf("<p>理想体重は%4.1fkgです(男性の場合)。</p>\n",height ** 2 * 22)
printf("<p>理想体重は%4.1fkgです(女性の場合)。</p>\n",height ** 2 * 21.5)
print"</body>\n"
print"</html>\n"
CGIスクリプト（Rubyプログラム）への実行属性の付与
保存後には、CGIスクリプトとして実行できるようにするため、ktermで以下を入力する。
pan{c10xxxx]% chmod 755 bmi.rb[Return]もしくは
pan{c10xxxx]% chmod +x bmi.rb[Return]
これら全ての手順を抜け落ちなく実施すると
http://roy.e.koeki-u.ac.jp/~c10xxxx/cgi-bin/form.html
で入力フォームが表示され、適宜入力してOKを押すと何らかの結果が出るはずである。
表示されるエラーメッセージの内容によって、エラー内容を概ね特定することができる。
ブラウザに入力フォームのURLを入力するとNot Foundと表示される。
入力フォームに入力しOKを押すとPermission Deniedと表示される。
入力フォームに入力しOKを押すとInternal Server Errorと表示される。
CGIスクリプト（Rubyプログラム）の書き間違え。具体的には、変数名の入力間違いの可能性が高い。
入力フォームに入力しOKを押すと真っ白な画面になる。
CGIスクリプト（Rubyプログラム）の書き間違え。具体的には、変数名の入力間違いの可能性が高い。
自分でCGIを設置して動作を確認する。
うまく実行できたら、入力フォームのURL（http://roy.e.koeki-u.ac.jp/~学籍番号/cgi-bin/form.html）と、次週以降に、CGIで作成してみたいページについて報告する。
出席点は2点。提出要領は下記の通り。
Tips：emacsでの日本語入力のオンオフはCtrl-oです
Tips：Mewによるメールの送り方はMewコマンドを参照