平成２２年度版
ウェブアプリケーション入門
東京大学工学部システム創成学科
知能社会システムコース
プログラミング基礎Ｄ（後半）
目次
第1 章 HTML... 1 1.1 HTML入門 ... 1 1.1.1 基本的なHTML文書... 1 1.1.2 基本的なホームページ ... 2 1.1.3 バックグラウンドの設定と文字の装飾 ... 4 1.1.4 画像表示とリンクの作成... 6 1.1.5 表の作成 ... 9 1.2 HTML入門 – 補足資料 ... 12 1.2.1 エレメント・タグ・属性エレメント（element: 要素）...12 タグ（tag）...12 属性（attributes: アトリビュート）と属性値} ...12... 12 1.2.2 フォームを使う ... 13 < form > 【入力フォームの宣言と送信方法等の指定】...15 < input type=text > 【 ド】...15 < input type=passwor 【入力文字を表示させない】...16 < textarea > 【複数行の入力フィールド】...16 < input type=checkbox > 【チェックボタン】...17 < input type=radio > 【ラジオボタン】...17 < input type=radio > 【ラジオボタン】...17 < select > 【プルダウン形式のメニュー】 18 < input type=submit > 【送信ボタン】 ...19 < input type=reset > 【リセットボタン】 ...19d > １行の入力フィール... 1.2.3 主なHTMLタグ一覧... 19 1.3 スタイルシート... 24 1.3.1 スタイルシートとは... 24 基本的な考え方...24 1.3.2 スタイルの指定方法... 25 1.3.3 スタイルシートの書式 ... 26 1.3.4 クラスやIDの指定... 27 1.3.5 スタイルシート属性一覧... 29 1.4 携帯向けホームページ... 31 1.5 iPhone向けホームページ ... 32 1.6 課題１－１ ... 32 1.7 課題１－２ ... 33 第2 章 Servlet... 35 2.1 サーブレットとは ... 35 2.2 サーブレットの特徴... 36 CGIとの共通点、相違点...36 2.3 サーブレットのプログラム例 ... 372.3.1 Hello, World! ... 37 HelloWorld.java ...37
アプリケーションの実行...40 2.3.2 フォームによる入出力 ... 41 nameform.html ...41 Nameform.java...42 2.3.3 前回アクセス時刻表示 ... 43 testCookie.html...43 testCookie.java...43 2.4 課題 2 ... 46 第3 章 XMLとRSS... 47 3.1 XMLとは ... 47
3.1.1 XMLの特徴 ... 47 3.1.2 XML文書の構成... 48 名前空間接頭辞の定義例...49 タグの例...49 3.1.3 XMLの基本文法... 49 XML宣言部 ...49 DTD ...49 XML要素の記述...49 コメントの記述...50 3.2 JavaでのXMLの入出力 grade.xml...50 GradeXMLReader.java ...51 GradeXMLWriter.java ...55... 50 3.3 RSSとは... 58 3.4 RSSの種類... 58 3.5 メタデータとRDF... 59 3.6 RSSの仕様... 60 3.7 RSSリーダとは... 62 3.8 サーバサイドRSSリーダの作成... 62 3.8.1 サーバサイドRSSリーダ概要... 62 3.8.2 利用するRSSフィード ... 62 3.8.3 サーバサイドRSSリーダのコード ... 64 3.8.4 課題 3 ... 66 さらに高度な課題...67 3.8.5 外部XMLファイルからURLを取得するRSSリーダのコード... 67 3.9 参考Webサイト... 71 第4 章 Webサービス ... 73 4.1 Javascript ... 73 4.2 Google API ... 75 4.2.1 課題 4 ... 76 4.3 参考... 77 付録A 開発環境... 79 A.1 開発環境のセットアップ... 79 A.1.1 ワークスペースのコピー ... 79 A.1.2 eclipseの起動... 80 A.2 ウェブアプリケーションの開発... 82 A.2.1 guinnessへの転送 ... 82 A.2.2 ウェブアプリケーションの再起動... 84 A.2.3 Webアプリケーションへのアクセス... 85 A.2.4 新しいサーブレットの登録 ... 85
第
1章 HTML
1.1 HTML 入門
1.1.1 基本的な HTML 文書
HTML は HyperText Markup Language の略で、SGML( Standard Generalized Markup Language )の書式を踏襲したマークアップ言語の１つであり、インターネット上のドキュメン トを記述するための言語です。HTMLファイルは「開始タグ」と「終了タグ」を使って定義さ れる「要素(element)」および、「要素」に対して定義される「属性(attribute)」により構造化さ れます。HTML文書中の< >内にタグの名前を書くことでタグとして認識され、終了タグは「/ （スラッシュ）」で始まります。<BR>や<HR>など、タグによっては開始タグのみで終了タグを 持たないものもあります。また、定義した要素の開始タグの中で属性を定義することができます。 具体的にはタグは、<要素名 属性名=”属性の値”>と記述します。図 1-1に HTML文書の基本的 な構成を示します。この例では、HTML、HEAD、BODY、BRという４つの要素が定義されて います。これらのうち、改行を示すBR要素は開始タグのみが存在し、終了タグはありません。 ホームページの本体部分を示すBODY要素にはbgcolor属性という背景色を指定するための属性 が定義されており、その値は”red”となっています。 このようにタグを使って、要素や属性を定義することで構造化されたウェブページを作成しま す。完成したHTML 文書は、拡張子を「.htm」または「.html」として保存します。ファイル 名には漢字・カナ・平仮名といった日本語は使わず、英数字によるファイル名をつけます。作成 されたHTML 文書を表示するためのソフトウェアが Internet Explorer や Firefox 等のウェブ ブラウザです。 <HTML> <HEAD> ここにヘッダ情報を書く </HEAD> <BODY bgcolor=“”red"> ここに本文を書く<BR> ここに本文の2行目を書く </BODY> </HTML> 要素HTMLの開始タグ 要素HEADの開始タグ 要素HEADの終了タグ 要素BODYの開始タグ bgcolor属性の定義 要素BRの開始タグ（終了タグは省略） 要素BODYの終了タグ 要素HTMLの終了タグ HTML文書 図 1-1 HTML の基本構成 このHTML 入門では、いくつかの HTML タグを使って、簡単な自己紹介のページを作成する ことを目標に説明を行っていきます。
1.1.2 基本的なホームページ
ここでは基本的なHTMLタグを利用したホームページの作り方を説明します。HTMLタグの一 覧は1.2.3を参照して下さい。 まず、タグを使って要素を定義していくことになりますが、要素名を記述する際にアルファベ ットは大文字も小文字も同じものとして認識されます。< HTML > と書いても < html > と書 いても同じように扱われます。 前述のように定義した要素について、属性を定義することでより詳細な設定が可能になります。 属性は、開始タグの中に属性名="属性値"のように書いていきます。属性値は引用符ダブルクォ ーテーション(“”)あるいはシングルクォーテーション(‘’)で囲んで設定します。また、属性は開始 タグの中に空白で区切って、「何組でも」「順不同」で記述できます。 では、実際のHTML のサンプルを作成します。 この授業では自己紹介のページを作るのが最終目標ですから、とりあえず名前と所属、年齢、 生年月日、血液型、出身地、趣味を書いたホームページを作成します。 【HTML ドキュメント】 <HTML> <HEAD> <TITLE>システム創成太郎の自己紹介</TITLE> </HEAD> <BODY> システム創成太郎のホームページへようこそ！<BR> <BR> 【氏名】システム創成 太郎(しすてむそうせい たろう)<BR> 【所属】東京大学工学部システム創成学科知能社会システムコース ２年 <BR> 【生年月日】1989 年 4 月 1 日<BR> 【血液型】O 型<BR> 【出身地】東京都<BR> 【出身校】灘高等学校<BR> 【趣味】スノーボード<BR> </BODY> </HTML>【表示結果】 図 1-2 表示例 では、それぞれのHTML タグについて簡単に説明を行っていきます。 < HTML > このドキュメントが HTML であることを宣言するためのタグで、必ず用います。また、 HTML ドキュメントの最後には < /HTML > と記述して、タグを閉めましょう。 < HEAD > このタグで囲まれた部分は見出し部分であることを示し、タイトルやドキュメントの付加 的情報を記述していきます。この見出し部分に書かれた内容は、タイトルなどの一部を除 き、通常は表示されません。 < TITLE > < HEAD > タグの間で用いるタグで、そのページの「タイトル」を表します。このタイト ルはウェブブラウザで見たとき、タイトルバーにその内容が表示されます。上の例では「シ ステム創成太郎の自己紹介の自己紹介」というのがタイトルになります。 < BODY > このタグで囲まれた部分が本体部となります。ウェブブラウザで表示されるのは、この <BODY> で囲まれた部分となります。上記の例では「システム創成太郎のホームページ へようこそ！」以下の内容が表示されることになります。
< BR > これはテキストを改行したいときに使います。たとえドキュメント内で改行されていても、 < BR > タグで改行を指定しなければ、ウェブブラウザでの表示に反映されません。なお、 このタグは開始タグである ＜ BR ＞ 単独で要素であり、改行機能を果たしますので、 終 了タグ </BR> はありません。また、何も書かずに < BR > を入れると一行分のスペース が空くことになります。
1.1.3 バックグラウンドの設定と文字の装飾
次に、属性を利用したバックグラウンド色の設定や、文字を装飾するための要素の導入を行い ます。 【HTML ドキュメント】 <HTML> <HEAD> <TITLE>システム創成太郎の自己紹介</TITLE> </HEAD> <BODY bgcolor="#E9FFD9"> <FONT size="5" color="navy"> <CENTER> システム創成太郎のホームページへようこそ！<BR> </CENTER> </FONT> <BR> <FONT color="#008000">【氏名】</FONT> システム創成 太郎(しすてむそうせい たろう)<BR> <FONT color="#008000">【所属】</FONT> 東京大学工学部システム創成学科知能社会システムコース ２年 <BR> <FONT color="#008000">【生年月日】</FONT> 1989 年 4 月 1 日<BR> <FONT color="#008000">【血液型】</FONT> O 型<BR> <FONT color="#008000">【出身地】</FONT> 東京都<BR> <FONT color="#008000">【出身校】</FONT>灘高等学校<BR> <FONT color="#008000">【趣味】</FONT> スノーボード<BR> </BODY> </HTML> 【表示結果】 図 1-3 表示例 <BODY bgcolor="#E9FFD9"> BODY の開始タグに bgcolor 属性を設定することで、ホームページの背景色を好きな色に 変更することができます。色を指定する場合には、色名または色指定値( #RRGGBB 形式、 R(red)、 G(green)、B(blue)にそれぞれ 16 進数 2 桁の値(00～FF,00～ff)をいれて、それら が混ぜ合わさった色が最終的な色)を使い、 < BODY bgcolor="navy" > または < BODY bgcolor=" #008000" > のように指定します。 < FONT > 文字のサイズや色を変えたい場合に使うHTML タグです。 < FONT size=”5” > は文字の サイズを指定します。文字のサイズは1～7 の７段階があり、1 が最も小さいサイズで、7 が最も大きいサイズになります。何も指定しない場合には「3」になります。 < FONT color > は文字の色を指定します。指定する場合は""の中に、色名または色指定値( #RRGGBB 形式)を書き込みます。なお、元のサイズ、元の色に戻したい時には、 < /FONT > として タグを閉じます。 < CENTER >
テキストや画像などのイメージを中心に置きたいときに利用するタグ。同様に、センタリ ングや右寄せなどテキストの位置を指定したい時に利用するタグとして、 < div align > というタグもあります。どのように使うのか調べてみましょう。
< B>
文字を太字にするときに使うタグ。このほかにも文字を修飾するタグとしては、< I > < S > < TT > < U > < SUP > < SUB > < BIG > < SMALL > < STRONG > などがあ ります。
1.1.4 画像表示とリンクの作成
次にページに画像を表示する方法と、他のウェブページへのリンクを作成する方法について説 明します。 画像は開始タグ < IMG > の src 属性で指定します。HTML で利用する画像は通常、JPEG、 GIF、PNG の三種類のフォーマットが利用されます。デジカメやスキャナで読みこんだ静止画 像はこの３種類のいずれかのフォーマットで保存します。また、インターネット上には無料かつ 著作権フリーで使える写真、アイコンなどを提供しているサイトがあります。このようなサイト から自分の好きな素材や画像をダウンロードして利用する場合には、利用条件などをよく読んで マナー違反のないように留意する必要があります。 他のページへのリンクは、< A > タグを利用して作成します。具体的には、開始タグ<A>の中 のhref 属性にリンク先のアドレスを記述します。 【HTML ドキュメント】 <HTML> <HEAD> <TITLE>システム創成太郎の自己紹介</TITLE> </HEAD> <BODY bgcolor="#E9FFD9"> <FONT size="5" color="navy"> <CENTER> システム創成太郎のホームページへようこそ！<BR> </CENTER> </FONT> <BR> <FONT color="#008000">【氏名】</FONT> システム創成 太郎(しすてむそうせい たろう)<BR><FONT color="#008000">【所属】</FONT> 東京大学工学部システム創成学科知能社会システムコース ２年 <BR> <FONT color="#008000">【生年月日】</FONT> 1989 年 4 月 1 日<BR> <FONT color="#008000">【血液型】</FONT> O 型<BR> <FONT color="#008000">【出身地】</FONT> 東京都<BR> <FONT color="#008000">【出身校】</FONT> 灘高等学校<BR> <FONT color="#008000">【趣味】</FONT> スノーボード<BR> <CENTER> <IMG src="aso.jpg"> </CENTER> <HR> <A href="http://www.si.t.u-tokyo.ac.jp/">システム創成学科</A> </BODY> </HTML>
図 1-4 表示例 < A href="URL" > テキストやイメージにリンクを設定するタグです。このタグで囲まれたものをクリックす るとリンクを張られたファイルにジャンプします。このとき、リンク先のアドレスは href 属性で指定します。 < IMG src="ファイル名" > 画像を表示するときに用いられるタグです。表示する画像ファイルは src 属性で指定しま す。違うディレクトリにある画像、インターネット上の画像を直接指定することもできます。 ここではHTML ファイルと同じディレクトリに保存されている aso.jpg というファイルの 表示を想定しています。wide 属性と height 属性など、画像のサイズを指定する属性を設定 することもできます。wide 属性が横幅を、height 属性は縦幅を表します。 < HR > 横罫線を表示するためのタグです。width 属性で横罫線の長さを画面の横幅比に対する割 合で指定しています。この例では画面の横幅比で100 %の長さで横罫線を引いています。
1.1.5 表の作成
ここではテーブル機能を用いて、プロフィールを表形式に変更します。 【HTML ドキュメント】 <HTML> <HEAD> <TITLE>システム創成太郎の自己紹介</TITLE> </HEAD> <BODY bgcolor="#E9FFD9"> <FONT size="5" color="navy"> <CENTER>システム創成太郎のホームページへようこそ！<BR> </CENTER>
</FONT> <BR>
<TABLE border="1" width="80%"> <TR> <TD>氏名</TD> <TD>システム創成 太郎(しすてむそうせい たろう)</TD> </TR> <TR> <TD>所属</TD> <TD>東京大学工学部システム創成学科知能社会システムコース ２年</TD> </TR> <TR> <TD>生年月日</TD> <TD>1989 年 4 月 1 日</TD> </TR> <TR> <TD>血液型</TD> <TD>O 型</TD> </TR> <TR> <TD>出身地</TD> <TD>東京都</TD>
</TR> <TR> <TD>出身校</TD> <TD>灘高等学校</TD> </TR> <TR> <TD>趣味</TD> <TD>スノーボード</TD> </TR> </TABLE> <BR> <CENTER> <IMG src="aso.jpg"> </CENTER> <HR> <A href="http://www.si.t.u-tokyo.ac.jp/">システム創成学科</A> </BODY> </HTML>
図 1-5 表示例 < TABLE > 表組の開始を宣言するタグです。このタグだけでは表は作成できません。セルを表す<TD > タグや、行を表す < TR> タグを入れ子にしてはじめて表が作成されます。 < TABLE > に 枠をつけるには、border 属性で指定します。border 属性の属性値で枠の太さを設定します。 また、width 属性や height 属性を追加すると表のサイズを調整する事が可能になります。 この例では、表の横幅をウインドウサイズの80 %となるよう指定しています。 < TR > と < TD > < TR > で行を、 < TD > で列（セル）を作ります。この例では、１行に２列（「年代」と 「できごと」）が入りますので、< TR > < TD > 列１ < /TD > < TD > 列２ < /TD > < /TR > というように記述していきます。もし、行の中に列が１つしか存在しない場合でも、< TD > は必要です。また、 < TD > 内において、align 属性や valign 属性を指定することでテキ ストの位置を、bgcolor 属性でセルのバックグラウンド(背景)の色の指定などが行えます。
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 > のように終了タグを指定しないものもあります。なお、終了タグは全て「/（スラッシュ）」で始 まります。 属性（attributes: アトリビュート）と属性値} タグのより詳細な指定を行うためものもが属性(アトリビュート)と属性値(アトリビュート値) です。例えば、画像を表示するための < IMG > タグでは、画像ファイル名や画像の幅、高さな どをそれぞれsrc、width、height の属性名で定義します。一方、属性値には予め規定されたも のの中から選択する場合と、数値などのように制作者が任意で書き込む場合の二つがあります。<IMG src = "test.gif" width = "70%" height="100"> ↑ ↑ ↑ ↑
属性名１ 属性値１ 属性名２ 属性値２ 属性名と属性値の書き方のポイントは以下のとおりです。 属性名="属性値" のように書いていきます 属性は開始タグの中に空白で区切って、「何組でも」「順不同」で記述できます 属性名の大文字・小文字は区別されません 属性値の大文字・小文字も原則として区別されませんが、URL やファイル名は大文字・小 文字を区別するので注意が必要です 属性値は原則として二重引用符(”)または単一引用符（’）で囲みます
1.2.2 フォームを使う
フォーム(form)とは、ウェブページから情報を入力・選択し、サーバへデータを送信するチェ ックボックス、テキストボックス、ボタンなどの総称です。例えばテキストボックスに文字を入 力する事で掲示板に情報を書き込んだりすることができます。Web アンケートや注文フォーム などで多用されており、本授業の課題演習においても多く利用されるでしょう。 そこで、ここではフォームの機能について基本的なものに限定して、簡単な紹介を行います。 より詳細な使い方やこれ以外の機能については参考書籍・Webページを適時参照してください。 まずは今回解説するフォームを使ったHTMLソースと、その表示イメージを掲げます(図 1-6) 【HTML ソース】<form method=post action="cgi-bin/cgitest.cgi"> テキスト入力： <input type=text name="TEXT1" size=30> <p> パスワード入力： <input type=password name="PASSWD1" size=30> <p> 複数行入力：<BR>
<textarea name="TAREA1" cols=20 rows=3> </textarea>
<p>
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>
< form > 【入力フォームの宣言と送信方法等の指定】
< form＞・・・ < /form > は、この範囲が入力フォームであることを示しています。フォーム の形式を決める様々なタグは全てこの < form > ・・・ < /form > の中に記述していきます。
<form method=post action="cgi-bin/cgitest.cgi">
ここでは、「method」と「action」という２つの属性を使っていますが、フォーム内容をメール ソフトで読みたい場合には「enctype」の指定も重要です。 method 属性 入力されたデータ形式をどのような形で送信するかを指定します。通常、「get」と「post」の どちらかを指定してサーバ側で動作する CGI やサーブレット等のプログラムに送信します。 「get」ではリクエストする URL の文字列に送信するデータを追加してサーバに送りま す。 ”http://www.google.co.jp/search?hl=ja&q=hello&aq=f&aqi=g10&aql=&oq=&gs_rfai=” の ようにアドレスの後ろに「?」を付加し、その後パラメータの名前と値のペアを「&」で連結し た形式でデータをサーバに送信します。「post」ではウェブブラウザがサーバに送るリクエスト の中に送りたいデータを組み込んで送ります。サイズの大きなデータや、文字化けする可能性の ある日本語文字列などは「post」を使用する方が一般的です。 action 属性 実行(submit)ボタンを押した時に実行するアクションを指定します。action="mailto:～"とする とフォームの内容を～のアドレスにメール送信します。(ただし IE3.0 の場合は単にメールウィ ンドウを起動するだけ)action="～.cgi"とすると、～.cgi を CGI スクリプトとして実行します。 enctype 属性 スクリプトにデータを受け渡す際のエンコード方法を指定します。通常は省略して構いません が、"mailto:～"を使ってメールで受信したい場合には enctype="text/plain"（プレーンテキスト 形式）と指定することで、メールソフトでフォーム内容を読めるようになります。 < input type=text > 【１行の入力フィールド】 １行のデータを入力する時に用いられます。250 文字程度しか送信できないブラウザもあるの で、長い文章を入力させる場合にはtextarea を使います。
<input type=text name="TEXT1" size=30>
フォーム部品の名前を指定する属性です。この名前はCGI スクリプトなどに渡されて入力デー タを識別するのに用いられます。上記の例では「TEXT1」という名前が割り当てられています。 size 属性 入力フィールドの横幅を半角文字数で指定します。上記の例では半角 30 文字(全角では 15 文 字)の横幅を確保しています。 < input type=password > 【入力文字を表示させない】 パスワードやユーザ ID など入力した文字を画面に表示させたくない場合に用いられるフォー ムです。入力文字がアスタリスク( * )で表示されること以外は TYPE=text と同様の働きをしま す。
<input type=password name="PASSWD21" size=30>
name 属性 フォーム部品の名前を指定する属性です。この名前はCGI スクリプトなどに渡されて入力デー タを識別するのに用いられます。上記の例では「PASSWD1」という名前が割り当てられていま す。 size 属性 入力フィールドの横幅を半角文字数で指定します。上記の例では半角 30 文字(全角では 15 文 字)の横幅を確保しています。 < textarea > 【複数行の入力フィールド】 ２行以上の入力フィールドを作成するときに用いられます。cols 属性で横幅を、rows 属性で行 数を指定してフィールドの大きさを決めるので、この２つは必ず指定しなければなりません。
<textarea name="TAREA1" cols=20 rows=3> </textarea>
name 属性 フォーム部品の名前を指定する属性です。この名前はCGI スクリプトなどに渡されて入力デー タを識別するのに用いられます。上記の例では「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 > 【ラジオボタン】 丸いボタンを作成し、複数の選択肢の中からひとつを選択できるようにします。たとえば、ア ンケートで答えを一つだけ選んで欲しいときなどに利用されます。
<input type=radio name="RAD1" value="1" checked>キャベツ <input type=radio name="RAD1" value="2">ニンジン
<input type=radio name="RAD1" value="3">トマト
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」という名前が 割り当てられています。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.3 主な HTML タグ一覧
機能別によく使われる HTML タグを一覧形式でまとめました。属性の設定方法や具体的な記 述方法については、参考書籍あるいは参考Web ページを参照してください。 構造タグ（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 > テキストを、プレーンテキストで表示 文字に属性（フォントスタイル）を与える < 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 > ルビ関連のタグ未対応ブラウザへの対策 フォント（文字の飾り・属性)の設定 < 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 > 表の行をフッタ部として分類する リスト（箇条書き） < 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 を流す フォーム（入力フィールドの設計） < 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 > ・・・・・・
1.3 スタイルシート
ここではHTML4.01 で推奨されたスタイルシートについて簡単に触れておきます。前節のと おり、本文のhtml にあるような従来の記述でも問題ありませんが、できればこちらを使うこと ができるようになりましょう。1.3.1 スタイルシートとは
基本的な考え方スタイルシート(CSS: Cascading Style Sheet) は、Internet Explorer 3.0 以降、Netscape Navigator4.0 以降のブラウザが対応している新しい Web のデザイン方法です。これは、レイア ウトを別の場所に定義しておき、それを構造に対して適用するという考え方に基づいています。 簡単に言うと、「文章」と「論理」を別々のところで作成する考え方です。下の図を見てくださ い。下の図は、CSS の基本的な構造を示したものです。図にあるように、CSS は論理と文章を 別々に作ります。下の図でいうと、文字の大きさや書体などを論理で指定し、それを文章に当て はめるという形をとっています。すなわち、HTML には文章の構造や骨組みを、スタイルシー トには文章の細かいデザインの指定を書くということになるのです。 図 1-7 スタイルシートの概念 これにより、どういったメリットが生まれるのでしょうか。いったん定義したスタイルは、複 数の文書で共有できますから、全体のデザインに一貫性を持たせることができ、しかもメンテナ ンスがずっと容易になります。もともとHTML は文書の構造を指定するもので、文章の表示方 法についてはブラウザやユーザ設定に依存してきました。FONT タグなど、さまざまなタグが
追加されてHTML の表示能力は向上してきましたが、より細かく表示方法を指定できるものが スタイルシートなのです。（ここが重要！） スタイルシートを活用すれば、表示を発信者側の意図に合わせるようにコントロールすること が可能となり、また、ソースの変更を行わずに発信者の間でドキュメントスタイルを統一したり、 一つのホームページに対し様々なパターンのデザインを適用させたりすることができるのです。 HTML の流れとしては、今後は文書の論理構造については HTML のタグで、表示方法について はスタイルシートで指定するようになるでしょう。 さて、スタイルシートを使うと既存の HTML に比べて何が向上するか、ということを以下に まとめてみました。 フォント名、サイズ（ドット単位）を指定することができる 行の間隔を指定できる 罫線などにも色を付けることができる 一部の背景に画像を張り込むことができる マージンを指定できる タグごとにスタイルを設定することができる スタイルに名前をつけて指定することができる（これをクラスといいます）。 このようにスタイルシートを使うことで、今までは指定できなかったさまざまな表現を使うこ とができます。弱点としては、ブラウザによって表示が異なる可能性があることです。そのよう なユーザでも同じような視覚効果が得られるような工夫（ブラウザ別に条件分岐させる等）が必 要になります。 HTML でのスタイルシートの実現方法は一つに限定されておらず、自由に選ぶことが可能です が、一般にブラウザに実装されているのはCSS（Cascading Style Sheet）と呼ばれるものです。 これは、複数の場所で設定したスタイルを混合して利用（cascade）できるという特徴を持って います。
1.3.2 スタイルの指定方法
スタイルシートを記述する方法には、次の３つの方法があります。 １． < HEAD > 部分でスタイルを指定する方法 ２． HTML のタグの中に、直接スタイルを指定する方法 ３． HTML ファイル以外のファイルにスタイルを記述して、それを HTML からリンクする方 法 ここではそのうちの < HEAD > 部分でスタイルを指定する方法、について説明します。興味のある人は、他の二つの 方法について、各自で調べてください。 この方法は指定したいスタイルを、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;}これをわかりやすく説明すると、 < 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><HEAD> <TITLE>スタイルシート</TITLE> <STYLE type="text/css"> .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> <STYLE type="text/css"> P.sono1{color:navy;font-size:20pt;} </STYLE> </HEAD> <BODY> <P class="sono1">ここは、クラスが有効になります。</P> <DIV class="sono1">だけどここはゆうこうにはなりません。</DIV> </BODY> </HTML>
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:値; }}
る行ボックス内（行ボックスとは行の集合、例えば段落など）にある１行目の文字のインデント を指定できます。長さの単位はフォントサイズと同じ定義です。
文字の装飾 {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 の順番はどのようにしてもよく、どれを省略してもかまいま せん。
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>
1.5 iPhone向けホームページ
iPhone 版 Safari は W3C 標準の HTML タグ・属性に加えて、iPhone 固有の HTML 拡張属 性が使用できます。これはiPhone にはタッチパネルや文字入力支援機能などの PC にはない機 能があるためです。これらの機能を組み込めるようにHTML が拡張されました。 文字入力支援のための属性としては、autocapitalize 属性、autocorrect 属性、タッチパネル のイベントハンドラ属性としては、ontouchstart 属性、ongesturestart 属性等が挙げられます。 例えば、autocapitalize 属性の場合以下のようにタグに埋め込ませることで、フォームでテキ スト入力する際、文頭の文字を自動で大文字にするかどうかを指定できます。
<input type="text" name="login_id" size="16" autocapitalize="off"> （Safari Reference Library 参照）
1.6 課題１－１
本章で説明した技術を使って、自己紹介のホームページを作成しなさい。 その際に、以下の内容を必ず含めてください。オリジナルに内容を加えてもかまいません。200 字程度を想定していますが、多い分には問題ありません。既存ウェブページのコピーをしないよ うにしてください。 名前 出身高校 または 出身都道府県 興味のあること（趣味、サークル、政治、社会、環境など） 作成するページは、以下の仕様に従ったものにしてください。【仕様】
画像（写真・イラストなど）を2 枚以上貼りつけること 他のウェブページへのリンクを2 つ以上つけること。 TABLE タグをつかった表を 1 つ以上作ること 上記で紹介したＣＳＳの技術を少なくとも１つ用いること【合格基準】
内容が仕様をすべて満たしていること 提出期限が守られていること【提出方法】
Eclipse から、exercise/exercise1 のフォルダの中の exercise1-1.html を編集して、Fugu で guinness に転送してください。転送した後、作成したホームページへのリンクの含まれるアド レス (http://guinness.is.k.u-tokyo.ac.jp/2010/g700000/index.html)を CFIVE の解答欄に記入 して提出してください
本講義では、Eclipseというソフトウェアを用いてアプリケーション開発を行っていきます。 開発環境のセットアップや提出方法などは、巻末の付録A 開発環境 を参照してください。
1.7 課題１－２
課題１－１で作成したホームページから、画像やスタイルシート部分等を修正・削除し、携帯 電話で閲覧可能なホームページを作成しなさい。【仕様】
携帯電話から閲覧できること【合格基準】
内容が仕様をすべて満たしていること 提出期限が守られていること【提出方法】
Eclipse から、exercise/exercise1 のフォルダの中の exercise1-2.html を編集して、Fugu で guinness に転送してください。転送した後、作成したホームページへのリンクの含まれるアド レス(http://guinness.is.k.u-tokyo.ac.jp/2010/g700000/index.html)を CFIVE の解答欄に記入し て提出してください
【ヒント】
画像ファイル等を同じディレクトリに置くこと、アドレスの場合は大文字と小文字が区別され ることなどに注意してください。第
2章 Servlet
2.1 サーブレットとは
サーブレットとは「サーバ上で動作するjava プログラム」です。サーブレットはクライアン トから送られてきたリクエストを処理し、その処理結果をHTML 形式でクライアントに返しま す。当然、クライアントのウェブブラウザから送られてくるリクエストをJava のプログラムに 渡す仕組みが必要になりますが、こうした役割はサーブレットコンテナというサーブレットの実 行環境が提供します。 図 2-1 サーブレットの仕組み 実際にサーバ上でサーブレットプログラムを動かすには、開発用のパソコンでサーブレットの ソースコードを記述・編集し、完成したサーブレットをサーバに転送してから行います。転送さ れたサーブレットプログラム(class ファイル)は、サーバに転送しただけでは動作していないた め、サーブレットコンテナに読み込む処理を行います。初めてサーブレットプログラムを起動す るときはstart 処理を、すでに稼働中のサーブレットプログラムを更新した場合には reload 処 理を行います。具体的には後述のサーブレット管理用のアドレスにアクセスするとサーブレット コンテナが処理を行います。2.2 サーブレットの特徴
プラットフォームを選ばない
サーブレットは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 インタフェースを何らかの方法で実 装し、サーブレットコンテナにロードされて動作するものがサーブレットです。
図 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.*; 67 public class HelloWorld extends HttpServlet { 8 public void doGet(HttpServletRequest request,
9 HttpServletResponse response)
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 命令を記述します。 1 package jp.ac.u_tokyo.k.is.chapter2; package 命令は、サーブレットクラスを再利用の単位にグルーピングしたい場合などに用いま す。一定規模以上のアプリケーションでは、同一のクラス名が使われても区別できるように、こ のパッケージという概念を用います。 3～5 行目で、import 命令としてパッケージをインポートしています。 3 import java.io.*; 4 import javax.servlet.*; 5 import javax.servlet.http.*; サーブレットクラスには3 つのパッケージが必要であり、import 命令としてコードの先頭に記 述する必要があります。 必ずインポートしておかなければならないパッケージは、 java.io パッケージ javax.servlet パッケージ javax.http.servlet パッケージ
の３つです。
もちろん、そのほかに必要なパッケージ（クラス）が存在する場合には、適宜、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 メソッド
