第 9 回 ことえらび レポート課題 氏名: 吉住 貴則 学籍番号: C1101980 語学クラス: 英語 2 コース(系): 地域共創コース <筆記問題> 1A、ラジオボタンの仕組み ラジオボタン … 複数の選択肢から1つを選択する場合に使用 <語源> 昔のラジオには、ボタンを押すとあらかじめ設定された周波数に 移動する機能があり、そこから発生したらしい。 1) 複数の選択肢に1つずつ input 要素を用意 2) 同じグループのラジオボタンには共通の name 属性を指定 : 授業で作成した HTML 通路 希望なし type="radio" … ラジオボタンを使用 name="seat" … ラジオボタンの区別 value="窓" … ユーザが選択すると選択されたものがプログラムに 送信される ※ cheked … これが入力されていると最初、その場所にボタンが 選択されている : 授業で作成した RUBY seat = cgi["seat"] html で選択された項目が seat に代入され、反映する 1B、チェックボックスの仕組み チェックボックス … 複数の選択肢から複数を選択する場合に使用 1) 複数の選択肢1つずつ input 要素を用意 2) 同じグループのチェックボックスには共通の name 属性を指定 3) 同じ項目を選択するたびに、on と off に入れ替わる : 授業で作成した HTML バイキング つや姫 type="checkbox" … チェックボックスの使用 name="dinner" … 複数のチェックボックスを作る際には 異なる name を使用する value="夕食" … ユーザが選択すると選択されたものがプログラムに 送信される <プログラム> 2A、カウンタについて 1)、このプログラムのURL ( http://roy/~c110198/advertise2/rubycgi/fork.html ) 2)、考えた設定 昔、NHK紅白歌合戦で会場の方の投票数をカウントで数を数えていた 「日本野鳥の会」が頭に浮かび、そのカウントの動きを プログラムにして考えてみました。 3)、作成したプログラム #!/usr/bin/env ruby #ruby を 使うのに env コマンドを立ち上げて使う require 'cgi' # CGI を使う cgi = CGI.new("html4") # CGI を HTML 文書に使う print("Content-type: text/html; charset=EUC-JP\n\n") # 日本語コードの定義 number = 0 # 0から数えていく open("count.dat","r") do |yomu| # 読み込み専用 OPEN メソッド # count.txt から 取りこみ 変数 yomu に代入 while data = yomu.gets # data に get で取りこみした yomu を 繰り返し代入 if /(\d+)/ =~ data # もし、data に 数字が入っていたら # (/d+) : 正規表現 数字が1文字以上だったとき # $1 と 連動 number = $1.to_i end # if の end end # while の end end # open の end print("\n") # html の 書き始め print("\n") # head の 書き始め print("〜 公益法人 野鳥の会 〜\n") # title print("\n") # head の 書き終わり print("\n") # body の 書き始め printf("

%d匹目の野鳥

\n", number) # dat の書き換えをするのに # printf を利用 print("

自然の中さよぐきたのぉ

\n") # p 文で 画面に表示 print("\n") # body の 書き終わり print("\n") # html の 書き終わり number += 1 # number の数字を1つずつ増やしなさい open("count.dat","w") do |write| # 書き込み専用 OPEN メソッド write.printf("%d\n",number) # 1つずつ増やした数を書込みなさい end # open の end 4)、もとにしたプログラム 第9回 レポート課題の カウンタ例 (http://roy/~madoka/2011/r2/src/counter.rb )を参考に作成。 <主な変更点> : 読み込み dat の 名前の変更 : print 内の文章の変更 : 読みやすくするために空白の有効利用 5)、実行結果 pan{c110198}% ./count.rb [~/public_html/rubycgi] (offline mode: enter name=value pairs on standard input) Content-type: text/html; charset=EUC-JP 〜 公益法人 野鳥の会 〜

1匹目の野鳥

自然の中さよぐきたのぉ

<5回目の場合> 5匹目の野鳥 自然の中さよぐきたのぉ <6回目> 6匹目の野鳥 自然の中さよぐきたのぉ 6)、考察 <2回目> pan{c110198}% ./count.rb [~/public_html/rubycgi] (offline mode: enter name=value pairs on standard input) Content-type: text/html; charset=EUC-JP 〜 公益法人 野鳥の会 〜

2匹目の野鳥

自然の中さよぐきたのぉ

pan{c110198}% ./count.rb [~/public_html/rubycgi] (offline mode: enter name=value pairs on standard input) Content-type: text/html; charset=EUC-JP <3回目> 〜 公益法人 野鳥の会 〜

3匹目の野鳥

自然の中さよぐきたのぉ

pan{c110198}% [~/public_html/rubycgi] <4回目> pan{c110198}% ./count.rb [~/public_html/rubycgi] (offline mode: enter name=value pairs on standard input) Content-type: text/html; charset=EUC-JP 〜 公益法人 野鳥の会 〜

4匹目の野鳥

自然の中さよぐきたのぉ

※ これらの結果からカウントが動いていることがよくわかる。 最初、レポート課題の「例」と「構造」が別のプログラムと 勘違いしていて、WEB で結果を出した順番が遅くなり、 少し変になってしまったがこのプログラムは正常だと言える。 2B、計算できる CGI スプリクトプログラム 1)、このプログラムのURL ( http://roy/~c110198/advertise2/rubycgi/fork.html ) 2)、考えた設定 HASH や DEF - END を 用いて課題を解いてたときの 町のCDショップを再利用し、プログラムを作成した。 今回は前回よりも料金を値下げした。 本当は、段々セールのシーズンなので 割引の計算もやりたかったがここまでで時間が掛かり、 次回の課題にすることにした。 3)、作成した HTML 、プログラム < html : keisan.html > 町のCDショップ

いらっしゃいませ

  • CDの種類は何ですか?
  • ※この店舗のCDはすべて同一料金で、シングル: 1000円、アルバム: 3000円 です。

  • 何枚ですか?:

< プログラム : keisan.rb > #!/usr/bin/env ruby #ruby を 使うのに env コマンドを立ち上げて使う $KCODE = 'e' # 日本語 で 表示 require 'cgi' # CGI を使う cgi = CGI.new('html4') # CGI を HTML 文書に使う t = Time.now # 現在時間を表すメソッド print("Content-type: text/html; charset=EUC-JP\n\n") # 日本語コードの定義 kd = cgi["kind"] # Ruby に CGI でもらってきた arrive を代入 sh = cgi["sheet"].to_i #p arv # Ruby の変数に入ったか確認 print("\n") # 以下 html で表示される部分 print("\n") print("お会計\n") print("\n") print("\n") print("

レシート

\n") print("

いつも御利用いただきましてありがとうございます。

") hr = t.hour #: 時 mn = t.min #: 分 dd = t.day #: 日 mm = t.month #: 月 yy = t.year #: 年 printf("

%d年 %d月 %d日

",yy,mm,dd) printf("

%s : %d枚

\n",kd,sh) # 選んだ 出発駅 と 到着駅が入る if /シングル/ =~kd # もし、シングルが html から選択されたとき scd = 1000 * sh # 1000(円) * sh (枚数)の 計算をしなさい print("

シングルCD 1枚につき 1000円ですので

") printf("

合計金額: %d円

",scd) # 入力した数値と決められたシングルCDの値段が # 計算され、表示される。 elsif /アルバム/ =~kd # もし、アルバムが html から選択されたとき acd = 3000 * sh # 3000(円) * sh (枚数)の 計算をしなさい print("

アルバムCD 1枚につき 3000円ですので

") printf("

合計金額: %d円

",acd) # 入力した数値と決められたシングルCDの値段が # 計算され、表示される。 end print("

担当者 吉住 貴則

") printf("

%d時 %d分

",hr,mn) print("\n") print("\n") 5)、もとにしたプログラム sightseeing.rb を 基本にして作成した。 時間の表示などはそのままにしたが、入力された文字を 使って計算させるのにとても苦労した。 cgi[sheet] に .to_i をつけて 計算が出来たときは 本当に嬉しかった。 今度は、割引も出来るように改善したい。 6)、実行結果 A: <シングルCD を 5枚購入> レシート いつも御利用いただきましてありがとうございます。 2011年 12月 2日 シングル : 5枚 シングルCD 1枚につき 1000円ですので 合計金額: 5000円 担当者 吉住 貴則 18時 32分 B: <アルバムCD を 7枚購入> レシート いつも御利用いただきましてありがとうございます。 2011年 12月 2日 アルバム : 7枚 アルバムCD 1枚につき 3000円ですので 合計金額: 21000円 担当者 吉住 貴則 18時 32分 7)、考察 実行結果で表示したもの A、B を bc -l で確かめ算してみたいと思う。 A : 1000 円のシングルが 5 枚で pan{YOSHIZUMI Takanori}% bc -l [~/public_html/advertise2/rubycgi] 1000*5 5000 B : 3000 円のアルバムが 7 枚で pan{c110198}% bc -l [~/public_html/advertise2/rubycgi] 3000*7 21000 以上により、実行結果と計算結果が合致したので このプログラムは正常といえる。 2D、CSS 色切替プログラム 1)、1)、このプログラムのURL ( http://roy/~c110198/advertise2/rubycgi/fork.html ) 2)、考えた設定 明るい色のラジオボタンを作り、クリックを押して 決定を押すと色が選択した色に変わるものを考えた。 3)、作成した html 、プログラム < html : kirikae.html > スイッチ切替プログラム<title> <link rel="stylesheet" type="text/css" href="fork.css"> <head> <body> <h1>スイッチ切替プログラム</h1> <h2>さぁ、みんなでスイッチポン!</h2> <form method="POST" action="./kirikae.rb"> <p># input type="radio" : ラジオボタン</p> <p># name="ラジオボタンの名前" : ラジオボタンを区別するため名前を付ける</p> <p># value="CGI 変数の値" : ユーザーが選んだ値がプログラムに送られる</p> <ul> <p> <input type="radio" name="color" value="pink">ピンク <input type="radio" name="color" value="mizu">水色 <input type="radio" name="color" value="kimi">黄緑 <input type="radio" name="color" value="ao">明るい青 </p> <p> <input type="submit" value="Let's go"> <input type="reset" value="return"> </p> </form> </body> </html> < プログラム : kirikae.rb > #!/usr/koeki/bin/ruby require 'cgi' # CGI を使用する宣言 cgi = CGI.new('html4') # cgi という名前で CGI をつくる バージョンは 4 print("Content-type: text/html; charset=EUC-jp\n\n") # 日本語表記にする color = cgi["color"] # 受け取ったデータを color に代入 print("<html>") # html の始め print("<head>") # タイトル、文章へヘッダ情報を記述する print("<title>スイッチ切替プログラム") # ホームページのタイトル if color == "pink" # もし color が ピンク だったら print("") elsif color == "mizu" # もし color が 水色 だったら print("") elsif color == "kimi" # もし color が 黄緑 だったら print("") elsif color == "ao" # もし color が 明るい青 だったら print("") end # ifのend print("") # headの終わり print("") # bodyの始め print("

スイッチ切替プログラム

") # ホームページの見出し print("

さぁ、みんなでスイッチポン!

") # ホームページの見出し print("") # body の終わり print("") # html の終わり < fork.css > body { background-color: #999fff; } h1 { margin: 50px 30px 0px 30px; padding: 0px 0px 0px 10px; border-left: solid 10px #881111; border-bottom: solid 1px #ff0000; color: #003333; } p { margin: 30px 50px 0px 50px; color: #000000; letter-spacing: 0.1em; line-height: 1.5; font-size: large; } pre { font-size: large; margin: 20px 70px 0px 70px; letter-spacing: 0.1em; color: #ffffff; background-color: #336600; line-height: 1.2; } a:link { color: #000066; } a:visited { color: #000066; } a:hover { color: #000066; background: #ffffcc } a:active { color: #000066; background: #ffffcc; border: 3px solid #ff0000 } .center { text-align: center; } < pink.css > body { background-color: #9932CC ; } h1{ color: #ffffff ; font-size: 2em; text-align: center; background: #339900 ; } h2{ color: #ffffff; font-size: 1.5em; text-align: center; background: #ff0000 ; } < lightblue.css > body { background-color: #BCD2EE ; } h1{ color: #ffffff ; font-size: 2em; text-align: center; background: #339900 ; } h2{ color: #ffffff; font-size: 1.5em; text-align: center; background: #ff0000 ; } < lightgreen.rb > body { background-color: #6E8B3D ; } h1{ color: #ffffff ; font-size: 2em; text-align: center; background: #339900 ; } h2{ color: #ffffff; font-size: 1.5em; text-align: center; background: #ff0000 ; } < bule.css > body { background-color: #00B2EE ; } h1{ color: #ffffff ; font-size: 2em; text-align: center; background: #339900 ; } h2{ color: #ffffff; font-size: 1.5em; text-align: center; background: #ff0000 ; } 4)、もとにしたプログラム 2B で作成した keisan.rb を 基本にして作成した。 色がみんなとかぶらないようにと、 色を探すのがとても大変でした。 自分で半信半疑で作ったので、実行するときとても 怖かったが、スイッチを押して動いたので一安心した。 5)、実行結果 色の移り変わりはホームページからでなければ分からないので、 kterm で実行したものを結果にする。 <明るい青> pan{c110198}% ./kirikae.rb [~/public_html/advertise2/rubycgi] (offline mode: enter name=value pairs on standard input) color="bule" Content-type: text/html; charset=EUC-jp スイッチ切替プログラム

スイッ チ切替プログラム

さぁ、みんなでスイッチポン!

% <ピンク> pan{c110198}% ./kirikae.rb [~/public_html/advertise2/rubycgi] (offline mode: enter name=value pairs on standard input) color="pink" Content-type: text/html; charset=EUC-jp スイッチ切替プログラム

スイッチ切替プログラム

さぁ、みんなでスイッチポン!

% 6)、考察 今回は、計算などで結果が表示させられないのだが、 WEB 上で確認したところ全て表示し、着色されていたので この CSS プログラムは、正常と言える。 3、tgif で 作成した画像 <題名> 幸せ運ぶ不苦労(ふくろう) <解説> 今年の3月11日に襲った巨大な地震。 それからもう、9ヵ月経とうとしている。 そんな出来事を経ても元気な被災地のみなさん。 「来年こそは、みんな笑顔で良い年でありますように」と 祈りを込めて梟を描いた。 <作成方法> tgif で 丸や直線を使い描いた。 当初は、直線だけで描いていたのだが 色付けが上手くできず、丸も使った。 <工夫した点> 梟の羽の模様が、上手くいかず 何回も失敗しながらやっとできた。 4、感想 今回は、前回に引続きとてもバラエティ豊かな課題だった。 とても時間を要したが、いつもながら課題をすると 頭に、やり方が入ってくるので感謝している。 地道に、時間は掛かっても自力で行うことを これからも守っていきたい。 5、参考文献 WEBサイト :西村まどか先生 <前期> 第 12 回 「自由課題コンペティション / 画像作成」 (http://roy/~madoka/2011/r1/12/) <後期> 第 8 回 「第 9 回 ことえらび レポート課題 」 (http://roy/~madoka/2011/r2/09/) ノート :自分で作成した sightseeing.rb、sightseeing.html 6、添付