第9回 CGI ことえらび レポート課題
氏名: 村上茉奈美
学籍番号: C1111352
語学クラス: 英語3
コース: 社会福祉
1.
A. ラジオボタンの構造
-------------------------------------------------------------------------
いちご
りんご
みかん
-------------------------------------------------------------------------
ラジオボタンとは、「複数ある選択肢の中で、一つだけ選ぶ方法」のことを指す。
前回は、「マウスをクリックすることによって、選択肢が一度に全て表示され、
その中から一つ選択すると、その選択した文字列が表示される」方式だった。
今回は、「選択肢をWeb上にあらかじめ表示させ、選択肢の横にある丸い
チェックボックスをクリックすると、それが選択される」方式になった。
ラジオボタンを使うことができるようにするためには、
前回学んだ CGI の の部分を
とする。
input type="radio" は「ラジオボタンを使って選択肢を表示させることを
宣言する」という意味を持つ。
name="〜〜" は「使うラジオボタンを区別するために、ラジオボタンに 〜〜
という名前をつける」という意味だ。
value="◯◯" は「ラジオボタンをつける選択肢の名前」を表す。
以上のように書くことによって、ラジオボタンでの選択が可能になる。
A の参考文献
・ http://roy/~madoka/2012/r2/09/r2_09_04_appendix_01_radio.html
2012年度 基礎プログラミングII
第9回 (CGI ことえらび)
「ラジオボタンの作り方」
作者: 西村まどか
B. チェックボックスの構造
-------------------------------------------------------------------------
みかん
かぼちゃ
サバ
-------------------------------------------------------------------------
チェックボックスとは、「選択肢の中から、一つだけでなく、複数選ぶこと
ができる方法」のことを表す。
上記のラジオボタンは
に対し、
チェックボックスは
と記す。
input type="checkbox" は「チェックボックスを用いることを宣言する」
意味がある。
name="〜〜" は、ラジオボタンと同様に「使うチェックボックスを区別す
るために、チェックボックスに 〜〜 という名前をつける」という意味で
ある。
value="◯◯" も、ラジオボタンと同様に「チェックボックスをつける選択
肢の名前」を表す。
以上のように書くことによって、選択肢を複数選ぶことが可能になる。
B の参考文献
・ http://roy/~madoka/2012/r2/09/r2_09_05_appendix_02_checkbox.html
2012年度 基礎プログラミングII
第9回 (CGI ことえらび)
「チェックボックスの作り方」
作者: 西村まどか
C. 題名: 「冬に輝くツリー」
今回のキャラクターは「クリスマス」を題材にした。
前期のキャラクター画像では「さくらんぼ」をテーマにして作成した。
前期に作成した際は「季節感」も重視し、作成に至った。
そこで、今回もその点で統一したいと思った。
また、最近は寒さも増し、12月に近づいてきているので、街中でクリスマ
スツリーを見かける機会が多くなったことも、このアイディアが生まれた
きっかけだ。
作った方法: 画像を描く際は、free を使わず、線や円を描くツールを使用
した。細かいところはメモリの大きさを調整しながら描いた。
工夫した点: 線がまっすぐの木ではなく、立体感が出るように線に変化を
つけた。また、なるべくはっきりした色を使い、鮮やかさが
出るようにした。
画像のリンク先(adv2 のトップページ)は以下。
http://roy/~c111135/adv2/
2. ホームページリンク先
http://roy/~c111135/rubycgi/fork_c111135.html
プログラム問題は A ・ B ・ D を選択した。
いずれも、ホームページから辿ることができる。
A.
1. リンク先
http://roy/~c111135/rubycgi/count.rb
2. 考えた設定(CGIの題名と意図)
CGIの題名: ホームページを見た人数
fork_c111135.html のホームページを見た人数を把握することができる
プログラム(count.rb)を作成。
3. 作成したプログラム(count.rb)
(入力部分と送信結果の表示する部分、各部の解説)
#!/usr/bin/env ruby
#coding: euc-jp
require 'cgi' #「CGIを使う」と宣言する
cgi = CGI.new(:accept_charset => "EUC-JP")
#新しく cgi というCGI用のハッシュを作る
#そのCGIを日本語で受け付ける
print("Content-type: text/html; charset=EUC-JP\n\n")
#CGIの値を日本語で書き出す
kazu = 0 #人数を入れる変数を kazu とし、初期値を 0 にする
open("./mydb/kazu.txt","r") do |number|
#mydb/kazu.txt というファイルを読みこみ専用で開き、データを number に入れる
while suuji = number.gets #number に入っているデータを suuji に取りこむ
if /(\d+)/ =~ suuji
#もし suuji の中に 「/(\d+)/」(数字) という部分が入っていたら
kazu = $1.to_i # kazu は $1 を整数にしたもの
end #if に対するend(終わり)
end #while に対するend(終わり)
end #open に対するend(終わり)
#以下、HTML文書の中身
print("\n")
print("\n")
print("\n")
print("welcome!\n")
print("\n")
print("\n")
print("
\n")
printf("あなたは %d 番目にこのページを見ました。
\n", kazu)
print("\n")
print("\n")
#HTML文書の中身 終わり
kazu += 1 #kazu に 1 ずつ足していく
open("./mydb/kazu.txt","w") do |houmon|
#mydb/kazu.txt というファイル書きこみ専用で開き、データを houmon に入れる
houmon.printf("%d\n", kazu)
end #open に対するend(終わり)
4. もとにしたプログラムからの変更点
今回の 第9回のページに掲載されている2つのプログラムを
もとにした。
授業で作成した cgi_req.rb とレポート課題に掲載されている
「構造」というリンクの counter.rb である。
読み込み・書きこみをするファイル名や変数の名前を変更した。
また、HTML文書の部分に CSS を付け加えて、Web上に色をつけた。
5. 実行結果
(Webページ上での出力結果を出すため、ソースを貼り付ける。)
welcome!
あなたは 23 番目にこのページを見ました。
welcome!
あなたは 25 番目にこのページを見ました。
6. 考察
プログラムがきちんと表示されるのか、Kterm上でも確認する。
roy{c111135}% ./count.rb [~/public_html/rubycgi]
(offline mode: enter name=value pairs on standard input)
kazu="23"
Content-type: text/html; charset=EUC-JP
welcome!
あなたは 24 番目にこのページを見ました。
roy{c111135}% ./count.rb [~/public_html/rubycgi]
(offline mode: enter name=value pairs on standard input)
kazu="25"
Content-type: text/html; charset=EUC-JP
welcome!
あなたは 26 番目にこのページを見ました。
(実行結果が「23番目」「25番目」となっているのは、
Web上で実行した後に、KTerm で確認しているためであり、
Web上で表示された「23番目」について実行してみると
その後に KTerm で確認すると、「24番目」と表示される。)
KTermで実行する際に、Web上で表示された「○番目」の数字を
kazu="○" と入力した。
その結果、23 と入力すると「24番目」、25 と入力すると「26番目」
と表示された。
プログラム内で、kazu は 「1 ずつ足していく」としている。
よって、このプログラムは正しいということができる。
7. 参考文献
下記に示す4つの文献は、共に
作者: 西村まどか
・ http://roy/~madoka/2012/r1/07/r1_07_10_theme_08_fileread.html
2012年度 基礎プログラミングI
第7回 (正規表現とRuby言語でのプログラミング)
「データを読み込むようにするには」
・ http://roy/~madoka/2012/r2/08/r2_08_09_theme_09_declare.html
2012年度 基礎プログラミングII
第8回 (CGI ことはじめ)
「Ruby で CGI を作る宣言」
・ http://roy/~madoka/2012/r2/09/r2_09_08_theme_03_fileopen.html
2012年度 基礎プログラミングII
第9回 (CGI ことえらび)
「File Open を使ってみよう」
・ http://roy/~madoka/2012/cgisrc/counter.rb
2012年度 基礎プログラミングII
第9回 レポート課題
本文中の「構造」のリンク先
B.
1. リンク先
http://roy/~c111135/rubycgi/calculation.html
2. 考えた設定(CGIの題名と意図)
CGIの題名: 加算・引算・乗算・除算プログラム
CGIスクリプトを使用する。
数値を打ち込み、「何の計算をしたいのか」を選択することによって、
計算の結果を得ることができるプログラム(calculation.rb)を作成。
そして、選択肢を表示するHTML文書(calculation.html)も同時に作成。
3. 作成したHTML文書・プログラム
(入力部分と送信結果の表示する部分、各部の解説)
・HTML文書(calculation.html)
Calculation
・プログラム(calculation.rb)
#!/usr/bin/env ruby
#coding: euc-jp
require 'cgi' #「CGIを使う」と宣言する
cgi = CGI.new(:accept_charset => "EUC-JP")
#cgi というCGI用のハッシュを新しく作り、CGIを日本語で受け付ける
print("Content-type: text/html; charset=EUC-JP\n\n")
#CGIの値を日本語で書き出す
suuji1 = cgi["kazu1"] #変数 suuji1 には CGI変数の kazu1 を代入する
suuji2 = cgi["kazu2"] #変数 suuji2 には CGI変数の kazu2 を代入する
number = cgi["num"] #変数 number には CGI変数の num を代入する
#以下、HTML文書の中身
print("\n")
print("\n")
print("Calculation Answer\n")
print("\n")
print("\n")
print("\n")
#一旦、HTML文書の終わり
if number == "add" #もし number が add(足し算) だったら
a = suuji1.to_i + suuji2.to_i
#a は suuji1 を整数にしたものと suuji2 を整数にしたものを足す
elsif number == "sub" #もし number が sub(引き算) だったら
a = suuji1.to_i - suuji2.to_i
#a は suuji1 を整数にしたものから suuji2 を整数にしたものを引く
elsif number == "mul" #もし number が mul(掛け算) だったら
a = suuji1.to_i * suuji2.to_i
#a は suuji1 を整数にしたものに suuji2 を整数にしたものを掛ける
elsif number == "div" #もし number が div(割り算) だったら
a = suuji1.to_f / suuji2.to_f
#a は suuji1 を整数にしたものを suuji2 を整数にしたもので割る
#a に小数点以下を含むため、suuji1 と suuji2 を to_f にしている
end #if に対するend(終わり)
#以下、HTML文書の中身
print("
")
print("計算の結果
\n")
print("
")
print("数式は以下のようになります。
\n")
#一旦、HTML文書の終わり
if number == "add" #もし add(足し算) を選択したら
printf("%d + %d
\n", suuji1, suuji2)
elsif number == "sub" #もし sub(引き算) を選択したら
printf("%d - %d
\n", suuji1, suuji2)
elsif number == "mul" #もし mul(掛け算) を選択したら
printf("%d * %d
\n", suuji1, suuji2)
elsif number == "div" #もし div(割り算) を選択したら
printf("%d / %d
\n", suuji1, suuji2)
end # if に対するend(終わり)
#以下、HTML文書の中身
print("よって、計算の結果は
\n")
#一旦、HTML文書の終わり
if number == "add" #もし add(足し算) を選択したら
printf("%d
\n", a)
elsif number == "sub" #もし sub(引き算) を選択したら
printf("%d
\n", a)
elsif number == "mul" #もし mul(掛け算) を選択したら
printf("%d
\n", a)
elsif number == "div" #もし div(割り算) を選択したら
printf("%5.2f
\n", a.to_f)
end # if に対するend(終わり)
#以下、HTML文書の中身
print("になりました。
\n")
print("\n")
print("\n")
#HTML文書の終わり
4. もとにしたプログラムからの変更点
今回の授業で作成した cgi_tour.rb をもとにした。
CGI変数や、計算した値を入れる変数の名前を変更した。
プログラムに応じてif文の個数を増やし、それぞれに対応させる
ようにした。
また、HTML文書の部分に CSS を付け加えて、Web上に色をつけた。
5. 実行結果
(Webページ上での出力結果を出すため、ソースを貼り付ける。)
・ calculation.html(HTML文書) の実行結果
Calculation
・ calculation.rb(プログラム) の実行結果
1. 足し算
Calculation Answer
計算の結果
数式は以下のようになります。
8 + 2
よって、計算の結果は
10
になりました。
2. 引き算
Calculation Answer
計算の結果
数式は以下のようになります。
50 - 35
よって、計算の結果は
15
になりました。
3. 掛け算
Calculation Answer
計算の結果
数式は以下のようになります。
18 * 3
よって、計算の結果は
54
になりました。
4. 割り算
Calculation Answer
計算の結果
数式は以下のようになります。
56 / 23
よって、計算の結果は
2.43
になりました。
6. 考察
プログラムがきちんと表示されるのか、Kterm上でも確認する。
(今回は「足し算・引き算・掛け算・割り算」の4つの選択肢の
それぞれについて確認する。)
それと共に、計算が一致しているのか、bc -l で確認する。
1. 足し算
roy{c111135}% ./calculation.rb [~/public_html/rubycgi]
(offline mode: enter name=value pairs on standard input)
kazu1="8"
kazu2="2"
num="add"
Content-type: text/html; charset=EUC-JP
Calculation Answer
計算の結果
数式は以下のようになります。
8 + 2
よって、計算の結果は
10
になりました。
roy{c111135}% bc -l [~/public_html/rubycgi]
8+2
10
quit
2. 引き算
roy{c111135}% ./calculation.rb [~/public_html/rubycgi]
(offline mode: enter name=value pairs on standard input)
kazu1="50"
kazu2="35"
num="sub"
Content-type: text/html; charset=EUC-JP
Calculation Answer
計算の結果
数式は以下のようになります。
50 - 35
よって、計算の結果は
15
になりました。
roy{c111135}% bc -l [~/public_html/rubycgi]
50-35
15
quit
3. 掛け算
roy{c111135}% ./calculation.rb [~/public_html/rubycgi]
(offline mode: enter name=value pairs on standard input)
kazu1="18"
kazu2="3"
num="mul"
Content-type: text/html; charset=EUC-JP
Calculation Answer
計算の結果
数式は以下のようになります。
18 * 3
よって、計算の結果は
54
になりました。
roy{c111135}% bc -l [~/public_html/rubycgi]
18*3
54
quit
4. 割り算
roy{c111135}% ./calculation.rb [~/public_html/rubycgi]
(offline mode: enter name=value pairs on standard input)
kazu1="56"
kazu2="23"
num="div"
Content-type: text/html; charset=EUC-JP
Calculation Answer
計算の結果
数式は以下のようになります。
56 / 23
よって、計算の結果は
2.43
になりました。
roy{c111135}% bc -l [~/public_html/rubycgi]
56/23
2.43478260869565217391
quit
確認した結果、プログラムがきちんと表示された。
また、計算の結果も一致していることが分かった。
(割り算の計算結果は、プログラム上で「小数点以下5桁のうち、小数第2
位まで」を表示するようにしているため、bc -l で確かめた結果と異なっ
ているが、小数点第2位までをみると、一致している。)
よって、このプログラムは正しいということができる。
7. 参考文献
下記に示す4つの文献は、共に
2012年度 基礎プログラミングII
作者: 西村まどか である。
・ http://roy/~madoka/2012/r2/08/r2_08_08_theme_08_ruby.html
第8回 (CGI ことはじめ)
「動作プログラム作成」
・ http://roy/~madoka/2012/r2/09/r2_09_02_theme_01_branch.html
第9回 (CGI ことえらび)
「結果を分岐させるには」
・ http://roy/~madoka/2012/r2/09/r2_09_04_appendix_01_radio.html
第9回 (CGI ことえらび)
「ラジオボタンの作り方」
・ http://roy/~madoka/2012/r2/09/r2_09_06_appendix_03_textfield.html
第9回 (CGI ことえらび)
「短い記入欄の作り方」
D.
1. リンク先
http://roy/~c111135/rubycgi/iro.html
2. 考えた設定(CGIの題名と意図)
CGIの題名: Webのカラー設定プログラム
「テーマをどのような色に変更したいのか」を入力してもらうことによって、
背景色などを変更することができるプログラム(iro.rb)を作成。
そして、選択肢を表示するHTML文書(iro.html)も同時に作成。
3. 作成したHTML文書・プログラム
(入力部分と送信結果の表示する部分、各部の解説)
・HTML文書(iro.html)
Change Color
・プログラム(iro.rb)
#!/usr/bin/env ruby
#coding: euc-jp
require 'cgi' #「CGIを使う」と宣言する
cgi = CGI.new(:accept_charset => "EUC-JP")
#cgi というCGI用のハッシュを新しく作り、CGIを日本語で受け付ける
print("Content-type: text/html; charset=EUC-JP\n\n")
#CGIの値を日本語で書き出す
color = cgi["iro"] # 変数 color には CGI変数の iro を代入する
#以下、HTML文書の中身
print("\n")
print("\n")
print("カラー変更\n")
#一旦、HTML文書の終わり
if color == "aka" #もし color が aka(赤) だったら
print("\n")
elsif color == "pink" #もし color が pink(ピンク) だったら
print("\n")
elsif color == "orange" #もし color が orange(オレンジ) だったら
print("\n")
elsif color == "kiiro" #もし color が kiiro(黄色) だったら
print("\n")
elsif color == "kimidori" #もし color が kimidori(黄緑) だったら
print("\n")
elsif color == "midori" #もし color が midori(緑) だったら
print("\n")
elsif color == "mizuiro" #もし color が mizuiro(水色) だったら
print("\n")
elsif color == "ao" #もし color が ao(青) だったら
print("\n")
elsif color == "murasaki" #もし color が murasaki(紫) だったら
print("\n")
end #if に対するend(終わり)
if color == "aka" #もし color が aka(赤) だったら
e = "赤"
elsif color == "pink" #もし color が pink(ピンク) だったら
e = "ピンク"
elsif color == "orange" #もし color が orange(オレンジ) だったら
e = "オレンジ"
elsif color == "kiiro" #もし color が kiiro(黄色) だったら
e = "黄色"
elsif color == "kimidori" #もし color が kimidori(黄緑) だったら
e = "黄緑"
elsif color == "midori" #もし color が midori(緑) だったら
e = "緑"
elsif color == "mizuiro" #もし color が mizuiro(水色) だったら
e = "水色"
elsif color == "ao" #もし color が ao(青) だったら
e = "青"
elsif color == "murasaki" #もし color が murasaki(紫) だったら
e = "紫"
end #if に対するend(終わり)
#以下、HTML文書の中身
print("\n")
print("\n")
print("カラー変更 実行後
\n")
print("
")
printf("テーマを %s にして色を変更しました。
\n", e)
print("※文字色は見やすさを考えて、選択した色と対称的な色にしています。※
\n")
print(" \n")
print("