ウェブアプリケーション入門 - lecture.ecc.u-tokyo.ac.jpkhiekata/2008...HTTP3.2 までは...

平成２０年度版

ウェブアプリケーション入門

東京大学工学部システム創成学科知能社会システムコース

プログラミング基礎Ｄ（後半）

目次

第 1 章 HTML............................................................................................................................... 1

1.1 HTML 入門.......................................................................................................................... 1 1.1.1 HTML とは ................................................................................................................... 1 1.1.2 とりあえず書いてみよう.............................................................................................. 1 1.1.3 バックグラウンドの設定と文字の装飾・レイアウト .................................................. 4 1.1.4 画像を貼り付ける・リンクをつける............................................................................ 6 1.1.5 テーブルで表を作る ................................................................................................... 10

1.2 HTML 入門 – 補足資料 ................................................................................................... 13 1.2.1 エレメント・タグ・属性

エレメント（element: 要素） ..........................................................................13 タグ（tag）.......................................................................................................13 属性（attributes: アトリビュート）と属性値} ................................................14 ............................................................................................ 13

1.2.2 HTML ドキュメントの構造........................................................................................ 14 < !DOCTYPE > 【ドキュメントタイプの宣言】}............................................15 < META http-equiv=Content-Type content="text/html; charset=euc-jp" >...16 < HTML > < HEAD > < BODY > 【ドキュメント構造の定義】 ...............16 < TITLE > 【HTML ドキュメントのタイトルを定義】..................................17 もシンプルな HTML ドキュメント...............................................................17 1.2.3 HTML のファ式 ....イル形 ........................................................................................... 18 HTML ドキュメント.........................................................................................18 画像ファイル.....................................................................................................18 1.2.4 フォームを使う .......................................................................................................... 18 < form > 【入力フォームの宣言と送信方法等の指定】 ...................................20 < input type=text > 【ド】 .............................................21 < input type=passwor 示させない】.................................21 < textarea > 【複数行の入力フィールド】......................................................21 < input type=checkbox > 【チェックボタン】................................................22 < input type=radio > 【ラジオボタン】..........................................................22 < input type=radio > 【ラジオボタン】..........................................................23 < select > 【プルダウン形式のメニュー】 23 < input type=submit > 【送信ボタン】 ..........................................................24 < input type=reset > 【リセットボタン】 ......................................................24 １行の入力フィールd > 【入力文字を表.......................................................

1.2.5 主な HTML タグ一覧................................................................................................. 24 1.3 スタイルシート ................................................................................................................. 30

1.3.1 スタイルシートとは ................................................................................................... 30 基本的な考え方 .................................................................................................30

1.3.2 スタイルの指定方法 ................................................................................................... 31 1.3.3 スタイルシートの書式 ............................................................................................... 32 1.3.4 クラスや ID の指定 .................................................................................................... 33 1.3.5 スタイルシート属性一覧............................................................................................ 35

1.4 携帯向けホームページ ...................................................................................................... 37 1.5 課題１－１ ........................................................................................................................ 38 1.6 課題１－２ ........................................................................................................................ 38

第 2 章 Servlet............................................................................................................................ 41 2.1 サーブレットとは ............................................................................................................. 41 2.2 サーブレットの特徴.......................................................................................................... 41

CGI との共通点、相違点 .....................................................................................42 2.3 サーブレットのプログラム例 ........................................................................................... 43

2.3.1 Hello, World! .............................................................................................................. 43 HelloWorld.java ...............................................................................................43 アプリケーションの実行...................................................................................46 2.3.2 フォームによる入出力 ............................................................................................... 47 nameform.html ................................................................................................47 Nameform.java.................................................................................................47 2.3.3 前回アクセス時刻表示 ............................................................................................... 48 testCookie.html................................................................................................49 testCookie.java.................................................................................................49

2.4 課題 2 ................................................................................................................................ 52 2.5 参考 web サイト................................................................................................................ 52

第 3 章 XML と RSS................................................................................................................... 53 3.1 XML とは .......................................................................................................................... 53

3.1.1 XML の特徴 ................................................................................................................ 53 3.1.2 XML 文書の構成 ......................................................................................................... 54

名前空間接頭辞の定義例...................................................................................55 タグの例............................................................................................................55 3.1.3 XML の基本文法 ......................................................................................................... 55 XML 宣言部 ......................................................................................................55 DTD ..................................................................................................................55 XML 要素の記述 ..................................................................................................55 コメントの記述 .................................................................................................56

3.2 Java での XML の入出力 grade.xml..........................................................................................................56 GradeXMLReader.java ....................................................................................57 GradeXMLReader.java ....................................................................................61 .................................................................................................. 56

3.3 RSS とは............................................................................................................................ 65 3.4 RSS の種類 ........................................................................................................................ 66 3.5 メタデータと RDF............................................................................................................ 66 3.6 RSS の仕様 ........................................................................................................................ 67 3.7 課題 3-1............................................................................................................................. 69

3.7.1 RSS リーダとは .......................................................................................................... 70 3.8 サーバサイド RSS リーダの作成...................................................................................... 70

3.8.1 サーバサイド RSS リーダ概要................................................................................... 70 3.8.2 利用する RSS フィード.............................................................................................. 71 3.8.3 サーバサイド RSS リーダのコード ........................................................................... 74 3.8.4 課題 3-2 ...................................................................................................................... 76

さらに高度な課題..............................................................................................76 3.8.5 外部 XML ファイルから URL を取得する RSS リーダのコード .............................. 77

3.9 参考 Web サイト ............................................................................................................... 80 第 4 章 Web アプリケーション................................................................................................... 83

4.1 Web アプリケーションの技術 ........................................................................................... 84 4.1.1 Web アプリケーションとインターネット .................................................................. 84

4.2 HTML によるユーザーインターフェース開発 ................................................................. 85 4.3 Web アプリケーション実装技術 ....................................................................................... 86 4.4 Web アプリケーションに求められるもの ......................................................................... 87

4.4.1 ユーザビリティ .......................................................................................................... 87 4.4.2 パフォーマンス .......................................................................................................... 88 4.4.3 セキュリティ .............................................................................................................. 89

4.5 Google API ........................................................................................................................ 90 4.5.1 Google API を利用したアプリケーションの開発 ....................................................... 90 4.5.2 Google Search API を利用した検索アプリケーションの実装 ................................... 91 4.5.3 検索アプリケーションのコード ................................................................................. 91 4.5.4 課題 4 ......................................................................................................................... 98

4.6 参考 ................................................................................................................................... 99 付録 A 開発環境........................................................................................................................ 101

A.1 開発環境のセットアップ................................................................................................ 101

A.1.1 ワークスペースのコピー ......................................................................................... 101 A.1.2 eclipse の起動........................................................................................................... 102

A.2 ウェブアプリケーションの開発 ..................................................................................... 104 A.2.1 guinness への転送 ................................................................................................... 104 A.2.2 ウェブアプリケーションの再起動........................................................................... 106 A.2.3 Web アプリケーションへのアクセス ....................................................................... 107 A.2.4 新しいサーブレットの登録 ..................................................................................... 107

A.3 Google API を利用した開発の環境設定 ......................................................................... 108

1

第1章 HTML

1.1 HTML入門

1.1.1 HTMLとは HTML は HyperText Markup Language の略で、SGML( Standard Generalized Markup

Language )の書式を踏襲したマークアップ言語の１つであり、WWW 上のドキュメントを記述

するための言語です。HTML ファイルは < > 内に指定された「タグ」と呼ばれる手段を用いて

構造や修飾情報等が定義されたテキストファイルで、この HTML ドキュメントを読み込んで表

示するためのソフトが Netscape Navigator や Internet Explorer,Mozilla等のWebブラウザな

のです。

この HTML 入門では、いくつかの HTML タグを使って、簡単な自己紹介のページを作成する

ことを目標に説明を行っていきます。なお、ここで取り上げた以外にも多くの HTML タグがあ

りますし、機能の一部しか使っていない HTML タグもあります。もっと詳しい HTML タグの

解説については、文献や Web を参照して下さい。

1.1.2 とりあえず書いてみようまず、HTML タグを記述していく際の留意事項を列挙しておきます。(HTML タグは 1.2.5 に

一覧形式で簡単にまとめてあります。)

HTML タグは < HTML > ・・・ < /HTML > 、 < HEAD > ・・・ < /HEAD > 、< TITLE

> ・・・ < /TITLE > 、 < BODY > ・・・ < /BODY > のように、たいてい「開始タグ」

と「終了タグ」のペアになっています。ただし、一部には < br > のように終了タグを指定

しないものもあります。なお、終了タグは全て「/（スラッシュ）」で始まります。

アルファベットは大文字も小文字も同じものとして認識されます。< HTML > と書いても

< html > と書いても同じです。

タグ名の間にスペースや改行などを入れてはいけません。

また、HTML タグのより詳細な設定を行う「属性」を記述する場合の留意事項は以下のとおり

です。

属性名="属性値" のように書いていきます。

属性は開始タグの中に空白で区切って、「何組でも」「順不同」で記述できます。

属性名の大文字・小文字は区別されません。

第 1 章 HTML

2

属性値の大文字・小文字も原則として区別されませんが、URL やファイル名は大文字・小

文字を区別するので注意が必要です。

属性値は原則として二重引用符(”)または単一引用符（’）で囲みます。

（URL:Universal Resource Locater インターネット上の WWW 情報の位置を示す書式。プロ

トコル名、ドメイン名等からなる。HTTP3.2 までは URL という言葉が使われてきたが、

HTTP4.0 から URI(Uniform Resource Identifiers)という言葉が使用されることになる。）

では早速、必要小限の HTML タグを使って、テキストを出力するもシンプルな HTML ド

キュメントを作成してみましょう。

この授業では自己紹介のページを作るのが終目標ですから、とりあえず名前と所属、年齢、

生年月日、血液型、出身地、趣味あたりでも書いてみましょう。

【HTML ドキュメント】

<HTML>

<HEAD> <TITLE>坪内の自己紹介</TITLE>

</HEAD>

<BODY> つぼうちのホームページへようこそ！<BR>

<BR> 【氏名】坪内孝太(つぼうちこうた)<BR>

【所属】東京大学工学部システム創成学科知能社会システムコース２年 <BR>

【生年月日】1981 年 11 月 14 日<BR>

【血液型】O 型<BR>

【出身地】福井県<BR>

【出身校】 <BR>

【趣味】弟と映画鑑賞・食事・帰省・バス<BR>

【贅沢だと思う食べ物】実家の食事<BR>

</BODY>

</HTML>

【表示結果】

3

つぼうちのホームページへようこそ！

【氏名】坪内孝太(つぼうちこうた) 【所属】東京大学工学部システム創成学科知能社会システムコース２年【生年月日】1981年11月14日【血液型】O型【出身地】福井県

【出身校】【趣味】弟と映画鑑賞・食事・帰省・バス

【贅沢だと思う食べ物】実家の食事

では、それぞれの HTML タグについて簡単に説明を行っていきます。

< HTML > このドキュメントが HTML であることを宣言するためのタグで、必ず用います。また、

HTML ドキュメントの後には < /HTML > と記述して、タグを閉めましょう。

< HEAD > このタグで囲まれた部分は見出し部分であることを示し、タイトルやドキュメントの付加

的情報を記述していきます。この見出し部分に書かれた内容は、タイトルなどの一部を除

き、通常は表示されません。

< TITLE > < HEAD > タグの間で用いるタグで、そのページの「タイトル」を表します。このタイト

ルは Firefox などのブラウザで見たとき、タイトルバーにその内容が表示されます。上の

例では「坪内の自己紹介」というのがタイトルになります。

< BODY > このタグで囲まれた部分が本体部となります。ブラウザで表示されるのは、この <BODY>

で囲まれた部分となります。上記の例では「つぼうちのホームページへようこそ！」以下

の内容が表示されることになります。

< BR > これはテキストを改行したいときに使います。たとえドキュメント内で改行されていても、

< BR > タグで改行を指定しなければ、ブラウザでの表示に反映されません。なお、この

第 1 章 HTML

4

タグは < BR > 単独で機能を果たしますので、 < /BR > というものはありません。また、

何も書かずに < BR > を入れると一行分のスペースが空くことになります。

1.1.3 バックグラウンドの設定と文字の装飾・レイアウト文字が並んでいるだけではページが殺風景なので、背景に色をつける、文字を装飾するなどの

工夫をしてみましょう。


<HTML>


</HEAD>

<BODY bgcolor=" #E9FFD9">

<FONT size="5" color="navy"><b><CENTER> 坪内のホームページへようこそ！<BR><BR>

</CENTER></b></FONT><BR><BR> <FONT color=" #008000">【氏名】</FONT>

坪内孝太(つぼうちこうた)<BR><BR>

<FONT color=" #008000">【所属】</FONT>

東京大学工学部システム創成学科知能社会システムコース２年<BR><BR>

<FONT color=" #008000">【生年月日】</FONT>

1981 年 11 月 14 日<BR><BR>

<FONT color=" #008000">【血液型】</FONT>

O 型<BR><BR>

<FONT color=" #008000">【出身地】</FONT>

福井県 <BR><BR>

<FONT color=" #008000">【出身校】</FONT>

<BR><BR> <FONT color=" #008000">【趣味】</FONT>

弟と映画鑑賞・食事・帰省・バス<BR><BR>

<FONT color=" #008000">【贅沢だと思う食べ物】</FONT>

実家の食事<BR>

</BODY>

</HTML>

5

【表示結果】

坪内のホームページへようこそ！

【氏名】坪内孝太(つぼうちこうた) 【所属】東京大学工学部システム創成学科知能社会システムコース２年【生年月日】1981年11月14日【血液型】O型【出身地】福井県【出身校】【趣味】弟と映画鑑賞・食事・帰省・バス【贅沢だと思う食べ物】実家の食事

< BODY bgcolor > BODYタグにbgcolorを追加することで、ホームページの背景色を好きな色に変更すること

ができます。色を指定する場合には、色名または色指定値( #RRGGBB形式、R(red)、

G(green)、B(blue)にそれぞれ 16 進数 2 桁の値(00～FF,00～ff)をいれて、それらが混ぜ合

わさった色が終的な色)を使い、 < BODY bgcolor="navy" > または < BODY bgcolor="

#008000" > というふうに指定します。実際の色と、それに対応する色名または色指定値

については、 http://www.coara.or.jp/~ynakamra/iro/rgbcolor.html などを参照するとい

いでしょう。また、画像を背景にすることもできます。各自で調べましょう。

< FONT > 文字のサイズや色を変えたい場合に使う HTML タグです。 < FONT size > は文字のサイ

ズを指定します。文字のサイズは 1～7 の７段階があり、1 がも小さいサイズで、7 が

も大きいサイズになります。何も指定しない場合には「3」になります。 < FONT color >

は文字の色を指定します。指定する場合は""の中に、色名または色指定値( #RRGGBB 形

式)を書き込みます。なお、元のサイズ、元の色に戻したい時には、 < /FONT > としてタ

グを閉じます。

< CENTER > テキストや画像などのイメージを中心に置きたいときに利用するタグ。同様に、センタリ

ングや右寄せなどテキストの位置を指定したい時に利用するタグとして、 < div align >

というタグもあります。どのように使うのか調べてみましょう。

< b >

http://www.coara.or.jp/%7Eynakamra/iro/rgbcolor.html

第 1 章 HTML

6

文字を太字にするときに使うタグ。このほかにも文字を修飾するタグとしては、< i > < s >

< tt > < u > < sup > < sub > < big > < small > < strong > などがあります。ど

のような効果があるかは実際に使って調べてみましょう。

1.1.4 画像を貼り付ける・リンクをつける文字だけのページでは単調ですから、画像を貼り付けてみましょう。また、 HTML の特徴で

もあるリンクも使ってみましょう。

まずは、貼り付ける画像を用意することからはじめましょう。HTML で扱うことが出来る画像

ファイルは次の３種類です。デジカメやスキャナで読みこんだ静止画像はこの３種類のいずれか

のフォーマットで保存します。

GIF (Compuserve Graphics Interchange Format) 形式

GIF はネットワークを通じた画像転送を目的として開発された画像形式です。WWW のイ

ンラインイメージとして JPEG とともに標準的に用いられます。透明化(Transparency)と

呼ばれる透明な色を定義するオプションや、インターレースと呼ばれる表示を行う際に初

は荒く、次第に細かい部分まで表示するオプションも指定できます。

色は大 256 色(8bit)のインデックスカラーしか扱えないため、１枚の画像で利用可能な

色数は 256 色までに制限されます。拡張子は一般的に.gif です。圧縮アルゴリズムの特許を

Unisys 社が所有しているため、ライセンスされたソフトウェア以外で作成した GIF ファイ

ルを WWW 上で公開することは禁止されているので注意してください。詳細については、

http://www.unisys.co.jp/LZW/を参照してください。)

JPEG (Joint Photographic Experts Group)形式

スキャナで取り込んだ画像や、ビデオから取り込んだ画像などの自然画像をデジタル化し

た画像の圧縮保存にもっとも適しています。画像によっては、圧縮によって画像のサイズを

非圧縮の状態の数分の１から数十分の１にできます。このため、WWW のインラインイメ

ージなどのネットワークを通じた画像転送では GIF とともに標準的に用いられます。

アプリケーションでの保存時にオプションで圧縮率を指定できますが、圧縮率を上げると

画像の劣化の度合いが大きくなるので、適切な圧縮率を自分で選択する必要があります。可

逆圧縮モードも規格としてはサポートされていますが、利用できるアプリケーションは制限

されます。

画像圧縮方法の適正から、自然画像の保存にも適した形式です。逆に、３次元ＣＧなど

のように完全にコンピュータ上でつくられた画像を保存すると、画像の劣化が自然画像の場

合より目立ちやすいです。特に完全に同じ色が平坦に続くような部分が画像に含まれる場合

は、JPEG で保存すると、同じ色だったはずの部分に若干色斑がかかったようになってしま

うことがあるので、注意する必要があります。拡張子は一般的に.jpeg または.jpg です。

7

PNG (Portable Network Graphics) 形式

PNG はネットワークに適な画像ファイル形式への需要に応えて提唱されたものです。特

に WWW での利用に焦点を置き、GIF を発展させた形で定義されています。

GIF と同様に可逆方式でデータを圧縮しますが、圧縮効率は GIF より高いです。高 48bit

の RGB カラーと 16bit のグレースケール、アルファチャンネル(透明度を指定できる)をサ

ポートしており、表現力の点で GIF よりも優れています。またネットワークでの利用を考

慮して、GIF よりも美しくインターレース表示できるようになっています。

また、Web上には無料かつ著作権フリーで使える写真、アイコンなどを提供しているサイトが

あります。（例えば、http://star-stream.hp.infoseek.co.jp/ など）このようなサイトから自分の

好きな素材や画像をダウンロードして利用するのも一興です。なお、この場合には利用条件など

をよく読んでマナー違反のないように留意する必要があります。


<HTML>


</HEAD>

<BODY bgcolor="#E9FFD9">

<FONT size="5" color="navy"><b><CENTER> つぼうちのホームページへようこそ！<BR>

</FONT></b></CENTER><BR><BR> <FONT color="#008000">【氏名】</FONT>


<FONT color="#008000">【所属】</FONT>

<A href="http://www.u-tokyo.ac.jp/">東京大学</A>

工学部システム創成学科知能社会システムコース２年<BR>

<FONT color="#008000">【生年月日】</FONT>

1981 年 11 月 14 日<BR><BR>

<FONT color="#008000">【血液型】</FONT>

O 型<BR><BR>

<FONT color="#008000">【出身地】</FONT>

http://star-stream.hp.infoseek.co.jp/

第 1 章 HTML

8

福井県<BR><BR>

<FONT color="#008000">【出身校】</FONT>

<BR><BR> <FONT color="#008000">【趣味】</FONT>


<FONT color="#008000">【贅沢だと思う食べ物】</FONT>

実家の食事<BR><BR>

<FONT color="#008000">【我が家のペット】</FONT>

ビーグルのじょんです。 <BR><BR>

<CENTER> <IMG src="./pet.jpg" alt="じょん on the クッション" wide="200" height="160">

</CENTER> <BR>

<hr WIDTH="100%"><BR>

<FONT size="2"> このホームページの内容についてのご意見・ご感想は

<A href="mailto:[email protected]">こちら</A>まで！

</BODY>

</HTML>

9

坪内のホームページへようこそ！【氏名】坪内孝太(つぼうちこうた) 【所属】東京大学工学部システム創成学科知能社会システムコース２年【生年月日】1981年11月14日【血液型】O型

【出身地】福井県【出身校】

【趣味】弟と映画鑑賞・食事・帰省・バス【贅沢だと思う食べ物】実家の食事【我が家のペット】ビーグルのじょんです。

このホームページの内容についてのご意見・ご感想はこちらまで！

図 1.1 表示結果

< a href="URL" > テキストやイメージにリンクを設定するタグです。このタグで囲まれたものをクリックす

るとリンクを張られたファイルにジャンプします。このとき、リンク先は URL で指定しま

す。この例では『東京大学』という部分をクリックすると、東大のホームページにジャンプ

するように設定してあります。したがって、リンク先は http://www.u-tokyo.ac.jp/となりま

す。なお、このタグを閉じる時には < /a > となります。</ a href > ではないので注意して

下さい。

< IMG src="ファイル名" >

画像を表示するときに用いられるタグです。表示する画像は < IMG src=のあとに画像フ

ァイルの URL を記述します。ここでは、HTML ファイルと同じディレクトリに保存されて

いますので、ファイル名は./pet.jpg となります。これに続けて、画像が表示できないブラウ

ザのために、画像の代わりに表示されるテキストを指定するのが alt 属性です。また、画像

が表示される場合でも、画像にマウスポインターを近づけるとこのテキストが表示されます。

したがって、alt 属性には画像を端的に表す単語や文章を記述するようにしましょう。wide

第 1 章 HTML

10

属性と height 属性は画像のサイズを指定する属性で、wide 属性が横幅を、height 属性は縦

幅を表しています。この例のように、属性に数値が入っている場合には「画像のピクセル数」

を、属性にパーセントが入っているときには「ウィンドウの大きさに対する割合」で指定さ

れます。

< a href="mailto:メールアドレス" >

これもリンクの一種ですが、メールの宛先を指定する際に使われるタグです。この機能に

対応したブラウザであれば、リンクをクリックするとブラウザ側で設定されているメール発

信用ウィンドウが起動します。メールの宛先は"mailto:メールアドレス" の形式で指定しま

す。

< hr > 横罫線を表示するためのタグです。width 属性で横罫線の長さを画面の横幅比に対する割

合で指定しています。この例では画面の横幅比で 100 %の長さで横罫線を引いています。

1.1.5 テーブルで表を作る後にテーブル機能を用いて、簡単な略歴表を作ってみましょう。


<HTML>


</HEAD>

<BODY bgcolor="#E9FFD9">

<FONT size="5" color="navy"><b><CENTER> つぼうちのホームページへようこそ！<BR>

</FONT></b></CENTER><BR><BR> <FONT color="#008000">【氏名】</FONT>


<FONT color="#008000">【所属】</FONT>

<A href="http://www.u-tokyo.ac.jp/">東京大学</A>

工学部システム創成学科知能社会システムコース２年<BR>

<BR> <FONT color="#008000">【生年月日】</FONT>

11

1981 年 11 月 14 日<BR><BR>

<FONT color="#008000">【血液型】</FONT>

O 型<BR><BR>

<FONT color="#008000">【出身地】</FONT>

福井県<BR><BR>

<FONT color="#008000">【出身校】</FONT>

<BR><BR> <FONT color="#008000">【趣味】</FONT>


<FONT color="#008000">【贅沢だと思う食べ物】</FONT>

実家の食事<BR><BR>

<FONT color="#008000">【我が家のペット】</FONT>

ビーグルのじょんです。 <BR><BR>

<CENTER> <IMG src="./pet.jpg" alt="じょん on the クッション" wide="200" height="160">

</CENTER> <BR>

<hr WIDTH="100%"><BR>

<table border width="90%">

<CENTER> <caption>ワタシの略歴</caption>

<tr><th>西暦</th><th>できごと</th></tr>

<tr><td>1981 年</td><td>福井県で産声を上げる </td></tr>

<tr><td>1982 年</td><td> </td>弟生まれる</tr>

<tr><td>1986 年</td><td>小学校に入学

高校まで福井から出ず</td></tr>

</CENTER>

</table>

<BR>

<hr WIDTH="90%"><BR> <FONT size="2"> このホームページの内容についてのご意見・ご感想は

<A href="mailto:[email protected]">こちら</A>まで！

</BODY>

</HTML>

第 1 章 HTML

12

坪内のホームページへようこそ！【氏名】坪内孝太(つぼうちこうた) 【所属】東京大学工学部システム創成学科知能社会システムコース２年【生年月日】1981年11月14日【血液型】O型

【出身地】福井県【出身校】

【趣味】弟と映画鑑賞・食事・帰省・バス【贅沢だと思う食べ物】実家の食事【我が家のペット】ビーグルのじょんです。

ワタシの略歴

このホームページの内容についてのご意見・ご感想はこちらまで！

小学校入学1986年

弟生まれる1982年

福井県で産声を上げる1981年

できごと西暦

小学校入学1986年

弟生まれる1982年

福井県で産声を上げる1981年

できごと西暦

図 1.2 表示結果その２

< TABLE > 表組の開始を宣言するタグです。このタグだけでは表は作成できません。セルを表す<TD >

タグや、行を表す < TR> タグを入れ子にしてはじめて表が作成されます。 < TABLE > と

すると枠のない表を、< TABLE border > とすると枠のある表を作成できます。また、width

属性や height 属性を追加すると表のサイズを調整する事が可能になります。この例では、

表の横幅をウインドウサイズの 90 %となるよう指定しています。

< caption > 表にキャプション(見だし)をつけたい時に利用します。ここでは「私の略歴」というキャ

プションをつけていますね。

< TR > と < TD >

< TR > で行を、 < TD > で列（セル）を作ります。この例では、１行に２列（「年代」と

13

「できごと」）が入りますので、< TR > < TD > 列１ < /TD > < TD > 列２ < /TD > < /TR >

というように記述していきます。もし、行の中に列が１つしか存在しない場合でも、< TD >

は必要です。また、 < TD > 内において、align 属性や valign 属性を指定することでテキ

ストの位置を、bgcolor 属性でセルのバックグラウンド(背景)の色の指定などが行えます。

詳しくは参考文献等を参照してみて下さい。

< TH > 表頭に見出しをつけたい時に利用するタグです。使い方は < TD > と同様に、< TR > の

中に入れこみます。この < TH > で記述したテキストは自動的に太字で表示されます。

1.2 HTML入門 – 補足資料

1.2.1 エレメント・タグ・属性 HTML ドキュメントは文書の構造からみた『エレメント(要素)』で構成されています。つまり、

内容に沿って「見出し」「本文」「段落」といった文書を構成する各『エレメント』があり、それ

を表現するためにつける「しるし」が『タグ』です。そして、その要素に対して指定するのが、

『属性』と属性の『値』です。

以下では、要素・タグ・属性のそれぞれについて見ていきます。

エレメント（element: 要素）

HTML ドキュメントを構成するタイトルや見出し、段落、リスト、テーブル、リンクなどの要

素を「エレメント(要素)」と呼ぶ。例えば、大見出しエレメント(要素)は次のように定義されま

す。

<H1>HTML 入門</H1>

一般にエレメントは「開始タグ」「内容」「終了タグ」で構成されます。

上の例では、初の「 < H1 > 」が開始タグ、「HTML 入門」が内容、「 < /H1 > 」が終了タグ

です。

タグ（tag）タグとは、HTML ドキュメントにおいてホームページの動きをあらわす命令やコメントを書き

込むための書式で < > で括られます。タグは < HTML > ・・・ < /HTML > 、 < HEAD

> ・・・ < /HEAD > 、 < TITLE > ・・・ < /TITLE > 、 < BODY > ・・・ < /BODY > の

ように、たいてい「開始タグ」と「終了タグ」のペアになっています。しかし一部には < BR >

第 1 章 HTML

14

のように終了タグを指定しないものもあります。なお、終了タグは全て「/（スラッシュ）」で始

まります。

属性（attributes: アトリビュート）と属性値} タグのより詳細な指定を行うためものもが属性(アトリビュート)と属性値(アトリビュート値)

です。例えば、画像を表示するための < IMG > タグでは、画像ファイル名や画像の幅、高さな

どをそれぞれ src、width、height の属性名で定義します。一方、属性値には予め規定されたも

のの中から選択する場合と、数値などのように制作者が任意で書き込む場合の二つがあります。

<IMG src = "test.gif" width = "70%" height="100"> ↑ ↑ ↑ ↑

属性名１属性値１属性名２属性値２

属性名と属性値の書き方のポイントは以下のとおりです。

属性名="属性値" のように書いていきます

属性は開始タグの中に空白で区切って、「何組でも」「順不同」で記述できます

属性名の大文字・小文字は区別されません

属性値の大文字・小文字も原則として区別されませんが、URL やファイル名は大文字・小

文字を区別するので注意が必要です

属性値は原則として二重引用符(”)または単一引用符（’）で囲みます

1.2.2 HTMLドキュメントの構造 W3C では HTML4.01 に従った HTML ドキュメントの構造を、以下のように定義しています。

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01 Transitional//EN"

"http://www.w3.org/TR/REC-html4/loose.dtd">

<HTML>

<HEAD> 【ヘッド部要素】

<TITLE>・・・</TITLE>

</HEAD>

<BODY> 【本体部ドキュメント】

</BODY>

15

</HTML>

< !DOCTYPE > 【ドキュメントタイプの宣言】} HTML ドキュメントでは、初に使用されている HTML のバージョンを宣言する必要があり、

この宣言を行うのが < !DOCTYPE > です。HTML の各バージョンで使用されるタグや属性等

は、DTD(Document Type Definition)で定義される。DTD は HTML のバージョンや同じバー

ジョンでも使用するタグ、属性によっても異なる場合があるので、該当するものをそのままドキ

ュメントの冒頭に記述します。

（Web 上では上記のようになっているが、HTML では省略が可能なため今回は省略していま

す。ただし、文書タイプの宣言におけるシステム識別子の記述は、XML では必須になっていま

すので、XHTML の場合は、省略せずに記述する必要があります。）

XHTML： 2000 年 1 月 26 日にＷ３Ｃの勧告となった XHTML（Extensible HyperText

Markup Language）は素朴な文書構造記述言語として発展してきた（あるいは混乱してきた）

HTML に、XML[XML1]の持つ柔軟性、拡張性を取り入れたものです。HTML は SGML の実

装の一つで、書式にそれなりに自由度がありましたが、XHTML は XML の実装であるため、書

式が厳密になっています（XML は、SGML の書法をシンプルで厳密なものにすることで、アプ

リケーションの開発や互換性をとりやすくしました）。

また、HTML は規格がどんどん拡張され、携帯端末などにとってはフルサポートするのが困難

な規模となっています。一方、新しい規格である MathML や SVG が続々と登場し、これらを

組み込んだ文書型を容易に定義できることも求められています。このため、利用環境に応じて必

要な要素を選択して採用できるモジュール化や、他の XML 文書との融合（拡張）なども XHTML

の重要な目的です。

HTML の各バージョンで使用されるタグや属性等は、DTD(Document Type Definition)で定義

されます。DTD は HTML のバージョンや同じバージョンでも使用するタグ、属性によっても

異なってくるので場合があるので、該当するものをそのままドキュメントの冒頭に記述します。

主な HTML のバージョンと < !DOCTYPE > の記述を以下に列記します。

HTML3.2 W3C が 1997 年 1 月に勧告した HTML のバージョン

< !DOCTYPE HTML PUBLIC"-//W3C//DTD HTML3.2 Final//EN" >

HTML4.01 Strict DTD HTML4.01 で非推奨タグ・属性、フレームを使用しない場合

第 1 章 HTML

16

< !DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01//EN"

"http://www.w3.org/TR/REC-html4/strict.dtd" >

HTML4.01 Traditional DTD HTML4.01 で非推奨タグ・属性が含まれるが、フレームを使用しない場合

< !DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01 Transitional//EN"

"http://www.w3.org/TR/REC-html4/loose.dtd" >

HTML4.01 Frameset DTD HTML4.01 Traditional DTD に加え、フレームが加わった場合

< !DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01 Frameset//EN"

"http://www.w3.org/TR/REC-html4/frameset.dtd" >

< META http-equiv=Content-Type content="text/html; charset=euc-jp" > これは日本語コードを指定するものです。本講義のドキュメントには記述しておりませんが、

おまじないとして < HEAD > 部に記述しておいてください。

< HTML > < HEAD > < BODY > 【ドキュメント構造の定義】 < HTML > 、 < HEAD > 、 < BODY > の３種類のタグによって、HTML で記述されるドキ

ュメントの構造を定義します。

< HTML > ・・・ < /HTML >

ドキュメントが HTML で書かれていることを宣言するもので、ドキュメント全体の初

と後におきます。ただし、例外は < !DOCTYPE > で、これだけは < HTML > の前に

置きます。

< HEAD > ・・・ < /HEAD >

タグの間には、ドキュメントのタイトルや特徴、制作者の情報等といった情報を記述しま

す。ここに記述される内容は、基本的に < TITLE > ・・・ < /TITLE > で囲まれたタイ

トル以外、ブラウザには表示されません。

< BODY > ・・・ < /BODY >

実際にブラウザに表示されるドキュメント部分となります。

17

なお、この < HTML > ・・・ < /HTML > 、 < HEAD > ・・・ < /HEAD > 、 < BODY > ・・・

< /BODY > の順番が入れ替わることはありません。

< TITLE > 【HTMLドキュメントのタイトルを定義】 < TITLE > ・・・ < /TITLE > タグは < HEAD > ・・・ < /HEAD > の中に記述して、ドキ

ュメントにタイトルをつけます。一般的なブラウザでは、ここに記述されたテキストがタイトル

バーに表示され、「ブックマーク」等に登録する際のディフォルトのタイトルになります。

もシンプルなHTMLドキュメント今まで解説してきたタグを用いることで、もシンプルな HTML ドキュメントが作成できま

す。

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01 Transitional//EN"

"http://www.w3.org/TR/REC-html4/loose.dtd">

<HTML>

<HEAD> <TITLE> もシンプルな HTML</TITLE>

</HEAD>

<BODY> これはもシンプルな HTML ファイルです。ココに本文を書き込んでいきます。本文そのもの

は日本語で書き表すことが出来ますが、半角カタカナは文字化けをおこす場合があるので使わな

いようにしましょう。

</BODY>

</HTML>

ブラウザ上では以下のように表示されます。

これは最もシンプルなHTMLファイルです。ココに本文を書き込んでいきます。本文そのものは日本語で書き表すことが出来ますが、半角カタカナは文字化けをおこす場合があるので使わないようにしましょう。

第 1 章 HTML

18

1.2.3 HTMLのファイル形式

HTMLドキュメント完成した HTML ドキュメントは、拡張子に「.htm」または「.html」として保存します。ファ

イル名には漢字・カナ・平仮名といった日本語は使えません。英数字を使って適当なファイル名

をつけて保存します。

なお、URL でファイル名が省略された場合、ブラウザは自動的に index.html を表示しようと

します。従って、トップページを「index.html」または「index.htm」としておけば、URL(例

えば「http://www.test.ac.jp」）と入力するだけで、自動的にトップページを表示することができ

ます。

画像ファイル Web 上で扱うことが出来る画像ファイルは次の３種類です。デジカメやスキャナで読みこんだ

静止画像はこの３種類のいずれかのフォーマットで保存する必要があります。

GIF 形式

JPEG 形式

PNG 形式

1.2.4 フォームを使うフォーム(form)とは、ウェブサイト上にあるチェックボックス、テキストボックス、ボタンな

どの総称です。ブラウザから情報を入力・選択し、ユーザーがサーバーへデータを送信すること

ができます。例えばテキストボックスに文字を入力する事で掲示板に情報を書き込んだりするこ

とができます。Web アンケートや注文フォームなどで多用されており、本授業の課題演習にお

いても多く利用されるでしょう。

そこで、ここではフォームの機能について基本的なものに限定して、簡単な紹介を行います。

より詳細な使い方やこれ以外の機能については参考書籍・Webページを適時参照してください。

まずは今回解説するフォームを使ったHTMLソースと、その表示イメージを掲げます(図 1.3)

【HTML ソース】

<form method=post action="cgi-bin/cgitest.cgi"> テキスト入力：

<input type=text

name="TEXT1" size=30>

19

<p> パスワード入力：

<input type=password

name="PASSWD1" size=30>

<p> 複数行入力：<BR>

<textarea name="TAREA1" cols=20 rows=3>

</textarea>

<p>

<input type=checkbox name="CBOX1" value="apple">リンゴ

<input type=checkbox name="CBOX1 "value="banana">バナナ

<input type=checkbox name="CBOX1" value="orange">ミカン

<p>

<input type=radio name="RAD1" value="1" checked>キャベツ

<input type=radio name="RAD1" value="2">ニンジン

<input type=radio name="RAD1" value="3">トマト

<p>

<select name="SELECT1"> <option value="No1" >選択肢その１

<option value="No2" >選択肢その２

<option value="No3" >選択肢その３

<option value="No4" >選択肢その４

</select>

<p> <input type=submit value="実行">

<input type=reset value="取消">

</form>

第 1 章 HTML

20

図 1.3 ブラウザでの表示例

< form > 【入力フォームの宣言と送信方法等の指定】 < form＞・・・ < /form > は、この範囲が入力フォームであることを示しています。フォーム

の形式を決める様々なタグは全てこの < form > ・・・ < /form > の中に記述していきます。

<form method=post action="cgi-bin/cgitest.cgi">

ここでは、「method」と「action」という２つの属性を使っていますが、フォーム内容をメール

ソフトで読みたい場合には「enctype」の指定も重要です。

method 属性

入力されたデータ形式をどのような形で送信するかを指定します。「get」と「post」のどちら

かを指定できますが、フォームのデータのみを送信する「post」を使用する方が一般的です。

action 属性

実行(submit)ボタンを押した時に実行するアクションを指定します。action="mailto:～"とする

とフォームの内容を～のアドレスにメール送信します。(ただし IE3.0 の場合は単にメールウィ

ンドウを起動するだけ)action="～.cgi"とすると、～.cgi を CGI スクリプトとして実行します。

enctype 属性

スクリプトにデータを受け渡す際のエンコード方法を指定します。通常は省略して構いません

が、"mailto:～"を使ってメールで受信したい場合には enctype="text/plain"（プレーンテキスト

形式）と指定することで、メールソフトでフォーム内容を読めるようになります。

21

< input type=text > 【１行の入力フィールド】１行のデータを入力する時に用いられます。250 文字程度しか送信できないブラウザもあるの

で、長い文章を入力させる場合には textarea を使います。

<input type=text name="TEXT1" size=30>

name 属性

フォーム部品の名前を指定する属性です。この名前は CGI スクリプトなどに渡されて入力デー

タを識別するのに用いられます。上記の例では「TEXT1」という名前が割り当てられています。

size 属性

入力フィールドの横幅を半角文字数で指定します。上記の例では半角 30 文字(全角では 15 文

字)の横幅を確保しています。

< input type=password > 【入力文字を表示させない】パスワードやユーザ ID など入力した文字を画面に表示させたくない場合に用いられるフォー

ムです。入力文字がアスタリスク( * )で表示されること以外は TYPE=text と同様の働きをしま

す。

<input type=password name="PASSWD21" size=30>

name 属性


タを識別するのに用いられます。上記の例では「PASSWD1」という名前が割り当てられていま

す。

size 属性

入力フィールドの横幅を半角文字数で指定します。上記の例では半角 30 文字(全角では 15 文

字)の横幅を確保しています。

< textarea > 【複数行の入力フィールド】２行以上の入力フィールドを作成するときに用いられます。cols 属性で横幅を、rows 属性で行

数を指定してフィールドの大きさを決めるので、この２つは必ず指定しなければなりません。

<textarea name="TAREA1" cols=20 rows=3> </textarea>

第 1 章 HTML

22

name 属性


タを識別するのに用いられます。上記の例では「TAREA1」という名前が割り当てられていま

す。

cols 属性

横幅(１行に表示される半角文字数)を指定します。上記の例では１行に半角 20 文字(全角では

10 文字)の表示が行えます。

rows 属性

行数を指定します。上記の例では３行分のスペースを確保しています。

< input type=checkbox > 【チェックボタン】四角いボタンを作成し、複数の選択肢から複数の項目を選べるようにします。たとえばアンケ

ートで複数回答を求める時などに利用されます。

<input type=checkbox name="CBOX1" value="apple">リンゴ

<input type=checkbox name="CBOX1 "value="banana">バナナ

<input type=checkbox name="CBOX1" value="orange">ミカン

name 属性

チェックボックスの名前を指定する属性です。上記の例では「CBOX1」という名前が割り当て

られています。また、タグに続けて文字を入力すると、チェックボタンの横にその文字が表示さ

れます。

なお、この値が同じボタンは同一のグループとして扱われます。複数回答のアンケートなど共

通の項目に対する選択肢の場合には同じ名前を設定します。

value 属性

データが送信された時に、選択された項目が何であるかを判別するための値です。上記の例で

は「リンゴ」が選択されたときは「apple」、「バナナ」が選択されたときは「banana」、「ミカン」

が選択されたときは「orange」をデータとして送信するように設定しています。

< input type=radio > 【ラジオボタン】丸いボタンを作成し、複数の選択肢の中からひとつを選択できるようにします。たとえば、ア

ンケートで答えを一つだけ選んで欲しいときなどに利用されます。

23

<input type=radio name="RAD1" value="1" checked>キャベツ

<input type=radio name="RAD1" value="2">ニンジン

<input type=radio name="RAD1" value="3">トマト

< input type=radio > 【ラジオボタン】

name 属性ラジオボタンの名前を指定する属性です。上記の例では「RAD1」という名前が割り当てられ

ています。また、タグに続けて文字を入力すると、チェックボタンの横にその文字が表示されま

す。

なお、この値が同じボタンは同一のグループとして扱われます。同一グループでは

一つの項目しか選択できないようになっています。

value 属性


は「キャベツ」が選択されたときは「1」、「ニンジン」が選択されたときは「2」、「トマト」が

選択されたときは「3」をデータとして送信するように設定しています。

checked 属性

この属性のついているボタンが予め選択された状態で表示されます。上記の例では「キャベツ」

が選択された状態になっています。

< select > 【プルダウン形式のメニュー】アンケートなどでプルダウン型のメニューの作成に用いられます。表示スペースが限られてい

る時や選択肢の数が多い時などに利用されています。

<select name="SELECT1"> <option value="No1" >選択肢その１

<option value="No2" >選択肢その２

<option value="No3" >選択肢その３

<option value="No4" >選択肢その４

</select>

name 属性

プルダウンメニューの名前を指定する属性である。上記の例では「SELECT1」という名前が

第 1 章 HTML

24

割り当てられています。name 属性は select タグの属性として設定しましょう。

option タグ

プルダウンメニューに表示される選択肢を列挙するためのタグです。option タグで挟まれたテ

キストがそれぞれメニューに表示される項目となります。

value 属性


は「選択肢その１」が選択されたときは「No1」、「選択肢その２」が選択されたときは「No2」、

「選択肢その３」が選択されたときは「No3」、「選択肢その４」が選択されたときは「No4」を

データとして送信するように設定しています。

< input type=submit > 【送信ボタン】フォームの内容を送信するためのボタンです。

<input type=submit value="実行">

value 属性

ボタンに表示するテキスト(ラベル)を設定します。上記の例では「実行」と表示させています。

< input type=reset > 【リセットボタン】フォーム内容を初期状態に戻すためのボタンです。リセットボタンを押すと、ユーザが入力し

た情報内容やチェックした項目が取り消されます。

<input type=reset value="取消">

value 属性

ボタンに表示するテキスト(ラベル)を設定します。上記の例では「取消」と表示させています。

【フォームは本講義で必ず用いますので、よく学んでおいてください。】

1.2.5 主なHTMLタグ一覧機能別によく使われる HTML タグを一覧形式でまとめました。属性の設定方法や具体的な記

述方法については、参考書籍あるいは参考 Web ページを参照してください。

25

構造タグ（HTML 文書の構造・属性の指定）

<HTML> …… </HTML> テキストが HTML であることを示す

<HEAD> …… </HEAD> HTML の属性・機能を表示する

<!DOCTYPE HTML PUBLIC …> 使用した HTML のバージョン情報を指定

<TITLE> …… </TITLE> HTML 文書のタイトルを示す

<META> …… </META> HTML 文書の情報を指定、リロード文書・時間

を指定

<BODY> …… </BODY> ドキュメントの指定

<ISINDEX> キーワード検索のための一行文字列入力フィ

ールドを作成する

レイアウト（文書の構造・飾り）

< BR > 文章を強制改行させる

< P > ・・・・・・ < /P > 段落を構成する

< CENTER > ・・・・・・ < /CENTER > センタリングさせる

< DIV > ・・・・・・ < /DIV > 右寄せ・センタリング・左寄せさせる

< NOBR > ・・・・・・ < /NOBR > 文章の改行を強制的に停止させる

< WBR > NOBR の中で、あえて改行する場を指定する

< HR > 罫線（水平線）を引く

< Hx > ・・・・・・ < /Hx > 見出しを表示する、注：xは 1～6の整数値

< SPACER > スペースを入れる

< MULTICOL > ・・・・< /MULTICOL > 段組表示する

< PRE > ・・・・・・ < /PRE > テキストの改行を、そのまま表示

< LISTING > ・・・・・・ < /LITING > テキストの改行を、そのまま表示

< PLAINTEXT > ・・・ < /PLAINTEXT > テキストを、プレーンテキストで表示

第 1 章 HTML

26

文字に属性（フォントスタイル）を与える

< BLOCKQUOTE > ・< /BLOCKQUOTE > 抜粋・引用した文（長め）を表示する

< BIG > ・・・・・・ < /BIG > 大きめに表示

< DEL > ・・・・・・ < /DEL > 削除文字を表現

< SMALL > ・・・・・・ < /SMALL > 小さめに表示

< STRONG > ・・・・・・ < /STRONG > さらに強調して表示

< CITE > ・・・・・・ < /CITE > 抜粋・引用元を表示する

< EM > ・・・・・・ < /EM > 強調して（emphasize）表示

< DFN > ・・・・・・ < /DFN > 定義語句を表示

< ADDRESS > ・・・・・・< /ADDRESS > 文書情報を表現する

< VAR > ・・・・・・ < /VAR > 変数を表現

< CODE > ・・・・・・ < /CODE > プログラムコードを表現する

< KBD > ・・・・・・ < /KBD > ユーザがキーボードから入力すべき文字列表

示する

< SAMP > ・・・・・・ < /SAMP > ディスプレイに表示されるべき文字列を表示

する

< ABBR > ・・・・・・ < /ABBR > 省略語句を記述する

< ACRONYM > ・・・・・< /ACRONYM > 頭文字を記述する

< RUBY > ・・・・・・ < /RUBY > ルビをつける

< RB > ・・・・・・ < /RB > ルビをつける対象を指定する

< RT > ・・・・・・ < /RT > ルビ文字を指定する

< RP > ・・・・・・ < /RP > ルビ関連のタグ未対応ブラウザへの対策

27

フォント（文字の飾り・属性)の設定

< B > ・・・・・・ < /B > 太字（bold）に表示させる

< I > ・・・・・・ < /I > イタリック（italic）体で表示

< U > ・・・・・・ < /U > アンダーライン（Under line）を引く

< S > ・・・ < /S > , < STRIKE > ・・・・

< /STRIKE > 取り消し線（Strike）を引く

< TT > ・・・・・・ < /TT > 等幅フォントで表示

< LAYER > ・・・・・・ < /LAYER > イメージやテキストを重ねて表示する

< SUP > ・・・・・・ < /SUP > 文字列を上付きで表示

< SUB > ・・・・・・ < /SUB > 文字列を下付きで表示

< BLINK > ・・・・・・ < /BLINK > テキストを点滅（BLINK）させる

< MARQUEE > ・・・・・< /MARQUEE > 文字列に動きをつける

< BASEFONT > FONT タグの基準となるフォントサイズを設定

< FONT > ・・・・・・ < /FONT > フォント（色・サイズ・書体）を指定

< SPAN > ・・・・・・ < /SPAN > インライン要素にスタイルシートを呼び出し、かけ

る

< STYLE > ・・・・・・ < /STYLE > スタイルシートを定義する

< DIV > ・・・・・・ < /DIV > ブロック要素にスタイルシートを適用する

リンク

< A > ・・・・・・ < /A > ブロック要素にスタイルシートを適用する

テーブル（表を書く）

< TABLE > ・・・・・・ < /TABLE > 表の外枠の設定、表の形状を設定

< CAPTION > ・・・・・・ < /CAPTION > 表のタイトルを付け、表示

< TR > ・・・・・・ < /TR > 表のロウを設定

< TD > ・・・・・・ < /TD > 表のセルを設定

< TH > ・・・・・・ < /TH > セルをヘッダ（見出し）記述部に指定

< COL > , < COLGROUP > 表の複数列を構造ごとにまとめ、グループ化する

< TBODY > ・・・・・・ < /TBODY > 表の行をボディ部として分類する

< THEAD > ・・・・・・ < /THEAD > 表の行をヘッダ部として分類する

< TFOOT > ・・・・・・ < /TFOOT > 表の行をフッタ部として分類する

第 1 章 HTML

28

リスト（箇条書き）

< LI > 文字列を箇条書きに表示する

< UL > ・・・・・・ < /UL > < LI > で指定された項目を記しつきで表示し、

グループ化する

< OL > ・・・・・・ < /OL > < LI > で指定された項目を番号付きで表示し、

グループ化する

< DT > 定義を説明したい文字列（項目）を箇条書きさ

せる

< DD > DL タグ内でインデントさせ、 < DT > で書か

れた内容（項目）の定義を説明・表示させる

< DL > ・・・・・・ < /DL > 複数ある < DT > 、 < DT > のセットをグルー

プ化し、表示する

< MENU > ・・・・・・ < /MENU > ディレクトリ・リストを作る

画像・プラングインデータ・スクリプト言語

< IMG > イメージを本文に貼り付ける

< EMBED > プラグインデータを貼り付ける

< OBJECT > ・・・・・・ < /OBJECT > ActiveX コントロールを表示する

< APPLET > ・・・・・・ < /APPLET > JavaApplet を本文に貼り付ける

< PARAM > JavaApplet のパラメータを指定する

< SCRIPT > ・・・・・・ < /SCRIPT > スクリプト言語を使用する

< BGSOUND > BGM を流す

29

フォーム（入力フィールドの設計）

< FORM > ・・・・・・ < /FORM > 各種入力フィールドをグループ化・設定・表示

< INPUT TYPE="checkbox" > ・・・・・・

< /INPUT >

複数回答可能な選択フィールド（チェックボッ

クス）を設計

< INPUT TYPE="hidden" > ・・< /INPUT > 隠しフィールドを設計

< INPUT TYPE="image" > ・・・・・・・

< /INPUT >

クリックした座標の取得が可能なイメージの

設計・表示

< INPUT TYPE="password" > ・・・・・・

< /INPUT >

文字列を * に置き換えて表示する１行分のテ

キストフィールドを設計

< INPUT TYPE="radio" > ・・ < /INPUT >単数回答型の選択フィールド(ラジオボタン)

を設計

< INPUT TYPE="reset" > ・・・・・・・・

< /INPUT >

同一フォーム内の全ての入力フィールドに入

力された値を消去

< INPUT TYPE="text" > ・・・< /INPUT > １行分の文字列を入力するフィールドを設計

< SELECT > ・・・・・・ < /SELECT > プルダウン形式のメニューの選択欄を設計

< TEXTAREA > ・・・・ < /TEXTAREA > 複数行の文字列を入力するフィールドを設計

< OPTION > 選択フィールドの選択肢

フレーム（１ウィンドウに複数の HTML を表示）

< FRAMESET > ・・・・< /FRAMESET > 画面を分割し、各フレームをグループ化する

< FRAME > 画面を分割したうち１つのフレームに何をど

のように表示するのかを設定

< IFRAME > ・・・・・・ < /IFRAME > フローティング・フレームを設計

フレーム（１ウィンドウに複数の HTML を表示）

< NOFRAMES > ・・・・< /NOFRAME >フレーム機能がサポートされていないブラウ

ザへの対策

< NOEMBED > ・・・・・< /NOEMBED >EMBED タグがサポートされていないブラウザ

への対策

< NOSCRIPT > ・・・・・< /NOSCRIPT >Script がサポートされていないブラウザへの

対策

< !-- ・・・・・・ -- > , < COMMENT > ・・・・・・

< /COMMENT > コメントを記述するための手段

第 1 章 HTML

30

1.3 スタイルシート

ここでは HTML4.01 で推奨され、近の流れとなっていますスタイルシートについて簡単に

触れておきます。前節のとおり、本文の html にあるような従来の記述でも問題ありませんが、

できればこちらを使うことができるようになりましょう。

1.3.1 スタイルシートとは基本的な考え方スタイルシートは、Internet Explorer 3.0 以降、Netscape Navigator4.0 以降のブラウザが対

応している新しい Web のデザイン方法です。これは、レイアウトを別の場所に定義しておき、

それを構造に対して適用するという考え方に基づいています。

簡単に言うと、「文章」と「論理」を別々のところで作成する考え方です。下の図を見てくださ

い。下の図は、CSS の基本的な構造を示したものです。図にあるように、CSS は論理と文章を

別々に作ります。下の図でいうと、文字の大きさや書体などを論理で指定し、それを文章に当て

はめるという形をとっています。すなわち、HTML には文章の構造や骨組みを、スタイルシー

トには文章の細かいデザインの指定を書くということになるのです。

図 1.4 スタイルシートの概念

これにより、どういったメリットが生まれるのでしょうか。いったん定義したスタイルは、複

数の文書で共有できますから、全体のデザインに一貫性を持たせることができ、しかもメンテナ

ンスがずっと容易になります。もともと HTML は文書の構造を指定するもので、文章の表示方

法についてはブラウザやユーザ設定に依存してきました。FONT タグなど、さまざまなタグが

31

追加されて HTML の表示能力は向上してきましたが、より細かく表示方法を指定できるものが

スタイルシートなのです。（ここが重要！）

スタイルシートを活用すれば、表示を発信者側の意図に合わせるようにコントロールすること

が可能となり、また、ソースの変更を行わずに発信者の間でドキュメントスタイルを統一したり、

一つのホームページに対し様々なパターンのデザインを適用させたりすることができるのです。

HTML の流れとしては、今後は文書の論理構造については HTML のタグで、表示方法について

はスタイルシートで指定するようになるでしょう。

さて、スタイルシートを使うと既存の HTML に比べて何が向上するか、ということを以下に

まとめてみました。

フォント名、サイズ（ドット単位）を指定することができる

行の間隔を指定できる

罫線などにも色を付けることができる

一部の背景に画像を張り込むことができる

マージンを指定できる

タグごとにスタイルを設定することができる

スタイルに名前をつけて指定することができる（これをクラスといいます）。

このようにスタイルシートを使うことで、今までは指定できなかったさまざまな表現を使うこ

とができます。弱点としては、昔のブラウザではスタイルシートは効果がないことです。特に古

いバージョンの Netscape Navigator ユーザはまだ多いので、そのようなユーザでも似たような

視覚効果が得られるようなタグの工夫が必要になります。

HTML でのスタイルシートの実現方法は一つに限定されておらず、自由に選ぶことが可能です

が、一般にブラウザに実装されているのは CSS（Cascading Style Sheet）と呼ばれるものです。

これは、複数の場所で設定したスタイルを混合して利用（cascade）できるという特徴を持って

います。

1.3.2 スタイルの指定方法スタイルシートを記述する方法には、次の３つの方法があります。

１． < HEAD > 部分でスタイルを指定する方法

２． HTML のタグの中に、直接スタイルを指定する方法

３． HTML ファイル以外のファイルにスタイルを記述して、それを HTML からリンクする方

法

ここではそのうちの < HEAD > 部分でスタイルを指定する方法、について説明します。興味

第 1 章 HTML

32

のある人は、他の二つの方法について、各自で調べてください。

この方法は指定したいスタイルを、HTML ファイル内にまとめて記述する方法です。この方

法で記述するときは、 < HEAD > タグ内に、次のように記述します。

<HEAD>

<STYLE type="text/css"> ☆

</STYLE>

</HEAD>

(☆ = スタイル)

例えば、P { color:red; } をスタイルとして指定した HTML ファイルは、次のようになります。

<HTML>

<HEAD>

<STYLE type="text/css">

P{color:red;}

</STYLE>

</HEAD>

<BODY> <P>テキストの色は赤に設定しました。</P>

</BODY>

</HTML>

このように設定することで、HTML ファイル内の < p > タグすべてにスタイルが適用されます。

1.3.3 スタイルシートの書式スタイルシートには、さまざまな属性が用意されています。この属性は、HTML のタグに対

して、どのような効果を与えるかを指定するものです。

例えば、段落をあらわす < P > タグにおいて、このタグに囲まれたテキストの色を赤に指定す

るときは、次のようになります。

P{color:red;}

33

これをわかりやすく説明すると、 < P > タグのテキストの色(color)は(:)、赤(red)ということ

です。一般的には、書式をまとめると次のようになります。

セレクタ｛属性：値；｝

セレクタには、スタイルの設定対象となるタグやクラス名が入ります。そして、属性と値は：

で区切り、値の後ろは、；をつけます。

また、スタイルシートは、さまざまな属性を一度に指定できます。その場合は次のように複数

の属性を続けて記述します。

セレクタ｛属性：値；属性：値；・・・

同様に同じスタイルを複数のタグに適用することもでき、セレクタでタグを「,」で区切り、指

定します。例えば < P > タグと < H1 > タグ、 < TD > タグで同じスタイルを適用するよう

な場合は、次のように記述します。

P,H1,TD{color:red;}

1.3.4 クラスやIDの指定スタイルシートでは、特定の要素(タグ)に対してスタイルを指定できますが、特定の要素全般

への指定だけでなく、あらかじめ ID やクラス名を指定してスタイルを定義しておき、それを指

定した要素だけにスタイルを適用させることができます。

ID 属性やクラス名属性でスタイルを定義する場合は、 < HEAD > タグ内の < STYLE

type="text/css" > ～ < /STYLE > の中に次のように記述します。

#ID 名｛スタイル｝

．クラス名｛スタイル｝

実際に、ID 属性やクラス名属性でスタイルを定義した場合の HTML ファイルは次のようにな

ります。

<HTML>

第 1 章 HTML

34

<HEAD>

<TITLE></TITLE>


.point{color:blue;}

#juyou{font-weight:bold;font-size:20pt;}

</STYLE>

</HEAD>

<BODY> <P class="point">操作上のポイント</P>

<P id="juyou">ここは特に重要です！</P>

</BODY>

</HTML>

また、ID やクラス名の前に、要素名を追加すると、その要素に対してのみスタイルが有効に

なります。他の要素で、その ID やクラスを指定しても有効にはなりません。特定の要素に対し

てのみスタイルを有効にする場合には次のように指定します。

要素名#ID 名｛スタイル｝

要素名．クラス名｛スタイル｝

実際の HTML ファイルは、次のようになります。

<HTML>

<HEAD>

<TITLE></TITLE>


P.sono1{color:navy;font-size:20pt;}

</STYLE>

</HEAD>

<BODY> <P class="sono1">ここは、クラスが有効になります。</P>

<DIV class="sono1">だけどここはゆうこうにはなりません。</DIV>

</BODY>

</HTML>

35

1.3.5 スタイルシート属性一覧

色 {color:値; }

色は 16 色の名前でつけられます。実際にはモニタの解像度に依存しますが、以下の 16 色を値

として指定できます。

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple,

red, silver, teal, white, yellow

また、 # 000000 などの RGB 値での指定も可能です。

フォントの形 {font-style:値; }

文字の形を指定できます。何も指定しなければnormal、イタリック体は italic、斜体には oblique

を値と指定できます。

フォントサイズ {font-size:値; }

値の指定としては、in、cm、mm、pt、pc といった絶対単位、(参考:1in=2.54cm、1pt=1/72in、

1pc=12pt)em、ex、px、 % などの相対単位が利用できます。em とは前もって設定されている

１文字の長さを基本とするサイズ、ex とは、関連フォントの x-height の値に従うサイズ、(ちな

みにフォントの x-height とは、あらかじめ定められている基準フォントの高さです。英語なら

ば、小文字の x の高さが x-height の高さ) px とは、モニタの解像度を参考にして決まるサイズ

です。

フォントの太さ {font-weight:値; }

100、200 などの数字の他、normal(=400)、bold(=700)などが指定でます。

余白の設定 {margin:値; }

margin-top で上の余白部分を設定できます。同様に、 margin-bottom で下を、margin-left

で左を、margin-right で右を指定できます。長さの単位はフォントサイズと同じ定義です。

文字の位置 {text-align:値; }

値として、左揃えの left、右揃えの right、中心揃えの center、両端揃えの justfy を

指定できます。

インデント {text-indent:値; }}

インデントとは、１行目の頭下げのことです。この頭下げの幅を設定することができます。あ

第 1 章 HTML

36

る行ボックス内（行ボックスとは行の集合、例えば段落など）にある１行目の文字のインデント

を指定できます。長さの単位はフォントサイズと同じ定義です。

文字の装飾 {text-decoration:値; }

普通である none、下線を引く underline、上線を引く overline、取消線を引く line-through の

いずれかを指定することができます。

背景色の設定 {background-color:値; }

画面全体から一部分の背景まで、様々な背景色を設定できます。初期設定では transparent と

なっています。値としては、color の項で挙げた 16 種類の色名、RGB 値を与えることができま

す。

背景画像の設定 {background-image:値; }

背景に画像を持ってくることができます。値として、url("画像ファイル名")、もしくは none

を与えることができます。

枠線の設定 {border-style:値; }、 {border-width:値; }

border-style では枠線の形式を設定できます。線が表示されない none、普通の線となる solid、

二重線となる double、彫ったようになる groove、額縁のようになる ridge、内側がへこんでい

るように見せる inset、内側がもり上がっているように見せる outset、のいずれかを与えること

ができます。border-width では枠線の太さを指定できます。border-top-width で上の線を、

border-bottom-width で下を、border-left-width で左を、border-right-width で右をといったよ

うに線は 4 辺それぞれで指定できます。値はフォントサイズと同じ定義で指定できるほか、thick、

medium、thin という言葉でも設定できます。ブラウザによっては border-style を設定しただけ

では線が表示されないことがあるため、border-style と border-width はセットで記述するよう

にしましょう。

枠線の色 {border-color:値; }

枠線の色を設定できます。色の設定は文字色の場合と同じです。

線の設定 {border:値; }

線の style、width、color をまとめて設定できます。{border:medium outset red }などのように

記述します。style、width、color の順番はどのようにしてもよく、どれを省略してもかまいま

せん。

項目リストの設定 {list-style-type:値; }

37

UL や OL 要素といった項目リストについて、数え方を変更できます。指定できる値は、何も

表示しない none、箇条書き用の disc、circle、square、1、2、3 と数える decimal、i、ii、iii、

iv と小文字ローマ字で数える lower-roman、I、II、III、IV と大文字ローマ字で数える

upper-roman、a、b、c と小文字アルファベットで数える lower-alpha、A、B、C と大文字アル

ファベットで数える upper-alpha のいずれかとなります。

リンク文字への応用

a:link {color:red; }とすれば、まだリンク先を訪問していないリンク文字を赤くすることができ

ます。a:visited {color:blue; }とすれば、すでに訪問したリンクを青くさせることができます。

1.4 携帯向けホームページ

HTML ではなく Compact HTML(CHTML)という仕様にしたがってホームページを作成する

と、携帯電話でも閲覧可能になります。CHTML は携帯電話や PDA などの小さい画面でも表示

可能なタグに限定される HTML のサブセットのタグで構成されます。また、スタイルシートの

利用はできません。

例えば iモードについてはNTTドコモ社が iモード対応HTMLタグの一覧をまとめています。

NTT ドコモの全機種に対応させるためには、i モード対応 HTML Version1.0 という仕様で決め

られたタグのみを利用してホームページを作成することになります。また、1 画面の HTML テ

キストと画像ファイルの容量の合計が 5KB 未満を厳守するなど、サイズ上の制限もあるためこ

の点も注意が必要です。

i モード対応 HTML Version1.0 で利用できるタグ（NTT ドコモホームページより）

（コメント） <A> accesskey 属性

（ダイレクトキー機能）

<BASE> <BLOCKQUOTE> <BODY>

<BR> <CENTER> <DIR>

<DL><DT><DD> <DIV> <FORM>

<HEAD> <H> <HR>

<HTML> <IMG> <INPUT>

<LI> <MENU> <OL>

<OPTION> <P> <PLAINTEXT>

<PRE> <SELECT> <TEXTAREA>

<TITLE> <UL>

第 1 章 HTML

38

1.5 課題１－１

本章で学習したことをベースに、以下のトピックからひとつ選び、それについて紹介するホー

ムページを作成しなさい。

着物車出身高校または出身都道府県

その際に、以下の内容を必ず含めてください。（オリジナルに内容を加えてもかまいません。）

その歴史その種類・特色そのトピックに関する現象・行事などの紹介

作成するページは、以下の仕様に従ったものにしてください。

【仕様】

画像（写真・イラストなど）を 2 枚以上貼りつけること適当なリンクを２箇所以上つけること TABLE タグをつかった表を 1 つ以上作ること上記で紹介したＣＳＳの技術を少なくとも１つ用いること

【合格基準】

内容が仕様をすべて満たしていること提出期限が守られていること

【提出方法】

Eclipse から、exercise/exercise1 のフォルダの中の exercise1-1.html を編集して、Fugu で

guinness に転送してください。転送した後、作成したホームページへのリンクの含まれるアド

レス (http://guinness.is.k.u-tokyo.ac.jp/2008/g700000/index.html)を CFIVE の解答欄に記入

して提出してください

本講義では、Eclipseというソフトウェアを用いてアプリケーション開発を行っていきます。

開発環境のセットアップや提出方法などは、巻末の付録A 開発環境を参照してください。

1.6 課題１－２

課題１－１で作成したホームページから、画像やスタイルシート部分等を修正・削除し、携帯

電話で閲覧可能なホームページを作成しなさい。

【仕様】

携帯電話から閲覧できること

39

【合格基準】


【提出方法】

Eclipse から、exercise/exercise1 のフォルダの中の exercise1-2.html を編集して、Fugu で

guinness に転送してください。転送した後、作成したホームページへのリンクの含まれるアド

レス(http://guinness.is.k.u-tokyo.ac.jp/2008/g700000/index.html)を CFIVE の解答欄に記入し

て提出してください

第 1 章 HTML

40

41

第2章 Servlet

2.1 サーブレットとは

一言で言うと、サーブレットとは「サーバ上で動作する java プログラム」です。かつて Java

言語が Web の世界に本格的に登場した 1997 年あたりには、Internet Explorer や Netscape

Navigator などのブラウザ上で動作するアプレットが HTML のシンプルなページを飾り立てて

いましたが、サーブレットはそうしたビジュアルな表現を実現するものではありません。サーバ

サイドで動作し（必要に応じてデータベースやテキストファイルを検索、更新し）、その処理結

果を（一般的には）HTML として返すことがサーブレットの役割となります。サーブレットは

プログラミングモジュール、コンポーネントといった呼び方があるように、単体で動作するもの

ではありません。サーブレットを動かすことのできる実行環境上で動作します。

図 2.1 サーブレットの仕組み

2.2 サーブレットの特徴

プラットフォームを選ばない

第 2 章 Servlet

42

サーブレットは java の write once, run anywhere の精神を引き継いでおり、原則サーブ

レット対応の実行エンジン（コンテナと呼ぶ）さえあれば、Windows、UNIX、MacOS な

ど OS の種類を問わず動作することが可能となります。

ユーザ数の増加に強い

サーブレットコンテナが常駐しており、サーブレットが動作するのはあくまでコンテナ内

部となり、新たな実行プロセスが起動するということはありません。よって、リソースの消

費が少なく、結果的にユーザ数の増減にも比較的強い耐性を持ちます。

処理が早い

サーブレット、というより java はコンパイル言語ですので、あらかじめプログラムをコン

パイルして用意しておくことになり処理効率は圧倒的によいといえます。また、サーブレッ

トでは一度呼び出されたプログラムはメモリ上に常駐しますので、二度目以降の要求ではプ

ログラムの呼び出し自体にかかるオーバーヘッドもありません。

CGIとの共通点、相違点

共通点

webサーバと連携して動作し、HTTPに依存した入出力を行うという点でCGIと同じです。

クライアントであるブラウザとのやりとりも HTTP によるリクエスト/レスポンスが基本と

なっています。ブラウザから見た場合、表示される HTML フォーム、フォームに書き込み

サーバに送信した後表示される HTML のページも同様です。HTTP というプロトコルを送

受信する相手という点では、CGI とサーブレットは同じであると言えます。CGI で一般的

に利用される HTTPCookie も、CGI 同様、HTTP のヘッダを利用してブラウザとやりとり

を行います。

相違点

特徴の箇所でも触れたのですが、CGI がリクエストのたびにプロセスを生成してプログラ

ムを実行するのに対して、サーブレットは常駐するサーブレットコンテナに必要なモジュー

ルを持ってきてコンテナ上で実行します。

CGIはもちろん javaで記述することも可能ですが、たとえ java言語で書かれていてもCGI

であることに変わりありません。javax.servlet.Servlet インタフェースを何らかの方法で実

装し、サーブレットコンテナにロードされて動作するものがサーブレットです。

43

図 2.2 サーブレットとＣＧＩ

2.3 サーブレットのプログラム例

2.3.1 Hello, World! 本章ではサーブレットの実例を示します。サンプルプログラムはすべて演習の環境においてあ

ります。

以下のサーブレットプログラムは「Hello World!!」とウェブブラウザに表示します。

HelloWorld.java

1 package jp.ac.u_tokyo.k.is.chapter2;

2

3 import java.io.*;

4 import javax.servlet.*;

5 import javax.servlet.http.*;

6

7 public class HelloWorld extends HttpServlet {

8 public void doGet(HttpServletRequest request,

9 HttpServletResponse response)

第 2 章 Servlet

44

10 throws ServletException, IOException {

11

12 response.setContentType("text/html; charset=UTF-8");

13 PrintWriter out = response.getWriter();

14 out.println("<html><head>");

15 out.println("<title>Hello World!!</title>");

16 out.println("</head><body>");

17 out.println("<p>Hello World!!</p>");

18 out.println("</body></html>");

19 }

20 }

まず 1 行目で package 命令を記述します。


package 命令は、サーブレットクラスを再利用の単位にグルーピングしたい場合などに用いま

す。一定規模以上のアプリケーションでは、クラス名の衝突を防ぐために、このパッケージとい

う概念を用います。

3～5 行目で、import 命令としてパッケージをインポートしています。

3 import java.io.*;



サーブレットクラスには 3 つのパッケージが必要であり、import 命令としてコードの先頭に記

述する必要があります。

必ずインポートしておかなければならないパッケージは、

java.io パッケージ

javax.servlet パッケージ

javax.http.servlet パッケージ

45

の３つです。

もちろん、そのほかに必要なパッケージ（クラス）が存在する場合には、適宜、import 命令を

併記します。また複数のパッケージについては複数の import 命令でインポートします。

7行目ではHttpServletを継承してHelloWorld クラスを宣言しています。HttpServletはHTTP

関連の処理をするときに使うクラスです。

7 public class HelloWorld extends HttpServlet {

javax.http.servlet.HttpServlet クラスは、サーブレットクラスの基本的な機能（クライアント

からの要求受信・応答送信・処理振り分けなど）を備えたクラスです。サーブレットクラスを定

義する際には、必ずこの HttpServlet クラスを継承する必要があります。

HttpServlet が汎用的なクライアント－サーバ間の通信機能を提供し、ユーザはこの

HttpServlet クラスの機能を利用しながら、独自のロジックを組み込んでいくことになります。

8～10 行目では GET メソッドでのリクエストに対して動作する doGet というメソッドが出て

きています。

8 public void doGet(HttpServletRequest request,

9 HttpServletResponse response)

10 throws ServletException, IOException {

GET メソッドに対して動作する記述を行う場合には 8～10 行目と全く同じようにすれば結構

です。POST メソッドに対して動作させたい場合は doGet の部分を doPost に変更するだけで

構いません。HttpServlet クラスには 7 種類の doXxxxx メソッドが用意されていますが、一般

的によく使用するのは doGet と doPost メソッドの 2 つです。

(1) doGet メソッド

ブラウザから直接に URL 指定で呼び出された場合

ページ内のリンク（<a>タグ）や<img>、<frame>タグなどを介して呼び出された場合

HTML フォーム（<form>タグ）から GET メソッドでページが要求された場合（method

オプションはデフォルトで“GET”と見なされます）

(2) doPost メソッド

HTML フォーム（＜form＞タグ）から POST メソッドでページが要求された場合

第 2 章 Servlet

46

HttpServletRequest で相手側からの要求を扱い、HttpServletResponse でこちらからの出力

を扱います。この２つを引数とすることによって要求とそれに対する出力をブロック内で扱える

ようになります。

また、throws ServletException, IOException は例外処理に関する記述です。

12～13 行目では、サーブレットから出力する準備をしています。

12 response.setContentType("text/html; charset=UTF-8");


response.setContentType("text/html") は HttpServletResponse の setContentType メソッド

を使って出力が HTML データであることを指定しています。

PrintWriter out = response.getWriter()はHttpServletResponseクラスの getWriterメソッド

を使い、PrintWriter オブジェクトを取得しています。

また 14～18 行目では、out.println()で HTML を出力します。


15 out.println("<title>Hello World!!</title>");

16 out.println("</head><body>");

17 out.println("<p>Hello World!!</p>");


今後、この HelloWorld サーブレットを参考に編集することで独自のサーブレットプログラム

を開発が可能です。ただし、新しいサーブレットクラスの利用には付録を参考に設定ファイルへ

の登録を行う必要があります。

アプリケーションの実行

ウェブブラウザから以下の２つのアドレスにアクセスすることで、サーバ上に転送したサーブ

レットのアプリケーションの起動や再起動が可能です。

（起動）http://guinness.is.k.u-tokyo.ac.jp:8080/manager/start?path=/2008/g70000

（再起動）http://guinness.is.k.u-tokyo.ac.jp:8080/manager/reload?path=/2008/g70000

user: student

pass: !webapp 起動したサーブレットアプリケーションには下のアドレスでアクセスできますので、ユーザ名を

自分のものに読み替えてブラウザからアクセスします。

47

http://guinness.is.k.u-tokyo.ac.jp/2008/g000000/servlet/HelloWorld

2.3.2 フォームによる入出力

ユーザからの名前やパスワードなどのデータを送るには、HTML でできたウェブページから

GET や POST という仕組みを使います。

以下の例は、nameform.html というウェブページを使ってユーザに名前を入力・送信させ、

サーバ側の Nameform というサーブレットで受信して表示するものです。ウェブページは

WEB-INF/src/jp.ac.u_tokyo.k.is.chapter2 に、サーブレットは chapter/chapter2 においてあり

ます。

nameform.html

1 <html>

2 <head> 3 <title>フォームからの入力</title>

4 <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS">

5 </head>

6 <body> 7 あなたの名前を入力してください

8 <hr>

9 <form method="post" action="servlet/Nameform">

10 <input type="text" name="name"> 11 <input type="submit" value="送信">

12 </form>

13 </body>

14 </html>

Nameform.java


2

3 import java.io.*;



第 2 章 Servlet

48

6

7 public class Nameform extends HttpServlet

8 {

9 public void doPost (HttpServletRequest request,

10 HttpServletResponse response) throws ServletException, IOException

11 {

12

13 response.setContentType("text/html;charset=Shift_JIS");


15 16 // 文字化けを防ぐための処理

17 request.setCharacterEncoding("Shift_JIS");

18 String name = request.getParameter("name");

19

20 out.println("<html><head>"); 21 out.println("<title>フォーム入力</title>");

22 out.println("</head>");

23 out.println(name);


25 }

26 }

16 行目の String name = request.getParameter("name");では、「name」に対応する value を

取り出しています。nameform.html 内の<input type="text" name="name">の"name"に対応さ

せます。この際、サーバが受け取る日本語のデータの文字化けを防ぐため 17 行目でエンコード

を指定しています。

2.3.3 前回アクセス時刻表示

以下に Cookie という仕組みを使って、前回アクセスした時刻を表示するサーブレットプログ

ラムの例を示します。Cookie は、サーバからウェブブラウザに情報を送って保存させる機能で

す。ここではサーバにアクセスしたときに、その時刻をウェブブラウザに送り返し、次にアクセ

スしたときにはその情報を再びサーバに送って表示しています。

49

testCookie.html

1 <html>

2 <head>

3 <meta http-equiv="Content-Type" content="text/html;

charset=Shift_JIS">

4 <title>ログイン</title>

5 </head>

6 <body>

7 <form method="post" action="../../servlet/testCookie">

8 名前: <input type="input" name="username" size="20">

9 <input type="submit"value="login"/> <br>

10 </form>

11 </body>

12 </html>

testCookie.java


2

3 import java.io.*;



6 import java.util.Calendar;

7

8 public class testCookie extends HttpServlet{

9 public void doGet (HttpServletRequest request,

10 HttpServletResponse response) throws ServletException, IOException{

11 response.setContentType("text/html;charset=Shift-JIS");


13

14 String cookiename = "lastaccess";//セットするCookieの名前

15 String lastAccessTime = "はじめてのアクセス";

16

17 //クッキー一覧を取り出して必要とするクッキーがあるか

第 2 章 Servlet

50

18 Cookie cookies[] = null;

19 if ((cookies = request.getCookies()) != null) {

20 for (int i=0; i<cookies.length; i++) {

21 if (cookies[i].getName().equals(cookiename)) {

22 try {

23 lastAccessTime = (String)(cookies[i].getValue());

24 } catch (Exception e) {

25 lastAccessTime = "エラー";

26 }

27 }

28 }

29 }

30 //クッキーを再セット

31 String now = Calendar.getInstance().getTime().toString();

//現在時刻

32 Cookie cookie = new Cookie(cookiename, now);

33 response.addCookie(cookie);

34

35 //ＨＴＭＬを表示


37 out.println("<title>testCookie</title>");

38 out.println("</head>");

39 out.println("前回アクセス：" + lastAccessTime);


41 }

42 protected void doPost(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

43 doGet(request, response);

44 }

45 }

それでは、特徴的な部分についてみていくことにします。

まず、以下の部分ではクッキーを読み込んでいます。

17 //クッキー一覧を取り出して必要とするクッキーがあるか

18 Cookie cookies[] = null;

51

19 if ((cookies = request.getCookies()) != null) {

20 for (int i=0; i<cookies.length; i++) {

21 if (cookies[i].getName().equals(cookiename)) {

22 try {

23 lastAccessTime = (String)(cookies[i].getValue());


25 lastAccessTime = "はじめてのアクセス";

26 }

27 }

28 }

29 }

まず、Cookie オブジェクトの配列として cookies を宣言します。request.getCookies()により

ブラウザからサーバにページを要求する際、自動的に送信されるクッキー情報を取得します。

getCookies()メソッドはブラウザから送られてきたすべてのクッキーの配列を返し、もしクッキ

ーが無ければ null を返します。(cookies = request.getCookies()) != null というのは、cookies

が空ではない、つまりクッキーが存在した場合をあらわします。

また、20 行目の cookies.length で配列の長さを取得し、配列の回数だけクッキーをチェック

します。getCookies()メソッド自体は HttpServletRequest オブジェクトのメソッドです。

また、21 行目の cookies[i].getName().equals(cookiename)は取得したクッキー情報のクッキー

名が目的のクッキーlastaccess であるかどうかを判断します。

31～33 行目では、クッキーを作成し、新しい時刻を代入しています。

31 String now = Calendar.getInstance().getTime().toString();

//現在時刻

32 Cookie cookie = new Cookie(cookiename, now);

33 response.addCookie(cookie);

30 行目では、現在の時刻を取得して文字列 now に代入しています。その後、32 行目で新た

な Cookieオブジェクトを生成しています。名前と値を引数にクッキーオブジェクトを作成して、

作成したオブジェクトを引数にして addCookie メソッドを実行します。

ここでは、cookiename という名前と lastaccess という値をセットしています。また 33 行目

の addCookie メソッドを使用することで、ブラウザに記録されます。

第 2 章 Servlet

52

http

2.4 課題 2

ログインフォームのある HTML ファイル（exercise2.html）からサーブレットを読み出し、ロ

グイン後の画面でユーザ名と前回のアクセス時刻を表示する Exercise3 というサーブレットを

作成しなさい。

【仕様】

ログイン後の画面でユーザ名および前回のアクセス時刻を表示すること

同じブラウザからの前回のアクセス時刻の表示でよいものとする。（ユーザ名を変更した場

合に、ユーザごとのアクセス時刻を分ける必要はないものとする。）

【合格基準】

内容が仕様をすべて満たしていること

提出期限が守られていること

【提出方法】

Eclipse で、WEB-INF/src/jp/ac/u_tokyo/k/is/exercise2 のフォルダの中の Exercise2.java を

編集して、課題のプログラムを開発します。

プログラムが完成したら、開発したプログラムを呼び出すホームページのリンクをＣＦＩＶＥ

の課題２に提出してください。

http://guinness.is.k.u-tokyo.ac.jp/2008/ g00000/exercise/exercise2/exercise2.html

2.5 参考webサイト

WebLogic HTTP サーブレットプログラマーズガイド

://edocs.beasys.co.jp/e-docs/wls/docs81/servlet/index.html 基礎から学ぶサーブレット／JSP

http://www.atmarkit.co.jp/fjava/rensai2/jspservlet01/jspsevlet01_1.html

itb-TECH Server side Java/Servlet

http://itbtech.itboost.co.jp/jserv/jserv_00.php サーブレット-TECHSCORE-

http://www.techscore.com/tech/J2EE/Servlet/index.html

53

第3章 XMLとRSS 本章では XML と RSS について説明します。RSS は XML で記述されていますので、まず XML

の基本について触れ、その後 RSS の詳細について述べます。

3.1 XMLとは

XML（eXtensible Markup Language）はマークアップ言語の 1 つです。マークアップ言語は、

「 < > 」で囲まれたタグを使用してデータを表現します。Web ページを作成する HTML もマ

ークアップ言語の一つです。HTML は Web ブラウザ上で文字を強調したり、段落をつけたりす

るタグが取り決められています。しかし、XML はデータを作成する人がタグを自由に取り決め

ることができます。このため、XML は Web ページ以外の分野でも利用できるデータ形式とな

っています。

3.1.1 XMLの特徴 XML の主な特徴として以下の４つがあります。

計算機上で扱いやすい

XML は簡潔で、なおかつ厳密な文法を持っているためコンピュータ上で扱いやすいという特

徴を持っています。そのため、商品データからさまざまな文書を自動的に作成したり、インター

ネットを介して商品データを交換するシステムを構築したりする事ができます。

テキスト形式である

XML はテキスト形式のファイルで扱われ、マルチプラットフォームでのデータ交換が可能で

す。テキストファイルはほとんどすべてのプラットフォームでサポートされており、テキストエ

ディタなどで人間が理解することもできます。また、文字コードや言語の異なるプラットフォー

ムへの対応は、Unicode の採用と XML ファイルに直接文字コードや言語を指定することにより

解決できます。

タグで記述される

XML は HTML のようにタグで記述されます。HTML は <A> タグや <BR> タグのように使

用できるタグは決まっています。これに対し、XML は、自由にタグの名前をつけることができ

ます。つまり、文書の構造を任意に定義することができます。また、わかりやすい名前のタグを

使用することにより、人間にもコンピュータにも理解しやすいデータが作成できます。

第 3 章 XML と RSS

54

ツリー構造である

XML 文書は必ずツリー構造になっています。ツリー構造とは、一つの頂点からスタートして

枝分かれを繰り返す、木（ツリー）のようなデータ構造のことです。XML 文書では頂点にルー

トタグと呼ばれるタグが存在し、その下にタグが枝分かれしながら存在します。この枝分かれは、

XML 文書の入れ子構造と対応しています。

図 3.1 XML のツリー構造

3.1.2 XML文書の構成 XML 文書は主に 3 つの部分で構成されます。

XML 宣言

DTD(Document Type Definition) XML インスタンス

これらの３つの構成要素は上からこの順番で記述しなければなりません。なお、DTD は省略可

能です。XML ではタグを自由に定義できますが、同名のタグがあちこちで定義されてしまう恐

れがあります。このような場合には名前空間という概念によりタグを識別します。例えば”

http://purl.org/dc/elements/1.1/”と”http://purl.org/rss/1.0/”という２つの場所で別々に定義

されている title というタグを同一の XML ファイル中で使用するには、XML インスタンスが開

始する部分で名前空間接頭辞を定義しておき、接頭辞を用いたタグ名を使用することで識別する

ことできます。

55

名前空間接頭辞の定義例

xmlns:dc=”http://purl.org/dc/elements/1.1/”

xmlns:rss= “http://purl.org/rss/1.0/"

タグの例

<dc:title>

<rss:title>

3.1.3 XMLの基本文法

XML宣言部

続く文書が xml であることを宣言し、文字コードを指定します。

<?xml version="1.0" encoding="UTF-8" ?>

DTD DTD を一言で説明すると、その後に記述する XML インスタンスのテンプレートであると言え

ます。XML 要素をマークアップする際の規則の記述はこの DTD の中で行います。DTD は文書

中に記述することも、外部ファイルに記述したものを指定して利用することもできます。DTD

が定められていて、その DTD に準拠している XML 文書は valid な(妥当な)XML 文書と呼ばれ

ます。XML は「すべての開始タグと終了タグが対になっている」「ルートとなるタグが他のタ

グの入れ子になっていない」「入れ子になっているタグの終了タグが親タグの終了タグより後に

来ない」といった条件を満たす必要があるのですが、DTD を指定していない場合にこれらの条

件を満たした XML 文書は well-formed な（整形式な）XML 文書と呼ばれます。すべての XML

文書は well-formed であり、その中でも DTD に準拠したものが valid な XML 文書となります。

<!DOCTYPE 成績 [

<!ELEMENT 科目 (#PCDATA)>

..

XML要素の記述

開始タグと終了タグで囲まれた部分が要素となります。

<要素> 内容 </要素>

内容を持たない場合は <要素> </要素> は <要素/> と記述することもできます。


56

コメントの記述

HTML と同様、 "<!- -->" の中に囲まれた部分がコメントになります。

<!- この部分がコメントになります。 -->

3.2 JavaでのXMLの入出力この授業では RSS リーダをサーブレットで実装してもらいますが、RSS フィードは XML 形

式で記述されているため、課題にあたって XML 文書を Java プログラムで読み書きする必要が

出てきます。そこで、この項では Java による XML の入出力のやり方について説明します。サ

ンプルコードにはこれまで扱っていない難解な部分もありますが、定型的な操作でもありますの

で、「おまじない」のようなものだと考えてください。XML リーダ/ライタのひな形として活用

してもらえれば十分です。

以下の例は成績を記録した grade.xml という XML ファイルを読み込み、出力するプログラム

です。Grade.xml は WEB-INF/src/jp/ac/u_tokyo/k/is/chapter3/grade.xml に用意されています。

grade.xml

1 <?xml version="1.0" encoding="Shift_JIS"?>

2 <grade-table>

3 <subject> 4 <name>ダイナミックシステム</name>

5 <grade>優</grade>

6 </subject>

7 <subject> 8 <name>ビジネス概論</name>

9 <grade>良</grade>

10 </subject>

11 <subject> 12 <name>構造力学</name>

13 <grade>可</grade>

14 </subject>

15 </grade-table>

57

GradeXMLReader.java

1 package jp.ac.u_tokyo.k.is.chapter3; 2 // 外部クラスの読み込み

3 import java.io.*;

4 import javax.xml.parsers.*;

5 import org.w3c.dom.*;

6

7 public class GradeXMLReader {

8 public static void main(String[] args) { 9 //XML ファイル名

10 String fileName = "WEB-INF/src/jp/ac/u_tokyo/k/is/chapter4/grade.xml";

11 12 //Document 型変数の宣言

13 Document xmlDocument = null;

14

15 /* 16 * XML ファイルの読み込み

17 */

18 try {

19 DocumentBuilder builder = DocumentBuilderFactory.newInstance()

20 .newDocumentBuilder();

21 xmlDocument = builder.parse(new FileInputStream(fileName));


23 e.printStackTrace();

24 }

25 26 //subject タグ属性をもつノードリストの取得

27 NodeList subjects = xmlDocument.getElementsByTagName("subject");

28 29 //科目ごとのループ

30 for (int i = 0; i < subjects.getLength(); i++) {

31 NodeList tags = subjects.item(i).getChildNodes();

32 String subjectName = null;


58

33 String grade = null;

34 35 //タグ要素ごとのループ(name と grade)

36 for (int j = 0; j < tags.getLength(); j++) {

37 Node tag = tags.item(j);

38 if (tag.hasChildNodes()) {

39 String tagName = tag.getNodeName();

40 String value = tag.getFirstChild().getNodeValue();

41 42 //name タグだったら科目名を代入

43 if (tagName.equals("name")) {

44 subjectName = value; 45 //grade タグだったら成績を代入

46 } else if (tagName.equals("grade")) {

47 grade = value;

48 }

49 }

50 } 51 System.out.println(subjectName + "は" + grade + "です");

52 }

53 }

54}

理解できそうにない文字列が並んでいるように見えますが、31 行目までは「このように書くも

のだ」という程度にとどめておいてかまいません。10 行目で XML のファイル名(grade.xml)を

指定し、27 行目で指定するタグ名(subject)を持つノードのリストを取得しているということが

わかれば十分です。

まず、このXMLデータのツリー構造を図 3.2に示します。これでノードの親子関係を確認しな

がらコードを追ってみてください。

59

図 3.2 grade.xml のツリー構造

ここでは、新しい 3 つの型の使い方を押さえてください。Node 型、NodeList 型、Document

型です。これらの型には独自のメソッドが用意されており、それらの変数について、

[変数名].[メソッド名()]

とすることで、その変数に関する様々な操作をすることができます。ちょうど配列の長さを取得

する際に、

[識別子].length

としたのと似ていますが、前者はメソッドなので()が必要で、場合によってはこの()の中に引数

を入れます。

Node型は、XML上の一つのノードを表します。(表 3.1)

NodeList型は、複数のNode型変数のリスト(配列のようなもの)を表します。(表 3.2)


60

子ノードがあればtrue, なければfalseを返すhasChildNodes()boolean

テキストノードの内容を返すgetNodeValue()String

ノード名(タグ名)を返すgetNodeName()String

0番目の子ノードを返すgetFirstChild()Node

全ての子ノードのリストを返すgetChildNodes()NodeList

子ノードを追加するappendChild(Node newChild)void

処理メソッド名戻り値の型

後にDocument型です。(表 3.3) Document型の変数は一つのXMLドキュメントを示します。

さらに詳しく言うと、XMLデータツリーのルートノード(grade-tableノード)のさらに親のノー

ドにあたります。ですからDocument型はNode型の一種で、Document型の変数はNode型に付

随するメソッドをほぼ同じように使うことができます。Document型の操作は次の例題 4.2 でよ

く使うのでList 4.3 のサンプルも参照してください。

表 3.1: Node クラスのメソッド

子ノードがあればtrue, なければfalseを返すhasChildNodes()boolean

テキストノードの内容を返すgetNodeValue()String

ノード名(タグ名)を返すgetNodeName()String

0番目の子ノードを返すgetFirstChild()Node

全ての子ノードのリストを返すgetChildNodes()NodeList

子ノードを追加するappendChild(Node newChild)void


表 3.2: NodeList クラスのメソッド

リストの要素数getLength()int

リストの index 番目の要素ノードitem(int index)Node


リストの要素数getLength()int

リストの index 番目の要素ノードitem(int index)Node


表 3.3: Document クラスのメソッド

子ノードがあればtruehasChildNodes()ean

テキストノードの内容getnodeValue()g

ノード名(タグ名)getNodeName()g

0番目の子ノードgetFirstNode()

全ての子ノードのリストgetChildNodes()List

子ノードを追加するappendChild(Node newChild)d

指定したタグ名を持つ子ノードのリストgetElementsByTagName(String tagname)List

bool

Strin

Strin

Node

Node

voi

Node

指定した文字列を持つ新しいテキストノードcreateTextNode(String data)Node(Text)

指定したタグ名を持つ新しいタグノードcreateElement(String tagname)Node(Element)


子ノードがあればtruehasChildNodes()ean

テキストノードの内容getnodeValue()g

ノード名(タグ名)getNodeName()g

0番目の子ノードgetFirstNode()

全ての子ノードのリストgetChildNodes()List

子ノードを追加するappendChild(Node newChild)d

指定したタグ名を持つ子ノードのリストgetElementsByTagName(String tagname)List

bool

Strin

Strin

Node

Node

voi

Node

指定した文字列を持つ新しいテキストノードcreateTextNode(String data)Node(Text)

指定したタグ名を持つ新しいタグノードcreateElement(String tagname)Node(Element)


61

以下の例は grade.xml の科目の追加と削除を行うプログラム GradeXMLWriter です。

GradeXMLReader.java

1 package jp.ac.u_tokyo.k.is.chapter4; 2 // 外部クラスの読み込み

3 import java.io.*;

4 import javax.xml.parsers.*;

5 import javax.xml.transform.*;

6 import javax.xml.transform.dom.*;

7 import javax.xml.transform.stream.*;

8 import org.w3c.dom.*;

9

10 public class GradeXMLWriter {

11 public static void main(String[] args) { 12 //読み込み XML ファイル名

13 String inputFile = "WEB-INF/src/jp/ac/u_tokyo/k/is/chapter4/grade.xml";

14 15 //Document 型変数の宣言

16 Document xmlDocument = null;

17

18 /* 19 * XML ファイルの読み込み

20 */

21 try {

22 DocumentBuilder builder = DocumentBuilderFactory.newInstance()

23 .newDocumentBuilder();

24 xmlDocument = builder.parse(new FileInputStream(inputFile));



27 }

28

29 /* 30 * 新しい科目の追加


62

31 */ 32 //[1] 科目名サブツリーの作成

33 Node newNameTag = xmlDocument.createElement("name"); 34 Node newNameText = xmlDocument.createTextNode("社会システム工学");

35 newNameTag.appendChild(newNameText);

36 37 //[2] 成績サブツリーの作成

38 Node newGradeTag = xmlDocument.createElement("grade"); 39 Node newGradeText = xmlDocument.createTextNode("未受験");

40 newGradeTag.appendChild(newGradeText);

41 42 //[3] 新しい科目サブツリーの作成

43 Node newSubject = xmlDocument.createElement("subject");

44 newSubject.appendChild(newNameTag);

45 newSubject.appendChild(newGradeTag);

46 47 //[4] grade-table ノードに新しい科目サブツリーを追加

48 Node gradeTable = xmlDocument.getFirstChild();

49 gradeTable.appendChild(newSubject);

50

51 /* 52 * [5] 既存科目の削除

53 */

54 Node subjectToRemove = null;

55 NodeList subjectList = gradeTable.getChildNodes();

56 for (int i = 0; i < subjectList.getLength(); i++) {

57 Node subject = subjectList.item(i);

58 NodeList tagList = subject.getChildNodes();

59 for (int j = 0; j < tagList.getLength(); j++) {

60 Node tag = tagList.item(j);

61 String tagName = tag.getNodeName();

62 if (tagName.matches("name")) {

63 Node textNode = tag.getFirstChild();

64 String subjectName = textNode.getNodeValue(); 65 if (subjectName.matches("構造力学")) {

66 subjectToRemove = subject;

63

67 }

68 }

69 }

70 }

71 gradeTable.removeChild(subjectToRemove);

72 73 //書き込み XML ファイル名

74 String outputFile = "WEB-INF/src/jp/ac/u_tokyo/k/is/chapter4/newGrade.xml";

75

76 /* 77 * XML ファイルへの書き出し

78 */

79 try {

80 Transformer transformer = TransformerFactory.newInstance()

81 .newTransformer();

82 DOMSource source = new DOMSource(xmlDocument);

83 StreamResult result = new StreamResult(new FileOutputStream(

84 new File(outputFile)));

85 transformer.transform(source, result);



88 }

89 }

90 }

26 行目までの、XMLファイルの読み込みの部分は前の例と同じです。新しい科目を追加してい

る 33 行目から見ていきましょう。まず、このプロセスで行われていることを図 3.3に示します。


64

図 3.3 XML ツリーの操作

33～35 行目では、科目名サブツリーについて、タグノード(newNameTag)とテキストノード

(newNameText)を新しく生成し、newNameText を newNameTag の子に登録しています。

32 //[1] 科目名サブツリーの生成

33 Node newNameTag = xmlDocument.createElement("name"); 34 Node newNameText = xmlDocument.createTextNode("社会システム工学");

35 newNameTag.appendChild(newNameText);

37～40 行目では、成績サブツリーについて、同様のことをしています。

37 //[2] 成績サブツリーの生成

38 Node newGradeTag = xmlDocument.createElement("grade"); 39 Node newGradeText = xmlDocument.createTextNode("未受験");

40 newGradeTag.appendChild(newGradeText);

43～45 行目では、新しい科目ノード (newSubject)を生成し、その子として、作成した

newNameTag と newGradeTag を追加しています。

65

42 //[3] 新しい科目サブツリーの作成

43 Node newSubject = xmlDocument.createElement("subject");

44 newSubject.appendChild(newNameTag);

45 newSubject.appendChild(newGradeTag);

48、49 行目では、この XML データ構造のルートノード(gradeTable)の子に、newSubject を追

加しています。

47 //[4] grade-table ノードに新しい科目サブツリーを追加

48 Node gradeTable = xmlDocument.getFirstChild();

49 gradeTable.appendChild(newSubject);

続いてツリーから一つの科目を削除する部分を見てみましょう。removeChild()メソッドを使う

と、そのノードの子ノードのうち、引数と同じものが削除されます。71 行目では、ルートノー

ドから「構造力学」の科目を削除しています。

71 gradeTable.removeChild(subjectToRemove);

このsubjectToRemoveというノードを取得するためにやっているのが 54～69 行目です。かなり

ややこしいですが、図 3.3やメソッドの機能を確認しながら流れを追ってください。

79～87 行目は、修正した xmlDocument が示すツリー構造を、XML ファイルに書き出すプロセ

スです。ここは意味を理解する必要はありません。outputFile に代入するファイル名を変える

ことで流用できます。

3.3 RSSとは

RSS とは、ドキュメントの見出し、要約、トピックなどのリストを共通の書式で提供するた

めの取り決めです。RSS を用いることでサイトの更新情報などを効率的に公開、配信すること

ができます。本章では、RSS および RSS を理解するために必要な関連技術について述べます。


66

3.4 RSSの種類

現在、RSS には互換性のない複数のバージョンが存在し、大きく分けると０．９ｘと１．０、

２．０の３つに分類できます。正式名称もそれぞれ異なり、０．９ｘでは Rich Site Summary、

１．０では RDF Site Summary、２．０では Really Simple Syndication です。日本では比較

的 RSS 1.0 が普及しています。RSS 1.0 には、後述の RDF に基づいている、よく使われる語彙

を使われる要素群を「コア」として定義しそれ以外は拡張する側が独自の語彙を「モジュール」

として定義可能である、などの特徴があります。ここでは RSS は RSS 1.0 を指すものとして説

明します。

3.5 メタデータとRDF

RSS についての詳しい説明の前に、メタデータと RDF について説明します。メタデータとは

データそのものではなく、データについて記述したデータのことを指します。具体的には、ある

ホームページ、http://www.example.com/index.html があり、そのホームページの作者がＡさん

である場合、http://www.example.com/index.html というデータに対して「作者＝Ａさん」とい

う情報がメタデータとなります。データにメタデータを付加することで、検索精度の向上や計算

機による高度なデータ処理が実現できるようになります。例えば、数多くのウェブページを扱う

際に、それらのすべてに作者が誰かという情報がメタデータとして付加されていれば、特定の作

者のウェブページのみを確実に取り出すことが可能です。

続いてRDFについて説明します。RDFの正式名称はResource Description Frameworkであり、

メタデータを記述するためのフォーマットの一つです。RDFは、特定のアプリケーションや知

識領域を前提とせずに、相互運用可能な形で「リソースを記述する」ための標準的なメカニズム

（枠組み）を提供する試みです。RDFは、リソースの関係を主語、述語、目的語という 3 つの

要素（トリプル）で表現します。トリプルの集合はRDFのグラフと呼ばれます。トリプルは「主

語・目的語間の関係のステートメント（文）」を表すとされています。

http://www.nakl.t.u-tokyo.ac.jp/~hiekata/の作者は”Kazuo Hiekata”であるということをRDF

グラフとXMLで記述すると以下の図 3.4のようになります。計算機が言葉の意味を理解するた

めには標準的な語彙が必要となりますが、dcという接頭辞はウェブや文書の作者、タイトル、作

成日といった書誌情報を記述するための語彙として定義されたDublin Coreの名前空間から取

ってくるということを意味しています。

67

図 3.4 RDF グラフ

<?xml version="1.0" encoding="utf-8" ?>

<rdf:RDF …>

<rdf:Description rdf:about="http://www.nakl.t.u-tokyo.ac.jp/~hiekata">

<dc:creator>Kazuo Hiekata</dc:creator>

</rdf:Description>

</rdf:RDF>

3.6 RSSの仕様

多少乱暴な表現ですが、RDF の枠組みを利用して、標準的な語彙を用いてウェブサイトの説明

を行う仕様が RSS です。言い換えると、RSS で定義された語彙を RDF というメタデータ記述

方式（文法）を使って記述したものが RSS メタデータとなります。以下にシンプルな RSS で使

われる語彙を以下に示します。

Channel 要素 RSS はチャンネル情報を記述するために開発されたため、基本情報は channel 要素の中に

記述します。channel 要素内に、例えば title、link、description、items などが入ります。

title 属性チャンネルのタイトルを記述します。

link 属性 RSS でサマリ対象とするサイトの URI。ホームページや新着ページの URI を記述するの

が一般的です。

description 属性チャンネル（サマリ対象）の内容、機能、ソースなどの概要説明。image チャンネルのロ

ゴなどがある場合に記述。イメージの URI を rdf:resource 属性で示し、さらに具体的内容を

rdf:RDF 直下の image 要素に記述するオプション

items 属性 channel に続く item 要素で記述するリソースの目次に相当。リソースの URI を rdf:li 要


68

素の rdf:resource 属性で示し、これらを item 要素と対応させます。

items 要素は RDF のリストとなるので、rdf:Seq、rdf:li といったタグを用いて RDF のコンテ

ナモデルとして表現することに注意してください。この目次に示したリソースについて、次の

item 要素で見出しや要約を記述していきます。

item 要素 channel の items 要素で目次として示したリソース（記事、文書など）それぞれについて、

item 要素で具体的に内容を説明します。それぞれがリソースを記述するので、rdf:about

属性で対象 URI（主語）を示します。この URI は、対応する目次項目（rdf:li 要素）の

rdf:resource 属性値（URI）と一致させなければなりません。

item 要素内では次の要素を用いてリソースを記述します。これらは、各リソースの「プロパテ

ィ」という訳です。

title リソースのタイトル（ニュースヘッドラインなら見出し）。

link リソースの URI。基本的には rdf:about 属性の値と同じ

description リソースの要約、概要説明など。

これらの語彙を用いてRSSを記述すると、全体の構造は以下の図 3.5のようになります。

69

図 3.5 RSS 全体構造

RSS は情報を効率的に扱うための基盤技術として普及しつつあり、朝日新聞などのニュースサ

イト、東京大学などの組織が発表する情報なども RSS の配信を行っています。ニュースサイト

以外でも、Apple 社の Podcasting や six apart 社の MovableType Blog システムなど RSS を用

いた情報発信は着実に増加しています。これらのサイトの URL は参考 Web サイトの項で紹介

しています。RSS のような標準技術を用いたシステム・サービスは今後ますます重要になると

考えられます。

3.7 課題 3-1

exercise/exercise3 のフォルダの中の exercise3-1.xml を編集して、１章で作成したホームペ

ージの RSS を作成しなさい。

【仕様】

title、link、description 要素を持つ channel を作成すること

channel の items には少なくとも一つの item を作成すること

item には title、link、description を記述すること


70

ブラウザで表示できることを確認すること

【合格基準】


【提出方法】

Eclipse から、exercise/exercise3 のフォルダの中の exercise3-1.xml を編集して、１章で作成

したホームページの RSS を作成します。作成した RSS は、

http://guinness.is.k.u-tokyo.ac.jp/2008/g000000/exercise/exercise3/exercise3-1.xml という

URL で配信されます。RSS にアクセスでき、かつ正常に表示できることを確認した後、このア

ドレスをＣＦＩＶＥに入力して提出してください。

3.7.1 RSSリーダとは RSS リーダとは、RSS 形式の blog や web ページの更新情報を収集、表示するアプリケーショ

ンです。RSS リーダには web アプリケーションのもの(サーバサイド RSS リーダ)と、スタンド

アロンアプリケーションのものがあります。

一般的な web アプリケーションの特長として、web ブラウザがインストールされている環境な

らば新しくソフトをインストールする必要が無い、web ブラウザさえ使えればどこからでも同

じ環境が再現できる、といったことが挙げられます。RSS リーダにも同じことが言えるでしょ

う。

サーバサイド RSS リーダもスタンドアロン版 RSS リーダも備える機能はほとんど同じです。基

本的な機能としては、blog や web サイトの RSS フィードを一定時間ごとに収集して、更新され

た情報やその概略を表示します。さらに詳しい内容を読みたい場合は、クリックすると元の blog

やサイトにジャンプするようになっています。さらに、各リーダー独自の機能としては、記事の

クリップ(保存)、RSS フィードだけでなく HTML も扱う、というようなものがあります。

3.8 サーバサイドRSSリーダの作成

3.8.1 サーバサイドRSSリーダ概要サーバサイド RSS リーダを Servlet で実装します。JAVA、Servlet の章で学んだことを応用す

ればそれほど難しくはありません。

ここでは、asahi.com の RSS フィードを読み込んで表示する RSS リーダを作成します。

71

asahi.com は朝日新聞のニュースサイトで、新着ニュースの情報を RSS フィード

(http://www3.asahi.com/rss/index.rdf)で配布しています。この RSS フィードから記事の新日時、

カテゴリー、記事のタイトルと記事へのリンクを取り出して一覧表を作成します。

3.8.2 利用するRSSフィード以下に asahi.com の RSS フィードの抜粋を紹介します。

<?xml version="1.0" encoding="utf-8"?>

<rdf:RDF xmlns="http://purl.org/rss/1.0/"

xmlns:dc="http://purl.org/dc/elements/1.1/"

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

xmlns:syn="http://purl.org/rss/1.0/modules/syndication/"

xmlns:taxo="http://purl.org/rss/1.0/modules/taxonomy/">

<channel rdf:about="http://www3.asahi.com/">

<title>asahi.com</title>

<link>http://www.asahi.com/</link> <description>アサヒ・コム</description>

<dc:language>ja</dc:language>

<dc:rights>Copyright 2005 Asahi Shimbun. All rights reserved.

No reproduction or republication without written permission.</dc:rights>

<dc:date>2005-09-16T12:28:07+09:00</dc:date> <dc:publisher>朝日新聞社</dc:publisher>

<dc:creator>朝日新聞社</dc:creator>

<syn:updatePeriod>hourly</syn:updatePeriod>

<syn:updateFrequency>1</syn:updateFrequency>

<syn:updateBase>2005-09-16T12:28:07+09:00</syn:updateBase>

<items>

<rdf:Seq>

<rdf:li rdf:resource=

"http://www.asahi.com/national/update/0916/

TKY200509160194.html?ref=rss"/>



OSK200509160029.html?ref=rss"/>


72


"http://www.asahi.com/sports/update/0916/

065.html?ref=rss"/>


"http://www.asahi.com/sports/update/0916/

062.html?ref=rss"/>


"http://www.asahi.com/business/update/0916/

070.html?ref=rss"/>


"http://www.asahi.com/business/update/0916/

097.html?ref=rss"/>

</rdf:Seq>

</items>

</channel>

<item rdf:about=


TKY200509160194.html?ref=rss"> <title>東京国税局のパソコン２台不明納税者４７万人分データ</title>

<link>http://www.asahi.com/national/update/0916/

TKY200509160194.html?ref=rss</link>

<description/> <dc:subject>社会</dc:subject>

<dc:date>2005-09-16T12:24:56+09:00</dc:date>

</item>

<item rdf:about=


OSK200509160029.html?ref=rss"> <title>全日空機がまた機体トラブル大阪空港へ引き返す</title>

<link>http://www.asahi.com/national/update/0916/

OSK200509160029.html?ref=rss</link>

<description/> <dc:subject>社会</dc:subject>

<dc:date>2005-09-16T12:18:35+09:00</dc:date>

</item>

<item rdf:about=

73

"http://www.asahi.com/sports/update/0916/065.html?ref=rss"> <title>イチロー、３打数ノーヒットチームも敗れる</title>

<link>http://www.asahi.com/sports/update/0916/065.html?ref=rss</link>

<description/> <dc:subject>スポーツ</dc:subject>

<dc:date>2005-09-16T12:11:50+09:00</dc:date>

</item>

<item rdf:about=

"http://www.asahi.com/sports/update/0916/062.html?ref=rss"> <title>松井秀３の２、打率３割に逆転の口火切る</title>

<link>http://www.asahi.com/sports/update/0916/062.html?ref=rss</link>

<description/> <dc:subject>スポーツ</dc:subject>

<dc:date>2005-09-16T11:29:16+09:00</dc:date>

</item>

<item rdf:about=

"http://www.asahi.com/business/update/0916/070.html?ref=rss"> <title>東京円、１１０円６５～６７銭（正午現在）</title>

<link>http://www.asahi.com/business/update/0916/070.html?ref=rss</link>

<description/> <dc:subject>ビジネス</dc:subject>

<dc:date>2005-09-16T12:06:11+09:00</dc:date>

</item>

<item rdf:about=

"http://www.asahi.com/business/update/0916/097.html?ref=rss"> <title>ヨドバシカメラ、日本大級の店舗で秋葉原に初進出</title>

<link>http://www.asahi.com/business/update/0916/097.html?ref=rss</link>

<description/> <dc:subject>ビジネス</dc:subject>

<dc:date>2005-09-16T11:53:05+09:00</dc:date>

</item>

</rdf:RDF>

ここで主に注目するのは item タグの中身です。各記事に item タグがあり、その中にはタイト

ル(title)、URL(link)、カテゴリー(dc:subject)、更新日時(dc:date)といった情報が入っています。

RSS リーダは主にこの item タグから情報を取り出して表示します。


74

3.8.3 サーバサイドRSSリーダのコード

RSSReaderServlet.java package ～

import ～

public class RSSReaderServlet extends HttpServlet {

protected void doGet(HttpServletRequest request,


response.setContentType("text/html; charset=UTF-8");

PrintWriter out = response.getWriter();

String url = "http://www3.asahi.com/rss/index.rdf";

out.println("<html>");

out.println("<head>");

out.println("<meta http-equiv=¥"content-type¥" content=¥"text/html;

charset=UTF-8¥">");

out.println("<title>RSS Reader Servlet</title>");

out.println("</head>");

out.println("<body>");

out.println("<center>");

printTable(out, url);

out.println("</center>");

out.println("</body>");

out.println("</html>");

}

protected void doPost(HttpServletRequest request,


doGet(request, response);

}

void printTable(PrintWriter out, String url) throws IOException {

out.println("<table border=¥"1¥">");

75

Document xml = null;

try {

DocumentBuilder builder = DocumentBuilderFactory.newInstance()

.newDocumentBuilder();

xml = builder.parse(url);

} catch (ParserConfigurationException e) {

e.printStackTrace();

} catch (SAXException e) {


}

NodeList items = xml.getElementsByTagName("item");

for (int i = 0; i < items.getLength(); i++) {

NodeList tags = items.item(i).getChildNodes();

String title = null;

String link = null;

String date = null;

for (int j = 0; j < tags.getLength(); j++) {

Node tag = tags.item(j);

if (tag.hasChildNodes()) {

String tagName = tag.getNodeName();

String value = tag.getFirstChild().getNodeValue();

if (tagName.matches("title"))

title = value;

else if (tagName.matches("link"))

link = value;

else if (tagName.matches("dc:date"))

date = value;

}

}

out.println("<tr>");

out.println("<th>" + date + "</th>");

out.println("<th><a href=¥""+ link + "¥">" + title + "</a></th>");

out.println("</tr>");

}


76

out.println("</table>");

}

}

3.8.4 課題 3-2 課題用の RSS リーダ(ExRSSReaderServlet)を拡張して、カテゴリを表示するように変更しな

さい。また、カテゴリごとに行の色が変わるように変更しなさい。

【仕様】

一覧表示に、記事のカテゴリが表示されること

カテゴリが変わると行の色が変わること

【合格基準】



【提出方法】

Eclipse で、 WEB-INF/src/jp/ac/u_tokyo/k/is/exercise3 のフォルダの中の

ExRSSReaderServlet.java を編集して、課題のプログラムを開発します。


の課題４－２に提出してください。

http://guinness.is.k.u-tokyo.ac.jp/2008/ g00000/servlet/ExRSSServlet

さらに高度な課題

上の課題だけでは物足りない人は、もう 1 つの課題にも挑戦してください。先のコードでは、

読み込む RSS フィードをプログラム中にハードコーディングしていました。これでは、複数の

RSS フィードを読み込む RSS リーダを作ることはできません。実用的な RSS リーダを作るた

めには当然複数の RSS リーダを読み込めることが必要になってきます。

例えば、以下のような拡張が考えられます。

複数のＲＳＳフィードを読み込んで表示するＲＳＳリーダ

ユーザが購読したいＲＳＳフィードを追加できるインタフェース

外部の XML ファイルから１つのＲＳＳフィードのアドレスを読み込んで、表示する RSS リー

ダのサンプルを載せておきます。これを参考にいろいろ拡張してみてください。

77

サンプルの RSS リーダ(RSSReaderServlet2)および本課題用に ExRSSReaderServlet2 を準

備しています。作業は ExRSSReaderServlet2 に対して行ってください。

3.8.5 外部XMLファイルからURLを取得するRSSリーダのコード

RSSReaderServlet2.java public class RSSReaderServlet2 extends HttpServlet {

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

response.setContentType("text/html; charset=UTF-8");


// Servlet の場合、ファイル名は以下のように設定する

String fileName = this.getServletContext()

.getRealPath("WEB-INF/src/jp/ac/u_tokyo/k/is/chapter3/RSSList.xml");

// 普通のJavaプログラムなら以下のように書く

// String fileName = "WEB-INF/src/jp/ac/u_tokyo/k/is/chapter3/urllist.xml";

//XMLファイル名

String url = getURLFromFile(fileName);

out.println("<html>");

out.println("<head>");

out.println("<meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">");

out.println("<title>RSS Reader Servlet2</title>");

out.println("</head>");

out.println("<body>");

out.println("<center>");

printTable(out, url);

out.println("</center>");

out.println("</body>");

out.println("</html>");

}

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws


78

ServletException, IOException {


}

void printTable(PrintWriter out, String url) throws IOException {

out.println("<table border=\"1\">");

Document xml = null;

try {

DocumentBuilder builder =

DocumentBuilderFactory.newInstance().newDocumentBuilder();

xml = builder.parse(url);

} catch (ParserConfigurationException e) {


} catch (SAXException e) {


}

NodeList items = xml.getElementsByTagName("item");

for (int i = 0; i < items.getLength(); i++) {

NodeList tags = items.item(i).getChildNodes();

String title = null;

String link = null;

String date = null;

for (int j = 0; j < tags.getLength(); j++) {

Node tag = tags.item(j);

if (tag.hasChildNodes()) {

String tagName = tag.getNodeName();

String value = tag.getFirstChild().getNodeValue();

if (tagName.matches("title"))

title = value;

else if (tagName.matches("link"))

link = value;

else if (tagName.matches("dc:date"))

79

date = value;

}

}

out.println("<tr>");

out.println("<th>" + date + "</th>");

out.println("<th><a href=\"" + link + "\">" + title + "</a></th>");

out.println("</tr>");

}

out.println("</table>");

}

// XMLファイルのフルパスからRSSフィードのURIを取得するメソッド

private String getURLFromFile(String filepath){

Document xmlDocument = null;

String url = null;

try{

//XMLファイルを読み込む

DocumentBuilder builder =

DocumentBuilderFactory.newInstance().newDocumentBuilder();

xmlDocument = builder.parse(filepath);

}catch(Exception e){


}

NodeList items = xmlDocument.getElementsByTagName("items");

Element item = (Element)items.item(0);

//itemノードからurlタグの情報を取り出す

NodeList urlTags = item.getElementsByTagName("url");

url = urlTags.item(0).getFirstChild().getNodeValue();

return url;

}

}

RSSList.xml URI を記載した XML ファイル

<?xml version="1.0" encoding="UTF-8"?>


80

<feed>

<items user="g400000">

<item>

<url>http://rss.asahi.com/f/asahi_newsheadlines</url>

<category>ニュース</category>

</item>

<item>

<url>http://www.u-tokyo.ac.jp/rss/admin/top_topic_jp.rdf</url>

<category>東大ニュース</category>

</item>

<item>

<url>http://www.u-tokyo.ac.jp/rss/admin/top_souiki_topic_jp.rdf</url>

<category>新領域</category>

</item>

<item>

<url>http://www.u-tokyo.ac.jp/rss/admin/top_kougaku_topic_jp.rdf</url>

<category>工学系</category>

</item>

</items>

</feed>

このプログラムでは items ノードの user 属性や、category タグの情報は使用していません。し

かし、これらの情報をうまく使うと、ユーザごとに違う RSS 情報を表示したり、見たいカテゴ

リーの RSS 情報だけ表示したりすることができます。その他の機能も考えて、実装してみてく

ださい。

3.9 参考Webサイト The Web KANZAKI

http://www.kanzaki.com/

RDF Primer

http://www.w3.org/TR/rdf-primer/

The Dublin Core Element Set

http://purl.org/dc/elements/1.1/

http://www.kanzaki.com/

http://www.w3.org/TR/rdf-primer/

http://purl.org/dc/elements/1.1/

81

RDF Site Summary (RSS) 1.0

http://purl.org/rss/1.0/

asahi.com 速報ニュースの RSS/RDF

http://www.asahi.com/information/service/rss.html

RSS 配信について - nikkeibp.jp - お知らせ

http://nikkeibp.jp/jp/tools/rss.html

Apple - RSS Information

http://www.apple.com/rss/

東京大学 RSS インフォメーション

http://www.u-tokyo.ac.jp/rss/rss_j.html

http://purl.org/rss/1.0/

http://www.asahi.com/information/service/rss.html

http://nikkeibp.jp/jp/tools/rss.html

http://www.apple.com/rss/

http://www.u-tokyo.ac.jp/rss/rss/_j.html


82

83

第4章 Webアプリケーション Web アプリケーションとは、Web サーバ上で動作するアプリケーションのことを指します。

ユーザがサーバ上のアプリケーションからデータを取り出す、あるいはアプリケーションに対し

てデータを送信するために、Web のフレームワークが利用されます。すべてのデータ、データ

の処理プログラムはサーバ上に置かれるため、基本的にはユーザが特別なプログラムのインスト

ールを行うことなく、Web ブラウザさえあれば Web アプリケーションは利用できます。

デスクトップアプリケーション

Webアプリケーション

コンピュータ

ユーザー

プログラム

キーボード･マウス

グラフィックス･コンソール

インプット

アウトプット

ユーザー

インプット

アウトプット

Webブラウザ

キーボード･マウス

グラフィックス･コンソール

コンピュータ(クライアント) コンピュータ(サーバー)

プログラムWebサーバ

HTTP(request)

HTTP(response)

図 4.1 デスクトップアプリケーションと Web アプリケーション

現在、インターネットの上で行われている多様なサービスや商品の販売では、Web アプリケー

ションが用いられています。いくつか例をあげてみましょう。Google や Yahoo!といった検索エ

ンジンでは、サーバに用意されたホームページに関する膨大なデータベースから、ユーザの入力

したキーワードにマッチするものをプログラムが検索して取り出し、HTML に加工してユーザ

に提示します。Amazon.com や Dell といった企業は、自社の扱う商品のデータベースをサーバ

に置き、サーバ側のプログラムがユーザの要求に応じて商品情報を提示し、売買の契約を行い、

発送処理まで行ないます。

Web アプリケーションを利用したサービスは、1990 年代後半に一般の人々の生活に広く普及

しました。こうした背景には、時間や場所の制約を受けずに自由にサービスの利用やショッピン

グをできること、膨大な商品を揃えられること、個々の要求に合わせたきめ細かなカスタマイズ

が可能であること、キーワードなどで商品の検索が容易に行えること、といった従来の店舗には

第 4 章 Web アプリケーション

84

ない魅力があげられます。

また、こうした Web アプリケーションのメリットに目をつけたのは、一般の消費者を対象とし

た企業だけではありません。製造業などでの部品や資材の調達では、必要な仕様を満たす商品を

世界中のサプライヤーから低い値段で購入する必要があります。こうした B2B(Business to

Business)の市場でも、Web アプリケーションの提供する高率的な情報共有機能が使われていま

す。近年では、変化の激しい消費者の需要に合わせて、なるべく在庫を持たず必要な分だけ生産

し無駄をなくすことが必要と考えられています。販売店での消費者の購買トレンドの収集から、

卸業者、メーカー、部品メーカーが一体となって情報を交換する情報システムを利用した

SCM(Supply Chain Management)が注目されています。Web アプリケーションはこういった場

面においても重要な役割を果たしています。近年では、こうした B2B における企業間のデータ

処理のさらなる自動化の枠組みとして、Web サービスが注目されています。Web アプリケーシ

ョンのユーザが人間であるのに対して、Web サービスは計算機プログラムがユーザとなります。

4.1 Webアプリケーションの技術

Web アプリケーションを支える技術を、歴史的な背景などをふまえながらいくつかの視点で見

てみましょう。

4.1.1 Webアプリケーションとインターネットインターネットという言葉はもともと、固有のIP(Internet Protocol)アドレスを持つ計算機で

構成され、TCP/IPを中心とするプロトコルによってデータ通信を行うネットワークのことを指

します。Webやメール、あるいはファイル転送といったサービスの多くは、このTCP/IPという

プロトコルを利用しています。さらにそれぞれのサービスは、独自のサービス用プロトコルを

TCP/IPの上位プロトコルとして定義し利用しています。Webの場合はHTTP (Hyper Text

Transfer Protocol)、メールはSMTP(Simple Mail Transfer Protocol)、ファイル転送はFTP (File

Transfer Protocol)といった具合です。プロトコルとは、データの送受信を行うために決められ

るデータ交換の形式・手順を指し、どちらが、どういう順番で、どういう形式でデータを送るか、

といったことを定めます。それぞれのプロトコルはインターネットの標準として、

IETF(Internet Engineering Task Force)1で議論、標準化され、RFC(Request For Comments)

といった形の文書で規定されます。こうした文書や標準化過程はインターネットで公開されてい

ますから、誰でも入手できます。

Web の利用する HTTP の場合は、クライアントからサーバに対して取り出すファイルを指定

し、これに対して、サーバはファイルのメディアタイプといったヘッダー情報と実際のファイル

1 IETF ホームページ http://www.ietf.org/

85

の中身を送ります。

4.2 HTMLによるユーザーインターフェース開発

Web がネットワーク型のシステムの実装手段として普及した理由の一つは、HTML によって

手軽に情報を編集することが可能で、フォームによって入力を行うインターフェースを容易に作

成できることにあります。現在では世界中のほとんどのコンピュータユーザが何らかの Web ブ

ラウザを持っていますから、特にプログラム言語でプログラムを書く必要もなく、用意されたフ

ォームをどう組み合わせるかを HTML で記述して、Web サーバに置くだけで、世界中のユーザ

が利用可能なシステムが出来上がります。しかも、計算機の OS の種類毎の開発や面倒なクライ

アント側のシステムの更新を不要としたことで、Web アプリケーションにおけるユーザーイン

ターフェース開発コストは、従来のプログラミングによるものと比較して大きく減少しました。

ただし、HTML で記述できるインターフェースは、プログラミングで行うほど詳細なコント

ロールや描画はできませんから、高度なグラフィックスやインタラクションを必要とする場合に

は、プログラミングを行う必要があります。Web ページにこうした高度なコンテンツ(例えば 3

次元のグラフィックスやインタラクティブなアニメーション)を埋め込みたいという要求に対し

ては、専用のプラグインと呼ばれるコンポーネント(他のプログラムの中で動作するように実装

されたプログラム)が使われています。Macromedia 社の Flash などは、近年では企業サイトな

どのデファクトスタンダード(実質上の標準)として使われるまでになっています。こうしたプロ

グラミングによって記述されるコンテンツは、テキストに比べるとデータサイズが大きくなりま

すが、近年のブロードバンド化によって普段はそれほどストレスを感じることはないかもしれま

せん。

このようなネットワークの高速化とコンテンツの高品質化が進む一方で、携帯電話やPDA、自

動車内ネットワークといったモバイル環境でのインターネットも急速に普及しています。こうし

た環境では依然として、ネットワーク速度やマイクロプロセッサの処理速度という制約から、快

適な利用のためにはコンテンツデータのサイズを低く抑える必要があります。このように多様化

するユーザ環境にいかに効率的に対応するかは一つのポイントとなっています。こうした問題の

解決方法の一つとしてトランスコーディング(図 4.2)が期待されています。


86

変換用言語(XSLT)XML->HTML

XML->S社携帯用HTMLXML->A社PDA用HTML

HTML

A社PDA用HTML

S社携帯電話用HTML

元データ(XML)

トランスコーディング

64k

64k

1.5M

図 4.2 トランスコーディング

4.3 Webアプリケーション実装技術

Web アプリケーションを実装する環境について簡単に紹介します。

Web が普及する当初から使われた Web アプリケーションのためのフレームワークが

CGI(Common Gateway Interface)です。CGI は、基本的に標準入出力の可能な、どのプログラ

ミング言語でも記述できます。Web サーバは、クライアントからの要求に応じて URL で指定さ

れたプログラムをプロセスとして起動します。プログラムへのデータ入力は、環境変数を使う方

法と標準入力を使う方法があります。プログラムからの標準出力は、そのままクライアントに渡

されます。基本的に、Web のプログラミングはテキスト処理が多くを占めるため、テキスト処

理の得意な Perl 言語が多く使われます。

近年の Web アプリケーション実装は、Java を用いる方法と Microsoft の.NET を用いる方法が

中心になっています。Java を用いる方法では、Servlet と呼ばれるクラスを Web アプリケーシ

ョンとして実装します。Servlet は、Java で実装された Web サーバから、クライアントの要求

に応じて初期化(オブジェクト化)されます。一度、初期化されメモリに置かれると、２度目以降

のアクセスではメモリ上のオブジェクトを参照するので、CGI のように毎回プロセスを起動す

87

るのに比較して、速い処理スピードが実現できます。また、Java はオブジェクト指向言語です

から、大規模なシステムの開発にも向きます。また、Web アプリケーションを複数台の計算機

で構成して、分散処理を行うなどといった場合にも適しています。

Microsoft の.NET を利用するアプローチは、Web サーバを Windows で構築する場合に適な

選択でしょう。VB(Visual Basic)、C#、VC++(Visual C++)といった、Microsoft の統合開発環

境(Visual Studio)でサポートされるいずれの言語も利用可能です。このアプローチのメリットは、

世の中に大勢いるマイクロソフトプログラマーを活用できること、洗練された開発環境が利用で

きるため開発時間が短縮できる、といった実利的な点にあるといえるでしょう。

こうしたフレームワークから、実際にどれを選択するかは、コスト、システムの規模、開発内

容、過去の資産、将来的なメンテナンスコストなどから総合的に検討する必要があります。

本講義では Java Servlet を用います。

4.4 Webアプリケーションに求められるもの

Web アプリケーションの構築においては、必要とされる機能を実装するのと同時に、パフォー

マンス、ユーザビリティ、セキュリティといった検討を行う必要があります。ここではこれらに

ついて簡単にまとめてみます。

4.4.1 ユーザビリティ以前は、コンピュータ関連のソフトウェア開発は実用性にのみ焦点が当たっていました。その

システムを利用して、仕事や学習を効率的にできるようになるといったことが中心だったわけで

す。これに加えて、そうしたシステムをユーザがどのくらい便利に使えるか、という視点が重視

されるようになりました。この視点がユーザビリティと呼ばれます。

一般的なユーザビリティを改善するための方法論は数多くあります(ニールセンの書籍などを

参考にしてください)。例えば、システムを使ってユーザがどういう作業を行なうかの要素を取

り出し、その依存関係を調べるというタスク分析、システムの開発段階からユーザの作業のしや

すさをテストできるようなプロトタイプの作成、数人の被験者を頼んで行なうユーザビリティテ

ストを通したパフォーマンスの計測、といったことが行なわれます。

こうした方法論の本質は何かというと、ユーザが実際にシステムをどのように使っているかを、

実際にその現場での観察に基づいてよく理解し、定性的、定量的に把握し、それに基づいてシス


88

テムを改善するということです。完全に決まった方法論があると考えるよりは、まずはよく観察

するということから始めることが必要でしょう。こうした視点は、今後、皆さんが研究や開発を

進める上でも、とても重要になると思います。この講義の中でのシステム開発でも、皆さん自身

や友達に頼んでシステムを利用し、使いにくい部分を洗い出し、改善を加えてみてください。

4.4.2 パフォーマンスパフォーマンスはとても重要な要素です。ユーザの入力に対する反応にあまり時間がかかるよ

うでは、せっかくの機能も使われなくなります。Web アプリケーションでは、ほとんどの処理

はサーバ側で行われるため、基本的にシステム全体のパフォーマンスを左右するのは、ネットワ

ークの転送スピードとサーバ側の処理になります。

一般的に、計算機の世界でパフォーマンスの向上のための考え方にロードバランシング(負荷分

散)があります。ネットワークでも、サーバの処理でも様々なレベルでロードバランシングのた

めのソフトウェア、ハードウェアが存在します。以下に、いくつか関連するものを挙げてみまし

ょう。

プロクシー・キャッシュサーバ -- 文書、画像や動画などのうち、よくアクセスされるファ

イルを、ネットワーク的にクライアントに近い別のサーバ(キャッシュサーバ)に蓄積し、ア

クセスを分散することが行なわれます。また、外部から閉じたLANなどでは、あらかじめ

外部とのHTTP通信を特定のサーバ(プロクシーサーバ)に限定し、クライアントはそのサー

バを経由してWebを利用することが行なわれますが、こうしたプロクシ―サーバがキャッ

シュサーバを兼ねることが良く行なわれます。Akamai2などは、世界中にこうしたキャッ

シュサーバのネットワークを作ってアクセスを分散し、擬似的にネットワーク速度を上げ

るサービスを実現しています。Webに限らず、FTP、ネットニュース、ビデオ配信などで

も、サーバ側を複数用意し、近くのサーバに接続させるという方法がとられます。

DNS ラウンドロビン -- DNS サーバで一つのホスト名を複数の IP アドレスに対応づけ、ク

ライアントからの問い合わせのたびに別のサーバを割り当て、アクセスの集中を防ぎます。

3-tier アーキテクチャ -- Web サーバ、アプリケーションサーバ、データベースサーバと

いった具合に、Web サーバの裏に処理に応じてさらに(通常)2 層を設けます。全体のパフォ

ーマンスを考慮して、ボトルネックとなる層のサーバ数を増やしてアクセスを分散させま

す。セキュリティ上も有用なため、大規模サイトなどではこうした構成が取られます。

これらの負荷分散によるパフォーマンス向上は、比較的大掛かりなシステム構成を必要としま

2 http://www.akamai.com/

89

す。ところで、この講義の中で構築するように単独のサーバにおける Web アプリケーションを

開発する際には、どのようにパフォーマンス向上を考えるべきでしょうか。

まず、システムを構築している段階ではパフォーマンスを気にする必要はありません。機能や

ユーザーインターフェースの実装に力を入れてください。ある程度システムが動くようになって

仕上げの段階になったら、パフォーマンスについて考えてみましょう。いくつかの操作に対して

システムの反応が迅速でない場合、まず、プログラムのどの部分に処理時間がかかっているかを

調べる必要があります。これを調べるためには、プログラム中に何箇所か時刻(ミリ秒単位で)を

表示するコードを入れます。プログラムを実行し、得られる各時刻の間隔から処理時間の大きい

箇所を見つけます。原因を特定し、プログラムのコードの改善、プロセスの分割など、必要な対

応を行い、再び効果を計測します。こうした繰り返しにより、パフォーマンスの改善を行ないま

す。

4.4.3 セキュリティ個人情報やお金を扱うような Web アプリケーションでは、セキュリティがたいへん重要になり

ます。Web アプリケーションのセキュリティを考える場合、ネットワーク転送時のセキュリテ

ィとサーバのセキュリティの大きく 2 つに分けられます。

ネットワーク転送時には、通常の HTTP ではユーザの入力した情報は暗号化されずに送られる

ため、クライアントとサーバの経路に接続した計算機からは、簡単にその中身を見ることが可能

です。例えば、フォームのパスワードフィールドに入力したパスワードも、簡単に取り出せてし

まうのです。これへの対処として、一般的には通信経路を暗号化する HTTPS が利用されます。

ただし、暗号化によるオーバーヘッドがあり、通常、Web に掲載している情報などほとんどの

情報は一般に公開していますから、同じサイトでも HTTP と HTTPS を使い分けることが行な

われます。

サーバ側のセキュリティは、一般に非常に難しい課題です。基本的には、不正なログインやプ

ログラムの実行を防ぐために、ソフトウェアや OS のバグフィックス、不要なネットワークポー

トやサービスの停止といったことは、サーバの管理者と協力して行なう必要があります。また、

構築する Web アプリケーション自身の不適切なプログラミングも注意するべき点です。重要な

情報を含むデータベースサーバをネットワーク的に外部からはアクセスできない場所に置くの

も有効です。なかなか、一般論として言うことは難しいですが、このように、リスク要因を把握

しそれぞれ対策を立てるしかないでしょう。


90

4.5 Google API 米 Google 社は現在検索サービスのみならず、Google Map、Google Calendar などのさまざ

まなサービスを行っています。Google API とは、このような Google のサービスを外部の開発

者が利用するためのライブラリ（＝ソフトウェアの部品。Java で言えば、変数、メソッド、ク

ラスあるいはそれらの集合）です。無料で利用することができます。

ＡＰＩ（Application Program Interface）とは、あるソフトウェアを開発する際に使用でき

る命令や関数の集合のことです。たとえば、個々のソフトウェアの開発者がソフトウェアの持つ

すべての機能をプログラミングするのは困難で無駄が多く、このようなプログラム群が利用する

ことで、高度なアプリケーションをより短時間で開発することができます。

現在公開されている Google API とその用途を紹介します。

Google Search API Google 社のサーバにアクセスし、ＷＷＷ上に存在するページの情報を取得するこ

とができます。

Google Maps API Google Map で使用されている地図情報システムを利用し、独自の地図サービス

を構築できる。

Google Toolbar API Google Toolbar に機能を追加し、独自のツールバーを作成できる。

Google Adwords API Google サイト上に広告を出している企業が「スポンサーリンク」の配置傾向を予

測したり、レポートを作成したりすることができるようになる。

Google Checkout API Google が提供しているインターネット決済のシステムを自社サイト内に持つこ

とができる。低限でも Perl や PHP などといった言語の知識が必要となる。

Google Data API Atom や RSS を基盤とする GData と呼ばれるデータフォーマットを利用してデ

ータを外部から操作、取得等できる。

以下、この Google API を利用した新しい Web サービスを提案することを目標に、上記のう

ち Google Search API を利用したウェブアプリケーションのコードを説明します。

4.5.1 Google APIを利用したアプリケーションの開発 Google Search API を利用したアプリケーションとなっています。詳細についてはそれぞれ後

91

に述べますが、大まかには、ユーザが直接操作するブラウザ、ブラウザからの入力を受けてデー

タを処理するサーバ上のサーブレット、サーバからデータを受け取り、返事を返す Google のサ

ーバ、の三者からなっています。

普段皆さんが Google の検索サービスを利用する際には、ブラウザを通して直接 Google のサ

ーバにアクセスしています。そこにわざわざ間にサーバーアプリケーションを媒介させるメリッ

トとしては、例えば定常的な動作を自動化したり、検索、カレンダー、地図表示などの複数の機

能を自分のやりたいように同時に動かしたりする事が考えられます。

Google はその技術力をバックにして、検索、カレンダーなど一つ一つの機能をなるべく使い

やすいように作りこんでいます。現在の皆さんには、おそらくそれに真っ向から立ち向かうこと

は不可能でしょう。そうではなくて、皆さんの視点で世の中のニーズを見つけ、本授業で培った

HTML、Java、XML の技術を元に Google の機能を利用して、今までにないサービスを考えて

みてください。

開発環境のセットアップについては、付録A 開発環境（p.108～）を参照してください。

Google Search AP を利用したウェブアプリケーションのサンプルコードを以下に示します。

4.5.2 Google Search APIを利用した検索アプリケーションの実装 Google Search APIを利用した検索アプリケーションを実装します。Java、Servletの章で学

んだことを応用すればそれほど難しくはありません。図 4.3にアプリケーションの概要を示しま

す。

gsearch.htmlGsearchServlet.java Google Server

入力 POST送信

・検索 or キャッシュ or スペルチェック・キーとなる文字列

XML送受信

結果表示

図 4.3 検索アプリケーションの概要

ここでは、単語による「ウェブページ検索」、「キャッシュデータの検索」、「スペルチェック」

の3つの機能を実現します。gsearch.htmlは入力された文字列をPOSTメソッドで送信します。

GsearchServlet.java はそのデータを受け取り、検索結果の上位１０件について Google と通信

を行って結果を返します。

4.5.3 検索アプリケーションのコード


92

///

/// gsearch.html

///

/// 入力のインターフェース

/// <form method ="post" action= http://… で呼び出すサーブレット

/// を指定

/// serType : 利用するサービス名を指定。 Search, cached,

///

///

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Google Search API Example</TITLE>

<META http-equiv="Content-Type" content="text/html; charset=Unicode"/>

</HEAD>

<BODY>

<H1>Google Search API Example</H1>

<FORM ACTION="http://localhost:8080/GAPISample/servlet/GsearchServlet"

METHOD="POST"><BR>

Select type of services:<BR>

<INPUT TYPE="radio" NAME="serType"

VALUE="search" checked>Search string: <INPUT TYPE="text"

VALUE="Tokyo" NAME="query"><BR>


VALUE="cached">Cached website: <INPUT TYPE="text"

VALUE="www.google.com" NAME="url"><BR>


VALUE="spell">Spelling check: <INPUT TYPE="text" VALUE="britnay

spars" NAME="phrase"><BR><BR>

<INPUT TYPE="SUBMIT" VALUE="Submit">

</FORM>

</BODY>

93

</HTML>

///

/// GsearchServlet.java

///

/// gsearch.htmlからPOSTメソッドで送信されたデータを、doPost → doGet が処理する

/// doGetはデータを受け取り、Googleのサーバと通信を行う

/// ・ウェブページ検索

/// ・Googleのサーバに保存されているウェブページのキャッシュ

/// ・単語のスペルチェック

/// が可能

///

public class GSearchServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

public void doGet(HttpServletRequest request, HttpServletResponse response)


// 認証キー。Google Search APIの利用申請時に割り当てられる

String clientKey = "Mo+gp61QFHJTPmWTjElfpxm5h0vqgKID";

// GoogleSearchオブジェクトの新規作成。検索キーの送信と結果データの受信に用いる

GoogleSearch gs = new GoogleSearch();

gs.setKey(clientKey);

// 文字化け対策

response.setContentType("text/html");

response.setCharacterEncoding("UTF-8");

//ブラウザ画面に表示するHTMLの出力（ヘッダー部分）


out.println("<!DOCTYPE HTML PUBLIC ¥"-//W3C//DTD HTML 4.0

Transitional//EN¥">¥n");

out.println("<HTML>¥n");


94

out.println("<HEAD>¥n");

out.println("<TITLE>Result</TITLE>¥n");

out.println("<META http-equiv=¥"Content-Type¥" content=¥"text/html;

charset=UTF-8¥"/>¥n");

out.println("</HEAD>¥n");

out.println("<BODY>¥n");

out.println("<H1> Result </H1>¥n");

out.println("Google Search Results: <BR>");

out.println("====================== <BR>");

//利用するサービスのタイプを取得する（ウェブページ検索(search)か、キャッシュ取得(cashed)

か、スペルチェッカか(phrase)をserviceに格納）

String service = request.getParameter("serType");

try {

//ウェブページ検索の場合

if (service.equals("search")) {

//検索に使う単語を取得(query)

String query = request.getParameter("query");

//ここを書かないと日本語で検索できない（ISO-8859-1からUTF-8に形式を変換している）

query = new String(query.getBytes("ISO-8859-1"), "UTF-8");

gs.setQueryString(query);

//上位0番目から探す

gs.setStartResult(0);

//検索を行い(doSearchメソッド)、GoogleSearchResultクラスに結果を格納する

GoogleSearchResult gsr = gs.doSearch();

GoogleSearchResultElement[] allElements = gsr.getResultElements();

// Totalを求める

int total = gsr.getEstimatedTotalResultsCount();

out.println("合計"+total+"件<br>");

out.println("====================== <BR>");

95

// GoogleSearchResultからは、一度に10個しか検索結果を得られない。

// 開始位置と終了位置を指定する。

int startIndex = gsr.getStartIndex();

int endIndex = gsr.getEndIndex();

// GoogleSearchResultの結果の一つ一つを、GoogleSearchResultElementクラスに格納

していく

for (int i = 0; i <= endIndex - startIndex; i++ ) {

GoogleSearchResultElement aResult = allElements[i];

String[] tempString = new String[3];

//ここでは、Title, URL, Summaryのみだが、ほかにもいろいろなデータを取得可能

tempString[0] = aResult.getTitle();

tempString[1] = aResult.getURL();

tempString[2] = aResult.getSummary();

//検索結果をHTML形式で出力

out.println(tempString[0]+"<br>¥n");

out.println("<a href="+tempString[1]+"> "+tempString[1]+"</a> <br>¥n");

out.println(tempString[2]+"<br>¥n");

}

// キャッシュ取得の場合

} else if (service.equals("cached")) {

out.println("Cached page:");

out.println("============");

//入力されたURLに該当するページをbyte[]形式で取得（doGetCashedPage）

//string型に変換して出力

String url = request.getParameter("url");

byte [] cachedBytes = gs.doGetCachedPage(url);

String cachedString = new String(cachedBytes, "UTF-8");

//結果を出力

out.println(cachedString);


96

// スペルチェックの場合

} else {

String phrase = request.getParameter("phrase");

out.println("Spelling suggestion:");

//doSpellingSuggestion(phrase)で、pharseをスペルチェック

//予想される語をstring型で返す

String suggestion = gs.doSpellingSuggestion(phrase);

//結果を出力

out.println(suggestion);

}

}

catch (GoogleSearchFault f) {

out.println("The call to the Google Web APIs failed:");

out.println(f.toString());

}

//末尾のタグを出力

out.println("</TABLE>¥n</BODY></HTML>");

}

public void doPost(HttpServletRequest request, HttpServletResponse response)


//HTMLからの入力によって、まずこのメソッドが起動する

//上記のdoGetメソッドを起動する


}

}

以下に、利用できるメソッドを示します。機能が良くわからない場合は、実際に使ってみて、結

果を System.out.println() で出力してみると良いでしょう。

97

表 4.1 GoogleSearch クラスのメソッド

返り値メソッド名説明

byte[] doGetCachedPage(String url) url を引数にして、キャッシュを取得

GoogleSearchResult doSearch()

検索を行う。このメソッドを利用する前

に、検索語などの設定が必要

String doSpellingSuggestion(String phrase) スペルチェック機能を実行する

void setFilter(boolean on) フィルターを使用するかしないか

void setInputEncoding(String ie) 入力データのエンコードを設定する

void setKey(String key) 認証キーを設定する

void setLanguageRestricts(String lr) 言語制約を加える

void setMaxResults(int maxResults) 取得する結果の最大数を設定する

void setOutputEncoding(String oe) 出力データのエンコードを設定する

void setQueryString(String q) 検索に使用する語を設定する

void setRestrict(String restrict) 制約を設定する

void setSafeSearch(boolean safeSearch)

有害な情報を排除するかどうかを設

定する

void setStartResult(int start)

取得する結果の最初のインデックスを

設定する

表 4.2 GoogleSearchResult クラスのメソッド


boolean getDocumentFiltering()

結果にフィルターがかかっているかどう

かを取得する

int getEndIndex() 結果の最後のインデックスを取得する

int getEstimatedTotalResultsCount() 予想される結果数を取得する

boolean getEstimateIsExact()

予想される結果数が正しいかどうかを

取得する

GoogleSearchResultElement[] getResultElements() 検索結果を取得する

String getSearchQuery() 検索に使った語を取得する

double getSearchTime() 検索にかかった時間を取得する

int getStartIndex() 検索の最初のインデックスを取得する

void setEndIndex(int en) 最後のインデックスを設定する

void setStartIndex(int sn) 最初のインデックスを設定する


98

表 4.3 GoogleSearchResultElement クラスのメソッド


String getCachedSize() キャッシュのサイズを取得する

String getHostName() 結果のホスト名を取得する

boolean getRelatedInformationPresent() 関連する情報があるかどうかを取得する

String getSnippet() スニペットを取得する

String getSummary() 要約を取得する

String getTitle() タイトルを取得する

String getURL() ＵＲＬを取得する

4.5.4 課題 4 課題用の Google Search サーブレット(ExGSearchServlet)を修正して、通常の Google と同様

にページの切替により上位１０件以外の検索結果も表示できるように拡張しなさい。例えば「前

の１０件のページ」、「後の１０件のページ」というメニューを追加しなさい。

【仕様】

ページの切替により、すべての検索結果を表示できるようにすること

１ページ目に「前の１０件のページ」が表示される、終ページに「後の１０件のページ」

というメニューが表示されることは問題としない

【合格基準】



【提出方法】

Eclipse で、 WEB-INF/src/jp/ac/u_tokyo/k/is/exercise5 のフォルダの中の

ExGSearchServlet.java を編集して、課題のプログラムを開発します。


の課題５に提出してください。

http:/ guinness.is.k.u-tokyo.ac.jp/2008/g400000/exercise/exercise5/exgsearch.html

【ヒント】

例えば、<a href=ExGSearchServlet?serType=search&query=検索キー&start=10>前のページ

へ </a> というリンクを作成すれば、 request.getParameter("query") や

request.getParameter("start") により query と start を得ることができる。また、検索結果の

99

ページを切り替えるには、ソースコード中の setStartResult という行に注目すればよい。

4.6 参考

＠IT の Servlet / JSP 解説記事丁寧でわかりやすい。サンプルコードも豊富。

http://www.atmarkit.co.jp/channel/jspservlet/jspservlet.html Java で Hello, World サーブレットの説明入門におすすめ。

http://www.hellohiro.com/servlet.htm Google SOAP Search API (英語)

http://www.google.com/apis/reference.html

http://www.atmarkit.co.jp/channel/jspservlet/jspservlet.html

http://www.hellohiro.com/servlet.htm

http://www.google.com/apis/reference.html


100

101

付録A 開発環境

本講義では、Java プログラムの記述に Eclipse というアプリケーションを用いてプログラミ

ングをしていきます。Eclipse は、2001 年に米 IBM 社がオープンソース化した統合ソフトウェ

ア開発環境(Integrated Development Environment: IDE)です。強力なエディタやデバッグ機能、

豊富なプラグインを備え、Java、特にサーブレット/JSP の開発では今や標準的な開発環境にな

っています。

ここでは、その Eclipse の使い方、サーバへのデータ転送の方法、開発したウェブアプリケー

ションのテストの仕方などを説明します。

A.1 開発環境のセットアップ

例として g400000 というユーザ名の場合のセットアップ方法を説明します。

A.1.1 ワークスペースのコピーワークスペースとは、開発するアプリケーションのコードや設定などを含むフォルダです。本

授業用のワークスペースを構築してありますので、皆さんにはそれを iMac 上の自分のディレク

トリにコピーして作業します。iMac のターミナルを開き、以下のコマンドを実行してください。

スペルミスをしないように、確実に実行してください。エラーメッセージが出なければ成功です。

ca90105$ cd

ca90105$ cp -r /home07/thiekata/workspace-template ~/workspace

ca90105$ chmod –R 755 ~/workspace

*) どちらも３箇所に半角スペースが入ります。また、横棒はハイフンです。

~（チルダ・波線符号）が使われていますので注意してください。

コピーが完了すると、以下の図のように Finder のホームディレクトリに workspace というデ

ィレクトリが作成されます。

102

図 A.1 ワークスペースのコピー

A.1.2 eclipseの起動 iMac のアプリケーションから eclipse3.0 というフォルダを探し、eclipse を起動します。下の

図中の右上のアイコンで起動できます。複数のバージョンの eclipse がインストールされている

場合もありますので、3.0 であることを確認してください。

103

図 A.2 Eclipse の起動

初めての起動時には eclipse の workspace を選択する必要があります。先ほどコピーした自分

のホームディレクトリの workspace というディレクトリを指定してください。正しく選択され

ていれば eclipse が起動します。eclipse が起動するとウィンドウの左側に webapp というプロジ

ェクトが表示されます。Eclipse は、プロジェクトというものの単位で、プログラムやファイル

を管理しています。webapp プロジェクトには、本講義で使う HTML、Java、サーブレット等

のプログラムが含まれています。

なお、ここで Eclipse の Project – Build Automatically というメニューにチェックを入れて

ください。また、Project-Properties で開くウィンドウの左側 Java Compiler を選択し、右側の

Enable project specific settings をチェック、その後 Compiler compliance level を 1.4 にして

ください。

104

図 A.3 Eclipse の起動画面

A.2 ウェブアプリケーションの開発

本演習のウェブアプリケーションは、iMac 上の Eclipse で開発・コンパイルした後、サーブ

レットコンテナが動作している guinness サーバに転送して動作させます。新しくコンパイルし

たサーブレットを guinness に転送するたびにサーバでのウェブアプリケーションの再起動が必

要です。これらの操作方法を説明します。

A.2.1 guinnessへの転送 iMac で開発した HTML やサーブレットを動作させるには、webapp を guinness に転送する

必要があります。コピーは Fugu というアプリケーションを使用します。Fugu を用いると

guinness の中のファイルを閲覧することもできます。

なお、コンパイルは Eclipse の”Build Automatically”というメニューがチェックされていれば

自動で行われます。

105

図 A.4 Fugu の画面

Fuguでwebappを転送するには、FuguのメニューからSCP - New Secure Copyを選択します。

講義で初めて転送する際にはセキュリティに関して確認する[YES]か[NO]で答えるダイアログ

が表示されますが、[YES]を選択してください。次にファイル転送のダイアログが出るので、以

下のように入力します。これでサーブレットの転送は終了です。

Fugu は連続して使用すると不安定になるため、転送が終わるたびにメニューから終了してく

ださい。

Item to Copy: /homeXX/ユーザ名/workspace

---

Copy Type: Upload Item to Remote Host

Remote Host: guinness.is.k.u-tokyo.ac.jp User Name: ユーザ名

Copy File Path:

106

人により番号が異なる

図 A.5 ファイルの転送ダイアログ

A.2.2 ウェブアプリケーションの再起動 guinness に転送したウェブアプリケーションは、ウェブブラウザで特定のアドレスにアクセ

スすることで再起動できるように設定されています。サーバ上のウェブアプリケーションには、

スタートとリロードの二つの操作が可能です。通常、動作しているウェブアプリケーションを更

新した場合はリロードを行うと新たに転送したプログラムが動作します。ただし、バグなどで起

動に失敗してウェブアプリケーションが停止しているときは、リロードではなくスタートする必

要があります。うまく動作しない場合にはスタートとリロードの両方の操作を行ってください。

操作用のアドレスを以下に示します。g400000 の部分を自分のユーザ名に読み替えて実行して

ください。

（スタート）http://guinness.is.k.u-tokyo.ac.jp:8080/manager/start?path=/2008/g400000

（リロード）http://guinness.is.k.u-tokyo.ac.jp:8080/manager/reload?path=/2008/g400000

なお、以下の認証情報が必要です。

user: student pass: !webapp

107

A.2.3 Webアプリケーションへのアクセス上記作業が終了すると、サーブレットは動作状態になります。下のような URL でアクセスで

きますので、ユーザ名を自分のものに読み替えてブラウザからアクセスしてください。

http://guinness.is.k.u-tokyo.ac.jp/2008/g400000/index.html

バグなどによりうまく動作してない場合、以下のアドレスから自分のウェブアプリケーション

の動作を確認することが可能です。

http://guinness.is.k.u-tokyo.ac.jp:8080/manager/list

出力される中で、自分の学生証番号のアプリケーションの:で区切られた２番目のフィールド

が running となっていれば正常に動作しています。この際ユーザ名とパスワードが要求されま

すので以下を入力してください。

user: student pass: !webapp

（出力例）/2008/g400000:running:0:/home/home2008/g400000/workspace/webapp

A.2.4 新しいサーブレットの登録本講義ではワークスペースを guinness に転送し、アプリケーションを起動すれば動作します

が、本来は web.xml（デプロイメント・ディスクリプタ）への登録という作業を行う必要があ

ります。

例えば本テキストの第２章で紹介した HelloWorld.java というサーブレットについては、

web.xml ファイルに以下の項目が設定されています。

<servlet>

<servlet-name>HelloWorld</servlet-name>

<servlet-class>jp.ac.u_tokyo.k.is.chapter2.HelloWorld</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>HelloWorld</servlet-name>

<url-pattern>/servlet/HelloWorld</url-pattern>

</servlet-mapping>

108

＜servlet＞要素では、サーブレットの完全修飾名に対応する論理名を定義します。完全修飾名

とはパッケージ名とクラス名とをピリオドでつないだクラスの正式名です。完全修飾名はサーバ

環境上で完全に一意でなければいけません。また＜servlet-mapping＞要素では、＜servlet＞要

素で定義された論理名に対して、呼び出しのパス（URL）を関連付ける役割を果たします。

ここで、追加する項目の基本的なスケルトンを示します。

<servlet> <servlet-name>論理名</servlet-name>

<servlet-class>パッケージ名＋クラス名</servlet-class>

</servlet>

<servlet-mapping> <servlet-name>論理名</servlet-name>

<url-pattern>論理名で表されるサーブレットへのアプリケーションルート配下からの絶対パ

ス</url-pattern>

</servlet-mapping>

のようになります。

本講義で利用するサーブレットについてはあらかじめ登録してあるので、わざわざ記述する必

要はありませんが、終課題で新しいサーブレットを導入するには本項の手続きを行う必要があ

ります。

A.3 Google APIを利用した開発の環境設定

Google APIを利用したアプリケーション開発の為の、設定方法について述べます。

http://www.google.com/apis/ にアクセスし、developer’s kitをダウンロードします。

Google ライセンスキーを取得します。Google アカウントを作成する必要があります。入

手したライセンスキーはサンプルコードを参考に、コード内に認証キーを設定する必要がありま

す。

http://www.google.com/apis/

ウェブアプリケーション入門 - lecture.ecc.u-tokyo.ac.jpkhiekata/2008...HTTP3.2 までは...

Documents

Transcript of ウェブアプリケーション入門 - lecture.ecc.u-tokyo.ac.jpkhiekata/2008...HTTP3.2 までは...