第 9 回 CGI ことえらび レポート課題
氏名: 土門千里
学籍番号: c1111122
語学クラス: 英語5
コース: 政策マネジメント
1. 筆記問題
A.
ラジオボタンとは、複数の選択肢の中から一つだけしか選択できないものである。
そのため、ラジオボタンでは選択肢の中から複数の選択をすることが出来ない。
html 文章に input type ="radio" と書き込むことによってラジオボタンとして
選択肢が表示されるようになる。
ラジオボタンの仕組みについて説明するため、cgi_radio.html と cgi_radio.rb
を用いる。
1) 作成した html 文章 (cgi_radio.html)
商品注文ページ
商品注文ページ
2) 作成したプログラム (cgi_radio.rb)
#!/usr/bin/env ruby
# coding: euc-jp
require 'cgi' # CGI を使う宣言をする
product = CGI.new(:accept_charset => "EUC-JP") # 日本語で入力されたデータを受け取る
print("Content-type: text/html; charset = EUC-JP\n\n") # 日本語でデータを書き出す
# product は CGI変数にあたる
select = product["goods"] # select は変数
# 入力されたデータが入る
print("\n") # print 文で html 文章を出力
print("\n")
print("商品注文ページ\n")
print("\n")
print("\n")
print("商品注文ページ
\n")
printf("選択商品: %s
\n", select)
print("\n")
print("\n")
3) 実行結果
a. 商品A を選択した場合
商品注文ページ
商品注文ページ
選択商品: 商品A
b. 商品B を選択した場合
商品注文ページ
商品注文ページ
選択商品: 商品B
c. 商品C を選択した場合
商品注文ページ
商品注文ページ
選択商品: 商品C
4) 考察
商品A、商品B、商品C のいずれか一つを選んだ場合でも、選択したデータがプロ
グラムに送信されてそのデータが反映されたためプログラムは正しく動いている
といえる。
また、この実行によってラジオボタンの選択方式では複数を選択することが出来
ないということが分かった。他のものを選択すると前に選択したチェックが消え
てしまうために、ラジオボタンでは一つのものしか選択をすることが出来ない。
B.
チェックボックスとは、選択肢から複数を選択することができる選択方式であり、
その点がラジオボタンとの大きな違いであり特長でもある。ラジオボタンのよう
に、新たに選択することによって前に選択したものチェックが消えることが無く、
追加的に選択することができる方法である。input type ="checkbox" と html
文章に書き込むことでチェックボックスとして表示されるようになる。
チェックボックスの仕組みについて説明するため、cgi_checkbox.html と
cgi_checkbox.rbを用いる。
1) 作成した html 文章 (cgi_checkbox.html)
商品注文ページ
商品注文ページ
2) 作成したプログラム (cgi_checkbox.rb)
#!/usr/bin/env ruby
# coding: euc-jp
require 'cgi'
cgi = CGI.new(:accept_charset => "EUC-JP") # 日本語で入力されたデータを受け取る
print("Content-type: text/html; charset=EUC-JP\n\n") # 日本語でデータを書き出す
# cgi は CGI変数にあたる
goods = Array.new # goods は変数
goods[0] = cgi["goods_a"] # 商品A のデータを取り入れる
goods[1] = cgi["goods_b"] # 商品B のデータを取り入れる
goods[2] = cgi["goods_c"] # 商品C のデータを取り入れる
print("\n") # print 文で html 文章を出力
print("\n")
print("商品注文ページ\n")
print("\n")
print("\n")
print("商品注文ページ
\n")
print("注文商品一覧\n")
print("")
for select in goods # 商品の中から幾つ選択されたのか
printf("| %s |
", select) # 取りこまれたデータを処理し、出力する
end # for の終了
print("
")
print("\n")
print("\n")
3) 実行結果
a. 商品を 1 つだけ選択した場合
商品注文ページ
商品注文ページ
注文商品一覧
b. 商品を 2 つ選択した場合
商品注文ページ
商品注文ページ
注文商品一覧
c. 商品を 3 つ選択した場合
商品注文ページ
商品注文ページ
注文商品一覧
4) 考察
商品の数が 1 個、2 個、3 個の場合であっても、選択したデータが正しくプロ
グラムに送信され出力されていたためプログラムは正しく動いているといえる。
また、このプログラムの実行によって、ラジオボタンとは違い、選択肢の中から
複数のものを選択できるということが分かった。
C.
猫のキャラクター
首に付けてるのは蝶ネクタイのつもりです。
2. プログラム問題
B と D を選択した。
URL: http://roy/~c111112/rubycgi/fork_c111112.html
B.
URL: http://roy/~c111112/rubycgi/cgi_calc.html
a) 考えた設定
計算プログラム。入力されたデータを元に、足す、引く、掛ける、割る といっ
た計算をしてくれるプログラム。
工夫した点は、数字を入力し忘れた場合には忠告文を表示させるようにしたこと
である。こうすることによって、入力し忘れていたことを知ることが出来る。
b) 作成した HTML 文章 (cgi_calc.html)
計算プログラム
計算プログラム
c) 作成したプログラム (cgi_calc.rb)
#!/usr/bin/env ruby
# coding: euc-jp
require 'cgi' # CGI を使うことを宣言する
calculation = CGI.new(:accept_charset => "EUC-JP") # 日本語でデータを読み込む
print("Content-type: text/html; charset=EUC-JP\n\n") # 日本語でデータを出力する
select = calculation["calc"] # 計算方法をしまう変数
number_1 = calculation["text_1"] # 入力された数字(1) をしまう変数
number_2 = calculation["text_2"] # 入力された数字(2) をしまう変数
print("\n") # html 文で出力する
print("\n")
print("計算プログラム\n")
print("\n")
print("\n")
print("計算プログラム
\n")
if number_1 == "" # もしも、数字(1) にデータが入力されなかったら
print("数字を入力して下さい。
\n") # この文章が表示される
elsif number_2 == "" # もしも、数字(1) にデータが入力されなかっらた
print("数字を入力して下さい。
\n") # この文章が表示される
else # どちらにもデータが入力された場合
printf("%d %s %d の計算結果は...
\n", number_1, select, number_2) # 計算式の表示
if select == "＋" # 計算方法 : 足し算を選択した場合
result = number_1.to_i + number_2.to_i # 数字(1) と 数字(2) を足す
printf("%d でした。
\n", result) # 計算結果の表示
elsif select == "−" # 計算方法 : 引き算を選択した場合
result = number_1.to_i - number_2.to_i # 数字(1) から 数字(2) を引く
printf("%d でした。
\n", result) # 計算結果の表示
elsif select == "×" # 計算方法 : 掛け算を選択した場合
result = number_1.to_i * number_2.to_i # 数字(1) と 数字(2) を掛ける
printf("%d でした。
\n", result) # 計算結果の表示
else # 計算方法 : 割り算を選んだ場合
result = number_1.to_f / number_2.to_f # 数字(1) を 数字(2) で割る
printf("%3.1f でした。
\n", result) # 計算結果の表示
end # if の終了
end # if の終了
print("\n")
print("\n")
d) 作成した style.css
body {
background-color: #008B8B;
}
h1 {
background-color: #ffffff;
color: #151515;
font-size: xx-large;
color: #090909;
text-align:center;
}
p {
font-size: middle;
color: #151515;
margin: 0px 0px 0px 0px;
text-align:center;
}
e) 実行した結果
1) 足し算を選んだ結果
計算プログラム
計算プログラム
1 ＋ 3 の計算結果は...
4 でした。
2) 引き算を選んだ結果
計算プログラム
計算プログラム
1 − 3 の計算結果は...
-2 でした。
3) 掛け算を選んだ結果
計算プログラム
計算プログラム
1 × 3 の計算結果は...
3 でした。
4) 割り算を選んだ結果
計算プログラム
計算プログラム
1 ÷ 3 の計算結果は...
0.3 でした。
5) 数字を入力し忘れた結果
計算プログラム
計算プログラム
数字を入力して下さい。
f) 考察
1) 足し算を選んだ結果
・bc -l による計算結果
pan{DOMON Chisato}% bc -l [~]
1 + 3
4
quit
bc -l による計算結果と、プログラムによる計算結果があったため、プログラム
は正しく動いているといえる。
2) 引き算を選んだ結果
・bc -l による計算結果
pan{c111112}% bc -l [~]
1 - 3
-2
quit
bc -l による計算結果と、プログラムによる計算結果があったため、プログラム
は正しく動いているといえる。また、計算結果がマイナスになる場合でも、正し
い答えを出すことが出来ることが分かった。
3) 掛け算を選んだ結果
・bc -l による計算結果
pan{c111112}% bc -l [~]
1 * 3
3
quit
bc -l による計算結果と、プログラムによる計算結果があったため、プログラム
は正しく動いているといえる。
4) 割り算を選んだ結果
・bc -l による計算結果
pan{c111112}% bc -l [~]
1 / 3
.33333333333333333333
quit
bc -l による計算結果と、プログラムによる計算結果があったため、プログラム
は正しく動いているといえる。ただし、改善点として、小数点第2以下の計算結
果も表示できるように改良して行く必要があると感じる。
5) 数字を入力し忘れた結果
数字を入力し忘れた際に表示される文章が出たため、プログラムは正しく動いて
いるといえる。
D.
URL: http://roy/~c111112/rubycgi/cgi_color.html
a) 考えた設定
選択する色によって、結果が表示されるページの背景色が変化するプログラム。
b) 作成した HTML 文章 (cgi_color.html)
CSSカラー作成プログラム
CSSカラー作成プログラム
c) 作成したプログラム (cgi_color.rb)
#!/usr/bin/env ruby
# coding: euc-jp
require 'cgi' # CGI を使うことを宣言する
css = CGI.new(:accept_charset => "EUC-JP") # 日本語で入力されたデータを受け取る
print("Content-type: text/html; charset = EUC-JP\n\n") # 日本語でデータを出力する
# css は CGI変数
select = css["background"] # select_b は変数
# 入力されたデータが入る
print("\n") # print 文で html 文章を出力
print("\n")
print("CSSカラー作成プログラム\n")
if select == "白" # 白を選んだ場合
print("") # 白用の CSS が読み込まれる
print("\n")
print("\n")
printf("%s 色を選ぶとこのようになります。
\n", select) # 結果表示
elsif select == "黒" # 黒を選んだ場合
print("") # 黒用の CSS が読み込まれる
print("\n")
print("\n")
printf("%s 色を選ぶとこのようになります。
\n", select) # 結果表示
elsif select == "赤" # 赤を選んだ場合
print("") # 赤用の CSS が読み込まれる
print("\n")
print("\n")
printf("%s 色を選ぶとこのようになります。
\n", select) # 結果表示
elsif select == "青" # 青を選んだ場合
print("") # 青用の CSS が読み込まれる
print("\n")
print("\n")
printf("%s 色を選ぶとこのようになります。
\n", select) # 結果表示
elsif select == "黄" # 黄色を選んだ場合
print("") # 黄色用の CSS が読み込まれる
print("\n")
print("\n")
printf("%s 色を選ぶとこのようになります。
\n", select) # 結果表示
elsif select == "橙" # 橙色を選んだ場合
print("") # 橙色用の CSS が読み込まれる
print("\n")
print("\n")
printf("%s 色を選ぶとこのようになります。
\n", select) # 結果表示
elsif select == "桃" # 桃色を選んだ場合
print("") # 桃色用の CSS が読み込まれる
print("\n")
print("\n")
printf("%s 色を選ぶとこのようになります。
\n", select) # 結果表示
elsif select == "紫" # 紫色が読み込まれた場合
print("") # 紫色用の CSS が読み込まれる
print("\n")
print("\n")
printf("%s 色を選ぶとこのようになります。
\n", select) # 結果表示
elsif select == "緑" # 緑を選んだ場合
print("") # 緑用の CSS が読み込まれる
print("\n")
print("\n")
printf("%s 色を選ぶとこのようになります。
\n", select) # 結果表示
else # 灰色が選ばれた場合
print("") # 灰色の CSS が読み込まれる
print("\n")
print("\n")
printf("%s 色を選ぶとこのようになります。
\n", select) # 結果表示
end
print("\n")
print("\n")
d) 作成した CSS
・白
body {
background-color: #FFFFFF;
}
h1 {
font-size: xx-large;
color: #000000;
text-align:center;
}
p {
font-size: middle;
color: #000000;
margin: 0px 0px 0px 0px;
text-align:center;
}
・黒
body {
background-color: #000000;
}
h1 {
font-size: xx-large;
color: #FFFFFF;
text-align:center;
}
p {
font-size: middle;
color: #FFFFFF;
margin: 0px 0px 0px 0px;
text-align:center;
}
・赤
body {
background-color: red;
}
h1 {
font-size: xx-large;
color: green;
text-align:center;
}
p {
font-size: middle;
color: green;
margin: 0px 0px 0px 0px;
text-align:center;
}
・青
body {
background-color: blue;
}
h1 {
font-size: xx-large;
color: yellow;
text-align:center;
}
p {
font-size: middle;
color: yellow;
margin: 0px 0px 0px 0px;
text-align:center;
}
・黄色
body {
background-color: yellow;
}
h1 {
font-size: xx-large;
color: blue;
text-align:center;
}
p {
font-size: middle;
color: blue;
margin: 0px 0px 0px 0px;
text-align:center;
}
・橙
body {
background-color: orange;
}
h1 {
font-size: xx-large;
color: white;
text-align:center;
}
p {
font-size: middle;
color: white;
margin: 0px 0px 0px 0px;
text-align:center;
}
・桃色
body {
background-color: pink;
}
h1 {
font-size: xx-large;
color: white;
text-align:center;
}
p {
font-size: middle;
color: white;
margin: 0px 0px 0px 0px;
text-align:center;
}
・紫
body {
background-color: purple;
}
h1 {
font-size: xx-large;
color: yellow;
text-align:center;
}
p {
font-size: middle;
color: yellow;
margin: 0px 0px 0px 0px;
text-align:center;
}
・緑
body {
background-color: green;
}
h1 {
font-size: xx-large;
color: yellow;
text-align:center;
}
p {
font-size: middle;
color: yellow;
margin: 0px 0px 0px 0px;
text-align:center;
}
・灰色
body {
background-color: gray;
}
h1 {
font-size: xx-large;
color: #FFFFFF;
text-align:center;
}
p {
font-size: middle;
color: #FFFFFF;
margin: 0px 0px 0px 0px;
text-align:center;
}
e) 実行結果
・白
CSSカラー作成プログラム
白 色を選ぶとこのようになります。
・黒
CSSカラー作成プログラム
黒 色を選ぶとこのようになります。
・赤
CSSカラー作成プログラム
赤 色を選ぶとこのようになります。
・青
CSSカラー作成プログラム
青 色を選ぶとこのようになります。
・黄色
CSSカラー作成プログラム
黄 色を選ぶとこのようになります。
・橙
CSSカラー作成プログラム
橙 色を選ぶとこのようになります。
・桃色
CSSカラー作成プログラム
桃 色を選ぶとこのようになります。
・紫
CSSカラー作成プログラム
紫 色を選ぶとこのようになります。
・緑
CSSカラー作成プログラム
緑 色を選ぶとこのようになります。
・灰色
CSSカラー作成プログラム
灰 色を選ぶとこのようになります。
f) 考察
全てのパターンにおいて、選択肢の色と同じ色の画面結果が表示されたため、プ
ログラムは正しく動いているといえる。
3. PDFファイル
URL: http://roy/~c111112/adv2/r2_c111112.pdf
基礎プログラミングII 意見広告
4. 感想
今回のプログラムで一番時間がかかったのがプログラム問題 D であった。はじ
めのうちは、ユーザーが自分で #FFFFFF などという様に、入力したものを取り
こんで色を表示させたりしようと考えていたが、上手くいかなかった。また、ファ
イルに書き込ませて表示しようと考えたが、これも上手くいかなかった。もう一
度チャレンジしようと思う。
5. 参考文献
神田 直弥
基礎プログラミングII より (9)CGI[2]
http://roy/~naoya/cgi-bin/9.html
西村 まどか
基礎プログラミング II 第 9 回 (CGI ことえらび) より 「ラジオボタンの作り方」
http://roy/~madoka/2012/r2/09/r2_09_04_appendix_01_radio.html
西村 まどか
基礎プログラミング II 第 9 回 (CGI ことえらび) より 「チェックボックスの作り方」
http://roy/~madoka/2012/r2/09/r2_09_05_appendix_02_checkbox.html
西村 まどか
基礎プログラミング II 第 9 回 (CGI ことえらび) より 「短い記入欄の作り方」
http://roy/~madoka/2012/r2/09/r2_09_06_appendix_03_textfield.html
西村 まどか
基礎プログラミング I 第 12 回 (自由課題コンペティション / 画像作成) より 「PNG 形式への出力」
http://roy/~madoka/2012/r1/12/r1_12_04_theme_04_tgifpng.html