第9回ことえらびレポート課題氏名 : 畠山貴衣学籍番号 : C1101709 語学クラス : 英語6 コース(系) : 政策マネジメントコース [1]筆記問題 A.ラジオボタンの仕組------------------------------------------------- (授業で作成した sughtseeing.html を用いて説明する。) ラジオボタンとは、いくつかの選択肢の中から1つだけ選べるものである。プログラムでは、窓側という文を挿入することで、ラジオボタンを表示することができる。最初の input type で、ラジオボタンであると宣言。 name で .rb で引用するための変数を指定。 value でラジオボタンの選択肢で表示するものを指定している。 (value="窓側"が、結果表示の際に出る文字で、<>の外の"窓側"が選択時に表示されるものである。) B.チェックボックスの仕組---------------------------------------------- (授業で作成した sughtseeing.html を用いて説明する。) チェックボックスとは、第3者に選択してもらう際に、いくつでも選択できる仕組のことである。プログラムでは、バイキング最初の input type でチェックボックスであることを指定している。 name で .rb で引用するための変数を指定。 value で .rbで引用した後に表示される文字を指定している。このとき、"夕食" が結果で表示され、"バイキング"は選択する際に表示される。 C. Tgif --------------------------------------------------------------- <題名> リス <解説及び作成方> 顏、ほっぺを円でおまかに書き出し、freeスタイルで丁寧に書き直した。色も何回もやり直し、配色にもこだわった。工夫した点は、ほっぺのバランスと色です。 <作成意図> 私の実家のまわりには山があり、タヌキやリス、モモンガ等、野生の動物が沢山生息していた。今回はその中の動物を書きたいと思い、みんなが親しみを持っているリスを題材に書いた。リンク http://roy/~c110170/advertise2/rubycgi/fork.html http://roy/~c110170/advertise2/ http://roy/~c110170/advertise2/rubycgi/cha.html [2]プログラム問題 ****************************************************** ホームページのアドレス : http://roy/~c110170/advertise2/rubycgi/fork.html A. (設定)------------------------------------------------------------------- 題名 : HP訪問者数カウンター企画意図 : ホームページを訪れてくれた人は何人いるのか、把握したかったので、作成した。また、誰でも訪問者数を知れることも目的としている。 (プログラム)-------------------------------------------------------------- ● counter2.rb #!/usr/bin/env ruby require 'cgi' # cgiを使うことを宣言 cgi = CGI.new("html4") # htmlからデータを持ってくる。 print("Content-type: text/html; charset=EUC-JP\n\n") arv = cgi["arrive"] # RubyのCGIでもらってきた値を代入 number = 0 # 入場者の人数の初期値 open("number.txt","r") do |read| # number.txtからデータを読み取る while data = read.gets # ファイルからgetsを使って読み込む if /(\d+)/ =~ data # 読み取るデータの文字(種類)を指示 number = $1.to_i # 読み込んだデータを number とする end # ifに対する end end # while に対する end end # open に対する end print("\n") # ホームページ表示 print("\n") # hradの設定 print("いらっしゃいませ\n") # title の設定、終わり print("\n") # head の終わり print("\n") # 本文の書きはじめ printf("

あなたは %d 番目のお客様でございます。

\n", number) # 訪問者数の確認 print("

はたけのHPにようこそ☆

\n") # コメントの表示 print("\n") # 本文の終わり print("\n") # ホームページの表示終わり number += 1 # 訪問者(number)を1増やす open("number.txt","w") do |write| # textを書き換える write.printf("%d\n",number) # 今回訪れた人の数を書き換え、 # 次回続きからカウント出来るようにする end # open に対しての end (変更点)------------------------------------------------------------- 元にしたのは counter.rb で、変数や表示される文字を変更した。また、txtのカウント数もリセットした。 (実行結果)------------------------------------------------------------ -kterm 上での実行結果- pan{c110170}% ./counter2.rb [~/public_html/advertise2/rubycgi] (offline mode: enter name=value pairs on standard input) Content-type: text/html; charset=EUC-JP いらっしゃいませ

あなたは 6 番目のお客様でございます。

はたけのHPにようこそ☆

-HP上での実行結果----------------------------------------------------- あなたは 5 番目のお客様でございます。はたけのHPにようこそ☆ (考察)------------------------------------------------------------------ ・ktermで実行すると、カウンターが増え、htmlも表示されているので、このプログラムは正しく動いていると言える。～何故このプログラムが動くのか??～・このプログラムは、openメソッドを用いて number.txt からのデータを読み込んで動いている。12行目でテキストを読み込んで、何人目の訪問者かを表示することができる。また、最後の31行目で訪問者も人数をプラスし、33行目の openメソッドでテキストの人数を書き換えているため、次の訪問者が来た際、続きから表示することができるのである。・今回は新しく advertise2/rubycgi のディレクトリを作成したので、CGIを動かすためにまた .htaccess を書き、使用を宣言した。これをしないとプログラムは起動しない。 B. (設定)----------------------------------------------------------------- リンク : http://roy/~c110170/advertise2/rubycgi/keisan.html 題名 : 計算プログラム企画意図 : ホームページ上で計算ができるプログラムを作成しました。自分のおこづかいやちょっとした計算が出来れば便利だと思い、作成しました。ホームページ上で " +,-,*,/ " の基本的な計算ができるプログラムを作成しました。数値は10桁まで入力できるように設定したので、最大10桁と10桁の計算ができる。 CGIで数値を入力してもらい、計算記号をラジオボックスで選択してもらう形を取った。 (プログラム) -keisan.rb-------------------------------------------------------------- #!/usr/koeki/bin/ruby require 'cgi' # cgiを使う宣言をする cgi = CGI.new("html4") print("Content-type: text/html; charset=EUC-jp\n\n") kazu1 = cgi["number1"] # keisan.htmlから受け取る値 kazu2 = cgi["number2"] # number2 の受取 siki = cgi["kigou"] # kigou (計算式)の受取 # p kazu1 # 受け取った数の確認 # p kazu2 # 受け取った数2の確認 # p siki # 計算記号の受け取りの確認 def keisan(n1,n2,kigou) # def メソッドの設定 if kigou == "tasu" # tasu を選択した際の場合 n1.to_i + n2.to_i # n1とn2を数字として計算 elsif kigou == "hiku" # hiku を選択した場合 n1.to_i - n2.to_i # 計算式 elsif kigou == "kakeru" # kakeru を選択した場合 n1.to_i * n2.to_i # 計算式 elsif kigou == "waru" # waru を選択した場合 n1.to_i / n2.to_i # 計算式 end # if に対する end end # def に対する end print("\n") print("\n") print("計算プログラム\n") print("\n") print("\n") print("

計算プログラム

\n") print("

*結果*<\p>\n") if siki == "tasu" # tasu だった場合の結果表示 printf("

%d + %d = %d

",kazu1,kazu2, keisan(kazu1,kazu2,siki)) elsif siki == "hiku" # hiku だった場合の結果表示 printf("

%d - %d = %d

",kazu1,kazu2, keisan(kazu1,kazu2,siki)) elsif siki == "kakeru" # kakeru だった場合の結果表示 printf("

%d * %d = %d

",kazu1,kazu2, keisan(kazu1,kazu2,siki)) elsif siki == "waru" # waru だった場合の結果表示 printf("

%d / %d = %d

",kazu1,kazu2, keisan(kazu1,kazu2,siki)) end print("\n") print("\n") -keisan.html-------------------------------------------------------------- 計算機

計算機

(変更点)----------------------------------------------------------------- 元にしたのは、ticket.rb と ticket.html , sightseeing.html 。 sightseeing.htmlを参考にラジオボタンを作成し、 ticket.rb と ticket.html を参考に CGI の受け取りの動作を作成。この3点を組み合わせてプログラムを完成させました。 (実行結果)---------------------------------------------------------------- -HP上での計算結果- (12 / 4 を計算したい。) 計算プログラム計算プログラム *結果* 12 / 4 = 3 -Kterm上での実行結果- ( 3 + 4を計算したい。)----------------------------- pan{c110170}% ./keisan.rb [~/public_html/advertise2/rubycgi] (offline mode: enter name=value pairs on standard input) number1=3 number2=4 kigou="tasu" Content-type: text/html; charset=EUC-jp 計算プログラム

計算プログラム

*結果*

3 + 4 = 7

(考察)--------------------------------------------------------------------- 実行結果の計算を確かめてみると、 pan{c110170}% bc -l [~/public_html/advertise2/rubycgi] 12/4 ← プログラム上での実行結果の確認 3.00000000000000000000 3+4 ← Kterm上での実行結果の確認 7 quit となり、計算は正しいと言える。今回プログラム作成中に .htmlから .rb に値をもらって来る際、どの変数がどこにあてはまっているのか分からなくなり、変数を変えながら確かめていった。例えば、keisan.html 18行目のプログラムの足す kigou は次の value に入っている変数 tasu の名前を kigou としていること。 .rbに持って来る際は、siki = cgi["kigou"] と表し、この siki には、"tasu" という変数が入っている。足すはhtml上でのラジオボタンで表示される文字であること。上のようなことを確かめた結果理解することが出来た。 D.----------------------------------------------------------------------- (設定) リンク : http://roy/~c110170/advertise2/rubycgi/css.html 題名 : きせかえプログラム企画意図 : 気分によってHPの雰囲気を簡単に変えられるように5つのパターンの CSSスタイルを作った。楽しんで選べるように、飲み物のイメージでスタイルを作成した。 CGIを使ってラジオボタンで選択してもらったイメージを貰ってきて、 .rbでリンクを貼ったCSSに飛ぶように設定した。 (プログラム) -css.html----------------------------------------------------------- 着せ替え

着せ替えプログラム

-css.rb--------------------------------------------------------------- #!/usr/koeki/bin/ruby $KCODE = 'e' require 'cgi' cgi = CGI.new('html4') print("Content-type: text/html; charset-EUC-jp\n\n") color = cgi["image"] #p color #Ruby の変数に入ったか確認 print("\n") print("\n") print("着せ替え\n") if color == "green" print("\n") elsif color == "brown" print("\n") elsif color == "white" print("\n") elsif color == "itigo" print("\n") elsif color == "blue" print("\n") end print("\n") print("\n") print("

* きせかえ *

\n") if color == "green" print("

抹茶のページ

\n") elsif color == "brown" print("

ココアのページ

\n") elsif color == "white" print("

みるくのページ

\n") elsif color == "itigo" print("

いちごオレのページ

\n") elsif color == "blue" print("

サイダーのページ

\n") end print("\n") print("\n") -green.css------------------------------------------------------ BODY{ background-color: #ccff66; } h1{ border-bottom: solid 1 px #66ff99; color: #336600; text-align: center; } p{ color: #000000; text-align: center; -brown.css----------------------------------------------------- BODY{ background-color: maroon; } h1{ border-bottom: solid 1 px #990000; color: #ffccff; text-align: center; } p{ color: #ffffff; text-align: center; } -while.css--------------------------------------------------------- BODY{ background-color: #ffff99; } h1{ border-bottom: solid 1 px #66ff99; color: #6666ff; text-align: center; } p{ color: #9966ff; text-align: center; } -itigo.css--------------------------------------------------------- BODY{ background-color: #ffccff; } h1{ border-bottom: solid 1 px #66ff99; color: #ff00cc; text-align: center; } p{ color: #ff66cc; text-align: center; } -blue.css---------------------------------------------------------- BODY{ background-color: #ccffff; } h1{ border-bottom: solid 1 px #66ff99; color: #3300ff; text-align: center; } p{ color: #6666ff; text-align: center; } (変更点) --------------------------------------------------------------- もとにしたのは index.html で、CSSを参考にした。また、 sightseeing.rb と sightseeing.html を参考に、組み立てました。 (実行結果) -Kterm上---------------------------------------------------------------- pan{c110170}% ./css.rb [~/public_html/advertise2/rubycgi] (offline mode: enter name=value pairs on standard input) image="green" Content-type: text/html; charset-EUC-jp 着せ替え

* きせかえ *

抹茶のページ

----------------------------------------------------------------------- pan{c110170}% ./css.rb [~/public_html/advertise2/rubycgi] (offline mode: enter name=value pairs on standard input) image="brown" Content-type: text/html; charset-EUC-jp 着せ替え

* きせかえ *

ココアのページ

------------------------------------------------------------------------ pan{c110170}% ./css.rb [~/public_html/advertise2/rubycgi] (offline mode: enter name=value pairs on standard input) image="white" Content-type: text/html; charset-EUC-jp 着せ替え

* きせかえ *

みるくのページ

------------------------------------------------------------------------- pan{HATAKEYAMA Kie}% ./css.rb [~/public_html/advertise2/rubycgi] (offline mode: enter name=value pairs on standard input) image="itigo" Content-type: text/html; charset-EUC-jp 着せ替え

* きせかえ *

いちごオレのページ

------------------------------------------------------------------------- pan{c110170}% ./css.rb [~/public_html/advertise2/rubycgi] (offline mode: enter name=value pairs on standard input) image="blue" Content-type: text/html; charset-EUC-jp 着せ替え

* きせかえ *

サイダーのページ

(考察)------------------------------------------------------------- .htmlをホームページ上で実行したところ、きちんと指定された配色になるため、正しく動いていると言える。また、今回も html のアクセス権に実行する権利である excuse がなかったため、Kterm上でアクセス権を足した。 pan{c110170}% ls -l [~/public_html/advertise2/rubycgi] 合計 102 -rw-r--r-- 1 c110170 st2010 146 11月 30日 15:55 cha.html -rw-r--r-- 1 c110170 st2010 27822 12月 1日 21:32 char_r2_c110170.obj -rw-r--r-- 1 c110170 st2010 7455 12月 1日 21:33 char_r2_c110170.png -rw-r--r-- 1 c110170 st2010 103 11月 30日 17:07 counter.html -rwxr-xr-x 1 c110170 st2010 103 11月 30日 16:06 counter.rb* -rwxr-xr-x 1 c110170 st2010 1624 11月 30日 17:15 counter2.rb* -rw-r--r-- 1 c110170 st2010 775 12月 1日 22:52 css.html -rwxr-xr-x 1 c110170 st2010 1021 12月 1日 22:55 css.rb* -rw-r--r-- 1 c110170 st2010 1348 12月 1日 22:09 fork.html -rwxr-xr-x 1 c110170 st2010 328 12月 1日 22:54 green.css* -rw-r--r-- 1 c110170 st2010 601 11月 30日 23:08 kadai.html -rw-r--r-- 1 c110170 st2010 616 12月 1日 13:51 keisan.html -rwxr-xr-x 1 c110170 st2010 1957 12月 1日 15:43 keisan.rb* -rwxr-xrwx 1 c110170 st2010 3 12月 1日 16:05 number.txt* pan{c110170}% chmod o+x css.html [~/public_html/advertise2/rubycgi] pan{c110170}% ls -l [~/public_html/advertise2/rubycgi] 合計 102 -rw-r--r-- 1 c110170 st2010 146 11月 30日 15:55 cha.html -rw-r--r-- 1 c110170 st2010 27822 12月 1日 21:32 char_r2_c110170.obj -rw-r--r-- 1 c110170 st2010 7455 12月 1日 21:33 char_r2_c110170.png -rw-r--r-- 1 c110170 st2010 103 11月 30日 17:07 counter.html -rwxr-xr-x 1 c110170 st2010 103 11月 30日 16:06 counter.rb* -rwxr-xr-x 1 c110170 st2010 1624 11月 30日 17:15 counter2.rb* -rw-r--r-x 1 c110170 st2010 775 12月 1日 22:52 css.html* -rwxr-xr-x 1 c110170 st2010 1021 12月 1日 22:55 css.rb* -rw-r--r-- 1 c110170 st2010 1348 12月 1日 22:09 fork.html -rwxr-xr-x 1 c110170 st2010 328 12月 1日 22:54 green.css* -rw-r--r-- 1 c110170 st2010 601 11月 30日 23:08 kadai.html -rw-r--r-- 1 c110170 st2010 616 12月 1日 13:51 keisan.html -rwxr-xr-x 1 c110170 st2010 1957 12月 1日 15:43 keisan.rb* -rwxr-xrwx 1 c110170 st2010 3 12月 1日 16:05 number.txt* また、指定された配色のページに飛ぶためには、 print("\n") 上記の文が必要になる。この文を入れることで、すぐにリンクの場所に飛ぶことが出来る。これもHPで実行して正しく働いていることがわかる。 -------------------------------------------------------------------------- ●今回作成したHP http://roy/~c110170/advertise2/rubycgi/fork.html ●Tgifを載せたHP (傑作広告ページ) http://roy/~c110170/advertise2/ -------------------------------------------------------------------------- [3]感想 Tgifを使ったのは初めてだったので、始めは上手く操作できずにとまどった。だが、使ううちに慣れてきたので今度使うときはより上手く書けると思う。 CSSも今回始めて理解したので、今度からは無駄な要素を入れずにHPを作成できると思う。 ●添付一覧● ---------------------------------------------------------- ・char_r2_c110170.png ・char_r2_c110170.obj ・counter2.rb ・number.txt ・keisan.rb ・keisan.html ・css.rb ・css.html ・green.css ・brown.css ・white.css ・itigo.css ・blue.css ・fork.html ----------------------------------------------------------------------- 参考文献神田直弥ファイルのアクセス権 http://roy/~naoya/permission.htm 神田直弥 CSSの基本 http://roy/~naoya/ruby/css.html 西村まどか第9回ことえらび http://roy/~madoka/2011/r2/09/ 共同製作者 : 伊藤桜子齋藤陽香 ----------------------------------- 東北公益文科大学　公益学部　公益学科　2年　畠山貴衣　 c110170@f.koeki-u.ac.jp