- 追加された行はこの色です。
- 削除された行はこの色です。
* 動的なWebページの作成 [#f5944013]
* 第8回 動的なWebページの作成 [#f5944013]
CENTER:本日アクセス： &counter(today); 件
** 認証つきページ [#b62226f8]
** 目次 [#gf7f388b]
アクセスにユーザ名とパスワードが必要なページを作ってください。apacheの設定できるはずです。方法はインターネットで検索してください。「BASIC認証」「.htaccess」などのキーワードがいいでしょう。ユーザ名「vine」, パスワード「linux」でアクセスできるようにしてください。
#contents
** 課題の提出について [#vf316e6f]
- 本日の課題は途中でいちいち提出せずに、順次進めてください（分からない課題を後回しにしてもよいです）。
- 実験の時間の最後に課題1〜6のできあがったところまでについて、まとめてページのURLをメールで教員に連絡して下さい．
- その際、どういう手法で作ったかを書いたも詳しく説明し、そのページのURLも一緒に送ってください．
-- report＠fig.ele.eng.tamagawa.ac.jp
** アクセスカウンタとSSI [#v4c041f6]
*** カウンタとは [#o7ac0697]
- Webページには，既に用意した情報を提示するだけでなく，ブラウザからのリクエストに応じて、さまざまな動的な情報を表示するページがあります．カウンタはその非常に簡単な例です．
- このページの上には簡単なカウンタが付いており、新しいブラウザからアクセスがあると数字があがっていきます．
*** 課題1：外部のカウンタを設置する [#mc15b325]
+ 世の中には，フリーでカウンタ機能を提供してくれるところもあります．
+ サーチエンジンで検索して、カウンタつきのWebページを作成してください。
-- 「無料 カウンタ」「フリー カウンタ」等で検索するとよいでしょう。
+ カウンタをつけたページでは、どういう手法でカウンタを入手して作ったかを説明して下さい．
*** 課題2：C言語の自作カウンタを設置する [#m1e636d4]
+ 前々回の課題でC言語でカウンタのプログラムを作る課題がありました．
+ そこで作ったプログラムをすこし改造し、カウンタつきのWebページを作成してください。
+ Webサーバの「SSI」という機能を使うと比較的簡単にカウンタを設置することができます。
<!--#exec cmd="実行ファイル名"-->
-- 「SSI」「shtml」「テキストカウンタ」などのキーワードで検索してください。
+ できあがったら、カウンタのついているページのURLをメールで教員に連絡して下さい．
+ カウンタをつけたページでは、どういう手法でカウンタを入手して作ったかを説明して下さい．
** CGIプログラミング [#g9833976]
*** HTTP [#rd560677]
*** CGIとは [#w986b5a8]
+
- CGIとはWebサーバにプログラムを組み込んで、ブラウザ（ユーザ）からのリクエストによって、その場に応じた情報を表示するページを実現する技術です。
- つまり、ブラウザからのリクエストをプログラムで処理して、定められた手順（プロトコル）に従って応答を返すことになります。
- CGIを作成するためには、まずHTTPについて学ぶ必要があります。
*** HTTP（ハイパーテキスト・トランスファー・プロトコル） [#rd560677]
+ Webサーバとブラウザの間の通信手順（プロトコル）を見てみましょう。
+ 下記のコマンドで、Webサーバ vilab.org にHTTP用のポートで接続することができます。telnetコマンドにはこのような機能があります。
telnet vilab.org http
+
GET / HTTP/1.0[改行]
+ すると、下記のように表示されてサーバに接続されると思います。
Trying 202.253.197.203...
Connected to vilab.ele.eng.tamagawa.ac.jp.
Escape character is '^]'.
+ ここで、Webページ http://vilab.org/test.html を取得するためのHTTPのコマンドを打ち込みます。下記のように入力してください。（入力は表示されないかもしれません）
GET /test.html HTTP/1.0[改行]
[改行]
+ すると、サーバから応答が得られます。
HTTP/1.1 200 OK
Date: Mon, 13 Jun 2005 15:36:31 GMT
Server: Apache/1.3.33 (Debian GNU/Linux) …途中省略… DAV/1.0.3
Last-Modified: Mon, 13 Jun 2005 15:36:07 GMT
ETag: "2841b2-7c-42ada7e7"
Accept-Ranges: bytes
Content-Length: 124
Connection: close
Content-Type: text/html
<html>
<head>
<title>viLab</title>
</head>
<body>
<h1>Visual Interface Laboratory</h1>
This is a test page.
</body>
</html>
-- この1行目の「''HTTP/1.1 200 OK''」は、Webサーバから成功したかどうかの応答。
-- 2行目から空行までの「''属性名: 値''」というのは、HTTPヘッダ。
-- そして、空行以降が test.html 本体のHTMLとなっています。
+ 以上は、通常Netscape NavigatorやInternet ExplorerなどのWebブラウザが行っていることを、手動でやってみたわけです。
*** 課題3：単純なCGIプログラム [#me9354c2]
*** 単純なCGIプログラム [#me9354c2]
- CGIでは上でも例に示したHTTPのうち、「''Content-Type:''」以下を標準出力に出力するプログラムを作成すればいいです。たとえば以下のような出力をするプログラムを作成すればよいことになります。
Content-Type: text/html
<html>
<head><title>Hello</title></head>
<body>
Hello, world!
</body>
</html>
- これをたとえばシェルスクリプトで作成すると以下のようになります。
echo "Content-Type: text/html"
echo
echo "<html>"
echo "<head><title>Hello</title></head>"
echo "<body>"
echo "Hello, world!"
echo "</body>"
echo "</html>"
- C言語なら以下のようになります。
#include <stdio.h>
int main(void)
{
printf("Content-Type: text/html");
printf("\n");
printf("<html>\n");
printf("<head><title>Hello</title></head>\n");
printf("<body>\n");
printf("Hello, world!\n");
printf("</body>\n");
printf("</html>\n");
return 0;
}
- Webサーバでプログラムを動かし、その結果をブラウザで表示させることができます。
- 上のプログラムをコンパイルして、CGIとして動かしてみてください。
- CGIを動かすためには、apacheの設定が必要かもしれません。
-- 「apache CGI Linux」等で検索して調べてください。
** アクセスカウンタ [#v4c041f6]
*** 課題4：接続情報を表示するCGI [#u506cf02]
*** 参考になるページ [#f577d354]
- 接続情報を表示するCGIを作成してください。
- 最低限、下記の環境変数の内容を表示すればいいです。
-- ブラウザの情報（環境変数 HTTP_USER_AGENT）
-- ブラウザのIPアドレス（環境変数 REMOTE_ADDR）
- できあがったら、どういう手法で作ったかを説明したページも作成してください。
- 「カウンタ」「CGI」「SSI」というキーワードで検索すれば，丁寧に説明をしてくれるサイトが多数見つかります．
*** 課題5：時刻を表示するCGI [#daabebdc]
*** カウンタとは [#o7ac0697]
- 現在時刻を表示するCGIを作成してください。
- dateコマンドを利用するのが一番楽でしょう。
- できあがったら、どういう手法で作ったかを説明したページも作成してください。
+ Webページには，既に用意した情報を提示するだけでなく，まざまな動的な情報を表示するページがあります．カウンターは非常に簡単な例です．
+ このページの上にはアクセスするたびに数字があがっていきます．（同じマシンからのアクセスではカウンターが変更しないこともあります）
+ 上では文字を使ったカウンタを紹介しましたが，[0][2][4]などのイメージを使ったカウンタもあります．たとえばこのページを見て下さい．
+ これらのカウンタページは， http://home.interlink.or.jp/~kamitani/perl_lng/cgiperl.html を参考にして作りました．
** 認証つきページ [#b62226f8]
以下の課題に挑戦して下さい
*** 課題6：認証つきページ [#a1c9b0e0]
- 最低ひとつできれば結構です．
- 難易度の数字は評価点の目安です．
- 難易度の高い課題ができれば，低い方の課題はやらなくても結構です．
- 難易度の高い課題に果敢に挑戦する場合には，その前に一つ難易度の低い課題を終
えておいて，時間切れになった場合の保険にしておいてください．
- カウンタはホームページにつけても良いですし，そこからリンクする別のページに
つけても良いです．ただ，ホームページからカウンタのある場所へ行く方法が分か
るように，作って下さい．
- アクセスにパスワードが必要なページを作ってください。apacheの設定できるはずです。
- 方法はインターネットで検索してください。「BASIC認証」「.htaccess」などのキーワードで検索するといいでしょう。
- ユーザ名「vine」, パスワード「linux」でアクセスできるようにしてください。
*** 課題A：どんな手段を使っても良いからとりあえずカウンタをつける（難易度60〜70) [#kf0ed40f]
** 第5回レポート [#l24235f8]
+ 手段は問いません．カウンタをつけて下さい．
+ 世の中には，フリーでカウンタ機能を提供してくれるところもあります．検索して探してみましょう．
+ ホームページでは，どういう手法でカウンタを入手して，作ったかを詳しく説明して下さい．
+ できあがったら教員に連絡して下さい．ホームページを見させていただきます．
*** 課題の提出を忘れずに [#vf316e6f]
*** 課題B：みなさんのサーバの上で完結する形でカウンタをつける（難易度70〜80) [#be3c7d01]
- 実験の時間の最後に課題1〜6のできあがったところまでについて、まとめてページのURLをメールで教員に連絡して下さい．
- その際、どういう手法で作ったかを書いたも詳しく説明し、そのページのURLも一緒に送ってください．
-- report＠fig.ele.eng.tamagawa.ac.jp
+ インターネット上にあるカウンタサービスは，他のサーバの力を借りてカウンタ機能を実現するサービスです．
+ みなさんは自分で全部設定できるWWWサーバを持っているのですから，外部のサーバにアクセスすることなしに，カウンタを実現して下さい．
+ Perlなどで作ったCGIプログラムを使う方法が一般的かもしれません．ほかにPHPつかったりJavaを使ったりしても可能かもしれません．
+ プログラムはどこからか拾ってきて下さい．（もちろん自分で作っても結構ですが，それが出来るくらいなら，課題Cをやった方が良いかと思います）
+ できれば文字のカウンタと，イメージを使ったカウンタの両方を作ってみて下さい．
+ ホームページでは，どういう手法でカウンタを入手して，作ったかを詳しく説明して下さい．
+ できあがったら教員に連絡して下さい．ホームページを見させていただきます．
*** 課題C：C言語でCGIを自作してカウンタをつける（難易度80〜100) [#rd34fafd]
+ CGIプログラムはPerlで書かれることが多いですが，プログラム言語はPerlである必要はありません．
+ この演習の前の課題で，C言語のプログラムの課題がありました．あそこで作ったプログラムをすこし改造すれば，カウンタのCGIにすることができます．
+ そこで，C言語でカウンタを自作して取り付けて下さい．
+ 世の中でたくさん公開されているPerlのカウンタプログラム（たとえば http://home.interlink.or.jp/~kamitani/perl_lng/cgiperl.html など）が参考になるかと思います．
+ ホームページでは，どういう手法でカウンタを作ったかを詳しく説明して下さい．
+ できあがったら教員に連絡して下さい．ホームページを見させていただきます．
*** そのほか凝ったページ [#s8d6f5ea]
+ すでに凝ったホームページを作った経験のある人は、その知識を取り入れて、
インタラクティブなページを時間内にどんどん作ってみて下さい。
+ CGIやPHPなど何使っても結構です。
+ できあがったら教員に連絡して下さい。
![[PukiWiki]](image/viLab.png "[PukiWiki]")
