World Wide Webの 始 まり CREN( 欧 州 合 同 原 子 核 研 究 機 構 )には 多 く の 科 学 者 が 訪 れ それぞれが 異 なる 文 書 シス テムを 使 っていた 情 報 の 共 有 が 大 きな 課 題 12/05/09 2

第８回

 

WWW・動的コンテンツ

グループ６   西尾　優   山本　風歌   尾立　誠弥   宇野　則文   藤原　敏明   12/05/09 1

World  Wide  Webの始まり

　CREN（欧州合同原子核研究機構）には、多く

の科学者が訪れ、それぞれが異なる文書シス

テムを使っていた  

World  Wide  Web  (1)

　1989年にティム・バーナーズ＝リーがCERN内部の情 報システムとしてネットワークを使ったハイパーテキス トシステムの導入を提案     　インターネットで異なるコンピュータを結び、共通の約 束に従って文書を公開して相互参照する仕組み   　   12/05/09 3

World  Wide  Web  (2)

•  環境に依存しない情報共有の実現をする　   　-­‐コンピュータ同士が情報をやり取りするため のルール（HTTP）   　-­‐ネットワーク上の情報を一意に特定するアド レス指定方法（URI）   　-­‐環境に関わりなく情報を一貫した方法で実現 する文書記述方法（HTML）

World  Wide  Web  の仕組み

12/05/09 5 インターネット file file file h>p h>p URI HTML クライアント サーバ

Hyper  Text  Transfer  Protocol  (1)

•  _{HTML文書のハイパーテキストを転送するた} めのプロトコル   – 実際には画像や動画、PDFなどのコンピュータで 扱えるデータなら転送できる   •  シンプルなプロトコル   – 主なメソッド       メソッド 意味 GET URIで指定した情報を要求 POST クライアントからデータを（名前と値）のセットで渡す DELETE URIで指定したサーバ上のファイルを削除する

Hyper  Text  Transfer  Protocol  (2)

•  _{TCP/IPをベースに使用している}   – IPを用いてパケットのやりとりをしている   – デフォルトでは80番ポートを使用する   •  ステートレスなプロトコルとして設計されてい る   – やりとりが冗長   – クライアントが毎回リクエストを繰り返す 12/05/09 7

                          サーバ                           クライアント

HTTPの仕組み

GET HTMLが   送信される リクエストをHTTPサーバがURLから判 断し、ドキュメントルートから探して送信

GET  メソッドの詳細

12/05/09 9                         クライアント                         サーバ GET（結合情報の要求） HTMLファイルを返送 GET（付属情報の要求） 画像ファイルなどを返送 文書ファイルの表示

Uniform  Resource  IdenQfier

•  概要   – インターネット上のリソースを特定するための記 述   – h>p://www.info.kochi-­‐tech.ac.jp/index.html   •  スキーム部：h>p   •  ホスト部:www.info.kochi-­‐tech.ac.jp   •  パス部:index.html

Hypertext  Markup  Language  (1)

•  コンピュータは一種類ではなく、利用できる フォントやファイル形式がそれぞれ異なる   •  バーナーズ＝リーは_{WWWでの文書記述方} 法としてHTMLを設計した   12/05/09 11

Hypertext  Markup  Language  (2)

•  マークアップ言語   – 文書中にタグと呼ばれる特殊な文字列を埋め込 むことにより見出しや段落などの文書構造、文字 の大きさなどの修飾情報を記述する言語   •  例.      <Qtle>  高知工科大学  </Qtle>   •  ハイパーテキスト   – 画像ファイルやほかの文書と結びつける仕組み   – 文書中に関連するURIを埋め込む  

Webブラウザ

•  _{HTML文書の解析}   – HTMLタグの解析   •  通信機能   – URIをスキーム部、ホスト部、パス部に分解   – HTTP通信   •  描画機能   – 文字フォント・文字サイズの指定   – 画像、表の表示   12/05/09 13

Webサーバ

•  クライアントに対しHTML文書や動画像を提供す る   •  代表的な機能   –  HTTPサーバ   –  Webアプリケーションサーバ   –  HTTPプロキシサーバ   •  サーバソフトウェア   –  Apache  

キャッシュ

•  サーバの負荷を軽減   – コンテンツを複製・蓄積し、本来のサーバに代 わって配信   12/05/09 15 キャッシュサーバ _WWWサーバ クライアント サーバからの応答をキャッ シュし、同じ問い合わせは本 来のサーバに代わって配信

Cookie

•  サーバとのやり取りの情報を保存する  

– 一時的なデータ  

プロキシ

•  キャッシュの実現   – ネットワークの負荷を軽減       •  アクセス制限   – ユーザレベルの認証   12/05/09 17

Apacheの特徴

•  無償で利用できる   •  モジュールによる拡張機能   – ユーザ認証   – アクセス制限   •  プラットフォームに対応  

– Windows,  Mac,  FreeBSD  

ユーザ認証

•  _Basic認証   – ユーザ名とパスワードをそのまま送信   •  _Digest認証   – ユーザ名とパスワードをハッシュ値に変換して送 信   12/05/09 19

静的コンテンツ

•  変化しない   – あらかじめ用意されたファイルをそのまま表示 File File File Server File File File Client

動的コンテンツ

•  変化する   – サーバサイドで加工する   •  SSI/CGI/PHP   – クライアントサイドで加工する   •  Javascript File File File Server File File File Client 加工 加工 12/05/09 21

Server  Side  Include

•  _{HTML中に記述されている実行可能コマンドを} サーバ側で実行し、結果がHTMLに反映され る   •  自動的に自分の_{Webページの更新時刻を表} 示させたり、よく使うテンプレートを別のファイ ルから読み込ませて変更の手間を軽減させ る

SSI  の仕組み

12/05/09 23 HTML   <!-­‐-­‐#config  Qmefmt="%Y/%m/%d  %X"  -­‐-­‐>   <!-­‐-­‐#echo  var="LAST_MODIFIED"  -­‐-­‐>   HTML   利用者 2012/05/10  13:30:28   _WWWサーバ 処理 リクエスト

Common  Gateway  Interface

•  クライアントからリクエストされたプログラムを

サーバで実行する  

CGI  の仕組み

12/05/09 25 ー 外 部 CGIは他のプログラムを   呼び出すことがある サーバに_{URIを要求する} CGIは他のプログラムの出力や   自分の出力をまとめてサーバに送る CGIからのデータを送る 受け取ったデータを   整形/表示する

PHP：Hypertext  Preprocessor

•  サーバサイドスクリプト   – スクリプトの実行をWebサーバプロセス自身が行 う   •  _{HTML文書への埋め込み型}   •  _{Cライクな文法}  

PHPの仕組み

12/05/09 27 ー 実行結果 受け取ったデータを   整形_{/表示する} リクエスト PHPスクリプトの解析と実行

ECMAScript

•  クライアントサイドのスクリプト言語  

•  _{JavaScriptとJScriptを標準化するために作られ}

たスクリプト言語。  

Javascriptの仕組み

12/05/09 29 HTML   <script  type=“text/javascript”>   document.write(“Hello!”);   </script>   HTML   利用者 Hello!   _WWWサーバ 処理 リクエスト

作業内容

•  _{ApacheにてSSI,CGIが実行できる環境の設定}   •  _{PHPの動作環境をサーバに作成}   •  _{CGI,PHPを用いた掲示(minibbs),wiki(pukiwiki)} のインストール  

作業内容

•  簡単な動的コンテンツの作成   – 時間を表示するプログラムを以下の技術用いて 作成し、技術的違いを考察せよ   •  SSI   •  CGI   •  PHP   •  ECMAScript   – CGIカウンタプログラムの作成   12/05/09 31

レポートについて

•  キーワード   – HTTP   – HTML   – CGI   – BASIC･Digest認証   •  目的   – インターネットとWWWの違い   •  提出期限   – 5月16日（水）　18：00までにA棟4階レポートBOX  

参考文献

•  神崎正英　著_{,「ユニバーサルHTML/XHTML」,} 毎日コミュニケーションズ,2000年   •  山口和紀＋古瀬一隆　監修_{,「新The  UNIX}   Super  Text[上]第２版」,技術評論社,2003年   •  山本陽平　著_{,「Webを支える技術」,日経印刷} 株式会社,2011年   •  鶴長鎮一　著_{,「サーバ構築の実際がわかる} Apache[実践]運用/管理,技術評論社,2012年   12/05/09 33

参考文献

•  堀田倫英　石井達夫　広川類　著_{,「PHP徹底} 攻略」,  ソフトバンクパブリッシング,  1999  年   •  ローラ･リメイ＋アーマン・ダニッシュ_,「続・ HTML入門」,プレンティスホール,1998年   •  市川昭彦　著_{,「図解　Webプログラミングのし} くみ」,ディーアート,2001年   •  笹木望・藤崎真美･太田晶宏_{,「新・HTML＆} CGI入門」,エーアイ出版,1997年

参考文献

•  吉岡誠_{,「SGMLを使いこなす」,オーム社,1997} 年   •  上原孝之_{,「情報セキュリティスペシャリスト」,} 翔泳社,2009年 12/05/09 35