第１１章ホームページの仕組みと作り方大野綾子１１．１ホームページとポータル・サイト【１】ホームページＷｅｂブラウザ(閲覧ソフト)でどこかのサイトを訪れたとき、最初に表示される画面。 HTML(ＨｙｐｅｒＴｅｘｔＭａｒｋｕｐＬａｎｇｕａｇｅ)文書で表示される。【２】ポータル・サイト本格的な情報サービスの窓口になっているＷｅｂサイト。①サーチ・エンジン系と② EC(電子商取引)系に分かれる。利用者が特定のホームページを自分のポータル・サイトにしておけば、検索や購入の出発点にできるし、ポータル・サイト側は利用者の履歴情報を保管して利用することができる。【３】WWW(ＷｏｒｌｄＷｉｄｅＷｅｂ)の仕組み…クライアント-サーバ・システム ①URL の送信Ｗｅｂブラウザ HTTP Ｗｅｂサーバ (クライアント) ②指定されたＨＴＭＬ文書の転送１１．２個人用ホームページのシステム構成【１】ISP(Internet Service Provider)を利用するホームページを開きたい人は、ホームページの内容(HTML 文書)を ISP のサーバ・マシンのハードディスクに預けておき、ISP がユーザーに代わってホームページを公開する。【２】ISP にコンテンツをアップロードする ①ISP にダイヤルアップ接続する。 →②ISP が IP アドレスを、接続してきたユーザーに割り振る。 →③コンテンツ(HTML 文書)を ISP に転送。(FTP 利用) →アップロード終了１１．３企業用ホームページのシステム構成企業のホームページは、①企業内のネットワークとも連動しているので、セキュリティを守る対策が必要である。②さまざまな利用者のニーズに応えられるように、本格的なシステム構成が必要である。ということから、個人用よりもシステム構成が複雑になる。【１】ネットワーク構成自社の LAN と ISP とを専用線でつなぐ。(直接インターネットに接続することも) クラッカー対策として、一般的には外部公開用 LAN セグメントと内部用 LAN セグメントの間にファイアウォールを設置して、外部からは自社内にアクセスできないようにする。【３】ASP の活用とモバイル・インターネット＊ASP(Application Service Provider)…企業などの業務アプリケーションを引き受けてサービスを提供する専用のサービス提供事業者。＊モバイルインターネットへの対応画面が小さくメモリ容量も限られている携帯電話用のブラウザ (マイクロブラウザ )が開発されている。マイクロブラウザで表示するのに適した文書を作成するマークアップ言語には、①WAP(Wireless Application Protocol)フォーラムという国際標準化団体の定める WML(Wireless Markup Language)と②既存の HTML の必要な使用だけを取り入れたコンパクト HTML がある。１１．４ Windows 系のシステム構成【１】無料のクライアントＷｅｂを利用するだけならば、インターネット接続に必要な機能が OS にすべて組み込まれているので、クライアント側の構成は OS にブラウザを載せるだけでよい。【２】 Windows に組み込まれた Web サーバ IIS をコンピュータにインストールすると①FTP と②HTTP(Web サーバ)の２つのサービスが導入される。【３】IIS とバックエンドの連携(サーバ・サイト・スクリプト) サーバ・サイド・スクリプト(ASP)…IIS が HTML 文書に埋め込まれたスクリプトや Active Ｘコントロール(実行形式のプログラム部品 )と呼ばれる簡単なプログラムを実行して、その結果を HTML 文書で返す仕組み。【４】CGI と SSI ASP 以前から用いられている仕組みとして、 ① CGI(Common Gateway Interface)…Web サーバから、その外部にあるプログラムを呼び出すための標準的なインタフェース。HTML 文書の表示をページ全体で変える。ただし、リクエストが発行されるたびに新しいプロセスを発生させるので、サーバにかかる負担が大きいという問題点もある。 ② ＳＳＩ(Server Side Includes)…HTML 文書の中にサーバ側で実行されるコマンドをコメントとして埋め込む。 HTML 文書の一部を変更する。やはり、サーバ側の負担が大きいのが問題。１１．５ＵＮＩＸ系 Web サーバのシステム構成【１】選択肢の多い OS ① UNIX ② BSD…UNIX の第６版を中心に、テキストエディタやパスカル言語の開発環境などをまとめた配布用パッケージ。さまざまな派生形態がある。 ③ Linux…インターネット上で世界中のプログラマーによって公開開発された。【２】代表的な Web サーバ、Apache Apache の機能を拡張させるサーバ・サイド・スクリプト ① PHP(Hyper Preprocessor) 独立した CGI プログラムを作成できるだけでなく、Apache の一部として組み込んでも利用できる。そうすることで、CGI よりも Web サーバ側の処理が軽快になる。 ② JSP(JavaServer Pages) JSP を用いることによって、①Web ページのデザイン(HTML 文書)、②Web ページの中で表示されるデータが２つに分離されるため、 Web ページの作成とバックエンドとの連携という、性質の異なる作業が分担でき効率的である。【３】フリーのデータベース管理システム PostgreSQL 以上のように、UNIX 系では OS から Web サーバ、データベース管理システムまで無料で入手できるものがある。しかも、単に無料 (フリー)なだけでなく、プログラムが添付されており作成手法がユーザーにも理解できるため、改良や再配布が自由(フリー)に行える。１１．６ EC システム構成の例 SSL(Secure Sockets Layer)…Web サーバと Web ブラウザの間で交わされるメッセージに暗号をかけたり、仮想店舗の利用者の認証に用いられるプロトコル。１１．７ホームページ作成のテクニック【１】ホームページのデザイン要素【２】レイアウトの指定【３】ホームページに動きを加える【４】 DHＴＭＬ ① Web ページの要素をオブジェクト指向で捉え、Web ページの要素をプログラム処理の対象にする。 ② CSS(Cascading Style Sheet：デザインに統一性を持たせる )とレイヤ(ページ内の要素を重ねて表示できる仕組み)のサポート【５】上級ツールの利用１１．９企業向けホームページの作成 CI(Corporate Identity：企業イメージ作成に関連する統合的な広報活動 )の一環としてホームページを重視。【１】学際的な協業体制デザイナー、プランナー(マーケティング)、技術者の協業体制。