第 9 回 ことえらび レポート課題 氏名:齋藤陽香 学籍番号:c1100880 語学クラス:英語6 コース(系):政策マネジメント 1. A.ラジオボタンのしくみ ラジオボタンは設けた選択肢の中からひとつだけを選択できる機能である。 授業中に作成したプログラム(sightseeing.rb)とHTML文書(sightseeing.html)で 説明する。 HTML文書(sightseeing.html)で希望の座席を選択してもらう個所がある。 そのHTML文書の18行目〜20行目に 窓側 通路側 希望なし という表記がある。 ・ input type="radio" でラジオボタンで入力してもらうことを指示。 ・ name="seat" で seat という変数を組み込む。これによって入力を求めたも のの答えをプログラム (sightseeing.rb)に代入することができる。また、この 変数は一つの質問の答えごとにに設ける。もう一問質問を設け、別の選択肢を作 成するとしたら異なる変数を指定しなければならない。 ・value="窓際"、value="通路側"、value="希望なし"checked はラジオボタンの 選択肢内容である。web上で選択肢を選び、「これでよい」を押すことでその結 果がプログラム(sightseeing.rb)に代入される。ラジオボタンの後の表示は<>の あとに表記しているものである。また、value="希望なし" の最後に表記してあ るcheckedはラジオボタンを始めから希望なしの欄をチェックするように指示し ている。 B.チェックボタンのしくみ ある質問に対して選択肢を設ける機能。こちらはラジオボタンと異なり、何個も 選択できるタイプである。 授業中に作成したプログラム(sightseeing.rb)とHTML文書(sightseeing.html)で 説明する。 HTML文書の28行目と29行目で バイキング つやひめ という表記がある。 ・input type="checkbox" でチェックボックスで当てはまる個所を入力してもら う指示を設定。 ・name="dinner" で指定したチェックボックスの変数を決める。これが設定され ていることで sightseeing.rb に web上で得た情報を代入することが出来る。 チェックボックスは一つの質問項目で複数を選択することができるので、この変 数は各選択肢で変えなければならない。 ・value="バイキング" はチェックボックスの選択肢内容である。web上で選択肢 を選び、「これでよい」を押すことでその結果がプログラム(sightseeing.rb)に 代入される。チェックボックスのあとの選択肢表示はのあとに入力し たものである。 上で述べたしくみにより、チェックボックスをつかうことができる。 C. char_r2_c110088.png の解説 ・題名 希望のトリ ひよこはこれから成長するもので、未来への希望で満ち溢れている。それを表現 して視線は上を向き、星を散らした。また、立体感を出すために影をつけた。 ・掲載URL http://roy/~c110088/advertise2/rubycgi/char_r2_c110088.png 2. A. i.考えた設定 web へのアクセス数を数えるプログラム。 どのくらいの人がそのページにアクセスしたかを知る、という意図がある。 ii.作成したプログラム(count.rb) 掲載URL http://roy/~c110088/advertise2/rubycgi/count.rb #!/usr/bin/env ruby require 'cgi' # CGI を使うことを宣言 cgi = CGI.new("html4") # cgi という変数は CGI print("Content-type: text/html; charset=EUC-JP\n\n") # 日本語コード arv = cgi["arrive"] # arv を CGI で求める number = 0 # アクセス数を足していくため、初期値を定める open("count.txt","r") do |read| # テキストファイルから読み込む while data = read.gets # 繰り返し条件 : data という変数にテキストファイルから # 読み込んだものを代入 if /(\d+)/ =~ data # 条件 : 数字を取り出す number = $1.to_i # 処理 : 取り出した数字を number とする end # if の end end # while の end end # open の end print("\n") # .rb で .html の動きを設定 print("\n") print("accsess\n") print("\n") print("\n") print("

w e l c o m e !

\n") printf("

あなたは %d 番目のお客様です。

\n", number) print("

はるかのページへようこそ

\n") print("\n") print("\n") number += 1 # number に 1 を足し、アクセス数が増加していくようにする open("count.txt","w") do |write| # テキストファイルに number で加算したものを write.printf("%d\n",number) # 上書きしていく end # open の end iii.もとにしたプログラムと変更点 ◯ もとにしたプログラム … counter.rb ◯ 変更点 ・count.text でアクセス数を記録するテキストファイルを作成し、プログラ ムに取りこむ iv.実行結果 ◯kterm pan{c110088}% ./count.rb [~/public_html/advertise2/rubycgi] (offline mode: enter name=value pairs on standard input) Content-type: text/html; charset=EUC-JP accsess

w e l c o m e !

あなたは 10 番目のお客様です。

はるかのページへようこそ

◯ web accsess

w e l c o m e !

あなたは 13 番目のお客様です。

はるかのページへようこそ

v.考察 kterm で実行後、テキストファイルの count.txt をひらいた。 すると、記入されている数字が実行結果の 10 より一つ大きい 11になっていた。 これは、プログラムの内容に組み込んだ 32行目の ------------ number += 1 ------------ と34〜36行目の -------------------------------- open("count.txt","w") do |write| write.printf("%d\n",number) end -------------------------------- が正しく動いているからである。 よって、このプログラムは正しいといえる。 vi.参考文献 ・神田先生のページ → 基礎プログラミングI (7) 06/06の授業内容:正規表現 < http://roy/~naoya/ruby/7.html > → 基礎プログラミングI (8) 06/13の授業内容:ファイルの入出力 < http://roy/~naoya/ruby/8.html > → ファイルのアクセス権 < http://roy/~naoya/permission.htm > B. i.考えた設定 電卓のような計算プログラム。 オンライン電卓で web 上で計算をするという意図のもと作成した。 ii.作成したプログラム(figure.rb) 掲載URL http://roy/~c110088/advertise2/rubycgi/figure.html #!/usr/koeki/bin/ruby $KCODE = 'e' # 文字コードを日本語に設定 require 'cgi' # CGI を使うことを宣言 cgi = CGI.new('html4') print("Content-type: text/html; charset-EUC-jp\n\n") su = cgi["number1"] # web上からもらった数値1の情報を su という変数にする kazu = cgi["number2"] # web上からもらった数値2の情報を kazu という変数にする kigo = cgi["sign"] # web上からもらった計算記号を kigo という変数で受ける #p su # su が正しく受け取れているかを確認 #p kazu # kazu が正しく受け取れているかを確認 #p kigo # kigo が正しく受け取れているかを確認 def siki(su,kazu,kigo) # 計算式を設定 if kigo == "plus" # 条件 : kigo が "plus" のとき su.to_f + kazu.to_f # 処理 : su(小数を含む数)と kazu(小数含む)を足す elsif kigo == "minus" # 条件 : kigo が "minus" su.to_f - kazu.to_f # 処理 : su から kazu を引く elsif kigo == "multiply" # 条件 : kigo が "multiply" su.to_f * kazu.to_f # 処理 : su に kazu をかける elsif kigo == "divide" # 条件 : kigo が divide su.to_f / kazu.to_f # 処理 : su を kazu でわる end # if の end end # def の end print("\n") # html 文書をプログラムに組み込む print("\n") print("計算機\n") print("\n") print("\n") print("

計算結果

\n") if kigo == "plus" # 条件 : kigo が "plus"のとき printf("

%2.1f + %2.1f = %2.1f

\n",su,kazu,siki(su,kazu,kigo)) # html 文書 を組み込む。計算式とその答を表示 elsif kigo == "minus" # 条件 : kigo が "minus" のとき printf("

%2.1f - %2.1f = %2.1f

\n",su,kazu,siki(su,kazu,kigo)) # html 文書。計算式とその答。 elsif kigo == "multiply" # 条件 : kigo が "multiply" printf("

%2.1f * %2.1f = %2.1f

\n",su,kazu,siki(su,kazu,kigo)) # html 文書。計算式とその答。 elsif kigo == "divide" # 条件 : kigo が "divide" printf("

%2.1f / %2.1f = %2.1f

\n",su,kazu,siki(su,kazu,kigo)) # html 文書。計算式とその答。 end # if の end print("\n") # html 文書 print("\n") # html 文書 iii.もとにしたプログラムと変更点 前回の課題(ticket.rb)を参考にした。 変更点は以下のとおり。 ・条件で加算、引算、乗算、除算の計算式を設定 ・計算機用の html 文書に変更 iv.実行結果 kterm で実行したものと実行し、web上で表示されたものを記載する。 ◯加算 --- kterm---------------------------------------------------------------------- pan{c110088}% ./figure.rb [~/public_html/advertise2/rubycgi] (offline mode: enter name=value pairs on standard input) number1=1 number2=2 sign="plus" Content-type: text/html; charset-EUC-jp 計算機

計算結果

1.0 + 2.0 = 3.0

------------------------------------------------------------------------------- --- web(page source)----------------------------------------------------------- 計算機

計算結果

1.0 + 2.0 = 3.0

------------------------------------------------------------------------------- ◯引算 ---kterm----------------------------------------------------------------------- pan{c110088}% ./figure.rb [~/public_html/advertise2/rubycgi] (offline mode: enter name=value pairs on standard input) number1=1 number2=2 sign="minus" Content-type: text/html; charset-EUC-jp 計算機

計算結果

1.0 - 2.0 = -1.0

------------------------------------------------------------------------------- ---web(page source)------------------------------------------------------------ 計算機

計算結果

1.0 - 2.0 = -1.0

------------------------------------------------------------------------------- ◯乗算 ---kterm------------------------------------------------------------------------ pan{c110088}% ./figure.rb [~/public_html/advertise2/rubycgi] (offline mode: enter name=value pairs on standard input) number1=1 number2=2 sign=multiply Content-type: text/html; charset-EUC-jp 計算機

計算結果

1.0 * 2.0 = 2.0

------------------------------------------------------------------------------- ---web(page source)----------------------------------------------------------- 計算機

計算結果

1.0 * 2.0 = 2.0

------------------------------------------------------------------------------- ◯除算 ---kterm----------------------------------------------------------------------- pan{c110088}% ./figure.rb [~/public_html/advertise2/rubycgi] (offline mode: enter name=value pairs on standard input) number1=1 number2=2 sign=divide Content-type: text/html; charset-EUC-jp 計算機

計算結果

1.0 / 2.0 = 0.5

------------------------------------------------------------------------------- ---web(page source)------------------------------------------------------------ 計算機

計算結果

1.0 / 2.0 = 0.5

------------------------------------------------------------------------------- v.考察 ◯加算 まず、実行結果から kterm と web上の実行結果が一致していることが分かる。 次に確かめ算をする。 pan{c110088}% bc -l [~/public_html/advertise2/rubycgi] 1+2 3 quit よって実行結果の計算は正しいことが分かる。以上の点より加算の計算システム は正しいと言える。 ◯引算 加算同様、ktermと web上の実行結果が一致している。 では、確かめ算をしてみる。 pan{c110088}% bc -l [~/public_html/advertise2/rubycgi] 1-2 -1 quit 確かめ算をしたところ、答えは -1 となった。実行結果も答が -1 であるため、 正しく実行されていることがわかる。 ◯乗算 乗算も実行結果は kterm と web上で一致している。 確かめ算は下である。 pan{c110088}% bc -l [~/public_html/advertise2/rubycgi] 1*2 2 quit この答と実行結果は同じだ。よって正しくプログラムされたプログラムと言える。 ◯除算 これも上の3つ同様、kterm と web上のどちらも同じ結果であった。 確かめ算をする。 pan{c110088}% bc -l [~/public_html/advertise2/rubycgi] 1/2 .50000000000000000000 quit 0.5 という答えが出た。実行結果も 0.5 であるためプログラムは正しい。 vi.参考文献 ・神田先生のページ →基礎プログラミングI (3)値の型変換・演算子 < http://roy/~naoya/ruby/3.html > ・西村先生のページ →基礎プログラミング II 第 8 回 (ことはじめ) 「動作プログラム作成」 < http://roy/~madoka/2011/r2/08/r2_08_08_theme_08_ruby.html > D. i.考えた設定 web上でイメージを選択し、ページをきせかえるプログラム。 イメージに合わせて何種類かのページのデザインを作成した。 目で楽しめる web ページにするという意図で作成した。 ii.作成したプログラム(kisekae.rb) 掲載URL http://roy/~c110088/advertise2/rubycgi/kisekae.html #!/usr/koeki/bin/ruby $KCODE = 'e' # 日本語コードを指定 require 'cgi' # CGI を使うことを宣言 cgi = CGI.new('html4') print("Content-type: text/html;charset-EUC-jp\n\n") thing = cgi["image"] # thing に web上からもらった情報(image)をいれる print("\n") # html 文書を組み込む。 print("\n") print("changed!\n") print("\n") print("\n") print("

haru's change!

\n") print("

きせかえ完了!

\n") printf("

%s のぺーじ

\n",thing) print("

もどるときはブラウザの戻るボタンをどうぞ。

\n") if thing == "clover" # 条件 : thing が clover のとき print("\n") # clover.css につながり、それの設定に合わせて表示させる elsif thing == "sakura" # 条件 : thing が sakura print("\n") # sakura.css につながり、それの設定に合わせて表示させる elsif thing == "snowman" # 条件 : thing が snowman print("\n") # snoeman.css につながり、それの設定に合わせて表示させる elsif thing == "guraffe" # 条件 : thing が guraffe print("\n") # guraffe.css につながり、それの設定に合わせて表示させる end # if の end print("\n") print("\n") # 組み込んだ html 文書の終わり iii.もとにしたプログラムと変更点 授業で作成した sightseeing.rb のプログラムをもとに作成した。 変更した点は次の通りである。 ・Time メソッドを削除 ・きせかえ用に表示させる文面を変更 ・条件の処理で css ファイルを持ち出すように指示 iv.実行結果 ◯ "くろーばー" を選択 ---kterm-------------------------------------------------------------------- pan{c110088}% ./kisekae.rb [~/public_html/advertise2/rubycgi] (offline mode: enter name=value pairs on standard input) image="clover" Content-type: text/html;charset-EUC-jp changed!

haru's change!

きせかえ完了!

clover のぺーじ

もどるときはブラウザの戻るボタンをどうぞ。

------------------------------------------------------------------------------ ---web(page souce)-------------------------------------------------------------- changed!

haru's change!

きせかえ完了!

clover のぺーじ

もどるときはブラウザの戻るボタンをどうぞ。

------------------------------------------------------------------------------ ◯ "さくら" を選択 ---kterm---------------------------------------------------------------------- pan{c110088}% ./kisekae.rb [~/public_html/advertise2/rubycgi] (offline mode: enter name=value pairs on standard input) image="sakura" Content-type: text/html;charset-EUC-jp changed!

haru's change!

きせかえ完了!

sakura のぺーじ

もどるときはブラウザの戻るボタンをどうぞ。

------------------------------------------------------------------------------ ---web(page souce)------------------------------------------------------------ changed!

haru's change!

きせかえ完了!

sakura のぺーじ

もどるときはブラウザの戻るボタンをどうぞ。

----------------------------------------------------------------------------- ◯ "ゆきだるま" を選択 ---kterm--------------------------------------------------------------------- pan{c110088}% ./kisekae.rb [~/public_html/advertise2/rubycgi] (offline mode: enter name=value pairs on standard input) image="snowman" Content-type: text/html;charset-EUC-jp changed!

haru's change!

きせかえ完了!

snowman のぺーじ

もどるときはブラウザの戻るボタンをどうぞ。

----------------------------------------------------------------------------- ---web(page souce)----------------------------------------------------------- changed!

haru's change!

きせかえ完了!

snowman のぺーじ

もどるときはブラウザの戻るボタンをどうぞ。

----------------------------------------------------------------------------- ◯ "きりん" を選択 ---kterm--------------------------------------------------------------------- pan{c110088}% ./kisekae.rb [~/public_html/advertise2/rubycgi] (offline mode: enter name=value pairs on standard input) image="guraffe" Content-type: text/html;charset-EUC-jp changed!

haru's change!

きせかえ完了!

guraffe のぺーじ

もどるときはブラウザの戻るボタンをどうぞ。

----------------------------------------------------------------------------- ---web(page souce)----------------------------------------------------------- changed!

haru's change!

きせかえ完了!

guraffe のぺーじ

もどるときはブラウザの戻るボタンをどうぞ。

----------------------------------------------------------------------------- v.考察 すべての選択肢において、kterm と web の page souce は同じになっている。 また、webで選択肢と if で設定した処理が一致していたのでこのプログラムは 正しいといえる。 vi.参考文献 ・神田先生のページ → カスケーディングスタイルシート(CSS) http://roy/~naoya/ruby/css.html ・roy Webページ作成の基礎 http://roy/web/index.html 3.感想 今回はプログラムの作成だけでなく、Tgif も作成し楽しんでできた。Tgif の ソフトは初めて使用した。慣れたならばより手の込んだ作品が作れるのではない だろうか。 また、css はまだうまく使いこなせていないように感じる。しかし、これを使う ことでよりスマートな html 文書が作れることがわかった。 4.参考文献等 ・参考文献 各項目で記載。 ・共同学習者 伊藤桜子、畠山貴衣 ----------------------------------- 東北公益文科大学 公益学部 公益学科 2年 齋藤陽香 c110088@f.koeki-u.ac.jp