ウェブアプリケーション

Size: px

Start display at page:

Download "ウェブアプリケーション"

さゆりしろみず
7 years ago
Views:

1 平成 22 年度版ウェブアプリケーション入門東京大学工学部システム創成学科知能社会システムコースプログラミング基礎 D( 後半 )

3 目次第 1 章 HTML HTML 入門基本的なHTML 文書基本的なホームページバックグラウンドの設定と文字の装飾画像表示とリンクの作成表の作成 HTML 入門補足資料エレメントタグ属性エレメント(element: タグ(tag)...12 属性 (attributes:... アトリビュート)と要素 )...12 属性値 } フォームを使う textarea form > type=text type=passwor type=radio type=checkbox > 入力複フォームの数 > 行ラジオボタン...17 の入チェックボタン...17 力宣フィールド...16 言と文送字信を方表法示等させない...16 の指...15 定...15 select type=submit > プルダウン > d < input type=reset > リセットボタン 1 形 > 行送式ののメニュー入力信主なHTMLタグ一覧スタイルシートスタイルシートとは基本的な考え方スタイルの指定方法スタイルシートの書式クラスやIDの指定スタイルシート属性一覧携帯向けホームページ iphone 向けホームページ課題課題第 2 章 Servlet サーブレットとはサーブレットの特徴 CGIとの共通点相違点サーブレットのプログラム例 Hello, World! HelloWorld.java アプリケーションの...37 実行フォームによる入出力 nameform.html Nameform.java 前回アクセス時刻表示 testcookie.html...43 testcookie.java 課題第 3 章 XMLとRSS XMLとは... 47

.. 13 textarea form > type=text type=passwor type=radio type=checkbox > 入力複フォームの数 > 行ラジオボタン...17 の入チェックボタン...17 力宣フィールド...16 言と文送字信を方表法示等させない...16 の指...15 定.

4 3.1.1 XMLの特徴 XML 文書の構成名タグの前空間例接...49 頭辞の定義例 XMLの基本文法 DTD XML コメントの要宣...49 素言の部記...49 述 JavaでのXMLの入出力 grade.xml...50 GradeXMLReader.java GradeXMLWriter.java RSSとは RSSの種類メタデータとRDF RSSの仕様 RSSリーダとはサーバサイドRSSリーダの作成サーバサイドRSSリーダ概要利用するRSSフィードサーバサイドRSSリーダのコード課題さらに高度な課題外部 XMLファイルからURLを取得するRSSリーダのコード参考 Webサイト第 4 章 Webサービス Javascript Google API 課題参考付録 A 開発環境 A.1 開発環境のセットアップ A.1.1 ワークスペースのコピー A.1.2 eclipseの起動 A.2 ウェブアプリケーションの開発 A.2.1 guinnessへの転送 A.2.2 ウェブアプリケーションの再起動 A.2.3 Webアプリケーションへのアクセス A.2.4 新しいサーブレットの登録... 85

.. 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.

5 1 第 1 章 HTML 1.1 HTML 入門基本的な HTML 文書 HTML は HyperText Markup Language の略で SGML( Standard Generalized Markup Language )の書式を踏襲したマークアップ言語の1つでありインターネット上のドキュメントを記述するための言語です HTMLファイルは開始タグと終了タグを使って定義される要素 (element) および要素に対して定義される属性 (attribute) により構造化されます HTML 文書中の< > 内にタグの名前を書くことでタグとして認識され終了タグは / (スラッシュ) で始まります <BR>や<HR>などタグによっては開始タグのみで終了タグを持たないものもありますまた定義した要素の開始タグの中で属性を定義することができます具体的にはタグは < 要素名属性名 = 属性の値 >と記述します図 1-1に HTML 文書の基本的な構成を示しますこの例では HTML HEAD BODY BRという4つの要素が定義されていますこれらのうち改行を示すBR 要素は開始タグのみが存在し終了タグはありませんホームページの本体部分を示すBODY 要素にはbgcolor 属性という背景色を指定するための属性が定義されておりその値は red となっていますこのようにタグを使って要素や属性を定義することで構造化されたウェブページを作成します完成した HTML 文書は拡張子を.htm または.html として保存しますファイル名には漢字カナ平仮名といった日本語は使わず英数字によるファイル名をつけます作成された HTML 文書を表示するためのソフトウェアが Internet Explorer や Firefox 等のウェブブラウザです HTML 文書 <HTML> <HEAD> ここにヘッダ情報を書く </HEAD> <BODY bgcolor= red"> ここに本文を書く<BR> ここに本文の2 行目を書く </BODY> </HTML> 要素 HTMLの開始タグ要素 HEADの開始タグ要素 HEADの終了タグ要素 BODYの開始タグ bgcolor 属性の定義要素 BRの開始タグ( 終了タグは省略 ) 要素 BODYの終了タグ要素 HTMLの終了タグ図 1-1 HTML の基本構成この HTML 入門ではいくつかの HTML タグを使って簡単な自己紹介のページを作成することを目標に説明を行っていきます

<BR>や<HR>などタグによっては開始タグのみで終了タグを持たないものもありますまた定義した要素の開始タグの中で属性を定義することができます具体的にはタグは < 要素名属性名 = 属性の値 >と記述します図 1-1に HTML 文書の基本的な構成を示しますこの例では HTML

6 第 1 章 HTML 基本的なホームページここでは基本的なHTMLタグを利用したホームページの作り方を説明します HTMLタグの一覧は1.2.3を参照して下さいまずタグを使って要素を定義していくことになりますが要素名を記述する際にアルファベットは大文字も小文字も同じものとして認識されます < HTML > と書いても < html > と書いても同じように扱われます前述のように定義した要素について属性を定義することでより詳細な設定が可能になります属性は開始タグの中に属性名 =" 属性値 "のように書いていきます属性値は引用符ダブルクォーテーション( )あるいはシングルクォーテーション( )で囲んで設定しますまた属性は開始タグの中に空白で区切って何組でも順不同で記述できますでは実際の HTML のサンプルを作成しますこの授業では自己紹介のページを作るのが最終目標ですからとりあえず名前と所属年齢生年月日血液型出身地趣味を書いたホームページを作成します HTML ドキュメント <HTML> <HEAD> <TITLE>システム創成太郎の自己紹介 </TITLE> </HEAD> <BODY> システム創成太郎のホームページへようこそ!<BR> <BR> 氏名システム創成太郎 (しすてむそうせいたろう)<BR> 所属東京大学工学部システム創成学科知能社会システムコース 2 年 <BR> 生年月日 1989 年 4 月 1 日 <BR> 血液型 O 型 <BR> 出身地東京都 <BR> 出身校灘高等学校 <BR> 趣味スノーボード<BR> </BODY> </HTML>

7 3 表示結果図 1-2 表示例ではそれぞれの HTML タグについて簡単に説明を行っていきます < HTML > このドキュメントが HTML であることを宣言するためのタグで必ず用いますまた HTML ドキュメントの最後には < /HTML > と記述してタグを閉めましょう < HEAD > このタグで囲まれた部分は見出し部分であることを示しタイトルやドキュメントの付加的情報を記述していきますこの見出し部分に書かれた内容はタイトルなどの一部を除き通常は表示されません < TITLE > < HEAD > タグの間で用いるタグでそのページのタイトルを表しますこのタイトルはウェブブラウザで見たときタイトルバーにその内容が表示されます上の例ではシステム創成太郎の自己紹介の自己紹介というのがタイトルになります < BODY > このタグで囲まれた部分が本体部となりますウェブブラウザで表示されるのはこの <BODY> で囲まれた部分となります上記の例ではシステム創成太郎のホームページへようこそ! 以下の内容が表示されることになります

されません < TITLE > < HEAD > タグの間で用いるタグでそのページのタイトルを表しますこのタイトルはウェブブラウザで見たときタイトルバーにその内容が表示されます上の例ではシステム創成太郎の自己紹介の自己紹介

8 第 1 章 HTML 4 < BR > これはテキストを改行したいときに使いますたとえドキュメント内で改行されていても < BR > タグで改行を指定しなければウェブブラウザでの表示に反映されませんなおこのタグは開始タグである < BR > 単独で要素であり改行機能を果たしますので終了タグ </BR> はありませんまた何も書かずに < BR > を入れると一行分のスペースが空くことになりますバックグラウンドの設定と文字の装飾次に属性を利用したバックグラウンド色の設定や文字を装飾するための要素の導入を行います 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> 東京大学工学部システム創成学科知能社会システムコース 2 年 <BR> <FONT color="#008000"> 生年月日 </FONT> 1989 年 4 月 1 日 <BR> <FONT color="#008000"> 血液型 </FONT> O 型 <BR> <FONT color="#008000"> 出身地 </FONT> 東京都 <BR> <FONT color="#008000"> 出身校 </FONT>

1.3 バックグラウンドの設定と文字の装飾次に属性を利用したバックグラウンド色の設定や文字を装飾するための要素の導入を行います HTML ドキュメント <HTML> <HEAD> <TITLE>システム創成太郎の自己紹介 </TITLE> </HEAD> <BODY bgcolor="#e9ffd9">

9 5 灘高等学校 <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 の7 段階があり 1 が最も小さいサイズで 7 が最も大きいサイズになります何も指定しない場合には 3 になります < FONT color > は文字の色を指定します指定する場合は""の中に色名または色指定値 ( #RRGGBB 形式 )を書き込みますなお元のサイズ元の色に戻したい時には < /FONT > としてタグを閉じます < CENTER >

BODY bgcolor=" #008000" > のように指定します < FONT > 文字のサイズや色を変えたい場合に使う HTML タグです < FONT size= 5 > は文字のサイズを指定します文字のサイズは 1~7 の7 段階があり 1 が最も小さいサイズで 7 が最も大きいサイズになります

10 第 1 章 HTML 6 テキストや画像などのイメージを中心に置きたいときに利用するタグ同様にセンタリングや右寄せなどテキストの位置を指定したい時に利用するタグとして < div align > というタグもありますどのように使うのか調べてみましょう < B> 文字を太字にするときに使うタグこのほかにも文字を修飾するタグとしては < I > < S > < TT > < U > < SUP > < SUB > < BIG > < SMALL > < STRONG > などがあります画像表示とリンクの作成次にページに画像を表示する方法と他のウェブページへのリンクを作成する方法について説明します画像は開始タグ < IMG > の src 属性で指定します HTML で利用する画像は通常 JPEG GIF PNG の三種類のフォーマットが利用されますデジカメやスキャナで読みこんだ静止画像はこの3 種類のいずれかのフォーマットで保存しますまたインターネット上には無料かつ著作権フリーで使える写真アイコンなどを提供しているサイトがありますこのようなサイトから自分の好きな素材や画像をダウンロードして利用する場合には利用条件などをよく読んでマナー違反のないように留意する必要があります他のページへのリンクは < 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>

1.4 画像表示とリンクの作成次にページに画像を表示する方法と他のウェブページへのリンクを作成する方法について説明します画像は開始タグ < IMG > の src 属性で指定します HTML で利用する画像は通常 JPEG GIF PNG の三種類のフォーマットが利用されます

11 7 <FONT color="#008000"> 所属 </FONT> 東京大学工学部システム創成学科知能社会システムコース 2 年 <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=" 創成学科 </A> </BODY> </HTML>

</FONT> 東京都 <BR> <FONT color="#008000"> 出身校 </FONT> 灘高等学校 <BR> <FONT color="#008000"> 趣味 </FONT>

12 第 1 章 HTML 8 図 1-4 表示例 < A href="url" > テキストやイメージにリンクを設定するタグですこのタグで囲まれたものをクリックするとリンクを張られたファイルにジャンプしますこのときリンク先のアドレスは href 属性で指定します < IMG src="ファイル名 " > 画像を表示するときに用いられるタグです表示する画像ファイルは src 属性で指定します違うディレクトリにある画像インターネット上の画像を直接指定することもできますここでは HTML ファイルと同じディレクトリに保存されている aso.jpg というファイルの表示を想定しています wide 属性と height 属性など画像のサイズを指定する属性を設定することもできます wide 属性が横幅を height 属性は縦幅を表します < HR > 横罫線を表示するためのタグです width 属性で横罫線の長さを画面の横幅比に対する割合で指定していますこの例では画面の横幅比で 100 %の長さで横罫線を引いています

13 表の作成ここではテーブル機能を用いてプロフィールを表形式に変更します 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> 東京大学工学部システム創成学科知能社会システムコース 2 年 </TD> </TR> <TR> <TD> 生年月日 </TD> <TD>1989 年 4 月 1 日 </TD> </TR> <TR> <TD> 血液型 </TD> <TD>O 型 </TD> </TR> <TR> <TD> 出身地 </TD> <TD> 東京都 </TD>

<BR> </CENTER> </FONT> <BR> <TABLE border="1" width="80%"> <TR> <TD> 氏名 </TD> <TD>システム創成太郎 (しすてむそうせいたろう)</TD> </TR> <TR> <TD> 所属

14 第 1 章 HTML 10 </TR> <TR> <TD> 出身校 </TD> <TD> 灘高等学校 </TD> </TR> <TR> <TD> 趣味 </TD> <TD>スノーボード</TD> </TR> </TABLE> <BR> <CENTER> <IMG src="aso.jpg"> </CENTER> <HR> <A href=" 創成学科 </A> </BODY> </HTML>

15 11 図 1-5 表示例 < TABLE > 表組の開始を宣言するタグですこのタグだけでは表は作成できませんセルを表す<TD > タグや行を表す < TR> タグを入れ子にしてはじめて表が作成されます < TABLE > に枠をつけるには border 属性で指定します border 属性の属性値で枠の太さを設定しますまた width 属性や height 属性を追加すると表のサイズを調整する事が可能になりますこの例では表の横幅をウインドウサイズの 80 %となるよう指定しています < TR > と < TD > < TR > で行を < TD > で列 (セル)を作りますこの例では 1 行に2 列 ( 年代とできごと )が入りますので < TR > < TD > 列 1 < /TD > < TD > 列 2 < /TD > < /TR > というように記述していきますもし行の中に列が1つしか存在しない場合でも < TD > は必要ですまた < TD > 内において align 属性や valign 属性を指定することでテキストの位置を bgcolor 属性でセルのバックグラウンド( 背景 )の色の指定などが行えます

TR > と < TD > < TR > で行を < TD > で列 (セル)を作りますこの例では 1 行に2 列 ( 年代とできごと )が入りますので < TR > < TD > 列 1 < /TD > < TD > 列 2 < /TD > < /TR > というように記述していきます

16 第 1 章 HTML HTML 入門補足資料エレメントタグ属性 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">

して指定するのが属性と属性の値です以下では要素タグ属性のそれぞれについて見ていきますエレメント(element: 要素 ) HTML ドキュメントを構成するタイトルや見出し段落リストテーブルリンクなどの要素をエレメント( 要素 ) と呼ぶ例えば大見出しエレメント( 要素 )は次のように定義

17 13 属性名 1 属性値 1 属性名 2 属性値 2 属性名と属性値の書き方のポイントは以下のとおりです属性名 =" 属性値 " のように書いていきます属性は開始タグの中に空白で区切って何組でも順不同で記述できます属性名の大文字小文字は区別されません属性値の大文字小文字も原則として区別されませんが URL やファイル名は大文字小文字を区別するので注意が必要です属性値は原則として二重引用符 ( )または単一引用符 ( )で囲みますフォームを使うフォーム(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> <input type=checkbox

2 フォームを使うフォーム(form)とはウェブページから情報を入力選択しサーバへデータを送信するチェックボックステキストボックスボタンなどの総称です例えばテキストボックスに文字を入力する事で掲示板に情報を書き込んだりすることができます Web アンケートや注文フォームなどで多用されており本授

18 第 1 章 HTML 14 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" > 選択肢その1 <option value="no2" > 選択肢その2 <option value="no3" > 選択肢その3 <option value="no4" > 選択肢その4 </select> <p> <input type=submit value=" 実行 "> <input type=reset value=" 取消 "> </form> 図 1-6 ブラウザでの表示例

name="rad1" value="3">トマト <p> <select name="select1"> <option value="no1" > 選択肢その1 <option value="no2" > 選択肢その2 <option value="no3" >

19 15 < form > 入力フォームの宣言と送信方法等の指定 < form> < /form > はこの範囲が入力フォームであることを示していますフォームの形式を決める様々なタグは全てこの < form > < /form > の中に記述していきます <form method=post action="cgi-bin/cgitest.cgi"> ここでは method と action という2つの属性を使っていますがフォーム内容をメールソフトで読みたい場合には enctype の指定も重要です method 属性入力されたデータ形式をどのような形で送信するかを指定します通常 get と post のどちらかを指定してサーバ側で動作する CGI やサーブレット等のプログラムに送信します get ではリクエストする URL の文字列に送信するデータを追加してサーバに送りますのようにアドレスの後ろに? を付加しその後パラメータの名前と値のペアを & で連結した形式でデータをサーバに送信します post ではウェブブラウザがサーバに送るリクエストの中に送りたいデータを組み込んで送りますサイズの大きなデータや文字化けする可能性のある日本語文字列などは post を使用する方が一般的です action 属性実行 (submit)ボタンを押した時に実行するアクションを指定します action="mailto:~"とするとフォームの内容を~のアドレスにメール送信します (ただし IE3.0 の場合は単にメールウィンドウを起動するだけ)action="~.cgi"とすると ~.cgi を CGI スクリプトとして実行します enctype 属性スクリプトにデータを受け渡す際のエンコード方法を指定します通常は省略して構いませんが "mailto:~"を使ってメールで受信したい場合には enctype="text/plain"(プレーンテキスト形式 )と指定することでメールソフトでフォーム内容を読めるようになります < input type=text > 1 行の入力フィールド 1 行のデータを入力する時に用いられます 250 文字程度しか送信できないブラウザもあるので長い文章を入力させる場合には textarea を使います <input type=text name="text1" size=30> name 属性

cgi"> ここでは method と action という2つの属性を使っていますがフォーム内容をメールソフトで読みたい場合には enctype の指定も重要です method 属性入力されたデータ形式をどのような形で送信するかを指定します通常 get と post のどちらかを指定してサーバ側で動作

20 第 1 章 HTML 16 フォーム部品の名前を指定する属性ですこの名前は 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 > 複数行の入力フィールド 2 行以上の入力フィールドを作成するときに用いられます cols 属性で横幅を rows 属性で行数を指定してフィールドの大きさを決めるのでこの2つは必ず指定しなければなりません <textarea name="tarea1" cols=20 rows=3> </textarea> name 属性フォーム部品の名前を指定する属性ですこの名前は CGI スクリプトなどに渡されて入力データを識別するのに用いられます上記の例では TAREA1 という名前が割り当てられています cols 属性横幅 (1 行に表示される半角文字数 )を指定します上記の例では1 行に半角 20 文字 ( 全角では

TYPE=text と同様の働きをします <input type=password name="passwd21" size=30> name 属性フォーム部品の名前を指定する属性ですこの名前は CGI スクリプトなどに渡されて入力データを識別するのに用いられます上記の例では PASSWD1 という名前が割

21 17 10 文字 )の表示が行えます rows 属性行数を指定します上記の例では3 行分のスペースを確保しています < 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">トマト < input type=radio > ラジオボタン

22 第 1 章 HTML 18 name 属性ラジオボタンの名前を指定する属性です上記の例では RAD1 という名前が割り当てられていますまたタグに続けて文字を入力するとチェックボタンの横にその文字が表示されますなおこの値が同じボタンは同一のグループとして扱われます同一グループでは一つの項目しか選択できないようになっています value 属性データが送信された時に選択された項目が何であるかを判別するための値です上記の例ではキャベツが選択されたときは 1 ニンジンが選択されたときは 2 トマトが選択されたときは 3 をデータとして送信するように設定しています checked 属性この属性のついているボタンが予め選択された状態で表示されます上記の例ではキャベツが選択された状態になっています < select > プルダウン形式のメニューアンケートなどでプルダウン型のメニューの作成に用いられます表示スペースが限られている時や選択肢の数が多い時などに利用されています <select name="select1"> <option value="no1" > 選択肢その1 <option value="no2" > 選択肢その2 <option value="no3" > 選択肢その3 <option value="no4" > 選択肢その4 </select> name 属性プルダウンメニューの名前を指定する属性である上記の例では SELECT1 という名前が割り当てられています name 属性は select タグの属性として設定しましょう option タグプルダウンメニューに表示される選択肢を列挙するためのタグです option タグで挟まれたテキストがそれぞれメニューに表示される項目となります value 属性

23 19 データが送信された時に選択された項目が何であるかを判別するための値です上記の例では選択肢その1 が選択されたときは No1 選択肢その2 が選択されたときは No2 選択肢その3 が選択されたときは No3 選択肢その4 が選択されたときは No4 をデータとして送信するように設定しています < input type=submit > 送信ボタンフォームの内容を送信するためのボタンです <input type=submit value=" 実行 "> value 属性ボタンに表示するテキスト(ラベル)を設定します上記の例では実行と表示させています < input type=reset > リセットボタンフォーム内容を初期状態に戻すためのボタンですリセットボタンを押すとユーザが入力した情報内容やチェックした項目が取り消されます <input type=reset value=" 取消 "> value 属性ボタンに表示するテキスト(ラベル)を設定します上記の例では取消と表示させています主な HTML タグ一覧機能別によく使われる HTML タグを一覧形式でまとめました属性の設定方法や具体的な記述方法については参考書籍あるいは参考 Web ページを参照してください構造タグ(HTML 文書の構造属性の指定 ) <HTML> </HTML> <HEAD> </HEAD> <!DOCTYPE HTML PUBLIC > <TITLE> </TITLE> <META> </META> <BODY> </BODY> <ISINDEX> テキストが HTML であることを示す HTML の属性機能を表示する使用した HTML のバージョン情報を指定 HTML 文書のタイトルを示す HTML 文書の情報を指定リロード文書時間を指定ドキュメントの指定キーワード検索のための一行文字列入力フィールドを作成する

24 第 1 章 HTML 20 レイアウト( 文書の構造飾り) < 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 > 頭文字を記述する

25 21 < 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 > 表のセルを設定

26 第 1 章 HTML 22 < TH > < /TH > セルをヘッダ( 見出し) 記述部に指定 < COL >, < COLGROUP > 表の複数列を構造ごとにまとめグループ化する < TBODY > < /TBODY > 表の行をボディ部として分類する < THEAD > < /THEAD > 表の行をヘッダ部として分類する < TFOOT > < /TFOOT > 表の行をフッタ部として分類するリスト( 箇条書き) < LI > 文字列を箇条書きに表示する < UL > < /UL > < LI > で指定された項目を記しつきで表示しグループ化する < OL > < /OL > < LI > で指定された項目を番号付きで表示しグループ化する定義を説明したい文字列 ( 項目 )を箇条書きさ < DT > せる DL タグ内でインデントさせ < DT > で書か < DD > れた内容 ( 項目 )の定義を説明表示させる < 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" > 複数回答可能な選択フィールド(チェックボッ

27 23 < /INPUT > クス)を設計 < INPUT TYPE="hidden" > < /INPUT > 隠しフィールドを設計 < INPUT TYPE="image" > < /INPUT > クリックした座標の取得が可能なイメージの設計表示 < INPUT TYPE="password" > < /INPUT > 文字列を * に置き換えて表示する1 行分のテキストフィールドを設計 < INPUT TYPE="radio" > < /INPUT > 単数回答型の選択フィールド(ラジオボタン) を設計 < INPUT TYPE="reset" > < /INPUT > 同一フォーム内の全ての入力フィールドに入力された値を消去 < INPUT TYPE="text" > < /INPUT > 1 行分の文字列を入力するフィールドを設計 < SELECT > < /SELECT > プルダウン形式のメニューの選択欄を設計 < TEXTAREA > < /TEXTAREA > 複数行の文字列を入力するフィールドを設計 < OPTION > 選択フィールドの選択肢フレーム(1ウィンドウに複数の HTML を表示 ) < FRAMESET > < /FRAMESET > 画面を分割し各フレームをグループ化する画面を分割したうち1つのフレームに何をど < FRAME > のように表示するのかを設定 < IFRAME > < /IFRAME > フローティングフレームを設計フレーム(1ウィンドウに複数の HTML を表示 ) < NOFRAMES > < /NOFRAME > フレーム機能がサポートされていないブラウザへの対策 < NOEMBED > < /NOEMBED > EMBED タグがサポートされていないブラウザへの対策 < NOSCRIPT > < /NOSCRIPT > Script がサポートされていないブラウザへの対策 <!-- -- >, < COMMENT > < /COMMENT > コメントを記述するための手段

28 第 1 章 HTML スタイルシートここでは HTML4.01 で推奨されたスタイルシートについて簡単に触れておきます前節のとおり本文の html にあるような従来の記述でも問題ありませんができればこちらを使うことができるようになりましょうスタイルシートとは基本的な考え方スタイルシート(CSS: Cascading Style Sheet) は Internet Explorer 3.0 以降 Netscape Navigator4.0 以降のブラウザが対応している新しい Web のデザイン方法ですこれはレイアウトを別の場所に定義しておきそれを構造に対して適用するという考え方に基づいています簡単に言うと文章と論理を別々のところで作成する考え方です下の図を見てください下の図は CSS の基本的な構造を示したものです図にあるように CSS は論理と文章を別々に作ります下の図でいうと文字の大きさや書体などを論理で指定しそれを文章に当てはめるという形をとっていますすなわち HTML には文章の構造や骨組みをスタイルシートには文章の細かいデザインの指定を書くということになるのです図 1-7 スタイルシートの概念これによりどういったメリットが生まれるのでしょうかいったん定義したスタイルは複数の文書で共有できますから全体のデザインに一貫性を持たせることができしかもメンテナンスがずっと容易になりますもともと HTML は文書の構造を指定するもので文章の表示方法についてはブラウザやユーザ設定に依存してきました FONT タグなどさまざまなタグが

29 25 追加されて HTML の表示能力は向上してきましたがより細かく表示方法を指定できるものがスタイルシートなのです (ここが重要!) スタイルシートを活用すれば表示を発信者側の意図に合わせるようにコントロールすることが可能となりまたソースの変更を行わずに発信者の間でドキュメントスタイルを統一したり一つのホームページに対し様々なパターンのデザインを適用させたりすることができるのです HTML の流れとしては今後は文書の論理構造については HTML のタグで表示方法についてはスタイルシートで指定するようになるでしょうさてスタイルシートを使うと既存の HTML に比べて何が向上するかということを以下にまとめてみましたフォント名サイズ(ドット単位 )を指定することができる行の間隔を指定できる罫線などにも色を付けることができる一部の背景に画像を張り込むことができるマージンを指定できるタグごとにスタイルを設定することができるスタイルに名前をつけて指定することができる(これをクラスといいます) このようにスタイルシートを使うことで今までは指定できなかったさまざまな表現を使うことができます弱点としてはブラウザによって表示が異なる可能性があることですそのようなユーザでも同じような視覚効果が得られるような工夫 (ブラウザ別に条件分岐させる等 )が必要になります HTML でのスタイルシートの実現方法は一つに限定されておらず自由に選ぶことが可能ですが一般にブラウザに実装されているのは CSS(Cascading Style Sheet)と呼ばれるものですこれは複数の場所で設定したスタイルを混合して利用 (cascade)できるという特徴を持っていますスタイルの指定方法スタイルシートを記述する方法には次の3つの方法があります 1. < HEAD > 部分でスタイルを指定する方法 2. HTML のタグの中に直接スタイルを指定する方法 3. HTML ファイル以外のファイルにスタイルを記述してそれを HTML からリンクする方法ここではそのうちの < HEAD > 部分でスタイルを指定する方法について説明します興味

30 第 1 章 HTML 26 のある人は他の二つの方法について各自で調べてくださいこの方法は指定したいスタイルを 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 > タグすべてにスタイルが適用されますスタイルシートの書式スタイルシートにはさまざまな属性が用意されていますこの属性は HTML のタグに対してどのような効果を与えるかを指定するものです例えば段落をあらわす < P > タグにおいてこのタグに囲まれたテキストの色を赤に指定するときは次のようになります P{color:red;}

31 27 これをわかりやすく説明すると < P > タグのテキストの色 (color)は(:) 赤 (red)ということです一般的には書式をまとめると次のようになりますセレクタ{ 属性 : 値 ;} セレクタにはスタイルの設定対象となるタグやクラス名が入りますそして属性と値は: で区切り値の後ろは ;をつけますまたスタイルシートはさまざまな属性を一度に指定できますその場合は次のように複数の属性を続けて記述しますセレクタ{ 属性 : 値 ; 属性 : 値 ; 同様に同じスタイルを複数のタグに適用することもできセレクタでタグを, で区切り指定します例えば < P > タグと < H1 > タグ < TD > タグで同じスタイルを適用するような場合は次のように記述します P,H1,TD{color:red;} クラスや ID の指定スタイルシートでは特定の要素 (タグ)に対してスタイルを指定できますが特定の要素全般への指定だけでなくあらかじめ ID やクラス名を指定してスタイルを定義しておきそれを指定した要素だけにスタイルを適用させることができます ID 属性やクラス名属性でスタイルを定義する場合は < HEAD > タグ内の < STYLE type="text/css" > ~ < /STYLE > の中に次のように記述します #ID 名 {スタイル}.クラス名 {スタイル} 実際に ID 属性やクラス名属性でスタイルを定義した場合の HTML ファイルは次のようになります <HTML>

32 第 1 章 HTML 28 <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>

33 スタイルシート属性一覧色 {color: 値 ; } 色は 16 色の名前でつけられます実際にはモニタの解像度に依存しますが以下の 16 色を値として指定できます aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow また # などの 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 とは前もって設定されている 1 文字の長さを基本とするサイズ ex とは関連フォントの x-height の値に従うサイズ (ちなみにフォントの x-height とはあらかじめ定められている基準フォントの高さです英語ならば小文字の x の高さが x-height の高さ) px とはモニタの解像度を参考にして決まるサイズですフォントの太さ {font-weight: 値 ; } などの数字の他 normal(=400) bold(=700)などが指定でます余白の設定 {margin: 値 ; } margin-top で上の余白部分を設定できます同様に margin-bottom で下を margin-left で左を margin-right で右を指定できます長さの単位はフォントサイズと同じ定義です文字の位置 {text-align: 値 ; } 値として左揃えの left 右揃えの right 中心揃えの center 両端揃えの justfy を指定できますインデント {text-indent: 値 ; }} インデントとは 1 行目の頭下げのことですこの頭下げの幅を設定することができますあ

34 第 1 章 HTML 30 る行ボックス内 ( 行ボックスとは行の集合例えば段落など)にある1 行目の文字のインデントを指定できます長さの単位はフォントサイズと同じ定義です文字の装飾 {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: 値 ; }

35 31 UL や OL 要素といった項目リストについて数え方を変更できます指定できる値は何も表示しない none 箇条書き用の disc circle square と数える 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>

36 第 1 章 HTML 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 課題 1-1 本章で説明した技術を使って自己紹介のホームページを作成しなさいその際に以下の内容を必ず含めてくださいオリジナルに内容を加えてもかまいません 200 字程度を想定していますが多い分には問題ありません既存ウェブページのコピーをしないようにしてください名前出身高校または出身都道府県興味のあること( 趣味サークル政治社会環境など) 作成するページは以下の仕様に従ったものにしてください仕様画像 ( 写真イラストなど)を 2 枚以上貼りつけること他のウェブページへのリンクを 2 つ以上つけること TABLE タグをつかった表を 1 つ以上作ること上記で紹介したCSSの技術を少なくとも1つ用いること合格基準内容が仕様をすべて満たしていること提出期限が守られていること提出方法 Eclipse から exercise/exercise1 のフォルダの中の exercise1-1.html を編集して Fugu で guinness に転送してください転送した後作成したホームページへのリンクの含まれるアドレス ( CFIVE の解答欄に記入して提出してください

37 33 本講義では Eclipseというソフトウェアを用いてアプリケーション開発を行っていきます開発環境のセットアップや提出方法などは巻末の付録 A 開発環境を参照してください 1.7 課題 1-2 課題 1-1で作成したホームページから画像やスタイルシート部分等を修正削除し携帯電話で閲覧可能なホームページを作成しなさい仕様携帯電話から閲覧できること合格基準内容が仕様をすべて満たしていること提出期限が守られていること提出方法 Eclipse から exercise/exercise1 のフォルダの中の exercise1-2.html を編集して Fugu で guinness に転送してください転送した後作成したホームページへのリンクの含まれるアドレス( CFIVE の解答欄に記入して提出してくださいヒント画像ファイル等を同じディレクトリに置くことアドレスの場合は大文字と小文字が区別されることなどに注意してください

38 第 1 章 HTML 34

39 35 第 2 章 Servlet 2.1 サーブレットとはサーブレットとはサーバ上で動作する java プログラムですサーブレットはクライアントから送られてきたリクエストを処理しその処理結果を HTML 形式でクライアントに返します当然クライアントのウェブブラウザから送られてくるリクエストを Java のプログラムに渡す仕組みが必要になりますがこうした役割はサーブレットコンテナというサーブレットの実行環境が提供します図 2-1 サーブレットの仕組み実際にサーバ上でサーブレットプログラムを動かすには開発用のパソコンでサーブレットのソースコードを記述編集し完成したサーブレットをサーバに転送してから行います転送されたサーブレットプログラム(class ファイル)はサーバに転送しただけでは動作していないためサーブレットコンテナに読み込む処理を行います初めてサーブレットプログラムを起動するときは start 処理をすでに稼働中のサーブレットプログラムを更新した場合には reload 処理を行います具体的には後述のサーブレット管理用のアドレスにアクセスするとサーブレットコンテナが処理を行います

40 第 2 章 Servlet サーブレットの特徴プラットフォームを選ばないサーブレットは 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 インタフェースを何らかの方法で実装しサーブレットコンテナにロードされて動作するものがサーブレットです

41 37 図 2-2 サーブレットとCGI 2.3 サーブレットのプログラム例 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,

42 第 2 章 Servlet 38 9 HttpServletResponse response) 10 throws ServletException, IOException { 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 パッケージ

43 39 の3つですもちろんそのほかに必要なパッケージ(クラス)が存在する場合には適宜 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 メソッドでページが要求された場合

44 第 2 章 Servlet 40 HttpServletRequest で相手側からの要求を扱い HttpServletResponse でこちらからの出力を扱いますこの2つを引数とすることによって要求とそれに対する出力をブロック内で扱えるようになりますまた throws ServletException, IOException は例外処理に関する記述です 12~13 行目ではサーブレットから出力する準備をしています 12 response.setcontenttype("text/html; charset=utf-8"); 13 PrintWriter out = response.getwriter(); response.setcontenttype("text/html") は HttpServletResponse の setcontenttype メソッドを使って出力が HTML データであることを指定しています PrintWriter out = response.getwriter()は HttpServletResponse クラスの getwriter メソッドを使い PrintWriter オブジェクトを取得していますまた 14~18 行目では out.println()で HTML を出力します 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>"); 今後この HelloWorld サーブレットを参考に編集することで独自のサーブレットプログラムを開発が可能ですただし新しいサーブレットクラスの利用には付録を参考に設定ファイルへの登録を行う必要がありますアプリケーションの実行ウェブブラウザから以下の2つのアドレスにアクセスすることでサーバ上に転送したサーブレットのアプリケーションの起動や再起動が可能です ( 起動 ) ( 再起動 ) user: student pass:!webapp 起動したサーブレットアプリケーションには下のアドレスでアクセスできますのでユーザ名を

45 41 自分のものに読み替えてブラウザからアクセスしますフォームによる入出力ユーザからの名前やパスワードなどのデータを送るには HTML でできたウェブページから GET や POST という仕組みを使ってサーブレットにアクセスします以下の例は nameform.html というウェブページを使ってユーザに名前を入力送信させサーバ側の Nameform というサーブレットで受信して表示するものですサーブレットを呼び出すウェブページは chapter/chapter2 に呼び出されるサーブレットは WEB-INF/src/jp.ac.u_tokyo.k.is.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> ウェブページからサーブレットにデータを送るには FORM 要素を使います FORM 要素の action 属性に記述されたサーブレットが送られたデータを受け取りますまた実際の送信処理は 11 行目に示された submit ボタンが押されたときに行われます 9 <form method="post" action="../../servlet/nameform"> 10 <input type="text" name="name"> 11 <input type="submit" value=" 送信 ">

46 第 2 章 Servlet </form> Nameform.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 Nameform extends HttpServlet 8 { 9 public void dopost (HttpServletRequest request, 10 HttpServletResponse response) throws ServletException, IOException 11 { response.setcontenttype("text/html;charset=shift_jis"); 14 PrintWriter out = response.getwriter(); // 文字化けを防ぐための処理 17 request.setcharacterencoding("shift_jis"); 18 String name = request.getparameter("name"); out.println("<html><head>"); 21 out.println("<title>フォーム入力 </title>"); 22 out.println("</head>"); 23 out.println(name); 24 out.println("</body></html>"); 25 } 26 } 16 行目の String name = request.getparameter("name");では name に対応する value を取り出しています nameform.html 内の<input type="text" name="name">の"name"に対応させますこの際サーバが受け取る日本語のデータの文字化けを防ぐため 17 行目でエンコードを指定しています

47 前回アクセス時刻表示以下に Cookie という仕組みを使って前回アクセスした時刻を表示するサーブレットプログラムの例を示します Cookie とはウェブサイトの提供者がウェブブラウザを通じてウェブサイト訪問者 (ユーザ)のコンピュータに情報を保存させる機能です Cookie にはユーザに関する情報や最後にサイトを訪れた日時そのサイトの訪問回数などを記録しておくことができます主にユーザの識別に使われ認証システムや WWW によるサービスをユーザ別にカスタマイズするパーソナライズシステムの要素技術として利用されていますここではサーバにアクセスしたときにその時刻をウェブブラウザに送り返し次にアクセスしたときにはその情報を再びサーバに送って表示しています 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 1 package jp.ac.u_tokyo.k.is.chapter2; 2

48 第 2 章 Servlet 44 3 import java.io.*; 4 import javax.servlet.*; 5 import javax.servlet.http.*; 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"); 12 PrintWriter out = response.getwriter(); String cookiename = "lastaccess";//セットするcookieの名前 15 String lastaccesstime = "はじめてのアクセス"; //クッキー一覧を取り出して必要とするクッキーがあるか 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); //HTMLを表示 36 out.println("<html><head>"); 37 out.println("<title>testcookie</title>");

49 45 38 out.println("</head>"); 39 out.println(" 前回アクセス:" + lastaccesstime); 40 out.println("</body></html>"); 41 } 42 protected void dopost(httpservletrequest request, HttpServletResponse response) throws ServletException, IOException { 43 doget(request, response); 44 } 45 } それでは特徴的な部分についてみていくことにしますまず以下の部分ではクッキーを読み込んでいます 17 //クッキー一覧を取り出して必要とするクッキーがあるか 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 } まず Cookie オブジェクトの配列として cookies を宣言します request.getcookies()によりブラウザからサーバにページを要求する際自動的に送信されるクッキー情報を取得します getcookies()メソッドはブラウザから送られてきたすべてのクッキーの配列を返しもしクッキーが無ければ null を返します (cookies = request.getcookies())!= null というのは cookies が空ではないつまりクッキーが存在した場合をあらわしますまた 20 行目の cookies.length で配列の長さを取得し配列の回数だけクッキーをチェックします getcookies()メソッド自体は HttpServletRequest オブジェクトのメソッドですまた 21 行目の cookies[i].getname().equals(cookiename)は取得したクッキー情報のクッキー名が目的のクッキーlastaccess であるかどうかを判断します

50 第 2 章 Servlet 46 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.4 課題 2 ログインフォームのある HTML ファイル(exercise2.html)からサーブレットを読み出しログイン後の画面でユーザ名と前回のアクセス時刻を表示する Exercise2 というサーブレットを作成しなさい仕様ログイン後の画面でユーザ名および前回のアクセス時刻を表示すること同じブラウザからの前回のアクセス時刻の表示でよいものとする (ユーザ名を変更した場合にユーザごとのアクセス時刻を分ける必要はないものとする ) 合格基準内容が仕様をすべて満たしていること提出期限が守られていること提出方法 Eclipse で WEB-INF/src/jp/ac/u_tokyo/k/is/exercise2 のフォルダの中の Exercise2.java を編集して課題のプログラムを開発します Fugu で guinness に転送し動作確認をした後作成したホームページへのリンクの含まれるアドレス ( CFIVE の解答欄に記入して提出してください

51 47 第 3 章 XML と RSS 本章では XML と RSS について説明します RSS は XML で記述されていますのでまず XML の基本について触れその後 RSS の詳細について述べます 3.1 XML とは XML(eXtensible Markup Language)はマークアップ言語の 1 つですマークアップ言語は < > で囲まれたタグを使用してデータを表現します Web ページを作成する HTML もマークアップ言語の一つです HTML は Web ブラウザ上で文字を強調したり段落をつけたりするタグが取り決められていますしかし XML はデータを作成する人がタグを自由に取り決めることができますこのため XML は Web ページ以外の分野でも利用できるデータ形式となっています XML の特徴 XML の主な特徴として以下の4つがあります計算機上で扱いやすい XML は簡潔でなおかつ厳密な文法を持っているためコンピュータ上で扱いやすいという特徴を持っていますそのため商品データからさまざまな文書を自動的に作成したりインターネットを介して商品データを交換するシステムを構築したりする事ができますテキスト形式である XML はテキスト形式のファイルで扱われマルチプラットフォームでのデータ交換が可能ですテキストファイルはほとんどすべてのプラットフォームでサポートされておりテキストエディタなどで人間が理解することもできますまた文字コードや言語の異なるプラットフォームへの対応は Unicode の採用と XML ファイルに直接文字コードや言語を指定することにより解決できますタグで記述される XML は HTML のようにタグで記述されます HTML は <A> タグや <BR> タグのように使用できるタグは決まっていますこれに対し XML は自由にタグの名前をつけることができますつまり文書の構造を任意に定義することができますまたわかりやすい名前のタグを使用することにより人間にもコンピュータにも理解しやすいデータが作成できます

52 第 3 章 XML と RSS 48 ツリー構造である XML 文書は必ずツリー構造になっていますツリー構造とは一つの頂点からスタートして枝分かれを繰り返す木 (ツリー)のようなデータ構造のことです XML 文書では頂点にルートタグと呼ばれるタグが存在しその下にタグが枝分かれしながら存在しますこの枝分かれは XML 文書の入れ子構造と対応しています図 3-1 XML のツリー構造 XML 文書の構成 XML 文書は主に 3 つの部分で構成されます XML 宣言 DTD(Document Type Definition) XML インスタンスこれらの3つの構成要素は上からこの順番で記述しなければなりませんなお DTD は省略可能です XML ではタグを自由に定義できますが同名のタグがあちこちで定義されてしまう恐れがありますこのような場合には名前空間という概念によりタグを識別します例えばとという2つの場所で別々に定義されている title というタグを同一の XML ファイル中で使用するには XML インスタンスが開始する部分で名前空間接頭辞を定義しておき接頭辞を用いたタグ名を使用することで識別することできます

53 49 名前空間接頭辞の定義例 xmlns:dc= xmlns:rss= タグの例 <dc:title> <rss:title> 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 要素の記述開始タグと終了タグで囲まれた部分が要素となります < 要素 > 内容 </ 要素 > 内容を持たない場合は < 要素 > </ 要素 > は < 要素 /> と記述することもできます

54 第 3 章 XML と RSS 50 コメントの記述 HTML と同様 "<!- -->" の中に囲まれた部分がコメントになります <!- この部分がコメントになります --> 3.2 Java での XML の入出力この授業では RSS リーダをサーブレットで実装してもらいますが RSS フィードは XML 形式で記述されているため課題にあたって XML 文書を Java プログラムで読み書きする必要が出てきますそこでこの項では Java による XML の入出力のやり方について説明します XML の読み込みと書き込みについては Document クラスを利用した一般的な実装方法を紹介しています Document クラスによる実装は基本的に他のプログラムを開発するときにもそのまま利用できます以下の例は成績を記録した 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>

55 51 GradeXMLReader.java package jp.ac.u_tokyo.k.is.chapter3; // 外部クラスの読み込み import java.io.*; import javax.xml.parsers.*; import org.w3c.dom.*; public class GradeXMLReader { public static void main(string[] args) { //XMLファイル名 String filename = "WEB-INF/src/jp/ac/u_tokyo/k/is/chapter3/grade.xml"; // XMLファイルの読み込み ( 通常の XML の処理ではサンプルを変更する必要はない) Document xmldocument = null; try { DocumentBuilder builder = DocumentBuilderFactory.newInstance().newDocumentBuilder(); xmldocument = builder.parse(new FileInputStream(fileName)); } catch (Exception e) { e.printstacktrace(); } // ここから読み込んだ XML の処理開始 // subjectタグ属性をもつノードリスト subjects の取得 NodeList subjects = xmldocument.getelementsbytagname("subject"); // subjectsのすべての科目についてループ for (int i = 0; i < subjects.getlength(); i++) { // subjectsの中身は以下のような subject がたくさん入っている // <subject> // <name>ビジネス概論 </name> // <grade> 良 </grade> // </subject>

56 第 3 章 XML と RSS 52 // subjectの子供 (name と grade)をもつノードリスト tags の取得 NodeList tags = subjects.item(i).getchildnodes(); // tagsには以下の2つが含まれている // <name>ビジネス概論 </name> // <grade> 良 </grade> // 科目名と成績を保存する変数の準備 String subjectname = null; String gradename = null; } } } // tagsのすべての要素についてループ(name と grade を探す) for (int j = 0; j < tags.getlength(); j++) { // タグの名前が<name>なら subjectname に科目名を保存 // タグの名前が<grade>なら gradename に科目名を保存 String tagname = tags.item(j).getnodename(); if (tagname.equals("name")) { // <name>を発見 subjectname = tags.item(j).getfirstchild().getnodevalue(); } else if (tagname.equals("grade")) { // <grade>を発見 gradename = tags.item(j).getfirstchild().getnodevalue(); } } System.out.println(subjectName + "は" + gradename + "です"); ソースコードの各行がどのような処理を行っているかについてはソースコード中のコメントを参照してくださいまた具体的な処理を理解するためには図 3-2に示したXMLデータのツリー構造を参照してノードの親子関係を確認しながらソースコードを読んでみてください

すべて見る

Fckeditor の基本的な使い方 Point!! fckeditor を上手く使うコツ始めにページ内に一通り文章 ( 画像や表を含む)を書いてから文字装飾をして下さい編集したいテキストや画像を選択しアイコ

Fckeditor の基本的な使い方 Point!! fckeditor を上手く使うコツ始めにページ内に一通り文章 ( 画像や表を含む)を書いてから文字装飾をして下さい編集したいテキストや画像を選択しアイコ Fckeditor マニュアル目次 Fckeditor の基本的な使い方... 2 記事の登録プレビューの前に... 2 リンクを挿入... 5 画像を挿入する... 6 PC に保存している画像の挿入... 6 WEB 上の画像を挿入... 8 文字装飾... 10 文章を見出しにする... 10 太文字