roy > naoya > 基礎プログラミングII > (10)自由課題実施期間[1]補足

(10) 12/10の授業内容:自由課題実施期間[1]補足

複雑なCGI

複数ページを1つのプログラムで作る

次のCGIを試してみよう。

迷路から脱出せよ

これは迷路の中を進んでゴールにたどり着くゲームの簡略版である。何度も進路を選択して進んでいき、最終的にゴールにたどり着くが、このようなページは単一のプログラムで書くことができる。プログラムを見てみよう。

#!/usr/bin/env ruby
# coding: utf-8

require 'cgi'
c = CGI.new(:accept_charset => "UTF-8")
print "Content-type: text/html; charset=UTF-8\n\n"

number = c["rd"]

if number == ""  #初回起動時のみ
 number = "1"    #numberに"1"を代入
end

if number != "7" #numberが"7"以外の場合は（7はゴール）

 print"<html><head><title>クイズ</title></head><body>\n"
 #formタグやOKボタンは1つで共用
 print"<form method=\"POST\" action=\"./sample.rb\">\n"
 if number == "1"
   print"<p>どっちへ進む？</p>\n"
   print"<input type=\"radio\" name=\"rd\" value=\"2\">右\n"
   print"<input type=\"radio\" name=\"rd\" value=\"3\">左\n"
   print"<input type=\"radio\" name=\"rd\" value=\"4\">前\n"
   print"<input type=\"radio\" name=\"rd\" value=\"5\">上\n"
 elsif number == "2"
   print"<p>さてどうしよう</p>\n"
   print"<input type=\"radio\" name=\"rd\" value=\"3\">右\n"
   print"<input type=\"radio\" name=\"rd\" value=\"4\">左\n"
   print"<input type=\"radio\" name=\"rd\" value=\"5\">前\n"
   print"<input type=\"radio\" name=\"rd\" value=\"6\">上\n"
 elsif number == "3"
   print"<p>だんだんわからなくなってきたぞ。次はどうする？</p>\n"
   print"<input type=\"radio\" name=\"rd\" value=\"1\">右\n"
   print"<input type=\"radio\" name=\"rd\" value=\"4\">左\n"
   print"<input type=\"radio\" name=\"rd\" value=\"2\">前\n"
   print"<input type=\"radio\" name=\"rd\" value=\"5\">上\n"
 elsif number == "4"
   print"<p>ゴールが近づいてきたような気がする</p>\n"
   print"<input type=\"radio\" name=\"rd\" value=\"2\">右\n"
   print"<input type=\"radio\" name=\"rd\" value=\"1\">左\n"
   print"<input type=\"radio\" name=\"rd\" value=\"4\">前\n"
   print"<input type=\"radio\" name=\"rd\" value=\"7\">上\n"
 elsif number == "5"
   print"<p>だめだどこにいるかわからない</p>\n"
   print"<input type=\"radio\" name=\"rd\" value=\"4\">右\n"
   print"<input type=\"radio\" name=\"rd\" value=\"2\">左\n"
   print"<input type=\"radio\" name=\"rd\" value=\"6\">前\n"
   print"<input type=\"radio\" name=\"rd\" value=\"1\">上\n"
 elsif number == "6"
   print"<p>ここはどこだろう</p>\n"
   print"<input type=\"radio\" name=\"rd\" value=\"3\">右\n"
   print"<input type=\"radio\" name=\"rd\" value=\"4\">左\n"
   print"<input type=\"radio\" name=\"rd\" value=\"5\">前\n"
   print"<input type=\"radio\" name=\"rd\" value=\"2\">上\n"
 end

 print"<input name=\"ok\" type=\"submit\" value=\"送信\">\n"
 print"<input name=\"ng\" type=\"reset\" value=\"リセット\">\n"
 print"</form>\n"
else
 print"<p>おめでとう！　ゴールです</p>\n"
end
print "</body>\n"
print "</html>\n"

選択したラジオボタンのvalueの値に応じて、if文で異なるメッセージが表示されるようになっている。

値を次の次に引き渡す

5問のクイズを1ページに1つずつ出題する場合、最初の問題や2つ目の問題に対する回答を最終ページに持ち越すことは通常はできない。しかし、<input type="hidden">を使うと持ち越すことができる。

次の次のページにデータを引き渡す

#!/usr/bin/env ruby
# coding: utf-8

require 'cgi'
c = CGI.new(:accept_charset => "UTF-8")
print "Content-type: text/html; charset=UTF-8\n\n"


data = c["rd"]
hoge = c["dat"]

hoge << data      #直前に選んだデータをhogeに追加

hogehoge = hoge.split(",")  #hoge内のデータを,ごとに配列に分割


print"<html><head><title>好きな果物</title></head><body>\n"


print"<form method=\"POST\" action=\"./sample2.rb\">\n"
print"<p>ひとつ選択</p>\n"
print"<input type=\"radio\" name=\"rd\" value=\"りんご,\">りんご\n"
print"<input type=\"radio\" name=\"rd\" value=\"バナナ,\">バナナ\n"
print"<input type=\"radio\" name=\"rd\" value=\"みかん,\">みかん\n"
print"<input type=\"hidden\" name=\"dat\" value=\"#{hoge}\"><br>\n"
    #type="hidden"で入力パーツを表示せず、hogeをプログラムに引き渡す
print"<input name=\"ok\" type=\"submit\" value=\"送信\">\n"
print"<input name=\"ng\" type=\"reset\" value=\"リセット\">\n"
print"</form>\n"


print"<p>選んだもの</p>"
for i in hogehoge
  printf("<p>%s</p>",i)
end



print "</body>\n"
print "</html>\n"

print"<input type=\"hidden\" name=\"dat\" value=\"#{hoge}\"><br>\n"の部分で、typeをhiddenとしているため入力用のパーツは何も表示させずに、データをプログラムに引き渡すことができる（ここではkeyがdat、valueを変数hoge）。

splitメソッドは変数.split(区切り)という形式で用いることで区切りの位置で変数内の値を区切って配列に変換することができる。今回のケースでは、hogeは通常変数であり、この変数内には"りんご,バナナ,バナナ,みかん"のように文字列が,を挟んで合体したような形で代入されている。これをsplitメソッドを使ってカンマの位置で切ることで、hogehogeは["りんご","バナナ","バナナ","みかん"]のようになる。なお変数hogeで各果物の間にカンマがついているのはラジオボタンのvalueの部分でvalue=\"バナナ,\"のようにカンマをつけているためである。