第 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ショップ
いらっしゃいませ
< プログラム : 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 >
スイッチ切替プログラム
スイッチ切替プログラム
さぁ、みんなでスイッチポン!
< プログラム : 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 の始め
print("") # タイトル、文章へヘッダ情報を記述する
print("スイッチ切替プログラム") # ホームページのタイトル
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、添付