これを探してね

探す文字列と変数とが一致している場合、あるいはまったく一致していない場合 (「キーワードを含めない」)、 という指定については、

/ A / =˜ B データの中のある行 B に指定した文字列 A が含まれている
/ A / !˜ B データの中のある行 B に指定した文字列 A を含まない

これらは正規表現での比較演算子と呼ばれる。 !˜ も使うことがあるので、覚えておこう。 データ処理を行うには、データから 1 行ずつ gets method で取ってきた。 


while 変数 = gets


正規表現を探す処理


end

探すデータの指定は、Kterm で、 

% ./プログラム.rb データ名

とするか、データが決まっている場合は、 open -- end を用いてデータを指定しておくこともできた。 


open("データ名","モード")   do |ファイル変数|r, wでそれぞれ読み込み、書き込み


ファイル変数.データ処理


end

正規表現をプログラムに仕掛けるとき

Ruby で正規表現を指定するには、プログラムに正規表現の演算子を使う方法と、 Regexp method を使い、指定する方法を入力して取り出す方法の 2 つを学んだ。

/パターン文字列/ 正規表現の比較演算子 データを読み込んだ変数

例えば

/(\S+)\s+(\d+)\1..\s+(\S+)/ !˜ 変数

などと毎回 プログラム.rb に書いてからプログラムを動作させる必要があった。

Regexp.new(パターン文字列の変数,オプション,コード)

を起動して使う場合には、 

%./プログラム.rb データ名
入力を促す表示: 検索したいパターン文字列の入力

であった。

文字列の判別と優先順位

データはいくつものカテゴリがあるものがある。 データは空白で境界をつけられていた。取り出し方は

\S 1 文字
\s 1 空白文字
\d 1 数値 [0-9]
\S+ 文字列
\s+ 空白
\d+ 並んでいる数値全て

() で検索したい文字列を優先的に取り出すことができた。

(\S+)\s+(\d+)

ならば

文字列 空白 数値

の組み合わせを全て取り出して来る。 () は左から順に、

(取り出したい文字列 1)\s+(取り出したい文字列 2)...

に対して

$1, $2 ...

と指定した。

HTML の復習

HTML とは、ホームページ用の文書であった。 ホームページを公開するためには、 *.html という文書を作成し、 ˜/public_html の下に文書を置いておく必要があった。

ticket.html を ˜/public_html/express という directory に作成することを考えよう。 もし express という directory がなければ、 

%cd ˜/public_html
% mkdir express

ticket.html には、 HTML 文書で内容が打ち出される。 利用者は閲覧および印刷することができる。 実際にこのような紙媒体の電子チケットは、 海外ではかなり一般的になってきている。 個人旅行などをするさいに、利用することになるかもしれない。 この仕組みを考えてみよう。 例えばホームページに必要なデータを入力した場合、

データを出力した ホームページ が表れる。 利用者はこれを印刷し、乗務員に提示する。 上記のようなホームページ作成を、 動的に出力するプログラムを作ろう。動的に、とは、 駅名を入力すると電子チケットが発券できる、という意味である。

後期には、 Web 上でデータを入力すると HTML 文書に変換するしくみ CGI スクリプトについて学ぶ。 前期は、 その前段階として、 もらったデータを HTML 文書に変換する練習 をしよう。

CSS の復習

HTML 文書を作成するには、次のような考えかたをするとよかった。

HTML ファイルの tag について

最低限必要になりそうな tag を復習する。

2 年次では、<head>--</head> には HTML 文書のタイトルを示す <title>--</title> tag を置くだけでなく、 CSS ファイルの名前と位置を書く。本来は著作権などの情報も示しておく。

<link rel="stylesheet" type="text/css" href=" 使用する CSS ファイル.css">
stylesheet を CSS で設定し、その CSS ファイル名を与える。

CSS ファイル

CSS ファイルは、 *.css というファイルである。 tag 全体を変更する場合は次のように書く。 


tag の指定 {


効果の種類: 具体的な指定  


}

特定の部分だけ変更したい場合には、 .クラス を指定する。 


.クラス tag の指定 {


効果の種類: 具体的な指定  


}

具体的には フォントと色見本を見てみよう。

HTML 文書の見本

HTML 文書や CSS ファイルの見本をつけておく。 Ctrl-x Ctrl-f で 

Find File: ˜/public_html/directory 名/example.html

とする。必要な構造は 


<html>
<head>
<link rel="stylesheet" type="text/css" href="example.css">
</head>
<body>

  本文

</body>
</html>

であった。 example.css は同じ directory に置く。 従って ˜/public_html/directory 名/example.css として 


p {


color: white;
background: green;


}

h1 {


font-size: 20pt;
text-align: center;


}

などと書く。色については 色見本 などを参考に、 見やすい組み合わせを選ぶこと。なお w3.org は HTML 文書の総本山である。

HTML 文書を自動で作る前に

HTML 文書をプログラムを使って自動作成するためには、 段階を踏みながら完成させる必要がある。

先に必要な情報を打ち出すことを考える。 装飾はあとからつける。

専用 directory の作成

ホームページは全て ˜/public_html の下であった。 ファイルが散らばるのを防ぐため、 public_html の下に、 ticket という directory を作ろう。 

%cd ˜/public_html
%mkdir ticket

Kterm で練習

exp_html.rb を作って、実行するとホームページ文書を Kterm で見せるように作ろう。 


#!/usr/koeki/bin/ruby

ticketid = "41-1258" 
year = 2010
month = 8
day = 1
dpt = "酒田"
arv = "鶴岡"
name = "公益ルビ緒"
car = 3
seat = "2 A"
millage = "Y998-8580"

print("オンライン特急乗車券\n")

print("庄内急行 Shonai Express\n")
printf("庄内急行特急券: %s -- %s間\n", dpt, arv)

printf("発券番号: %s\n",ticketid)
printf("座席: %d 号車 %s\n",car , seat)

printf("利用者名: %s\n", name)
printf("使用日: %d 年 %d 月 %d 日\n", year, month, day)

printf("マイレージ番号: %s\n", millage)
printf("種類: トクトクきっぷ\n")

printf("券面記載の指定日のみ有効。
マイレージカードは乗務員に提示すること。\n")

まず、もとのプログラムがきちんと動くかどうか、調べよう。 チェックが終ったら、 HTML にする にはどうしたらいいか考えてみよう。

HTML 文書への変換予想

exp_html.rb を HTML 風にするには、どうしたらよいか。

print や printf 文は、" で囲まれた部分を出力する。 HTML 文書は、tag で囲まれていればよい。 よって、HTML 文書として出力されるように tag で挟んで出力するように変更してみよう。 <table> tag -- </table> の部分は少しむずかしいので、先に html, body, h1, h2, p tag をプログラムに書いてチェックしてみよう。 

#!/usr/koeki/bin/ruby 


print("<html>\n<head>\n")
print("\t<title>オンライン特急乗車券</title>\n")
print("</head>\n")
print("<body>\n")
print("<h1>庄内急行 Shonai Express</h1>\n")
printf("<h2>庄内急行特急券: %s -- %s間</h2>\n", dpt, arv)

printf("\t発券番号: %s\n",ticketid)
printf("\t座席: %d 号車 %s\n",car , seat)

printf("\t利用者名: %s\n", name)
printf("\t使用日: %d 年 %d 月 %d 日\n", year, month, day)

printf("\tマイレージ番号: %s\n", millage)
printf("\t種類: トクトクきっぷ\n")

printf("<p>券面記載の指定日のみ有効。


マイレージカードは乗務員に提示すること。</p>\n")


printf("</body>\n</html>\n")

Kterm で、プログラムを書いた directory ˜/public_html/ticket に移動し、 chmod +x exp_html.rb する。実行した結果: 

<html>
<head>
        <title>オンライン特急乗車券</title>
</head>
<body>
<h1>庄内急行 Shonai Express</h1>
<h2>庄内急行特急券: 酒田 -- 鶴岡間</h2>

          発券番号: 41-1258
          座席: 3 号車 2 A

          利用者名: 公益ルビ緒
          使用日: 2012 年 8 月 1 日
          マイレージ番号: Y998-8580
          種類: トクトクきっぷ

<p>券面記載の指定日のみ有効。
マイレージカードは乗務員に提示すること。</p>
</body>
</html>

と出力されたら、成功。 <table> -- </table> tag の部分をつけてみよう。

table tag 出力

<table> -- </table> tag は、 <table> -- </table> で囲った部分を表にすると指定し、行部分を <tr> -- </tr> で囲む。 また、列はその行のなかで <td> -- </td> と囲むものであった。Kterm で見やすいように \t を出力に加えながら、表の部分を完成させてみよう。 


printf("<h2>庄内急行特急券: %s -- %s間</h2>\n", dpt, arv)
print("<table>\n")
print("\t<tr>\n")
printf("\t\t<td>発券番号: %s</td>\n",ticketid)
printf("\t\t<td>座席: %d 号車 %s</td>\n",car , seat)
print("\t</tr>\n")
print("\t<tr>\n")
printf("\t\t<td>利用者名: %s</td>\n", name)
printf("\t\t<td>使用日: %d 年 %d 月 %d 日</td>\n", year, month, day)
print("\t</tr>\n")
print("\t<tr>\n")
printf("\t\t<td>マイレージ番号: %s</td>\n", millage)
printf("\t\t<td>種類: トクトクきっぷ</td>\n")
print("\t</tr>\n")
print("</table>\n")
printf("<p>券面記載の指定日のみ有効。


マイレージカードは乗務員に提示すること。</p>\n")

実行し、人間の目で見ても表が崩れていないか確かめてみよう。


<html>
<head>


<title>オンライン特急乗車券</title>


</head>
<body>
<h1>庄内急行 Shonai Express</h1>
<h2>庄内急行特急券: 酒田 -- 鶴岡間</h2>
<table>


<tr>


<td>発券番号: 41-1258</td>
<td>座席: 3 号車 2 A</td>


</tr>
<tr>


<td>利用者名: 公益ルビ緒</td>
<td>使用日: 2012 年 8 月 1 日</td>


</tr>
<tr>


<td>マイレージ番号: Y998-8580</td>
<td>種類: トクトクきっぷ</td>


</tr>
</table>


<p>券面記載の指定日のみ有効。
マイレージカードは乗務員に提示すること。</p>
</body>
</html>

これを Kterm 上ではなく、 HTML 文書として出力するにはどうしたらよいだろうか。 file -- open で書き込む 方法を思い出し、 次のように変更しよう。

HTML 文書の打ち出し

書き込むファイル名を express.html としよう。書き込みモード w でファイルを新規に開き、 記入させるが、どのファイルであると知らせる内部変数を html としておこう。 


#!/usr/koeki/bin/ruby
ticketid = "41-1258" 
year = 2012
month = 8
day = 1
dpt = "酒田"
arv = "鶴岡"
name = "公益ルビ緒"
car = 3
seat = "2 A"
millage = "Y998-8580"

open("express.html","w") do |html|


html.print("<html>\n<head>\n")
html.print("\t<title>オンライン特急乗車券</title>\n")
html.print("</head>\n")
html.print("<body>\n")
html.print("<h1>庄内急行 Shonai Express</h1>\n")
html.printf("<h2>庄内急行特急券: %s -- %s間</h2>\n", dpt, arv)
html.print("<table>\n")
html.print("\t<tr>\n")	
html.printf("\t\t<td>発券番号: %s</td>\n",ticketid)
html.printf("\t\t<td>座席: %d 号車 %s</td>\n",car , seat)
html.print("\t</tr>\n")
html.print("\t<tr>\n")
html.printf("\t\t<td>利用者名: %s</td>\n", name)
html.printf("\t\t<td>使用日: %d 年 %d 月 %d 日</td>\n", year, month, day)
html.print("\t</tr>\n")
html.print("\t<tr>\n")
html.printf("\t\t<td>マイレージ番号: %s</td>\n", millage)
html.printf("\t\t<td>種類: トクトクきっぷ</td>\n")
html.print("\t</tr>\n")
html.print("</table>\n")
html.printf("<p>券面記載の指定日のみ有効。
マイレージカードは乗務員に提示すること。</p>\n")


html.printf("</body>\n</html>\n")

end

実行し、ls を行い、 express.html が存在するかどうか調べよう。 また、cat express.html を行い、形が崩れていないかどうか調べよう。 存在していたら、 express.html をブラウザを使って開いてみよう。

express.html のブラウザ出力

色をつけたり、フォントを整えたりするには、 具体例を見て 考えよう。 最後に、 CSS ファイルを作成し、読みこませよう 。

色をつけよう

CSS 文書を書いておこう。 express.css としよう。 


body {


background: green; 
font-size: 1em;


}

h1 {


color: white; 
background: yellow; 
font-size: 1.5em;
text-align: center;
padding: 0.5em;


}

h2 {


font-size: 1.5em;
text-align: center;


}

p {


background: green; 
color: black; 
font-size: 1em;
text-align: center;


}

table.center {


margin:auto; 


}

table { 


border-collapse: collapse;
border: 1px yellow solid;


}

tr {


border: 1px yellow solid;


}

実行し、 ls を行い、 express.html が存在するかどうか調べよう。 また、 cat express.html を行い、形が崩れていないかどうか調べよう。 存在していたら、 express.html をブラウザを使って開いてみよう。

CSS ファイルを読みこんでいる場合の express.html のブラウザ出力

他の作品にも応用させたい場合は、 HTML と CSSの考え方 を見ておこう。

中央寄せ

文字を中央に寄せるには text-align を center に、 背景で囲った部分を増やすには padding を指定する。 em という単位は、M という文字で測った大きさである。 table tag を揃えるには、 margin を auto に指定し、table tag で、 class を center とする必要がある。

exp_html.rb との連動

express.css で行った変更を exp_html.rb で実行させるには、 


html.print("\t<link rel=\"stylesheet\" type=\"text/css\" href=\"express.css\">\n")

を付け加える必要がある。 また、<table> -- </table> tag の中を 自分仕様のクラス center を使うことに変更したので、 


html.print("<table class=\"center\">")

と変更する。

CSS の色見本

Web Safe Color による色の見本一覧を提示した。 また、色を英語で指定したい場合は、 本家の初心者向けの色見本を参考にするとよい。

#000000 #000033 #000066 #000099 #0000cc #0000ff
#003300 #003333 #003366 #003399 #0033cc #0033ff
#006600 #006633 #006666 #006699 #0066cc #0066ff
#009900 #009933 #009966 #009999 #0099cc #0099ff
#00cc00 #00cc33 #00cc66 #00cc99 #00cccc #00ccff
#00ff00 #00ff33 #00ff66 #00ff99 #00ffcc #00ffff
#330000 #330033 #330066 #330099 #3300cc #3300ff
#333300 #333333 #333366 #333399 #3333cc #3333ff
#336600 #336633 #336666 #336699 #3366cc #3366ff
#339900 #339933 #339966 #339999 #3399cc #3399ff
#33cc00 #33cc33 #33cc66 #33cc99 #33cccc #33ccff
#33ff00 #33ff33 #33ff66 #33ff99 #33ffcc #33ffff
#660000 #660033 #660066 #660099 #6600cc #6600ff
#663300 #663333 #663366 #663399 #6633cc #6633ff
#666600 #666633 #666666 #666699 #6666cc #6666ff
#669900 #669933 #669966 #669999 #6699cc #6699ff
#66cc00 #66cc33 #66cc66 #66cc99 #66cccc #66ccff
#66ff00 #66ff33 #66ff66 #66ff99 #66ffcc #66ffff
#990000 #990033 #990066 #990099 #9900cc #9900ff
#993300 #993333 #993366 #993399 #9933cc #9933ff
#996600 #996633 #996666 #996699 #9966cc #9966ff
#999900 #999933 #999966 #999999 #9999cc #9999ff
#99cc00 #99cc33 #99cc66 #99cc99 #99cccc #99ccff
#99ff00 #99ff33 #99ff66 #99ff99 #99ffcc #99ffff
#cc0000 #cc0033 #cc0066 #cc0099 #cc00cc #cc00ff
#cc3300 #cc3333 #cc3366 #cc3399 #cc33cc #cc33ff
#cc6600 #cc6633 #cc6666 #cc6699 #cc66cc #cc66ff
#cc9900 #cc9933 #cc9966 #cc9999 #cc99cc #cc99ff
#cccc00 #cccc33 #cccc66 #cccc99 #cccccc #ccccff
#ccff00 #ccff33 #ccff66 #ccff99 #ccffcc #ccffff
#ff0000 #ff0033 #ff0066 #ff0099 #ff00cc #ff00ff
#ff3300 #ff3333 #ff3366 #ff3399 #ff33cc #ff33ff
#ff6600 #ff6633 #ff6666 #ff6699 #ff66cc #ff66ff
#ff9900 #ff9933 #ff9966 #ff9999 #ff99cc #ff99ff
#ffcc00 #ffcc33 #ffcc66 #ffcc99 #ffcccc #ffccff
#ffff00 #ffff33 #ffff66 #ffff99 #ffffcc #ffffff

リンクの色を変更するには

a tag の色などを変更するには、クリック前、過去にクリックしたもの、 クリック途中などの状況ごとに変更することができる。 


a:link {
    color: yellow;
}
a:visited {
    color: green;
}
a:hover {
    color: cyan;
}
a:active {
    color: pink;
}

フレームは使わない

フレームは Ctrl U でソースを見れば分かるように、 読み上げソフトで読むことができず、目で読まない人には伝わらない。 float などを使う。 公益ルビ緒ホームページ を参考にする。 top, menu, contents というラベルを作り、位置を CSS で制御した。 


.top {height: 20%;
     background: darkblue;
}
.menu {width: 20%;
       float: left; 
       background: darkgreen;     
       padding-left: 1em;
       height: 100%;
}
.contents {width: 60%;
           margin-left: 3em;
           float: left;	  
}

日付を出力するには

日付や時刻を Kterm を起動したときにしたい場合、 Time method が使える。 

Time.now        # 2012-06-04 21:22:45 +0900 日付と時刻、どこの標準時か
Time.now.day    # 日にち
Time.now.month  # 月
Time.now.year   # 年
Time.now.hour   # 時
Time.now.min    # 分
Time.now.wday   # 曜日、ただし 0..6 までの整数で

などを表示させてみよう。何回も使う場合は、変数に入れておいて、 

year = Time.now.year

print("%d年はたいへんお世話になりました。%d年もよろしくおねがいします\n", year, year+1)

などと使う方が賢いやり方。

日付を入力して曜日を知るには 

 
Time.local(2012,6,6)
とすると、2012-06-06 00:00:00 +0900 などと、日付と JST での表示を得る。 これを使って曜日を知ることができる。