roy > naoya > 基礎プログラミングII > (8)CGI[1]

(8) 11/19の授業内容:CGI[1]

[1]CGIとは

インターネット上の掲示板では、入力エリアにデータを入力し「OK」を押すことでWebページに入力した情報が表示される。このようにHTML文書内にデータ入力エリアを配置し、入力後にボタンを押すとあらかじめ定められた処理を行い、結果が表示されるような仕掛けがある。このような仕組みをCGI(Common Gateway Interface)という。

CGIのデータ入力窓の集合を入力フォームという。 以下の入力フォームに値を入力、あるいは選択し「OK」ボタンを押してみよう。

氏名：
身長: cm 　体重： kg

上のフォームで入力もしくは選択された値はCGI変数という特別な変数で、入力結果を処理するプログラムであるCGIスクリプトに送られる。このCGIスクリプトは一般にRubyもしくはPerlという言語で書かれており、何らかの処理を行った結果を、HTML文書として出力する。これを概念的に示すと以下のようになる。

氏名：[公益太郎]
身長：[1][7][0]cm
体重：[0][6][5]kg
[OK][reset]
 →

Ruby（Perl）プログラムが値を受け取り、何らかの処理を実行すると同時に、結果出力用のHTML文書を生成する。

 → 
<html>
<head>
<title>結果！</head>
</head>
<body>
<p>うんたら</p>
</body>
</html>

[2]CGIの作り方

CGIは以下の3つのファイルにより構成される。

CGIを構成する3つのファイル

  1. Webサーバーに対して「ここでCGIプログラムを利用する」という宣言を記述したファイル
  2. 利用者がデータを入力するためのHTML文書
  3. 入力したデータを受け取って処理をするプログラム

[3]CGIプログラムの利用宣言

CGIを構成するファイルのうち「入力したデータを受け取って処理をするプログラム」がRubyのプログラムに相当する。

Rubyプログラムは自分で作成したruby/などのディレクトリに保存していたが、Web上でプログラムを実行させるためには、public_htmlの中にプログラムのファイルを置く。htmlファイルと同様に、ブラウザから閲覧させたいファイルは全てpublic_htmlのディレクトリ内に置いておかなければならない。

ここでは、CGIを利用するためのディレクトリをpublic_htmlの中に新たに作成し、CGI関連のファイルは全てその中に保存しておくことにする。

仮に、作成するディレクトリがcgi-binである場合、まず

pan{c10xxxx}% cd public_html[Return]
pan{c10xxxx}% mkdir cgi-bin[Return]

というように入力する。mkdirコマンドはディレクトリ作成コマンドであり、cgi-binというディレクトリを作成している。

次に、「このディレクトリ内でCGIを利用する」という宣言を行う。具体的にはcgi-binのディレクトリ内に.htaccessという名前のファイルを作成する（先頭のドットを忘れない！）。

このファイルを作成するためには、emacsでFile:~/public_html/cgi-bin/.htaccess[Return]とすればよい。ファイルを新規作成したら、以下の内容を記述して保存する。

AddHandler cgi-script   .rb
Options  +ExecCGI

これにより、以後このディレクトリに作成する.rbの拡張子を持つファイルは、全てCGIスクリプトと認識される。

CGIプログラムの利用宣言

  1. CGI関連ファイルはpublic_htmlの中に専用のディレクトリを作成し、その中に一括で置いておく（授業ではcgi-binとする）。
  2. ディレクトリを作成するためのコマンドはmkdir。
  3. cgi-binの中に.htaccessという名称のファイルを置く（ファイル内の記載内容は上を参照）。

[4]データ入力用HTML文書の構成

HTML言語を使用したWebページの記述方法については、1年生の情報リテラシーIIで実施済みであるが、入力フォームの作成は多少複雑である。ここでは入力フォームの作り方について確認する。HTML自体に不安がある場合は情報リテラシーIIのページを確認しよう。

冒頭で示した入力フォームとそのソースを見てみよう（form.html）。

氏名：
身長: cm 　体重： kg

<html>
<head><title>購入ページ</title></head>
<body>
<form method="POST" action="./bmi.rb">
<p class="item">氏名：
<input type="text" name="name" maxlength="40"><br>
身長:
<select name="height1">
  <option> 1</option>
  <option> 2</option>
 </select>
<select name="height2">
  <option> 0</option>
  <option> 1</option>
  <option> 2</option>
  <option> 3</option>
  <option> 4</option>
  <option> 5</option>
  <option> 6</option>
  <option> 7</option>
  <option> 8</option>
  <option> 9</option>
 </select>
<select name="height3">
  <option> 0</option>
  <option> 1</option>
  <option> 2</option>
  <option> 3</option>
  <option> 4</option>
  <option> 5</option>
  <option> 6</option>
  <option> 7</option>
  <option> 8</option>
  <option> 9</option>
 </select>cm  
　体重：<select name="weight1">
  <option> 0</option>
  <option> 1</option>
  <option> 2</option>
  <option> 3</option>
 </select>
<select name="weight2">
  <option> 0</option>
  <option> 1</option>
  <option> 2</option>
  <option> 3</option>
  <option> 4</option>
  <option> 5</option>
  <option> 6</option>
  <option> 7</option>
  <option> 8</option>
  <option> 9</option>
 </select>
<select name="weight3">
  <option> 0</option>
  <option> 1</option>
  <option> 2</option>
  <option> 3</option>
  <option> 4</option>
  <option> 5</option>
  <option> 6</option>
  <option> 7</option>
  <option> 8</option>
  <option> 9</option>
 </select>kg<br>

<input name="ok" type="submit" value="OK">
<input name="ng" type="reset" value="reset">
</p>
</form>
</body>
</html>

ソースを見ると、入力フォームは、form要素（<form>タグ）を使って書かれていることがわかる。form要素の基本構造は

<form method="メソッド" action="./スクリプト">


</form>

となる。メソッドの部分はGETまたはPOSTのどちらかを指定する。GETは最大で255文字までしか引き渡すことができない（今回は名前や数字があるが、これらを全て含めて255文字）。項目数が多い場合や長い文章を入力させる場合はPOSTを指定する。ここではPOSTを使うものとして説明を続ける。

スクリプトの部分は入力データの引渡し先である。このソースを見ると、./bmi.rbとなっており（./は同一ディレクトリをあらわすので）、cgi-binディレクトリの中にあるbmi.rbがデータを受け取って処理をしていることがわかる。

このformの例では、

  • nameという名前の最大40文字の文字列
  • height1という名前で1、2のいずれか
  • height2という名前で0〜9のいずれか
  • height3という名前で0〜9のいずれか
  • weight1という名前で0、1、2、3のいずれか
  • weight2という名前で0〜9のいずれか
  • weight3という名前で0〜9のいずれか

をそれぞれ受け取り、bmi.rbに引き渡していることがわかる。入力フォームに用いる部品の詳細については次週とりあげる。

データ入力用のHTML文書

  • 入力フォームはform要素で記述する。form要素にはmethod属性とaction属性を指定する。
  • 1行のテキスト入力フィールドはinput要素を用いる。
  • プルダウンメニューはselect要素を用い、メニュー項目はoption要素を用いて記述する。

[5]CGIスクリプト（Rubyプログラム）の構成

CGIスクリプトとなるRubyプログラムでは、冒頭で必ず以下を記述する。

#!/usr/bin/env ruby
# coding: euc-jp

require 'cgi'
c = CGI.new(:accept_charset => "EUC-JP")
print "Content-type: text/html; charset=EUC-JP\n\n"

1行目は必ず記述するおまじないであるが、CGIスクリプトを書く場合は通常とは異なるので注意しよう。

c = CGI.new(:accept_charset => "EUC-JP")で、HTMLの入力フォームから引き渡された値が、ハッシュ変数cに代入される。「:accept_charset => "EUC-JP"」の部分は、入力フォームから引き渡された値の文字コードをEUC-JPにせよという指示。なお、変数cはどんな名前にしても構わない。

cにはハッシュ値として代入されるので、各入力値は、HTMLが引き渡す際に設定したnameやheight1をkeyとするvalueという形で取り出すことができる。

例えば

var1 = c["height1"]

とすれば、keyのheight1に対応するvalueがvar1に代入される。

以下は、上記の入力フォームに入力後、HTMLが引き渡すRubyプログラム（bmi.rb)である。

注意

  • このRubyプログラムは、~/public_html/cgi-bin/の中に保存すること。
  • 保存後に、このページにアクセスした人が誰でもCGIスクリプトを実行できるようにするため、ktermで以下を入力してファイルに実行属性を与える。
  • pan{c10xxxx]% chmod 755 bmi.rb[Return]もしくは
  • pan{c10xxxx]% chmod +x bmi.rb[Return]
#!/usr/bin/env ruby
# coding: euc-jp

require 'cgi'
c = CGI.new(:accept_charset => "EUC-JP")
print "Content-type: text/html; charset=EUC-JP\n\n"

name = c["name"]
var1 = c["height1"]
var2 = c["height2"]
var3 = c["height3"]
var4 = c["weight1"]
var5 = c["weight2"]
var6 = c["weight3"]

height = (100 * var1.to_f + 10 * var2.to_f + var3.to_f) / 100
weight = (100 * var4.to_f + 10 * var5.to_f + var6.to_f)

bmi = weight / (height ** 2)


print"<html>
<head><title>BMI値</title></head>
<body>\n"

print"<h1>#{name}さんのBMI値</h1>\n"

print"<p>身長:#{height}m</p>\n"
print"<p>体重:#{weight}kg</p>\n"
printf("<p>BMI:%3.1f (理想は女性:21.5、男性:22)</p>\n",bmi)
printf("<p>理想体重は%4.1fkgです(男性の場合)。</p>\n",height ** 2 * 22)
printf("<p>理想体重は%4.1fkgです(女性の場合)。</p>\n",height ** 2 * 21.5)
print"</body>\n"
print"</html>\n"

このプログラムの上部では、HTMLより送られた値をname、var1、var2、var3、var4、var5、var6に代入し、height、weight、bmiを計算している。

下部では、結果をHTML形式で出力するために<html>や<body>、<p>などのタグをprintやprintfを使って記述している。プログラムの下部には#{･･･}という記法があるが、{}内には計算式や変数を指定することができる。例えば、

print"10+20は#{10+20}です\n"

とすると{}内の10+20の計算が行なわれ、

10+20は30です

と表示される。また、

x=30
print"10+20は#{x}です\n"

とすると、xに代入された値である30が入れ込まれ、

10+20は30です

と表示される。これらは、いずれもprintfで書き直すことができる。すなわち、

x=30
print"10+20は#{x}です\n"

と

x=30
printf("10+20は%dです\n",x)

の出力結果は同一となる。

[6]CGIのまとめ

CGIを作成するためには幾つかのルールがあった。この点についてまとめよう。

  1. public_htmlの中にcgi専用のディレクトリ（例えばcgi-bin）を作る。以下で作成する3つのファイルはいずれもこのディレクトリに保存する。
  2. このディレクトリでcgiを利用するという宣言を記述した.htaccessを作成する。
  3. ユーザがデータを入力するためのHTML文書（xxx.html）を作成する。
  4. 入力したデータを受け取って処理をして結果出力用のHTML文書を生成するCGIスクリプト（xxx.rb)を作成する。
  5. Rubyで書かれたCGIスクリプトを自分以外の人でも実行できるように、アクセス権を与える。

CGI専用ディレクトリの作成

CGIを利用するためのディレクトリcgi-binをpublic_htmlの中に新たに作成する。このためにpublic_htmlディレクトリにcdコマンドで移動してから、ディレクトリ新規作成コマンドのmkdirを使用する。

pan{c10xxxx}% cd public_html[Return]
pan{c10xxxx}%  mkdir cgi-bin[Return]

.htaccessの作成

.htaccessの記述内容は以下の通り。emacsで作成する際に、File:~/public_html/cgi-bin/.htaccessとする。以下の2行を記述して保存する。

AddHandler cgi-script   .rb
Options  +ExecCGI

入力フォームのHTMLファイルの作成

emacsで~/public_html/cgi-bin/の中にform.htmlを新規作成し、以下をコピーして貼り付け保存（字が小さいが上で示したものと同じ）。

<html>
<head><title>購入ページ</title></head>
<body>
<form method="POST" action="./bmi.rb">
<p class="item">氏名：
<input type="text" name="name" maxlength="40"><br>
身長:
<select name="height1">
  <option> 1</option>
  <option> 2</option>
 </select>
<select name="height2">
  <option> 0</option>
  <option> 1</option>
  <option> 2</option>
  <option> 3</option>
  <option> 4</option>
  <option> 5</option>
  <option> 6</option>
  <option> 7</option>
  <option> 8</option>
  <option> 9</option>
 </select>
<select name="height3">
  <option> 0</option>
  <option> 1</option>
  <option> 2</option>
  <option> 3</option>
  <option> 4</option>
  <option> 5</option>
  <option> 6</option>
  <option> 7</option>
  <option> 8</option>
  <option> 9</option>
 </select>cm  
　体重：<select name="weight1">
  <option> 0</option>
  <option> 1</option>
  <option> 2</option>
  <option> 3</option>
 </select>
<select name="weight2">
  <option> 0</option>
  <option> 1</option>
  <option> 2</option>
  <option> 3</option>
  <option> 4</option>
  <option> 5</option>
  <option> 6</option>
  <option> 7</option>
  <option> 8</option>
  <option> 9</option>
 </select>
<select name="weight3">
  <option> 0</option>
  <option> 1</option>
  <option> 2</option>
  <option> 3</option>
  <option> 4</option>
  <option> 5</option>
  <option> 6</option>
  <option> 7</option>
  <option> 8</option>
  <option> 9</option>
 </select>kg<br>

<input name="ok" type="submit" value="OK">
<input name="ng" type="reset" value="reset">
</p>
</form>
</body>
</html>

CGIスクリプト（Rubyプログラム）の作成

以下はCGIスクリプトの例である。bmi.rbという名前をつけて保存する。cgi-binの中に保存するため、emacsで新規作成する場合、File:~/public_html/cgi-bin/kakaku.rbとする（字が小さいが上で示したものと同じ）。

#!/usr/bin/env ruby
# coding: euc-jp

require 'cgi'
c = CGI.new(:accept_charset => "EUC-JP")
print "Content-type: text/html; charset=EUC-JP\n\n"

name = c["name"]
var1 = c["height1"]
var2 = c["height2"]
var3 = c["height3"]
var4 = c["weight1"]
var5 = c["weight2"]
var6 = c["weight3"]

height = (100 * var1.to_f + 10 * var2.to_f + var3.to_f) / 100
weight = (100 * var4.to_f + 10 * var5.to_f + var6.to_f)

bmi = weight / (height ** 2)


print"<html>
<head><title>BMI値</title></head>
<body>\n"

print"<h1>#{name}さんのBMI値</h1>\n"

print"<p>身長:#{height}m</p>\n"
print"<p>体重:#{weight}kg</p>\n"
printf("<p>BMI:%3.1f (理想は女性:21.5、男性:22)</p>\n",bmi)
printf("<p>理想体重は%4.1fkgです(男性の場合)。</p>\n",height ** 2 * 22)
printf("<p>理想体重は%4.1fkgです(女性の場合)。</p>\n",height ** 2 * 21.5)
print"</body>\n"
print"</html>\n"

CGIスクリプト（Rubyプログラム）への実行属性の付与

保存後には、CGIスクリプトとして実行できるようにするため、ktermで以下を入力する。
pan{c10xxxx]% chmod 755 bmi.rb[Return]もしくは
pan{c10xxxx]% chmod +x bmi.rb[Return]

これら全ての手順を抜け落ちなく実施すると

http://roy.e.koeki-u.ac.jp/~c10xxxx/cgi-bin/form.html

で入力フォームが表示され、適宜入力してOKを押すと何らかの結果が出るはずである。

[7]CGI実行時のエラーメッセージ

表示されるエラーメッセージの内容によって、エラー内容を概ね特定することができる。

ブラウザに入力フォームのURLを入力するとNot Foundと表示される。

  1. URLが間違っている。URLはhttp://roy.e.koeki-u.ac.jp/~c10xxxx/cgi-bin/yyyy.htmlとなる。xxxxは自分の学籍番号（チェックディジットなし）、yyyは作成した入力フォームのファイル名となる。
  2. form.htmlの保存場所が間違っている。ktermでcgi-binのディレクトリに移動し、lsを入力して作成したファイルがあるかどうか確認する。違う場所に保存した場合は、ktermでmvコマンドを使用して移動する。mvコマンドについては、UNIX主要コマンドのページを参照のこと。

入力フォームに入力しOKを押すとPermission Deniedと表示される。

  1. .htaccessファイルを作成していないか、作成したが保存できていないか、保存した場所が違う。
  2. CGIスクリプト（Rubyプログラム）に実行属性を付与していない。

入力フォームに入力しOKを押すとInternal Server Errorと表示される。

CGIスクリプト（Rubyプログラム）の書き間違え。具体的には、変数名の入力間違いの可能性が高い。

入力フォームに入力しOKを押すと真っ白な画面になる。

CGIスクリプト（Rubyプログラム）の書き間違え。具体的には、変数名の入力間違いの可能性が高い。

[8]CGI用プログラムのエラー検出

CGI実行時にエラーが出ても、Internal Server Errorの表示や真っ白な画面が表示されるだけで、どこが間違っているのかを確認することができない。エラーがどこにあるのかを確認するためには、ktermでプログラムを実施してみると良い。

プログラムの保存場所がいつも（~/program）とは異なることに注意し、~/public_html/cgi-binに移動してから実行してみよう。

実行した直後にエラーが表示されれば、これまで作成してきたプログラムと同様に表示されたエラーメッセージを参考にして修正すればよい。特にエラーが出ない場合、kterm上でプログラムを実行してみよう。

この場合、Webページからデータを引き渡すことができないので、name属性=値[Return]の形式で必要なデータを入力する。全てのデータを入力したらCtrl+dを入力すると、入力フォームでデータを入力したものとして、これらの値がプログラムに引き渡される。

pan{c10xxxx}% ./bmi.rb[Return] 
(offline mode: enter name=value pairs on standard input)
name="Koeki Taro"[Return]
height1=1[Return]
height2=5[Return]
height3=0[Return] 左辺右辺と=の間にはスペースをあけない
weight1=0[Return] ○ weight1=0
weight2=9[Return] × weight2 = 9
weight3=0[Return]
[Ctrl+d]
<html>   入力フォームからデータが引き渡されたものとして実行結果が表示される
<head><title>BMI値</title></head>
<body>
<h1>Koeki TaroさんのBMI値</h1>
    :

プログラムにエラーがあれば、通常のプログラムと同様にエラーメッセージが表示される。必要な修正を行い、繰り返し実行しながらエラーを除去しよう。

[9]出席課題

自分でCGIを設置して動作を確認する。

うまく実行できたら、入力フォームのURL（http://roy.e.koeki-u.ac.jp/~学籍番号/cgi-bin/form.html）と、次週以降に、CGIで作成してみたいページについて報告する。

出席点は2点。提出要領は下記の通り。

  • 提出先：課題提出用メールアドレス
  • メールのSubject：attend08
  • 本文の構成：1行目で学籍番号、氏名を記載する。2行目にURLを記載し、その他感想等を記載する。

Tips：emacsでの日本語入力のオンオフはCtrl+oです

Tips：Mewによるメールの送り方はMewコマンドを参照

[10]プログラムの公開

CGIはWebページ上で動くプログラムであるため、1）Webページの作り方、2）Web上にプログラムを公開する方法について思い出しておくと良い。本日は前期同様、これまでに作成したプログラムの中で最も自信があるものを公開する練習を通して、Webページの作成方法を思い出そう。

プログラム公開用のディレクトリ作成

今回は、public_htmlディレクトリ内に、rubyIIという名称のディレクトリを作成し、このディレクトリ内でプログラムを公開する。ディレクトリ作成コマンドはmkdirであるため、ktermで以下のように入力する。

pan{c10xxxx}% mkdir ~/public_html/rubyII[Return]

~/public_html/rubyIIとすることで、~、すなわちホームディレクトリを起点として、ホームディレクトリ内にあるpublic_htmlディレクトリの中に、rubyIIディレクトリを作成せよという指示になる。

プログラムのコピー

programディレクトリ内にあるプログラムをpublic_html内のrubyIIディレクトリにコピー（移動）するためには、ktermでcp（mv）コマンドを使用する。

pan{c10xxxx}% cp ~/program/プログラム.rb  ~/public_html/rubyII[Return]

Webページの構成

プログラムを公開する準備は整ったが、単にプログラムだけを見せても仕方がない。たまたまWebページを閲覧した訪問者が興味を持ってくれるような準備が必要である。関心を引くためにはわかりやすい説明や、読みやすく楽しそうなページ作りが求められる。これから実際にWebページを作成するが、必ず以下の項目を記載するようにしよう（それぞれ別ページにしてもよいし、1ページにまとめて書いても良い）。

前期の自由課題で作成したページを参考にしてみよう。

  • プログラム名・プログラムの概要
  • 保存方法・実行方法・プログラムへのリンク
  • 使い方・遊び方
  • 著作権

プログラム名・プログラムの概要

何をするプログラムだかわからないままに実行する人はいない。何ができるのかというのはまさにプログラムの売りになる点である。ゲームであれば難易度が数段階に分かれていることが売りになるかもしれないし、実用的なプログラムでは細かな設定ができる点が売りになるかもしれない。淡々と機能を説明するのが良いのか楽しさを前面に出すのが良いのかは、作成するプログラムによって変わってくる。実際にプログラムを公開しているページを確認し、参考にしてみよう。

保存方法・実行方法・プログラムへのリンク

これまで、この授業を受けてきた人であれば詳しく説明しなくてもわかるため、これらは不要と感じるかもしれない。しかし、Webページにプログラムを掲載するということは、（学内のみに制限されているが）誰でも自由に閲覧することができる。プログラムを実行したことのない1年生が、2年生になるとどのようなプログラムを作ることが出来るのかを確認しているかもしれない。こうした点を踏まえ、誰でも保存して実行できるよう詳しく説明しておこう。

使い方・遊び方

実行しても、どのように操作をすればよいのかわからないプログラムでは、積極的に使ってみようとは思ってもらえない。プログラムを作成する際にprintメソッドなどで説明を盛り込むことも重要であるが、「遊び方」（取扱説明書）のページを作ることも考えるべきである。プログラム内に表示されるメッセージはその時しか見ることが出来ないが、Webページに記載しておけば、実行しながら随時確認することができる。懇切丁寧な説明は不要だが、最低限知っておいて欲しいことを書いておくとよい。

著作権

プログラムの著作権は作成者に帰属する。プログラムをダウンロードした人は著作権を取得できるわけではない。著作権を保有する作成者は、作成したプログラムについて改変（内容を書き換えること）や再配布（ダウンロードしたプログラムを第三者に配布すること）の可否、免責事項（このプログラムを使用して生じたいかなる損害に対しても作成者は責任を負わないというようなこと）などを定めることができる。現在では、OpenOfficeやFirefoxなど、プログラムのソースを公開し、誰でも改変、再配布が認められたオープンソースが普及してきている。今回作成するプログラムも営利を目的としたものではないため、改変や再配布など厳しく制限しないようにしよう。

Webページ作成方法

まず、emacsでhtmlファイルを新規作成する。作成場所はrubyIIの中、ファイル名はindex.htmlにする。Ctrl+x Ctrl+fで新規作成し、

Find file:~/public_html/rubyII/index.html[Return]

として、public_html/rubyIIの中にindex.htmlを作成しよう。

その後は、前期の自由課題で作成したページなどを参考に自由に作成しよう。なお、Firefoxの「表示」⇒「ページのソース」を選んで、htmlで書いた当該ページのソースを表示させると、実際にどのように書かれているのかを確認することができる。

ここまでの作業を行うと、

http://roy.e.koeki-u.ac.jp/~学籍番号（CDなし）/rubyII/index.html

で、作成したWebページを確認することができる。うまく設置されていたら、次は内容の修正に取り掛かろう。参考までに、HTMLの基本およびWebページにデザインを付加するCSSの説明ページへのリンクを下に貼っておく。

ページのデザイン

背景と文字色のコントラストを考え、読みづらくならないようにすること、文字を小さくしすぎないようにすること、重要な点を強調することなどに加えてページのデザインにもこだわってみよう。野暮ったいページであれば、読んでみようと思わないかもしれない。プログラムの中味だけでなく、Webページの見栄えでも勝負しよう。

プログラムのダウンロードについて

プログラムを閲覧者が試してみたい場合、そのプログラムを自分が使っている端末に保存する必要がある。今回は、作成するWebページ（index.html）と作成したプログラム(例えばreport.rb）がrubyIIという同一のディレクトリ内に保存されているため、htmlファイル内に以下のようにハイパーリンクを設置すれば、簡単にダウンロードさせることができる。

<p><a href="kadai.rb">kadai.rb</a></p>

ブラウザでは、以下のように表示される。ハイパーリンクを右クリックし、ファイルを保存すれば、即座にプログラムが実行できる。

kadai.rb

なお、ハイパーリンクを書くのはa要素（<a>タグ）である。基本構造は以下の通りである。a要素はインライン要素なので、htmlファイル内に直接書くことはできない。そのためブロックレベル要素であるpタグでくくっている。インライン、ブロックレベルについてはリテラシーでは（おそらく）話していないので、詳しく知りたい人は情報デザイン論の授業を受講すると良い。

<p><a href="ファイルのパス">Web上に表示するテキスト</a></p>

[11]レポート課題

以下について実施しなさい。記載する情報については前期の自由課題のページを参考にすると良い。出来る限り他の人とは異なるデザインのページを作ること。

  • 各自のホームページ（http://roy.e.koeki-u.ac.jp/~学籍番号/index.html）に、本日作成するページへのリンクを貼りなさい
  • これまでに作成したプログラムの中から1つを選び、Webページで公開しなさい。作成要領は以下の通り
    • public_html内にrubyIIディレクトリを作成。以下のファイルは全てrubyIIディレクトリに公開
    • rubyII内にindex.htmlを作成し、遊び方や著作権について記載し、プログラムへのリンクを貼る
    • プログラムのタイトルロゴをGIMPで作成してimgタグで表示する
    • プログラムに関連する図をtgifで作成しimgタグで表示する
    • CSSのプロパティを少なくとも5種類は使用する
  • 提出先：課題提出用メールアドレス
  • 提出期限：第1次：11/23（金）9:00、第2次：11/25（日）23:00
  • メールのSubject：課題6
  • 本文の構成：1行目で学籍番号、氏名を記載する。2行目以降は下記の構成とする
    1. ホームページのURL（http://roy.e.koeki-u.ac.jp/~学籍番号/index.html）
    2. 工夫した点
    3. 感想
  • 採点基準：期限内提出点（2点）、メールの体裁（1点）、CSS・デザイン（2点）、プログラムの紹介文の楽しさ、実行方法の分かりやすさ（1点）、GIMPロゴ（1点）、tgif画像（1点）
  • 今回は、全員分を記名で公開します。他の人がどのようなページを作ったのか、お互いに確認してみよう。

Tips：emacsでの日本語入力のオンオフはCtrl+oです

Tips：ktermでのプログラムの実行結果をメールに貼り付けるには、コピーしたい箇所をマウスで選択し、emacs（Mew）上でマウスの真ん中ボタンをクリックする

Tips：Mewによるメールの送り方はMewコマンドを参照