本講義では、HTMLの要点を学ぶ。 より高度なホームページを作成することが目標となる。 また、簡単なウェブ・サーバを作成し、実験を行うことによって、ネットワークの仕組みについて理解を深める。
授業内容に応じて参考資料を紹介する。
原則として毎回レポート課題を出す。 最後の授業では筆記試験を行う。 レポートの採点結果と試験の得点を総合して成績を決定する。
レポートはすべて提出すること。
レポート課題に取り組むこと。
コンピュータの台数の関係により、履修希望者が80名を越えた場合は抽選を行います。
この授業のテーマは、HTMLとウェブ・サーバです。
HTMLは、インターネットの普及に伴い、2.0→3.2→4.0と進化してきました。 この授業では、HTMLの変遷をたどりながら、段階的にホームページの作り方を説明します。
また、本格的なホームページの作成には、ネットワークについての理解が欠かせません。 この授業では、Javaというネットワーク用プログラミング言語を利用して、簡単なウェブ・サーバを動かす実験を行います。
東京女子大学では、ホームページ開設に関してガイドラインを設けています。 これは、著作権やプライバシーなどの問題を引き起こさないことを目的としています。 情報処理教室のマニュアル「東京女子大学計算機利用の手引き」に記載されていますので、必ず読んでおいてください。
この授業では、次のようなアプリケーションを利用します。
Jeditは、アートマン21が開発したテキスト・エディタです。 Safariは、Mac OS Xに付属しているウェブ・ブラウザです。 「ターミナル」は、Mac OS Xに付属しているターミナル・ソフトウェアです。
今日は、これらのアプリケーションの使い方を覚えながら、授業の準備をします。
この授業では、演習でいくつかのホームページを作成します。 すでに自分でホームページを開設している学生もいると思いますので、授業用のフォルダを作り、そこに演習で作ったファイルを置くことにします。 なお、レポートを採点するときは、授業用フォルダの中を調べますので、そこに授業と関係のないファイルを置かないでください。
もし、「フォルダ」という言葉を聞いたことがなければ、これを「ディレクトリ」と読み替えてください。 この授業では、フォルダとディレクトリは同義語です。
それでは、授業用のフォルダを作成します。 この作業は一度行えばよいものです。
今日は練習として、Jeditを用いて"Good afternoon!"と表示するホームページを作成します。 Jeditの使い方は以下の通りです。
Jeditのウィンドウに次のHTMLドキュメントを入力してください。
Good afternoon!
次に、このHTMLドキュメントをファイルに保存します。 HTMLファイルを保存するときには、ファイル名の拡張子を 〜.html にする必要があります。 今日は、ファイル名を ex1.html とします。
新規に作成したHTMLドキュメントをファイルに保存するには、次のようにします。
次に、作成したホームページをSafariで表示します。
なお、以前作成したファイルを開くには次のようにします。
また、更新したHTMLドキュメントをファイルに保存するには次のようにします。
ホームページを更新するには、Safariの再読み込みボタンをクリックします。
今日は、次のプログラムを実行します。 このプログラムは、アクセスされた日時を答えるウェブ・サーバです。
/* 1*/ import java.io.*; /* 2*/ import java.net.*; /* 3*/ import java.util.*; /* 4*/ /* 5*/ class DateServer { /* 6*/ public static void main (String[] args) throws IOException { /* 7*/ ServerSocket ss = new ServerSocket(8080); /* 8*/ Socket s = ss.accept(); /* 9*/ InputStreamReader isr = new InputStreamReader(s.getInputStream()); /* 10*/ BufferedReader br = new BufferedReader(isr); /* 11*/ String request; /* 12*/ while (!((request = br.readLine()).equals(""))) { /* 13*/ System.out.println(request); /* 14*/ } /* 15*/ PrintWriter pw = new PrintWriter(s.getOutputStream()); /* 16*/ pw.println("HTTP/1.1 200 OK"); /* 17*/ pw.println("Content-Type: text/html"); /* 18*/ pw.println(); /* 19*/ pw.println(new Date()); /* 20*/ pw.close(); /* 21*/ br.close(); /* 22*/ s.close(); /* 23*/ ss.close(); /* 24*/ } /* 25*/ }
ここで、Jeditのウィンドウを新規に開いておいてください。
プログラムをファイルに保存するには、次のようにします。
「ターミナル」の起動の仕方は以下の通りです。
ここで、入力モードが日本語（メニューバーに「あ」）でしたら、これを英語（星条旗）に切り替えます。
プログラムを実行するには、「ターミナル」で次のように入力します。
b04a001@AsiaA1:~% cd WWW-local b04a001@AsiaA1:~/WWW-local% cd comp2e b04a001@AsiaA1:~/WWW-local/comp2e% javac DateServer.java b04a001@AsiaA1:~/WWW-local/comp2e% java DateServer
そして、SafariでURL http://localhost:8080/を開きます。 すると、現在の日時が表示されます。
もう一度表示するには、「ターミナル」に java DateServer と入力にしてから、Safariの再読み込みボタンをクリックします。
履修者の予備知識を確認するため、アンケートを行います。 以下の質問に答え、回答をメールで提出してください。 メールの差出人は学内のアドレス（b04a001@twcu.ac.jpなど）とし、メールの宛先はkonishi@twcu.ac.jpとします。 メールの本文には、学生番号、氏名、科目名、授業日（9月28日）を明記してください。
<a>
,
<address>
,
<base>
,
<blockquote>
,
<body>
,
<br>
,
<cite>
,
<code>
,
<dd>
,
<dfn>
,
<dl>
,
<dt>
,
<em>
,
<h1>
,
<h2>
,
<h3>
,
<head>
,
<hr>
,
<html>
,
<img>
,
<kbd>
,
<li>
,
<ol>
,
<p>
,
<pre>
,
<samp>
,
<strong>
,
<title>
,
<ul>
,
<var>
.