第9回 基礎プログラミング II レポート課題
氏名:小松 由里
学籍番号:c1090673
語学クラス:中国語1
コース(系):環境サイエンス
1、筆記問題 ******************************************************************
A、ラジオボタンの仕組み
ラジオボタンは、複数の項目の中から1つのみ選択する仕組みである。
プログラム(席の場所 A・B から席を選択する場合)で表示させると以下のようになる。
A席
B席
・
・
・type="radio" は、ラジオボタン設置の宣言。
・name="ラジオボタンの名前" は、使用するラジオボタンを区別するためにあ
り、複数のラジオボタンを作る場合は全て同じ名前になる。
・画面上で判断をするために、それぞれのラジオボタンに名前を割り振る。
・value="CGI 変数の値" は、ユーザーが選択した値をプログラムに送る。
B、チェックボックスの仕組み --------------------------------------------------
チェックボックスは、複数の項目の中から複数選択が可能な仕組みである。
プログラムで表示させると以下のようになる。
焼シャケ定食
中華定食
・
・
・type="checkbox" は、チェックボックス設置の宣言。
・name="ラジオボタンの名前" は、使用するチェックボックスを区別するためにあ
り、複数のラジオボタンを作る場合は全て異なる名前になる。
・画面上で判断をするために、それぞれのラジオボタンに名前を割り振る。
・value="CGI 変数の値" は、ユーザーが選択した値をプログラムに送る。
2、プログラム問題 ************************************************************
ホームページ
http://roy.e.koeki-u.ac.jp/~c109067/rubycgi/fork.html
[ fork.html ]
# html
# head
******** 基礎プログラミング ******** # title・title終わり
# fork.cssを使用する
# head 終わり
# body
:::::: 基礎プログラミング :::::
ホームページに戻る
# body 終わり
# html 終わり
[ fork.css ]
body{
background: #ccffcc ;
}
h1{
color: #3300cc ;
font-size: 2em;
text-align: center;
background: #ffffff ;
}
h2{
color: #3366cc ;
font-size: 1.5em;
text-align: center;
background: #9966ff ;
}
A、カウンタの解説 *************************************************************
a、考えた設定
カウンタのページがクリックされる度にカウントして、クリックしたユーザーが
何番目にこのページに訪れたのかを表示するプログラム
b、作成したプログラム
[ count.rb ]
#!/usr/koeki/bin/ruby
require 'cgi' # CGI を使用する宣言
cgi = CGI.new("html4") # HTML で CGI を使用する
print("Content-type: text/html; charset=EUC-JP\n\n") # 日本語表記にする
number = 0 # 数値をカウントするので 0 だと教える
open("mydb/count.dat","r") do |read|
# mydb/count.dat を読み取り、read という名前に置き換える
while data = read.gets
if /(\d+)/ =~ data
number = $1.to_i # 数値で表示させる
end # if 終わり
end # while 終わり
end # open 終わり
# print文で HTML 文章を表示させる
print("\n") # html
print("\n") # head
print("\n")
print("いらっしゃい\n")
print("\n") # head 終わり
print("\n") # body
printf("ようこそ!あなたはNo. %d の方です
\n",number)
print("どうぞゆっくりしていってください
\n")
print("\n") # body 終わり
print("\n") # html 終わり
number += 1 # 数値を足すため、1足す
open("mydb/count.dat","w") do |write|
write.printf("%d\n",number)
# mydb/count.dat に値を書き、数値を表示させる
end # open 終わり
[ count.css ]
body{
background: #ffff99 ;
}
h1{
color: #ffffff ;
font-size: 2em;
text-align: center;
background: #339900 ;
}
h2{
color: #000000;
font-size: 1.5em;
background: #ccffcc ;
}
c、もとにしたプログラム
第9回 レポート課題の カウンタ例 を参考にした。
読みこませるファイル名を変更した。
d、実行結果
pan{c109067}% ./count.rb [~/public_html/rubycgi]
(offline mode: enter name=value pairs on standard input)
Content-type: text/html; charset=EUC-JP
いらっしゃい
ようこそ!あなたはNo. 31 の方です
どうぞゆっくりしていってください
e、考察
pan{c109067}% ./count.rb [~/public_html/rubycgi]
(offline mode: enter name=value pairs on standard input)
Content-type: text/html; charset=EUC-JP
いらっしゃい
ようこそ!あなたはNo. 32 の方です
どうぞゆっくりしていってください
pan{c109067}% ./count.rb [~/public_html/rubycgi]
(offline mode: enter name=value pairs on standard input)
Content-type: text/html; charset=EUC-JP
いらっしゃい
ようこそ!あなたはNo. 33 の方です
どうぞゆっくりしていってください
実行結果に引き続き、2回実行した。
実行結果で表示させた際は数値が 31 となり、次に 32 、33 と次の数値が表示
されたので、このプログラムは正しいといえる。
f、参考文献
最後に記載
B、ホームページで計算できるCGIスクリプトプログラム **************************
a、考えた設定
ユーザーが数値を打ち込み、何算をしたいのかを選択すると、計算結果が表示さ
れるプログラム
b、作成したプログラム
[ keisan.html ]
# html
# head
計算 # title・title終わり
# keisan.cssを使用する
# head 終わり
# body
計算プログラム
# form 終わり
# html 終わり
[ keisan.rb ]
#!/usr/koeki/bin/ruby
require'cgi' # CGI を使用する宣言
cgi = CGI.new("html4") # HTML で CGI を使用する
print("Content-type: text/html; charset=EUC-JP\n\n") # 日本語表記にする
keisan1 = cgi["keisan1"] # keisan1 に cgi の keisan1 を代入
keisan2 = cgi["keisan2"] # keisan2 に cgi の keisan2 を代入
keisan3 = cgi["keisan3"] # keisan3 に cgi の keisan3 を代入
print("\n") # html
print("\n") # head
print("計算プログラム
\n") # title・title終わり
print("\n")
print("\n") # head 終わり
print("\n") # body
if keisan3 == "tasu" # 足し算なら
s = keisan1.to_i + keisan2.to_i
elsif keisan3 == "hiku" # 引き算なら
s = keisan1.to_i - keisan2.to_i
elsif keisan3 == "kakeru" # かけ算なら
s = keisan1.to_i * keisan2.to_i
else keisan3 == "waru" # 割り算なら
s = keisan1.to_f / keisan2.to_f
end # if 終わり
print("計算結果
\n")
if keisan3 == "tasu" # 足し算を選択した場合
printf("%d + %d = %d
\n",keisan1,keisan2,s)
elsif keisan3 == "hiku" # 引き算を選択した場合
printf("%d - %d = %d
\n",keisan1,keisan2,s)
elsif keisan3 == "kakeru" # かけ算を選択した場合
printf("%d * %d = %d
\n",keisan1,keisan2,s)
else keisan3 == "waru" # 割り算を選択した場合
printf("%d / %d = %f
\n",keisan1,keisan2,s.to_f)
end # if 終わり
print("\n") # body 終わり
print("\n") # html 終わり
[ keisan.css ]
body{
background: #ccccff ;
}
h1{
color: #ffffff ;
font-size: 2em;
text-align: center;
background: #9900ff ;
}
c、もとにしたプログラム
プログラム color.rb を参考にしました。
if 文の print 部分を計算式にし、
例 )足し算の場合
if keisan3 == "tasu"
s = keisan1.to_i + keisan2.to_i
とした。
また、ユーザーが打ち込んだ計算式を答えとともに表示させるために、print 文
を作成した。
例 )足し算の場合
if keisan3 == "tasu"
printf("%d + %d = %d
\n",keisan1,keisan2,s)
d、実行結果
pan{c109067}% ./keisan.rb [~/public_html/rubycgi]
(offline mode: enter name=value pairs on standard input)
keisan1="2"
keisan2="4"
"tasu"
Content-type: text/html; charset=EUC-JP
計算プログラム
計算結果
2 / 4 = 0.500000
e、考察
上記の実行結果で、足し算をしてみたところ、足し算でなく何故か割り算されて
しまった。そのため、プログラムを表示させてみた。
pan{c109067}% ./keisan.rb [~/public_html/rubycgi]
(offline mode: enter name=value pairs on standard input)
keisan3="2"
keisan3="4"
"tasu"
Content-type: text/html; charset=EUC-JP
計算プログラム
計算結果
./keisan.rb:37:in `printf': invalid value for Integer: "" (ArgumentError)
from ./keisan.rb:37
プログラムを表示させてみたところ、37行目までの間でプログラムの間違えがあ
るようだった。しかし、見返しても、間違えている点を見つけることが出来なかっ
た。しかし、ウェブ上では、計算が正しく行われていた。
これを課題にして、また取り組んでいきたい。
f、参考文献
最後に記載
D、着せ変えプログラム ********************************************************
a、考えた設定
ユーザーが色名を選択すると、CSSファイルを読みこみ、その色のページが表示
されるプログラム
b、作成したプログラム
[ color.html ]
# html
# head
Color 変更プログラム # title・title終わり
# color.cssを使用する
# head 終わり
# body
Color 変更プログラム
# form 終わり
# body 終わり
# html 終わり
[ color.rb ]
#!/usr/koeki/bin/ruby
require 'cgi' # CGI を使用する宣言
cgi = CGI.new("html4") # HTML で CGI を使用する
print("Content-type: text/html; charset=EUC-JP\n\n") # 日本語表記にする
color = cgi["color"] # color に cgi の color を代入
print("\n") # html
print("\n") # head
print(" Color 変更プログラム\n") # title・title終わり
if color == "aka" # 赤 なら
print("\n")
elsif color == "kiiro" # 黄色 なら
print("\n")
elsif color == "ao" # 青 なら
print("\n")
elsif color == "murasaki" # 紫 なら
print("\n")
elsif color == "orenji" # オレンジ なら
print("\n")
else color == "midori" # 緑 なら
print("\n")
end # if 終わり
print("\n") # head 終わり
print("\n") # body
print("Color 変更プログラム
\n")
print("Color が変化します
\n")
print("\n") # body 終わり
print("\n") # html 終わり
[ color.css ]
body{
background: #ffff99 ;
}
h1{
color: #ffffff ;
font-size: 2em;
text-align: center;
background: #339900 ;
}
h2{
color: #ffffff;
font-size: 1.5em;
text-align: center;
background: #999900 ;
}
[ color1.css ]
body{
background: #ffff99 ;
}
h1{
color: #ffffff ;
font-size: 2em;
text-align: center;
background: #339900 ;
}
h2{
color: #ffffff;
font-size: 1.5em;
text-align: center;
background: #ff0000 ;
}
[ color2.css ]
body{
background: #ffff99 ;
}
h1{
color: #ffffff ;
font-size: 2em;
text-align: center;
background: #339900 ;
}
h2{
color: #ffffff;
font-size: 1.5em;
text-align: center;
background: #ffcc00 ;
}
[ color3.css ]
body{
background: #ffff99 ;
}
h1{
color: #ffffff ;
font-size: 2em;
text-align: center;
background: #339900 ;
}
h2{
color: #ffffff;
font-size: 1.5em;
text-align: center;
background: #3300cc ;
}
[ color4.css ]
body{
background: #ffff99 ;
}
h1{
color: #ffffff ;
font-size: 2em;
text-align: center;
background: #339900 ;
}
h2{
color: #ffffff;
font-size: 1.5em;
text-align: center;
background: #9900cc ;
}
[ color5.css ]
body{
background: #ffff99 ;
}
h1{
color: #ffffff ;
font-size: 2em;
text-align: center;
background: #339900 ;
}
h2{
color: #ffffff;
font-size: 1.5em;
text-align: center;
background: #ff9900 ;
}
[ color6.css ]
body{
background: #ffff99 ;
}
h1{
color: #ffffff ;
font-size: 2em;
text-align: center;
background: #339900 ;
}
h2{
color: #ffffff;
font-size: 1.5em;
text-align: center;
background: #ff0099 ;
}
c、もとにしたプログラム
プログラム keisan.rb を参考にした。
if 文 の print 部分を CSSファイルを読みこむように、
例 ) 赤色にする場合
if color == "aka"
print("\n")
と変更させた。
d、実行結果
pan{c109067}% ./color.rb [~/public_html/rubycgi]
(offline mode: enter name=value pairs on standard input)
color=aka
Content-type: text/html; charset=EUC-JP
Color 変更プログラム
Color 変更プログラム
Color が変化します
e、考察
pan{c109067}% ./color.rb [~/public_html/rubycgi]
(offline mode: enter name=value pairs on standard input)
color=aka
Content-type: text/html; charset=EUC-JP
Color 変更プログラム
Color 変更プログラム
Color が変化します
pan{c109067}% ./color.rb [~/public_html/rubycgi]
(offline mode: enter name=value pairs on standard input)
color=kiiro
Content-type: text/html; charset=EUC-JP
Color 変更プログラム
Color 変更プログラム
Color が変化します
pan{c109067}% ./color.rb [~/public_html/rubycgi]
(offline mode: enter name=value pairs on standard input)
color=ao
Content-type: text/html; charset=EUC-JP
Color 変更プログラム
Color 変更プログラム
Color が変化します
pan{c109067}% ./color.rb [~/public_html/rubycgi]
(offline mode: enter name=value pairs on standard input)
color=ao
Content-type: text/html; charset=EUC-JP
Color 変更プログラム
Color 変更プログラム
Color が変化します
pan{c109067}% ./color.rb [~/public_html/rubycgi]
(offline mode: enter name=value pairs on standard input)
color=murasaki
Content-type: text/html; charset=EUC-JP
Color 変更プログラム
Color 変更プログラム
Color が変化します
pan{c109067}% ./color.rb [~/public_html/rubycgi]
(offline mode: enter name=value pairs on standard input)
color=orenji
Content-type: text/html; charset=EUC-JP
Color 変更プログラム
Color 変更プログラム
Color が変化します
pan{c109067}% ./color.rb [~/public_html/rubycgi]
(offline mode: enter name=value pairs on standard input)
color=midori
Content-type: text/html; charset=EUC-JP
Color 変更プログラム
Color 変更プログラム
Color が変化します
プログラムを表示させたところ、全色全て正しく表示された。
また、ウェブ上での操作でも全色全て表示されたので、このプログラムは正しい
といえる。
f、参考文献
最後に記載
基礎プログラミングのキャラクタ (char_r2_c109067.png) **************************
題名:基礎プログラミングの花を咲かせましょう!
作った方法 :
線と円を活用して絵を作成した。線は、線の形を変型させながら
描いた。また、花と丸形はコピーして複数作成した。
工夫した点 :
花はコピーして色を変化させて複数作成し、花びらが重なるようにした。また、
重なっても色が見えるように花びらを回転させた。
また、ジョウロから流れる水の色も一つひとつ変化をつけた。
ホームページアドレス :
http://roy.e.koeki-u.ac.jp/~c109067/
4、感想
今回の CGI を使用した講義では、内容が理解できず、とても苦戦した。
そして、課題作成も大変だった。友達に教えてもらいながらなんとか課
題に取り組んだ。再度、自分で確認しながら復習をして内容を理解でき
るようになりたい。
Tgif では、以前操作してからかなり期間が空いてたので、よい復習に
なった。ファイルを保存し、PNG型式にする方法を思い出すことができた。
5、参考文献
西村 まどか
基礎プログラミング II 第9回 CGIことえらび
http://roy/~madoka/2010/r2/09/
「ラジオボタンの作り方」
http://roy/~madoka/2010/r2/09/09_04_theme_02_radio.html
「テキストフィールドの作り方」
http://roy/~madoka/2010/r2/09/09_06_theme_04_textfield.html
基礎プログラミング I 第7回 正規表現と Ruby 言語でのプログラミング
http://roy/~madoka/2010/r1/07/#structure
「データを読み込むようにするには」
http://roy/~madoka/2010/r1/07/07_09_theme_08_fileread.html
基礎プログラミング I 第8回 電子チケットを作ろう
http://roy/~madoka/2010/r1/08/
「CSS の色見本」
http://roy/~madoka/2010/r1/08/08_12_appendix_01_safecolor.html
共同学習者
青木 千紗
久保田 瑛一郎
横山 広樹