第 9 回 ことえらび レポート課題 氏名:照井さつき 学籍番号:C1101589 語学クラス:中国語3 コース(系):政策マネジメント ========== 1.筆記問題 ========== 1-A.選択肢を以下の表示方法で指定する。 ◯ × type="radio" でラジオボタン形式での設置を指定している。 また checked によって、既定値に設定される。 value="yy"を指定した.rbプログラムに渡す。 ---------- 1-B.選択肢を以下の表示方法で指定する。 ◯ × type="checkbox" でチェックボックス形式での設置を指定している。 ラジオボタンとは違い、複数解答ができる。 選ばれた value="" を指定した.rbプログラムに渡す。 ---------- 1-C. http://roy/e.koeki-u.ac.jp/c110158/advertise2/char_r2_c110158.png 題名: 「四角りんご」 モチーフは題名の通りリンゴであり、四角いリンゴのというデザインを 工夫した。 tgif の 直角ではない丸角の四角作成ツールを使用した。 ========== 2.プログラム問題 ========== アドレス: http://roy/~c110xxx/advertise2/rubycgi/fork.html css: body.css ---------- A-a.URL ---------- アドレス: http://roy/~c110158/advertise2/rubycgi/counter.rb ---------- A-b.CGIの題名と意図 ---------- 「アクセスカウンター」 ページが更新される度に記録していき、来訪者数を数え、表示するプログラム。 ---------- A-c.入力と送信結果の部分 -d. 各部の解説 ---------- ファイル: counter.rb #!/usr/bin/env ruby require 'cgi' # CGI を使用する宣言 cgi = CGI.new("html4") # HTML で CGI を使用する print("Content-type: text/html; charset=EUC-jp\n\n") # 言語コードを指定し、文字化けを防ぐ number = 0 # 0人から始めるため、0と指定 open("number.txt","r") do |num| # number.txt を読みこみとして開き、num として置き換える while data = num.gets # 読み込まれた内容の最後まで繰り返す if /(\d+)/ =~ data # データが数字である場合を指定 number = $1.to_i # 数値で表示させる end end end print("\n") #以下htmlで表示 print("\n") print("\n") print("アクセスカウンター\n") print("\n") print("\n") print("\n") print("←top
") print("

\n") print("
") print("
■アクセスカウンター□

\n") print("

") print("

\n") print("

\n") print("
\n") print("
\n") print("


") print("ようこそ!

\n") printf("あなたは %d 人目のお客さまです!\n",number) # 表示する部分 print("


\n") print("\n") print("\n") number += 1 # 今までの内容に数値を1足す open("number.txt","w") do |write| # number.txt を書き込みとして、write として置き換える write.printf("%d\n",number)# 結果を表示させる end ---------- A-e.実行結果 ---------- アクセスカウンター ←top


■アクセスカウンター□








ようこそ!

あなたは 31 人目のお客さまです!


---------- A-f.考察 ---------- 人数を表示するために number.txtを使用したが、そのままでは人数が0と 表示され、更新しても数は増えなかった。 その際 kterm にて chmod o+w としたところ、人数を増やせるようになった。 これは o+w により、外部からでも書き込みが可能になったためと考えられる。 ===== ---------- B-a.URL ---------- アドレス: http://roy/~c110158/advertise2/rubycgi/keisan.html http://roy/~c110158/advertise2/rubycgi/keisan.rb ---------- B-b.CGIの題名と意図 ---------- 「計算プログラム」 入力された数字をラジオボタン形式によって計算方法を選択し、 実行するプログラム ---------- B-c.入力と送信結果の部分 -d.各部の解説 ---------- 添付ファイル: keisan.html 計算 ←top


■計算プログラム□






# ユーザーに入力させ、結果を keisan.rb に出力する

数値1

数値2

# input type="text"でtext形式を指定 # name="xx" で、区別するための名前を付ける # maxlenght"8" で、入力欄の大きさを指定

+ - × ÷

# input type="radio" ラジオボタン形式を指定 # name="xx" でラジオボタンを区別するため名前を付ける # value="yy" keisan.rbに出力

# 入力されたものをkeisan.rbに出力 # 入力されているものをリセットする



----- 添付ファイル: keisan.rb #!/usr/bin/env ruby $KCODE = 'e' # 言語コードを指定 require'cgi'# CGI を使用する宣言 cgi = CGI.new("html4")# HTML で CGI を使用する print("Content-type: text/html; charset=EUC-jp\n\n") # 言語コードを指定し、文字化けを防ぐ ans1 = cgi["ans1"] ans2 = cgi["ans2"] keisan = cgi["keisan"] # keisan.htmlから出力された内容を受け取る値 print("\n") print("\n") print("計算\n") print("\n") print("\n") print("\n") print("\n") print("←back
") print("


\n") print("

\n") print("

\n") print("
\n") print("
\n") print("■計算結果□
\n") print("
") if keisan == "tasu" # 足し算なら s = ans1.to_i + ans2.to_i elsif keisan == "hiku" # 引き算なら s = ans1.to_i - ans2.to_i elsif keisan == "kakeru" # かけ算なら s = ans1.to_i * ans2.to_i else keisan == "waru" # 割り算なら s = ans1.to_f / ans2.to_f end if keisan == "tasu" # 足し算 printf("

%d + %d = %d

\n",ans1,ans2,s) #足し算の結果を表示 elsif keisan == "hiku" # 引き算 printf("

%d - %d = %d

\n",ans1,ans2,s)#引き算の結果を表示 elsif keisan == "kakeru" # 掛け算 printf("

%d * %d = %d

\n",ans1,ans2,s)#掛け算の結果を表示 else keisan == "waru" # 割り算 printf("

%d / %d = %f

\n",ans1,ans2,s.to_f)#割り算の結果を表示 end print("
\n") print("


\n") print("\n") # body 終わり print("\n") # html 終わり ---------- B-e.実行結果 ---------- 計算 ←back





■計算結果□

20 + 10 = 30



---------- B-f.考察 ---------- 計算をそれぞれ行い bc -l でたしかめたところ、 ----- 足し算 ----- *html

20 + 3 = 23

*bc -l pan{TERUI Satsuki}% bc -l [~] 20 + 3 23 ----- 引き算 ----- *html

20 - 3 = 17

*bc -l pan{TERUI Satsuki}% bc -l [~] 20 - 3 17 ----- 掛け算 ----- *html

20 * 3 = 60

*bc -l pan{TERUI Satsuki}% bc -l [~] 20 * 3 60 ----- 割り算 ----- *html

20 / 3 = 6.666667

# 四捨五入済 *bc -l pan{TERUI Satsuki}% bc -l [~] 20 / 3 6.66666666666666666666 という結果になり、どの計算式でも正常にプログラムが 実行されていることが分かった。 ===== ---------- C-a.URL ---------- アドレス: http://roy/~c110158/advertise2/rubycgi/graph.html http://roy/~c110158/advertise2/rubycgi/graph.rb ---------- C-b.CGIの題名と意図 ---------- 「グラフ作成プログラム」 ドロップダウンメニューからそれぞれ傾きや切片を一つずつ選び、 1 次関数のグラフを作成し、表示させるプログラム。 ---------- C-c.入力と送信結果の部分 -d.各部の解説 ---------- 添付ファイル: graph.html グラフ ←top


■グラフ作成プログラム□






1次関数のグラフを作成します


# ユーザーに入力させ、結果を keisan.rb に出力する
  • 傾き(x):
  • 切片(y):

# 入力されたものをkeisan.rbに出力 # 入力されているものをリセットする




----- 添付ファイル: graph.rb #!/usr/koeki/bin/ruby def zu(a,b,c) # メソッドの定義 g = a * b + c # aとbを掛けcを足したものを g とする g - 1 # g から 1 引く g.to_i # g を数字とする end def gurahu(d,e,f) # メソッドの定義 print("

\n") h = f - 1 # f から 1 を引いた値を代入 h に代入する print(" " + "-" * h + "*" + "-" * 40 + "- y
\n") #   (空白)で空け、- を h の量だけ表示した後、* と表示する。 # そして - を40個表示し、-y と表示する。 print("|" + " " * zu(d,e,f) + "*
\n") # | を表示した後 zu(d,e,f) を呼びだし、その値の量だけ空白を空ける。 #そして * を表示させる。 #以下は e に1ずつ増加させながら足していき、上記と同様に空白を空ける。 printf("|" + " " * zu(d,e+1,f) + "*
\n") printf("|" + " " * zu(d,e+2,f) + "*
\n") printf("|" + " " * zu(d,e+3,f) + "*
\n") printf("|" + " " * zu(d,e+4,f) + "*
\n") print("|
\n") print("x
\n") # x を表示 print("

\n") end require 'cgi' # CGI を使用する宣言 cgi = CGI.new("html4") # HTML で CGI を使用する print("Content-type: text/html; charset=EUC-jp\n\n") # 言語コードを指定し、文字化けを防ぐ x = cgi["x"] y = cgi["y"] z = 1 # graph.htmlから出力された内容を受け取る値 print("\n") print("\n") print("\n") print("グラフプログラム\n") print("\n") print("\n") print("\n") print("\n") print("←back
") print("


\n") print("

\n") print("

\n") print("
\n") print("
\n") print("■結果□
\n") printf("

y = %dx + %d のグラフ

\n",x.to_i ,y.to_i) # 数式を表示 gurahu(x.to_i,z,y.to_i) # グラフを表示 print("
\n") print("


\n") print("\n") print("\n") ---------- C-e.実行結果 ---------- グラフプログラム ←back





■結果□

y = 5x + 6 のグラフ

 -----*----------------------------------------- y
|           *
|                *
|                     *
|                          *
|                               *
|
x



---------- C-f.考察 ---------- print("|" + " " * zu(d,e,f) + "*
\n") printf("|" + " " * zu(d,e+1,f) + "*
\n") printf("|" + " " * zu(d,e+2,f) + "*
\n") printf("|" + " " * zu(d,e+3,f) + "*
\n") printf("|" + " " * zu(d,e+4,f) + "*
\n") の部分を gurahu(d,e,f) として入力したところ、正常な図にならず、 そこで zu(d,e,f) と入力したところ正常なに図になった。 その後、様々なパターンのグラフを作成したが、全て正常なグラフが作成された ため、このプログラムは正しく実行されていると言うことが出来る。 ===== ---------- D-a.URL ---------- アドレス: http://roy/~c110158/advertise2/rubycgi/color.html http://roy/~c110158/advertise2/rubycgi/color.rb css: color1.css color2.css color3.css ---------- D-b.CGIの題名と意図 ---------- 「色変更プログラム」 選択された項目ごとにcssファイルを変更し、背景色などを変更するプログラム ---------- D-c.入力と送信結果の部分 -d.各部の解説 ---------- 添付ファイル: color.html 色変更<title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="body.css" type="text/css"> <link rel="shortcut icon" href="appleicon.png"> </head> <body> <a href="fork.html">←top</a><br> <br><br> <center> <div class="font">■色変更プログラム□</div><br> </center> <br><br><br> <div class="left1"></div><br> <div class="center2"><br> <BLOCKQUOTE> <form method="POST" action="./color.rb"> <br> <p> <input type="radio" name="color" value="red" checked>赤 <input type="radio" name="color" value="green">緑 <input type="radio" name="color" value="blue">青 </p> # input type="radio" ラジオボタン形式を指定 # name="xx" でラジオボタンを区別するため名前を付ける # value="yy" keisan.rbに出力 # checked で既定値を指定 <p> <input type="submit" value="OK"> # 入力されたものをkeisan.rbに出力 <input type="reset" value="Reset"> # 入力されているものをリセットする </p></form></div></BLOCKQUOTE><br><br> </body> </html> ----- 添付ファイル: color.rb #!/usr/bin/env ruby require 'cgi' # CGI を使用する宣言 cgi = CGI.new("html4") # HTML で CGI を使用する print("Content-type: text/html; charset=EUC-jp\n\n") # 言語コードを指定し、文字化けを防ぐ color = cgi["color"] # color.htmlから出力された内容を受け取る値 print("<html>\n") print("<head>\n") print("<title> 色変更\n") print("") if color == "red" # 赤 を選択 print("\n") elsif color == "green" # 緑 を選択 print("\n") else color == "blue" # 青 を選択 print("\n") end # ここでcss変更をする print("\n") print("\n") print("←back
") print("


\n") print("

\n") print("

\n") print("
\n") print("
\n") if color == "red" # 赤 を選択 print("
\n") print("■色変更完了!□
\n") print("


\n") print("

赤ベースの配色になります!


\n") elsif color == "green" # 緑 を選択 print("
\n") print("■色変更完了!□
\n") print("


\n") print("

緑ベースの配色になります!


\n") else color == "blue" # 青 を選択 print("
\n") print("■色変更完了!□
\n") print("


\n") print("

青ベースの配色になります!


\n") end # それぞれの選択肢ごとの文章 print("


\n") print("\n") print("\n") ---------- D-e.実行結果 ---------- 赤を選択 ----- 色変更 ←back





■色変更完了!□



赤ベースの配色になります!




----- 緑を選択 ----- 色変更 ←back





■色変更完了!□



緑ベースの配色になります!




----- 青を選択 ----- 色変更 ←back





■色変更完了!□



青ベースの配色になります!




---------- D-f.考察 ---------- なにも選択せずに ok を選んだ場合勝手に青が選択されたため、赤に cheked と 入力したところ、赤が既定値になった。 その後どの選択肢を選んでも、プログラムどおりに実行されたため このプログラムは正し実行されていると言うことが出来る。 ========== ========== 3.感想 ========== 今回のレポート課題は量が多く、期日までに出来るか不安だったが、友人と協力 して無事に完成させることが出来た。 しかしCGIについてはまだ理解できていないところが多く、グラフ作成プログラ ムでは、偶然出来た部分が大きかった。 今後はそんな部分を無くせるようにしたい。 ========== 4.参考文献 ========== 基礎プログラミング II 第 9 回 「ことえらび」 西村まどか http://roy/~madoka/2011/r2/09/ CGI[1] http://roy/~naoya/cgi-bin/9.html CGI[2] 神田直弥 http://roy/~naoya/cgi-bin/10.html 共同作成者 小林 愛実