* 第8回 動的なWebページの作成 [#f5944013]

CENTER:本日アクセス: &counter(today); 件

** 目次 [#gf7f388b]

#contents

** 課題の提出について [#vf316e6f]

- 本日は課題が6個ありますが、途中でいちいち提出せずにどんどん進めてください(分からない課題があったら、後回しにしてもよいです)。
- 実験の時間の最後に、課題1〜6のうちできあがったものをメールで報告してください。
- それぞれの課題について以下を書いてください。
-- ページのURL
-- どういう手法で作ったかの詳しい説明
-- CGIプログラムはソースコード
- 送り先は report@fig.ele.eng.tamagawa.ac.jp です。

** アクセスカウンタとSSI [#v4c041f6]

*** カウンタとは [#o7ac0697]

Webページには,既に用意した情報を提示するだけでなく,ブラウザからのリクエストに応じて、さまざまな動的な情報を表示するページがあります.カウンタはその非常に簡単な例です.このページの上には例として簡単なカウンタが付いており、新しいブラウザからアクセスがあると数字が増えていきます.

*** 課題1:外部のカウンタを設置する [#mc15b325]

+ 世の中には,フリーでカウンタ機能を提供してくれるところもあります.
+ サーチエンジンで検索して、カウンタつきのWebページを作成してください。
-- 「無料 カウンタ」「フリー カウンタ」等で検索するとよいでしょう。
+ カウンタをつけたページでは、どういう手法でカウンタを入手して作ったかを説明して下さい.

*** 課題2:C言語の自作カウンタを設置する [#m1e636d4]

+ 前々回の課題でC言語でカウンタのプログラムを作る課題(課題5)がありました.
+ そこで作ったプログラムをすこし改造し、カウンタつきのWebページを作成してください。
+ Webサーバの「SSI」という機能を使うと比較的簡単にカウンタを設置することができます。
  <!--#exec cmd="実行ファイル名"-->
-- 「SSI apache」「shtml テキストカウンタ」などのキーワードで検索してください。
+ カウンタをつけたページでは、どういう手法でカウンタを入手して作ったかを説明して下さい.

【ヒント】
- http://httpd.apache.org/docs/howto/ssi.html.ja.jis
- httpd.conf か .htaccess を編集して、「SSI」を使えるようにしないとできません。下記は、.htaccess での設定例。
 Options +Includes
 AddType text/html .shtml
 AddOutputFilter INCLUDES .shtml
- SSI を使ったページの中で(拡張子 .shtml に設定することが多い)、
  <!--#exec cmd="/場所をちゃんと指定して/counter"--> 
のように記述する。「counter」は課題5のカウンタプログラムの実行ファイル。
- counter プログラムの中の修正しなければならないかもしれない。
 fp = fopen("counter.dat", "r");
というようなところがあったら、
 fp = fopen("/場所をちゃんと指定して/counter.dat", "r");
としなければならない。
- さらに、counter.dat に誰でも書き込めるように chmod でパーミッションを設定することも必要。

** CGIプログラミング [#g9833976]

*** CGIとは [#w986b5a8]

CGIとはWebサーバにプログラムを組み込んで、ブラウザ(ユーザ)からのリクエストによって、その場に応じた情報を表示するページを実現する技術です。つまり、ブラウザからのリクエストをプログラムで処理して、定められた手順(プロトコル)に従って応答を返すことになります。

CGIを作成するためには、まずHTTPについて学ぶ必要があります。

*** HTTP(ハイパーテキスト・トランスファー・プロトコル) [#rd560677]

+ Webサーバとブラウザの間の通信手順(プロトコル)を見てみましょう。
+ 下記のコマンドで、Webサーバ vilab.org にHTTP用のポートで接続することができます。telnetコマンドにはこのような機能があります。
 telnet vilab.org http
+ すると、下記のように表示されてサーバに接続されると思います。
 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では上でも例に示したHTTPのうち、「''Content-Type:''」以下を標準出力に出力するプログラムを作成すればいいです。たとえば以下のような出力をするプログラムを作成すればよいことになります。
 Content-Type: text/html
 
 <html>
 <head><title>Hello</title></head>
 <body>
 Hello, world!
 </body>
 </html>
- これをたとえばシェルスクリプトで作成すると以下のようになります。
 #! /bin/sh
 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;
 }

- 上のプログラムをコンパイルして、CGIとして動かしてみてください。
- CGIを動かすためにはapacheの設定が必要かもしれません。ちゃんと動くようにするのが課題です。
-- 「apache CGI Linux」等で検索して調べてください。

*** 課題4:接続情報を表示するCGI [#u506cf02]

- 接続情報を表示するCGIを作成してください。
- 最低限、下記の環境変数の内容を表示すればいいです。
-- ブラウザやOSの種類(環境変数 HTTP_USER_AGENT) 
-- ブラウザのIPアドレス(環境変数 REMOTE_ADDR)
- できあがったら、どういう手法で作ったかを説明したページも作成してください。

*** 課題5:時刻を表示するCGI [#daabebdc]

- 現在時刻を表示するCGIを作成してください。
- dateコマンドを利用するのが一番楽でしょう。
- できあがったら、どういう手法で作ったかを説明したページも作成してください。

** 認証つきページ [#b62226f8]

*** 課題6:認証つきページ [#a1c9b0e0]

- アクセスにパスワードが必要なページを作ってください。apacheの設定できるはずです。
- 方法はインターネットで検索してください。「BASIC認証」「.htaccess」などのキーワードで検索するといいでしょう。
- ユーザ名「vine」, パスワード「linux」でアクセスできるようにしてください。

** 第5回レポート [#l24235f8]

*** 課題の提出を忘れずに [#vf316e6f]

- 実験の時間の最後に、課題1〜6のうちできあがったものをメールで報告してください。
- それぞれの課題について以下を書いてください。
-- ページのURL
-- どういう手法で作ったかの詳しい説明
-- CGIプログラムはソースコード
- 送り先は report@fig.ele.eng.tamagawa.ac.jp です。

*** レポート課題 [#y6bff57d]

【問1】 以下の言葉をすべて使って、WWWについて簡潔に説明する文章を作成し、できあがった文章を電子メールで提出しなさい。その際、''用語集のような箇条書きではなくて、教科書のようにつながった文章で書く''ようになさい。また、提出は、添付ファイルではなくて電子メールの本文に書くようにし、段落を整えるなどして十分に読みやすいように整形しておくこと。

- WWW
- ハイパーテキスト
- リンク
- ティム・バーナーズリー
- CERN
- URL
- HTTP
- HTML
- SGML
- XML
- サーバ
- ブラウザ
- apache
- IIS
- NCSA
- CGI
- Java
- Javascript
- SSL
- CHTML

以上

【問2】 「無断リンク禁止」「このページに許可なくリンクしないでください」「トップページ以外へのリンクを禁じます」「リンクはトップページにしてください」などと書いてあるWebページがある。このような注意書きについてどう思うか、簡潔に自分の考えをまとめなさい。

【提出期限】 次回実験開始まで(開始後のものは受け付けない)。

【提出方法】 hi-shiozawa@adms.tamagawa.ac.jp に電子メールで提出(Linuxからでなくてもよい)。実験の時間中に終わらなかった場合には、途中経過を演習室のアカウントに送るとよい。学生Webメールシステム http://mails.educ.tamagawa.ac.jp で見ることができる。

- この実験に限らず、レポートでは自分の名前を最初に書くこと。~
- ですます調(「です」「ます」)は用いず、言い切りの形で書くこと。~
- インターネットや書籍を利用して調べるのは自由だが、長すぎて冗長な文章や、コピーをツギハギしたような文章にならないようにすること。日本語として簡潔できちんとした文章かどうかが採点の対象となる。

トップ   編集 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS