第 9 章 HTML/DHTML とクライアントサイドスクリプト ・ VBSc 「 ipt によるスクリプト例 method= "post " tmpDate tmpDate s trDay strMonth strYear On Error Sub Submi し く ! <head> DateVa1ue (strYear & " / " & strMonth & n 土 1 Document . 工 nputForm . txtDay . value Document . 工 nputForm. txtMonth . value Document . 工 nputForm. txtYear . value Resume Next onMouseDown ( ) <script type="text/vbscript"> MsgBox( " 日付を正しく入力して下さい。 " ) 工 f tmpDate n 土 1 Then & strDay) End 工 f End Sub </script> く /head> く bodY> く form action= <table> くセ > く d > くし h > お店へ行った日く / し h > く input type="text" S 工 Z e = value= ” 2 0 01 ” > 年 <input type="text" size="4" <input type="text" size="4" ↑ name= で指定された名称を利用してフォー ムの各コントロールにアクセス。入力内容を チェックする フォームのコントロールに名称をつける name=" 工 nputForm"> name= " txtDayn > 日 name= " txtMonth" > 月 " 8 ” name="txtYear" く / し d > </table> <input type= く / for 爪 > く /bodY> 266 value="clear't></p> <p><input type="submit" value="post" name="Submit">
10.1 ・ DTD の例 ( 書籍データの定義 ) XML (eXtensible Markup Language) comment* ) く ! ELEMENT く ! ATTL 工 ST く ! ATTL 工 ST く ! ELEMENT く ! ELEMENT く ! EL EMENT ・ XML Schema book ( t 土し 1e ′ author, b00k isbn CDATA #REQU 工 RED> bOOk pubdate CDATA # 工 MPL 工 ED> に土セ 1 e author comlltent ( #PCDATA) > ( #PCDATA) > ANY> XML Schema は、 W3C が標準化を進めているスキーマ三語です。 DTD との大き な違いは、 ・ XML と同じスタイルでスキーマを定義できること ・名前空間の定義が容易にできること ・データ型をサポートしていること などが挙げられます。 XML Schema は、 SGML 用の言語である DTD と異なり、 XML 特有の宣言が可能 く xsd: schema xmlns :xsd="http: / / 細 . w3.org/2001/XMLSchema"> く ? 01 version="l . 0”?> ・ XML Schema の例 ( 書籍データの定義 ) 一方、仕様がかなりふくれあがっており、実装が困難なものとなっています。 可能となるため、データベースのような定型データを扱うのが得意とされています。 です。特に、データ型のサポートによって、 DTD では不可能な要素の値のチェックが く /XSd: schema> く /xsd: element> く /xsd: comp1exType> く xsd:attribute name="pubdate" type="xsd:date"/> く xsd:attribute name=" isbnn use= "required"/> く XSd: element ref="commentn minOccurs= ” 0 ” / > <xsd: element name="authorn type="xsd: string" / > <xsd:element name="title" type="xsd;$tring"/> く xsd : compIexType> く xsd:element name="book"> 281
第 9 章 HTML/DHTML とクライアントサイドスクリプト く br> " f 土 letype " > 画像の種類く / label > ← input ( ラジオボタン ) く label for= name= "filetype" va1ue="jpg">JPEG <input type= " radio ” name= "filetype" va1ue="gif">G 工 F <input type= ” radiO " name= "filetype" va1ue="png">PNG <input type= く br> for = " f 土 lena 爪 e " > ファイル名く / label > <label type="file" name="filename" size=40> <input ↑ input ( ファイル名入力 ) く br> = 5 r 0 W S V a 1 u e = " C 0 mm e n し” く t e X し a r e a n am e = ” C 0 mm e n し " c 01 s = 5 0 > コメントをどうぞ く /textarea> <br> <input type="submit" value=" 送信 "> ←送信ボタン (submit) "reset" value = " クリア” > ←クリアボタン (reset) <input type= く / forlll> ーファイルの集 ( 印表示 ( お気」こ入り (A) ツルヘルプ” J7 ドレス Q) ー可歹篇 ; 7 石曰を移ゆ : 画像の種類 0 JPEG 0 GIF PNG コメントをどうそ 】 FüR M サノブルー M 030 ト t ー肥を Exp 群 = 上 3 ~ 第朝学 input form ( フォ ーム ) べージが表示は 236
10.1 く /e1ementRule> XML (eXtensible Markup Language) G1ementRule て 01e = " に土に le " type="string"/> く e1ementRule role="author" type="string"/> く elementRule role="comment" type="string"/> く tag name="title"/> <tag name= "author" / > く tag name= “ / > く /module> RELAX は、 1 つの名前空間に属する要素とその属性を扱う RELAX core と、複数 の名前空間を扱う RELAX Namespace から構成されています。なお、 RELAX は、 XML Schema と同じデータ型を使用しており、 RELAX から XML Schema へ簡単に 移行できるよう配慮されています。 資料 RELAX (Regular Language description fo 「 XML) Olu 、一 W3C の規格策定プロセス : http://www.xml.gr.jp/relax/ W8C では、 Web におけるさまざまな技術の標準化を行なっています。このときの 作業は次の 4 つの段階に分かれています。 1 . WO 「 king D 「 aft ()D : 作業原案 ) 2. Candinate Recommendation ()R : 勧告候補 ) 3. P 「 oposed Recommendation ()R : 勧告案 ) 4.Recommendation ()C : 勧告 ) 283 されたり、新バージョンや別の規格の元となったりすることがあります。 段階へ戻ることがあります。 4 の勧告として発表されたものは変更されませんが、訂正 仕様は、 1 から 4 へと段階を追って進みますが、 1 ~ 3 の段階で破棄されたり、前の ます ) ( このほか、議論の題材として、 "Note" とよばれる文書が公開されることもあり
HTML 文書はテキストファイルなので、 Windows 付属のメモ帳 ( 工デイタ ) などで作 成することができます。しかし、タグをすべて入力するのは手間がかかるし、ミスも多 くなりがちでしよう。そこで、 HTML を書くためのさまざまなソフトが用意されていま す。大きく分けて 2 つのタイプがあります。 1 つは、 HTML 作成支援機能がついたエデイタソフトです。基本的には手入力と同じ ですが、開始タグと終了タグを同時に入力したり、タク部分を異なる色で表示するなど、 HTML の作成がしやすくなっています。 もう 1 つは、オーサリングッールと呼ばれるもので、タグを画面に表示せず、ワープ ロと同じ感覚で HTML 文書を作ります。オーサリングッールの多くは、リンクの自動生 成や、画像データの簡単な加工もできる統合ソフトとなっています。これらのツールを うまく利用することで、開発効率を向上させることができます。また、 Mic 「 osoft 社の ワープロソフト Wo 「 d のように、データを HTML 形式で保存できるソフトもあります。 オーサリングッールを使う場合、出力されるタグはツールに依存します。したがって、 対象となる HTML のバージョンの違いや、ソフトウェア開発者の解釈によって、望みど おりの HTML コードが出力されないことがあります。 ・ボディ部の要素 ( 4 ) : フォーム 入力フォーム全体を f 。 rm 要素とし、 form 要素の中に input 要素や select 要素など でテキストボックスやラジオボタンなどのコントロール * を配置します。 第 1 1 章サーバサイドのプログラム (CGI の呼び出し ) : P. 320 9.2 HTML 文書のオーサリングッール く OP し土 on VaIUe="aOIIlOrI > 月オ木 巛①」凹前 HTML (HyperText Markup Language) ・フォームの例 <form action= "method="post"> ← fo 「 m <label for="name"> 名前く /label> <input type="text" name="name" ↑ input ( テキスト入力ポックス ) <label for="pref"> 住所 </label> S 1 Z e = " 4 0 " maxlength= ” 3 0 ” > <select name= く OP し土 on く /select> "pref"> : 主こ不こ "hokkaidoh" > 北海道 ← select 【コントロール】画面を構成するユーサインターフェース用の部品の総称。たとえば、 Wi ndows システムではボタ ンコントロールやスクロールバーなど、さまざまなコントロールが標準で用意されています。 235
1 1 .4 ・クッキーのデータ構成 クッキー (Cookie) クッキーのデータは、「名前 = 値 ; expires= 有効期限 ; domain= ドメイン ; path= パ ス名」という形式となっています。なお、保護されたセッションの場合、最後に 「 ;secure 」が追加されます。先頭の「名前 = 値 ; 」以降は省略可能です。 ・クッキーのデータ構成 user=meg; Expires=Mon, 24 ー Dec ー 2001 00 : 00 : 00 GMT; Domain = . 〇〇〇 . com " ドメイン print "Content—type: text/html\n" ・クッキーを保存する例 (PerI CGI) す。 CGI プログラムからクッキーをセットするときは、 Set-Cookie ヘッダを出力しま ・ CGI からクッキーをセットする 有効期限 $value; } if($name eq "last") {$last $value 剏 if($name eq "user") {$user ( $name ,$value) split(/=/,$pair); foreach $pair (@pairs) { SP1it(/;\s*/.$ENV{'HTTP_COOK 工 E')); @pairs ・クッキーを取得する例 (PerICGI) ※変数 $ user にはユーザ名、変数 $ date には現在の日時、変数 $ expires には有効期限がセットされている print "Set—Cookie: last=$date; expires=$expires; \n" p て土 n セ "Set—Cookie: user=$user; expires=$expires; \ Ⅱ ' ・ print print print print p て土 n 辷 "Content—type: text/html\n\n" " く / h しⅢ 1 > \ n " ”前回アクセス時間 : $last<br>\n" ”名前 : $user<br>\n" " <html> ←ユーサ名が表示される ←クッキーに保存した日時が表示さ れる 327
第 10 章 XML と XHTML その他のモジュール lmage ModuIe img ( P. 238 ) Client-side lmage Map Module area,map ( P. 238 ) ール 画像モジュール [ 1.1 ] [BJ クライアントサイドイメージマップモジュール→は .1 〕 Server-side lmage Map Module サーバサイドイメージマップモジュール [ 1.1 ] a,img,input,object 要素のイメージマップ用属性 img , input のイメージマップ用属性 固有イベントモジュール インラインフレームモジュ ターゲットモジュール ( P. 241 ) フレームモジュル オブジェクトモシュール lntrinsic Events ModuIe iframe ( P. 241 ) lframe ModuIe 工リアおよびリンクでのターゲット属性 Target ModuIe frameset,frame,noframes Frames Module object,param ( p. 238 ) Object ModuIe a 要素やフォーム系要素のイベント属性 (onfocus など : P. 262 ) Metainformation Module meta Scripting Module script,noscript ( p. 261 , P. 263 ) StyIe Sheet ModuIe style ( P. 247 ) Style Attribute Module style 属性 ( P. 249 ) Link ModuIe link Base Module base Name ldentification ModuIe メタ情報モジュール スタイルシートモジュール スクリプティングモシュール スタイル属性モジュル※非推奨 name 属性モジュール※非推奨 べース要素モジュール リンク要素モシュール [ 1.1 ] 田 ] 〔 1.1 真 B ] [ 1. な〔 B い い .1 以 BJ a,applet,form,frame,iframe,img,map 要素の name 属性 [ 必須 ] : 必須 (http://www.w3.org/TR/ruby/) ruby,rbc,rtc,rb,rt,rp 日 uby Module ルビモジュール ( 新規 ) align 属性や body 要素の backg 「 ound 属性など font,basefont,center,strike,s,u,dir,isindex,menu Legacy M0dule レガシーモジュール ( 互換用 ) 非推奨 [ 1.1 ] CB] 300 : XHTMLI. 1 : XHTML Basic
第 1 1 章サーバサイドのプログラム CGI プログラムで利用できる環境変数 CGI プログラムでは、クッキーに限らず、さまざまな環境変数を利用します。環境変 数とは、アプリケーションプログラムの実行環境を設定するのに使われる OS 上の変数 ですが、プログラム間で値を受け渡しするのに使われることもあります。 CGI でよく使 われる環境変数には以下のものがあります。 表 11 -3 ・ C 引で利用できる環境変数 CONTENT LENGTH GATEWAY_INTERFACE HTTP REFERER HTTP HOST HTTP ACCEPT HTTP_USER_AGENT REMOTE ADDR REMOTE_HOST SERVER NAME SERVER SOFTWARE SCRIPT NAME QUERY_STRING HTTP COOK 旧 環境変数名 328 CGI 経由で渡されるデータのサイズ CG ーのバージョン CGI が呼び出された URL サーバ名 クライアントが受け付けるⅦ M E タイプ クライアントのプログラム (Web ブラウザ ) 名 クライアントの旧アドレス クライアント名 サーバ名 Web サーパソフトウェア名 実行スクリプト名 プログラムに渡されるデータ クッキーに保存されたデータ 意味
第 4 章インターネットと TCP/IP ・名前解決 さまざまなプロトコルが使用されています。接続経路を知るためのプロトコルには次の DNS サーバへ問い合わせるときや、目指す旧アドレスまでの経路を調べるときにも、 経路を知るためのプロトコル CoIumn の各種サーバと HOSTS ファイルは混在させることができます。 ァイルには、 IP アドレスとホスト名の対応一覧を書いておきます。 DNS サーバなど 小規模なサイトの場合、 HOSTS ファイルを使用することもあります。 HOSTS フ ービスで、 Windows ネットワークと TCP / IP を混在させることができます。 一方、 WINS (Windows lnternet Name Service) は W ⅲ dows 環境で使われるサ いるサービスで、ネットワーク内のコンピュータを階層的なドメイン構造で管理しま NIS (Network lnformation Service) は、 UNIX 系システムで古くから使われて バで、 DNS サーバのほかに、 NIS サーバや WINS サーバが使われています。 resolution) といいます。名前解決のためのサービスを提供しているのがネームサー ホスト名からそのマシンの IP アドレスを求めることを、名前解決 (name 表 4-9 ・接続用のプロトコル ようなものがあります。 ARP RARP BOOTP DHCP RIP DNS Address ResoIution P 「 0t0C6 Reverse Address ResoIution P 「 0t0C6 BOOTstrap P 「 otoc Dynamic HOSt Configuration P 「 0t0C6 Routing lnformation P 「 0t0C6 Domain Name System 旧アドレスから Eth ernet アドレス ( MAC アドレス ) を求める 自ノードの MAC アドレスから自分の 旧アドレスを求める 自分の旧アドレスやホスト名、ドメイ ン名、デフォルトゲートウェイなどの パラメータをサーバから自動的にロー ドする 動的な旧アドレス割り当て。ログイ ンしたクライアントに旧アドレスを 割り当て、終了時に旧アドレスを回 収する。 BOOTP の上位互換 経路選択。動的なルーティング制御を 行なう アドレス管理 【 NIS 】初期の頃は YP (Yellow page : 電話帳 ) と呼ばれていましたが、イギリス British Te 厄 com 社の商標だっ たため、 NI S に改名されました。なお、現在は、セキュリティ面の問題などを解消した N 旧 + が広く使われていま す。 1 08
4.3 ・ DNS (Domain Name System) TCP / 旧の基礎知識 人間にとってわかりやすいドメインですが、 TCP/IP で使用されるのはあくまでも IP アドレスです。 ドメイン名から IP アドレスを知るには DNS (Domain Name System) を利用し ます。 DNS を管理するのが DNS サーバです。 たとえば、 Web プラウザで「 http://www.w3.org/Protocols/Specs.html 」を表示 するには、適当な DNS サーバへ「 www.w3.org 」の所在を問い合わせます。その DNS サーバが www.w3.org を知らない場合、今度は訊ねられた DNS サーバが別の DNS サ ーバへ問い合わせます。これを繰り返すことで、全世界の IP アドレスを探し出すこと ができます。 図 4-27 ・ DNS のはたらき http://www.w3.0 「 g/ 〇〇 が欲しい WWW.W3.0 「 g はどこ ? 0 Web ブラウザ 知らない どこ ? www.w3.0 「 g は 「 18.176. O. 26 」だ 知らない どこ ? DNS サーバ DNS サーバ 18. ] 76. O. 26 だよ ! DNS サーバ ・ DDNS (Dynamic DNS) れるマシンでも、 Web サーバを立てることができるようになります。 DDNS により、フレツツ ISDN や ADSL 接続などで、動的 IP アドレスが割り当てら される Web サーバは固定 IP アドレス ( P. 89 ) である必要がありました。 ないとほかの DNS サーバへ反映されませんでした。したがって、外部からアクセス 従来の DNS は、ドメインと IP アドレスの対応に変更があっても、一定時間が経た 転送することが可能です。 たとき、即座に通知する機能を持った DNS です。このとき、変更部分のデータだけを DDNS (Dynamic DNS : 動的 DNS) は、 DNS データベースの内容に変更があっ