第 9 章 HTM L/DHTM L とクライアントサイドスクリプト =CSS— 9-3 CSS (Cascading style Sheets) は、スタイルシートを書くための言語の 1 つで、 HTML では最も一般的です * 。 HTML の各要素ごとに、表示方法を細かく指定する =(Cascading StYIeSheets)= ・ヘッダ部で定義する み合わせて使用できます。 CSS を使うには ことができます。 Web ページでスタイルシートを使うには、次の 3 つの方法があります。これらは組 ・スタイルの定義 ・任意の要素の属性としてスタイルを記述する ・別ファイルで定義し、それを読み込む せで行ないます。セレクタと宣言については P. 251 で、プロバティについては P. 256 と宣言 (declaration) といいます。宣言は、プロバティ (property) と値の組み合わ 適用される場所」と「スタイルの内容」を指定します。これを、セレクタ (selector) HTML のヘッダ部で定義する場合や、別ファイルで定義する場合は、「スタイルが で、あらためて取り上げます。 図 9-13 ・セレクタと宣 セレクタ ( スタイルが適用される場所 ) ( スタイルの内容 ) 1 つのセレクタに対し、複数のスタイルを 定義したい場合は。 のように セミコロン ( : ) で区切ります。 途中に改行を入れてもかまいません p { line-height: 140 宅 } / 夫行の高さを 140 % にする☆ / プロ / ヾティ 値 / ☆ ~ ☆ / に挟まれた部分はコメント p 要素の 1 行の高さ (line-height) を ] 40 % にする。 ここでの % " は、フォントに対する割合 ( P. 253 ) 。 デフォルトは 1 OO % なので、通常の表示よりも行間が空くことになる。 【スタイルシート】 C SS のほかに JSS や XSL があります ( P. 224 ) 。 246
第 1 章 Web アプリケーションとは ため、マシン同士の通信や、連動して動かすための同期処理などが必要となります。 システムの規模によらず、幅広く使えるシステムをスケーラブルなシステムといい ます。 ある程度の規模まではこなせていたシステムも、処理の量が多くなるとマシンパワ ーの増強などを図らなくてはなりません。ところが、集中処理で使うようなマシンは たいへん高価で、パワーアップさせるにもかなりの費用が必要となります。 一方、分散処理の場合は個々のマシンパワーはそれほど必要がないため、小規模な システムでも導入しやすく、また増強したい場合は適宜、安価なパソコンやワークス テーションを追加すればよいため、規模を大きくするときの対応も容易です。 分散処理のメリットはこのスケーラビリティー ( 拡張性 ) にあります。 図 1 -5 ・集中処理か分散処理か 集中処理 ・ 1 人 ( マシン 1 台 ) のコストが高い ・ある程度の量しか処理できない その人が全部面倒を見るほうが簡単 ・ 1 人でこなせるのであれば、 なんでもこなすスーバーマンが 1 人 分散処理 業務ことに専任者がいる ・意志疎通を図るためのしくみが必要 ・必要な場所にだけ専任者を増やせばよい ・ 1 人 ( マシン 1 台 ) のコストが低い
第 10 章 XML と XHTML 表 10-1 ・ XLink 、 XPointers XPath の仕様 外部へのリンク。多数のターゲットと方向 (direction) 、役割 (role) 、表示方 法 (show) が指定可能 http://www.w3.org/TR/xlink XML 文書内にある任意の場所へのリンク。 HTML と違い、アンカー (aname= XPointer で定義 ) のない箇所も指定できる。指定は XPath を使用する http://www.w3.org/TR/xptr XML 文書の特定部分を指定する。 XSLT ( P. 286 ) でも使用されている http://www.w3.org/TR/xpath ・データとスタイルの分離 XML 自身は、表示方法を一切規定しません * 。データをどのように表示するかは、 スタイルシート言語と呼ばれる、専用の言語で定義します ( P. 285 ) 。 スタイルシートによって、使用端末ごとに表示文法を変えたり、顧客ごとに表示内 容を変更することができます。このとき、元となる XML データのほうは変更する必 要がありません。このように、 XML は「シングルソース・マルチュース」が実現しや すくなっています。 なお、 Web では、「 XML のデータ + 表示方法が書かれたスタイルシート」という形 でデータを提供することもできますが、この場合は Web プラウザ側が XML に対応し ている必要があります。そこで、 XML とスタイルシートを元に HTML を生成し、そ れを提供する方法をとるのが一般的です。 図 10-9 ・シングルソース・マルチュース 内容 仕様名 XLink XPath タス デベ ( XML データを蓄積 ) 蓄積 宀取引先 ( XML データのまま渡す ) XML は プレゼンテーション用 のデータとしても 使いやすいね XML データ 変換 顧客ごと / ヾソコン用 小型画面用 ノヾソコン用 i モード用 の HTML の HTML の XML の HTM L の HTML (cHTML) 十 十 十 CSS XS L CSS 0 誰かに見せる メール ( プレゼンテーションする ) マガジン 場合にはスタイルシートを 使うんだ こんなデータも すぐ作れるよ 【 XML の表示】 lnternet Explorer 5 の場合、スタイルが定義されていない XML データはツリー構造が表示されま す。 XML 非対応ブラウザの場合、単なるテキストとしてデータがそのまま表示されるか、ファイルとしてダウン ロードされることになります。 278
・その他の決済サービス このほか、個人ユーザによる少額取り引きで人気が高いのが、コンビニ決済です。 コンビニ決済の場合、支払いを近所のコンビニエンスストアで行なえるため、時間や 地理条件にあまりしばられすに支払いができるのが魅力です。また、クレジットカー ドを持っていないユーザでも使用できるというメリットがあります。 資料 i-Shop Regi ( クレジット決済、コンビニ決済代行・郵便局振り込み支援 ) ・ http://i-shop.ne.jp/proxy/ コンビニ決済 (WELLNET) : http://www.sapporo.net/ インターネットショッピングお支払サービス ( セプン - イレプン ) ・ http://pr.sej. CO. jp/in/ また、ユーザがある程度限定されてしまいますが、 @nifty や BIGLOBE 、 So-net な どの大手プロバイダによる支払い代行サービスもあります。この方法はプロバイダ決 済と呼ばれることがあります。プロバイダ決済の場合、プロバイダの ID とパスワー ドだけで支払いができるため、とても気軽に使用できます。 資料 iREGi (nifty によるオンライン決済。 nifty 会員以外でも使用可能 ) ・ http://shop.nifty.com/top/disp/shopguide—iregi01. html あらかじめプリペイドカードを購入し、プリペイドカードの番号を使ってショッピ ングできるプリペイド決済という方法もあります。インターネットショッピングに先 立ち、ますはプリペイドカードを購入しないといけない、という手間はあるものの、 ふだんからプリペイドカードが使える場所を把握しているユーザにとっては、気軽な 方法でしよう。 資料 WebMoney ( プリペイド型電子マネー。ローソンで購入可能 ) : http://www.webmoney.ne.jp/ 216
CSS (Cascading Style Sheets) st ⅵ e 属性を使って直接スタイルを指定する方法です。 b 。 dy 部で使うほとんどの要 ・任意の場所に埋め込む ( インラインスタイル ) 9.3 インラインでスタイルを指定する場合は、 meta 要素でデフォルトスタイルを指定 タイルを指定したい場合は、 div 要素、 span 要素を使用します。 素で st ⅵ e 属性を使用できます。また、 p 要素などの論理要素とは別に範囲を定めてス します。 ・インラインスタイルの例 <head> く meta http-equiv="Content—Sty1e-Type" ↑スタイルのタイプを指定する く /head> く bodY> content="text/css"> く hl style="border-style: ou に se に " > スタイルシートの使い方く / hl > ↑ HI ( 大見出し ) 部分に立体的なポーダー ( 境界線 ) を表示 * く div style="margin: 0 2em"> ↑く div > ~ く / div > 部分に上下 0 、左右 2 文字分のマージン ( 余白 ) を入れる く p > スタイルシートを使うには次の 3 通りの方法があります。く /P> く > く 1 土 > 外部スタイルシートく / 1 土 > く 1 土 > 埋め込みスタイルシートく / 1 土 > く1i> く span style="color: red " > インラインく / span > スタイルく / 1 土 > く / ul > く /div> く /bodY> ↑く span > ~ く / span > 部分の文字色を赤にする : n 朝 1 を新三← 1h11 ヨーし : 「 0 物ト朝 1 三 , を 、、 ; ぼをい日編第印表お気入、ツー 0 世 0 アドしス ( 0 ) 第れ nli 味 s ・ 5 」ト←。 、移動卩レ ) スタイルシートの使い方 スタイルシートを使うには次の 3 通りの方法があります . ・外部スタイルシート ・埋め込みスタイルシート ノスタイル ※要素の一部を指定したい場合は span 要素 ( インライン系要素 : p. 238 ) 、複数の要素を囲むように指 あらかじめ定義しておいたスタイルを適用させることもできます ( p. 252 ) 。 なお、 id や class 属性を使って、外部スタイルシートや埋め込みスタイルシートで 定したい場合は div 要素 ( プロック系要素 : P. 231 ) を使用します。 249 しているかどうかはブラウザによって異なります。 【 border-style 】 0 set のほかに、 inset 、 solid 、 double などが指定可能 ( デフォルトは none)o なお、各値に対応
1 1 . 1 図 11 -4 ・サーバサイドスクリプトと外部プログラムの比較 ・・・デザインの中にデータを埋め込む ・オーサリングッールで HTML を生成し、 スクリプトを埋め込むという開発が可能 ・・データを元に Web ページを構築する ・プログラムに専念できる ・開発ツールの HTML 生成支援機能を使える場合もある ・レイアウトを変更するのに HTML の知識と プログラム用の知識の両方が必要 サーバサイドスクリプト 外部プログラム ( CGI 等 ) サーバで実行するプログラム ポイントになりますね プログラマの役割分担が Web ページのデザインと プログラムの量が少ない場合は 一般に、サーバサイドスクリフトの ほうがメンテナンスがラクです CoIum 、 n サーバサイドのプログラムを利用できる ? 自前の Web サーバを用意する場合はあまり問題になりませんが、プロバイダなどに よる Web スペースを使用する場合、そもそも、その Web サーバがサーバサイドのプロ グラムに対応しているかどうかを確認する必要があります。 サーバサイドのプログラムは、サーバの過負荷を招くだけでなく、セキュリティホー ルの元となりやすいため、全面的に禁止されていたり、一部制限が加えられていること があります。たとえば、 CGI が許可されているという場合でも、コンバイルされたバイ ナリファイルは使用できず、 Pe 目スクリプトのみ許可されているというケースがほとん どです。 レンタルサーバの場合は、「 PHP が使用可能」「 ASP (Active Serve 「 Pages) が使 用可能」など、さまざまな機能に対応しているところが増えてきています。サービス内容 とともに、各種ソフトのバージョンも確認するのを忘れないようにしましよう。 なお、自前の環境の場合、Ⅱ S を使用している場合は ASP 、 UN Ⅸ系環境の場合は PHP などのスクリプト言語十 CG に Java 環境が使用可能ならば JSP 十 Java サーブレ ットなどの Java 技術を中心に開発するのが一般的です。 第 12 章 Java 技術 : P. 333 307
第 1 1 章 サーバサイドのプログラム 11 .4 Web プラウザを通じて、ユーザのコンピュータにデータを書き込むしくみ、または 書き込んだデータをクッキー ( C00 ki e ) といいます。もとは、 Ne tsc a p e Communications 社による技術で、現在は lnternet Explorer をはじめとする多くの クッキ ( Cook 厄 ) ・ web ブラウサ全体で 300 個まで ・ web サーバごとに 20 個まで ・ 1 つにつき 4096 バイトまで ・保存できるのはテキストのみ このことから、クッキーには以下の制限があります。 め、セキュリティ上の危険を伴います。 クッキーは、ユーザのコンピュータにデータを書き、またそのデータを読み込むた クッキーの制限 Web プラウザがサポートしています。 クッキーは、 H T M L の m e t a タグを通じて保存 ( 送信 ) クッキーを使用するには ら保存場所を知ったり、変更したりすることはできません。 また、クッキーの保存場所は Web プラウザごとに決まっており、 Web サーバ側か ・別の web サーバが保存したデータは読み出すことができない し、環境変数 * HTTP_COOKIE を通じて取得 ( 受信 ) することができます (Perl による例 : 次ペー ・クッキーの例 く meta—equiv="Set—Cookie" content="user=hitomi; 30-Aug-2002 09 : 30 : 30 GMT"> 【環境変数】 P. 328 コラム。 eXPIres=Fri, 【クッキーの取得】 pe rl や P H P など、 Web プログラミングで使われる言語には、ほとんどの場合クッキー操作用 のライブラリがあります。 326
たら即座にサーバを交換し、サービスをすぐに再開できるようにしておくといった対 策も大切です。 何があれば再構築できるか ? を常に考え、トラブルに備えることで安心が手に入 ります。場当たり的な管理は、セキュリティを低下させるだけではなく、サイトの再 構築も困難にします。 サーバ選びのポイント 「サーバ選びのポイント」の第一歩は、サーバを立てる必要が本当にあるのかどうか 考えることです。自らサーバを用意することで自由度は飛躍的にアップしますが、そ の分、労力もかかります。セキュリティ対策、アクセス負荷への対策、休日のメンテ ナンスなど、真のコスト ( 金銭や労力、時間 ) は " 導入時 " ではなく " 維持 " にかかり ます。もちろん、導入の手間もばかになりません。 Web での通販やオークション、情報交換などを考える場合、既存のサービスを利 用できないかをます最初に考えましよう。これら 3 つは、人が集まれば集まるほど価 値が上がるのが一般的です。すでにある程度の人が集まっている中に入れば、より多 くの人にアピールできるようになるでしよう。 既存のサービスでは不十分な場合、次の段階としてレンタルサーバを検討します。 レンタルサーバの場合、提供されるサーバの種類・サービスの内容を中心に検討する ことになるでしよう。また、サーバをレンタルできるだけで、管理はすべてユーザに まかされるケースと、ある程度の保守は業者が行なうケースがあります。自社ではメ ンテナンスがあまりできないという場合は、レンタル業者によるサポート態勢も大き なポイントとなります。 完全に自前で行なうという場合は、最初のネックとなるのが金銭面ということにな ります。特に SOHO や個人の場合、あまり高額なサーバを導入することはできないの で、マシン負荷が低く、導入コストも抑えられる PC-UNIX 系 os からの選択が中心と なるでしよう。 ドメインをどうするか ? 2001 年に始まった汎用 j p ドメインのほか、さまざまなドメインが利用できます。 レンタルサーバやレンタルスペースを利用する場合も、ドメインは別途取得し、アド レス転送サービスを利用することで、使いやすい、あるいはインパクトの強いドメイ 356
3.2 ( 0 ⅳ mn アクセス解析 HTTP (HyperText Transfer protocol) Web サーバへのアクセス記録 ( アクセスログ ) を解析することをアクセス解析といい ます。たとえば、曜日や時刻別のアクセス数を見てユーザの傾向をつかんだり、人気の あるべージを調べたりといったことをします。このほか、アクセスに使われている Web クライアントの種類と比率を確認することで、 \Neb ページをデザインするときのメイン ターゲットとなる Web ブラウザを決めることもできるでしよう。 アクセス解析は、 Web サーパソフトが保存するログを利用するのが基本です。 web スペースを借りているような場合は、ログを見ることができないので、 JavaSc 「 ipt や CGI プログラムなどを利用してログを残すようにします。 HTTP レスポンス body) が返されます。 ・レスポンスの例 HTTP/ 1 . 1 2 0 0 OK Date : Thu ′ 5 Ju1 2 0 01 18 : 5 8 Server: Apache/I . 3 . 19 (Unix) Connection: close Content—Type: text/html く h しⅢ 1 > ・ステータスコード HTTP リクエストに対する応答です。レスポンスへッダとデータ本体 (O bj ect- ←リクエストの結果 ( 状態へッダ ) : 18 GMT ←応答時刻 ←サーバ名 ←現在の状態 ←データの内容 ← HTML52—タ ( デ ータ本体 ) 指定されたデータがない場合や、アクセスが許可されていない場合は、エラー番号 した場合は 500 (lnternal Server Error) となります。このような番号をステータス 失敗した場合は 401 (Unauthorized) などです。このほか、サーパ内でエラーが発生 が返されます。たとえば、ファイルが見つからない場合は 404 (NotFound) 、認証に あります。 【ステータスコード】エラー内容を示すメッセージを含んだ HTM L データを返すようになっている web サーバも じ、適切なステータスコードを返すようにする必要があります。 コード * といいます。サーバサイドの Web アプリケーションを作るときは、必要に応
第 7 章 Web3 層システムとアプリケー ション・サー / ヾ アプリケーションサーバは、 3 層システムの中間層 ( ファンクション層 ) に位置す るサーバです。選択時は、対応プラットフォームと開発言語、通信方法、データベー スとの接続性がポイントとなります。 電子商取引 ()C : p. (1) を考える場合、既存の基幹システムと連携できるかどうか が最優先項目となります。情報系システムの場合は、柔軟性や小回りが重視されること になるでしよう。規模の大きなシステムの場合は、負荷分散機能が重要となります。 また、ノウハウがあまりない場合や、開発期間を短くしたい場合、アプリケーショ ンサービスプロバイダ (ASP : p. 174 コラム ) の利用も念頭に置きましよう。 Web アプリケーションサーパソフト Java 対応、特に EJB (Enterprise JavaBeans : p. 340 ) べースのもので、分散オプ ジェクト仕様 CORBA (). 160 ) に対応しているものが主流です。なお、 CO M + ( P. 159 ) べースの場合、 Windows2000 Server がアプリケーションサーバを兼ねるこ とになります。 ・ WebLogic (http://www.beasys. CO. jp/weblogic. html) BEA Systems 社による Web アプリケーションサーバで、オンライントレーディン グ ( 電子株式売買 ) や発注業務、コミュニティサイトなど、幅広いジャンルで使用さ れています。 EJ B べースで、 SoIaris や Lin ux をはじめとする UNIX 系システムのほか、 Windows2000 にも対応しています。 ・ WebSphere (http://www.ibm.com/jp/software/websphere/) IBM 社による、 EJB べースの Web アプリケーションサーバです。 Oracle や Microsoft SQL server などのデータベースはもちろん、基幹業務で使用される DB2 ( IBM 社のデータベース ) との連携もスムーズです。また同社の統合開発環境である VisualAge でのプログラムが可能なのも魅力でしよう。