解説 10月(2)

今回の学習項目です。


CGIの練習問題

課題1

課題1の最終目標は、次のような占いのページを作成することです。

占いのページ

※ CGIのプログラムを作成する課題では、作成したプログラムとWebページのURLを提出してください。 HTMLファイルを作成する課題では、WebページのURLだけを提出してください。 ただし、複数のページを作成する場合は、リンク先のページのURLは必要ありません。 最初のページのURLだけ提出してください。

課題1-1

まず、上のような占いのページを、HTMLファイルで(CGIを使わずに)作成することを考えてみましょう。 次の問いに答えなさい。

課題1-1-1

下の占いのページ(HTML版)は、「結果を見る」「もう一度占う」などのリンクをクリックするたびにページが切り替わります。 それぞれのページがどのようなファイルによって表示されているか、ファイル名を調べて答えなさい。 1ページ目から5ページ目までを調べて、「1ページ目:○○○」… というように答えればよい。

占いのページ(HTML版) ※キリがないので5ページしか用意してありません。

[Webページのファイル名を調べるには]

Internet ExplorerなどのWebブラウザでは、開いているページのURLがアドレスバーに表示されます。 URLの一番最後の部分(最後の "/" の後の部分)が、サーバーに置かれているファイルの名前になります。

課題1-1-2

実際に占いのページをHTMLファイルで作成しなさい。 上の占いのページ(HTML版)と同じものを作ればよい。 CGIサーバー上に作成し、ブラウザで表示して確認すること。(RubyのCGIプログラムは必要ありません。)
大吉、中吉、小吉、凶などのページを、一見ランダムに見えるように上手に配置して、10ページ目くらいまで作りなさい。

[CGIサーバーにHTMLファイルを作成するには]

まずTeraTermでLinuxOSにログインして、CGIサーバーに移動します。

cd /stud_cgi/自分のアカウント名

EmacsでHTMLファイルを作成します。

emacs uranai0.html

ファイルのパーミッションは others(その他のユーザー)に対して r(読み取り)を許可する必要があります。 許可しない状態では、ブラウザで表示することはできません。

この場合のパーミッションの変更には、次のようなコマンドを使用します。

chmod 604 ファイル名

#もしくは

chmod o+r ファイル名

作成したHTMLファイルは、ブラウザで次のようなURLにアクセスすることで確認できます。

http://cgi.st.chukyo-u.ac.jp/~自分のアカウント/uranai0.html

[複数のHTMLファイルのパーミッションを一度に変更するには?]

次のコマンドを実行すると、カレントディレクトリ内のすべてのHTMLファイルのパーミッションを変更することができます。

chmod 604 *.html    #○○○.htmlのパーミッションを変更する。

* はワイルドカードと呼ばれ、ファイル名を省略するときに使用されます。 上の場合、ファイル名が ".html" で終わるカレントディレクトリ内のすべてのファイルにマッチします。 ワイルドカードはchmod以外のコマンドでも使用できます。

mv uranai* 1007/    #uranaiで始まるすべてのファイルをディレクトリ1007へ移す。

[リンクタグの書き方]

HTMLのリンクタグは次のような形式で書かれます。

<a href="リンク先のファイル名">ページに表示される文字列</a>

「リンク先のファイル名」の部分には、別のディレクトリに置かれたファイルへの相対パスや、WebページのURLを書くこともできます。
「ページに表示される文字列」の部分には、実際にWebページに表示される文字列を書きます。 ここに書かれた文字などが、Webブラウザで表示されたときにリンク機能を持つことになります。

[ページに表示させる文章を改行するには]

Webページの文章を改行するためには、改行タグ(<br>タグ)を使用する必要があります。

一行目。<br>二行目。

普通に改行するだけでは、HTML文書のソースが改行されるだけで、Webページに表示される文章は改行されません。

[ブラウザで開いているWebページのソースを見るには]

Internet ExplorerなどのWebブラウザには、開いているページのソース(サーバーからWebブラウザに送られるHTML文書などの文字列)を表示する機能があります。 Internet Explorerの場合、メニューバーの「表示」から「ソース」を選択することで、現在のページのソースを表示することができます。

ただし、ソースを表示するためのソフトとして使用されるメモ帳は、EUC-JPで書かれた文字を表示することができませんので、文字化けを起こす場合があります。 Internet Explorerの代わりにFire Foxというブラウザを使用すると、文字化けは起こらないので便利です。

[<meta>タグに指定する文字コード]

HTMLの<meta>タグは、そのページがHTML形式で書かれていることや、使用している文字コードの種別といった情報を、Webブラウザに伝える働きを持っています。

<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">

Linux上で作成したファイルは、おそらくEUC-JPで保存されているはずですから、<meta>タグにも charset=EUC-JP と記述しておきましょう。 Windows上でファイルを作成した場合は、Shift_JISコードで保存されているはずですので、ファイルの文字コードをEUC-JPに変更するか、<meta>タグに charset=Shift_JIS と記述する必要があります。

Linux上でファイルの文字コードを変更する場合は、前の解説ページのここを参照してください。

課題1-2

上の占いのページ(HTML版)は、占いの結果が本当にランダムに表示されるわけではありません。 いつ占っても、最初に表示される運勢は必ず「凶」になってしまいます。 それではあまりにも絶望的ですので、今度はCGIのプログラムを使って、本当にランダムに結果を表示する占いのページを作成することにしましょう。 次の問いに答えなさい。

課題1-2-1

下の占いのページ(CGI版)は、先程のHTML版と同じように、リンクをクリックするたびにページが切り替わります。 それぞれのページがどのようなファイルによって表示されているか、ファイル名を調べて答えなさい。 1ページ目から5ページ目までを調べて、先程と同じように「1ページ目:○○○」というように答えること。

占いのページ(CGI版)

課題1-2-2

占いのページの2ページ目以降を表示するCGIのプログラムを作成しなさい。 作成したら、次のようにオフラインで(LinuxOS上で)実行し、Webページのソースが正しく出力されることを確認しなさい。

[h209XXX@ls03 h209XXX]% ./uranai.cgi
Content-type: text/html; charset=euc-jp

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<title>占いのページ</title>
</head>
<body>
<br>
<p align="center">
  今日のあなたの運勢は・・・<br>
  <br>
  <font size="7" color="red">大吉</font><br>

  <br>
  何をやってもうまくいく一日。<br>思いきって世界征服に乗り出してみましょう。<br>
  <br>
  <a href="uranai.cgi">もう一度占う</a>
</p>
</body>
</html>

太字の部分は、実行するたびにランダムに結果が変わるように作る必要があります。

部分的に少しずつプログラムを作り、それがきちんと動作することをテストしながら先に進むこと。 占いのプログラムはプログラミング1ABで作成しました。それを参考にしましょう。 占いのプログラムがきちんと動作することを確かめた上で、次のステップとしてHTML文書をprintする、というように、部分をテストしながら先に進むことが大事です。 CGIの部分は、先週学んだことを復習しながら作ってください。

[CGIサーバーにCGIファイルを作成するには]

まずTeraTermでLinuxOSにログインして、CGIサーバーに移動します。

cd /stud_cgi/自分のアカウント名

EmacsでCGIファイルを作成します。

emacs uranai.cgi

ファイルのパーミッションは user(所有者)に対して x(実行)を許可する必要があります。 許可しない状態では、ブラウザからアクセスしたときにプログラムが実行されません。

この場合のパーミッションの変更には、次のようなコマンドを使用します。

chmod 700 ファイル名

#もしくは

chmod u+x ファイル名

CGIプログラムを設置するサーバーによっては、このようなCGIファイルやHTMLファイルのパーミッションの設定が、STドメインのCGIサーバーの設定とは異なる場合があります。 別のサーバーにCGIプログラムを設置する際には、必ず設置先のサーバーの設定を確認するようにしましょう。

作成したCGIファイルは、ブラウザで次のようなURLにアクセスすることで確認できます。

http://cgi.st.chukyo-u.ac.jp/~自分のアカウント/uranai.cgi

[どんなCGIプログラムを作成すればいい?]

今回作成するCGIファイルには、次のようなRubyのプログラムを記述することになります。

#!/usr/bin/ruby
print "Content-type: text/html; charset=euc-jp\n\n"
$KCODE = "e"

#
#占いの結果とコメントをランダムに決定するための準備のプログラム。
#

print <<EOS    #ここから先はprint文。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<title>占いのページ</title>
</head>
<body>
...
  <font size="7" color="red">#{ 占いの結果 }</font><br>
  <br>
  #{ 占いのコメント }<br>
...
</body>
</html>
EOS

配列などを使用して、占いの結果をランダムに決めるための準備を事前にしておきます。 準備ができたら、出力するHTML文書をprintします。 占いの結果とコメントは、#{ }を使用してprint文の中に埋め込むとよいでしょう。

[Webページに表示される文章を改行するには?]

Webページの文章を改行するためには、改行タグ(<br>)を使用する必要があります。

一行目。<br>二行目。  #ブラウザで表示すると<br>の部分で改行されます。

CGIのプログラムはHTML文書(Webページのソース)を出力します。 そのため、改行コードを付けても、Webページのソースが改行されるだけで、ブラウザに表示される文章自体は改行されません。

ブラウザに表示される文章を改行するときは、改行の働きを持つタグを、HTML文書に書く必要があります。 CGIのプログラムでは、次のように改行タグをprintしてください。

print "一行目。<br>二行目。"

[ページが表示されないときは?]

作成したCGIのページがブラウザに表示されない場合、様々な要因が考えられます。 ファイル名が間違っている、ファイルが正しい場所に置かれていない、ファイルの実行権限が与えられていない、ファイルの文字コードが間違っている、プログラムの実行過程でエラーが発生した、などがよくある原因です。 一つ一つ確認して、どこに問題があるのか見極める必要があります。

プログラムにバグがある場合、ブラウザからアクセスしてプログラムを実行する方法では、デバッグしづらいことがあります。 そのようなときは、CGIプログラムをオフラインで(コマンドを入力してLinux上で直接)実行するとよいでしょう。 Rubyのエラーメッセージも表示されますし、プログラム自体に問題があるのか、それとも他に原因があるのかなど、ブラウザからの実行では得られない多くの情報を得ることができます。

CGIプログラムをオフラインで実行するときは、"ruby xxx.cgi" とコマンドを入力するのではなく、次のようなコマンドでプログラムを実行するようにしましょう。

./ファイル名

上のように実行することで、ブラウザからCGIファイルがアクセスされ、サーバー上のCGIプログラムが実行されるときと同じ状況でプログラムを実行することができます。

課題1-2-3

占いのページの1ページ目を表示するHTMLファイルを作成し、占いのページを完成させなさい。 CGIのページがブラウザに正しく表示されることも確認しなさい。

[HTMLファイルとCGIファイルの違いは?]

サーバーに置かれたHTMLファイルやCGIファイルにブラウザでアクセスすると、どちらのファイルもHTML文書(Webページのソース)をブラウザに返してきます。 ブラウザは受け取ったHTML文書を元にWebページを形成して表示するわけですが、HTMLファイルとCGIファイルでは、サーバー内での処理の過程に次のような違いがあります。

HTMLファイルの場合
1. ブラウザがサーバーに対してページを要求する。
2. サーバーはファイルに書かれているHTML文書をブラウザに返す。
3. ブラウザがサーバーから受け取ったHTML文書をWebページとして表示する。
CGIファイルの場合
1. ブラウザがサーバーに対してページを要求する。
2. サーバーはファイルに書かれているプログラムを実行する。
3. サーバーは実行結果(print文による出力のHTML文書)をブラウザに返す。
4. ブラウザがサーバーから受け取ったHTML文書をWebページとして表示する。

どちらの場合も、サーバーがブラウザに対してHTML文書を返すことに変わりはありません。 異なる点は、HTMLファイルの場合、ファイルに書かれている内容がそのまま返されるのに対し、CGIファイルの場合は、プログラムが実行され、出力された文字列がブラウザに返されるところです。 そのため、CGIのプログラムでは、ブラウザに返すHTML文書(HTMLのタグ)を文字列としてprintする必要があるのです。 (タグをそのままプログラムの中に書いてしまうと、実行してもエラーになってしまいます。 HTMLのタグはプログラムの中では文字列として扱わなければいけません。

プログラミングIIIのホームに戻る