第2回 Web文書

Size: px

Start display at page:

Download "第2回 Web文書"

しじんいさし
5 years ago
Views:

1 Slide URL Web 情報システム構成法第 4 回 Webサーバ萩野達也 (hagino@sfc.keio.ac.jp) 1

2 前回課題 :CNS に Web ページを置きなさい特別教室 CNS 個人用 Web サーバ zmac??? ファイル共有ファイルサーバファイル共有 web.sfc.keio.ac.jp Web ページ公開インターネット fs?? ファイル共有自分の PC ファイル転送 scp, webscp, cyberduck 共用計算サーバ遠隔利用 ssh, teraterm, putty ccz00, ccx02, webedit gpgpu?? 2

3 CNS ファイルサーバ CNS 内でファイルを共有している CNSのどのPCでも同じ環境, 同じファイルを利用できる個人のホームディレクトリ利用者ごとに割り当てられる一部が個人 Webページとして公開される共有ファイル領域プロジェクトなどで共有して利用プロジェクトなどのWebとして公開可能共有領域 pub / home ~/abc パス名 ~/public_html/index.html ~/public_html/wis/myshop.html /pub/www/ic/index.html ~ は個人のホームディレクトリ ~ ユーザ名 /home/ ユーザ名ファイルサーバと URL の対応非公開 Web URL ユーザ名 /index.html ユーザ名 /wis/myshop.html WWW ic 共有 Web 領域 CNSiMac ユーザ名 imac index.html ホームディレクトリ個人 CNS ホームディレクトリ public_html 個人ホーム wis myshop.html 3

4 ファイル転送と遠隔利用ファイル転送手元のPCのファイルをサーバにアップしたりダウンロードする scp WinSCP Cyberduck 遠隔利用サーバに入って, 設定などを行う TeraTerm, PuTTY ssh 4

5 Web の基本 3 要素文書をHTMLとCSSで記述する. 文書の位置をURLで指し示す文書をHTTPで取得する HTML 文書 HTML 文書 HTML 文書 HTML 文書インターネット URL HTML 文書 Web サーバ HTTP Web ブラウザ 5

6 URI (Uniform Resource Identifier) 識別子モノ ( オブジェクト ) や概念を名前や数字で識別する身近な識別子 : 学生を識別本を識別電話を識別 PC を識別インターネットでの識別オブジェクト識別子概念 6

7 URL URN IRI URL (Uniform Resource Locator) 資源の場所を識別するURI 例 : http, ftp, file, mailto URN (Uniform Resource Name) urn:<nid>:<nss> NIDはIANAに登録 50 URNが登録されている ( ) 例 : 3gpp, cablelabs, cgi, clei, dgiwg, dvb, ebu, epc, epcglobal, eurosystem, example, fdc, fipa, geant, gsma, ietf, iptc, isan, isbn, iso, issn, ivis, liberty, mace, mpeg, nbn, nena, newsml, nfc, nzl, oasis, ogc, ogf, oid, oipf, oma, pin, publicid, s1000d, schac, service, smpte, swift, tva, uci, ucode, uuid, web3d, xmlorg, xmpp 7 IRI (Internationalized Resource Identifier) 国際化されたURI URIではアスキー文字しか使うことができない IRIではユニコード文字を使うことができる

8 URI のシンタックススキーマオーソリティパス問い合わせフラグメントスキーマ URIの種類プロトコルパスオーソリティ内での場所ファイルのパスオーソリティホスト名サーバ名問い合わせ問い合わせパラメータインタラクションフラグメント文書内での位置 8

9 URI に関する公理普遍性 (Universality) すべてのWeb 資源はURIを持つ大域性 (Global Scope) URIはどこでも同じ意味を持つ一意性同一性 (Sameness) URIは常に同じものを意味する意味が同じであり, 内容は異なることもある不透明性 (Opacity) URIだけから資源の種類を知ることはできない資源の表現を調べないと種類等はわからない 9

Web における概念識別子表現概念 Web 資源 (Resource) 識別子 URI (Uniform Resource Identifier) 表現 (Representation) HTML+CSS XML RDF GIF http://www.keio.ac.

10 Web における概念識別子表現概念 Web 資源 (Resource) 識別子 URI (Uniform Resource Identifier) 表現 (Representation) HTML+CSS XML RDF GIF 識別慶應義塾大学表現 <!DOCTYPE html> <html> <head> <title> 慶應義塾大学 </title> </head> <body> <h1> 慶應義塾大学 </h1> </body> </html> 資源 10

11 URI の利用 Web ページの場所 URL 仕様 DTD RFC urn:ietf:rfc:2141 Web 資源人都市東京都安倍晋三 11

12 HTTP (Hypertext Transfer Protocol) Web 資源を操作するプロトコル 5 つの主なメソッドを持つ HEAD 資源の情報を得る GET 資源の表現を取得する PUT 資源を作成あるいは更新する DELETE 資源を削除する POST データを処理するために送る HEAD PUT GET 取得処理 Web 資源更新 DELETE POST 12

13 HTTP と FTP の違い FTP HTTP 遠隔ファイル操作インターネットの初期の段階から利用ユーザは認証のためFTPサーバにログインするフリーソフトなどの配布のためにAnonymous FTPが存在制御とデータ転送のための2つのTCPコネクションを利用データの種類は2つのみ : テキストバイナリ Web 資源の操作認証は原則行わない一つのTCP 接続を利用マルチメディアをサポート 13

14 HTTP リクエストとレスポンス < メソッド > <URI> HTTP/1.0 < ヘッダ 1>: < 値 1> < ヘッダ 2>: < 値 2>... < 本体 >... ユーザエージェント ( ブラウザ ) HTTP リクエスト HTTP レスポンス Web サーバ Web 資源 14 HTTP/1.1 < ステータスコード > < 理由 > < ヘッダ 1>: < 値 1> < ヘッダ 2>: < 値 2>... < 本体 >... ステータスコード意味 200 OK 301 Move Permanently( 資源が移動 ) 303 See Other( 別資源参照 ) 401 Unauthorized( 認証が必要 ) 403 Forbidden( アクセス権限がない ) 404 Not Found( 資源が存在しない )

15 GET と HEAD メソッド GET 資源の一つの表現を取得するコンテントネゴシエーション言語ネゴシエーション HTML 文書 GET 動画 HEAD 資源およびその表現の関する情報を取得する GETの一部分 GET の性質 GETは何度行っても安全 GETは冪等 (Idempotent) GETは副作用がない Web 資源 GET 日本語文書英語文書 GET GET = GET 15

Content ネゴシエーション文書 / 画像形式ユーザエージェント言語 GET keiopenmark Accept: image/png keiopenmark.png PNG 画像 Web 資源 keiopenmark keiopenmark.jpg JPEG 画像 keiopenmark.

16 Content ネゴシエーション文書 / 画像形式ユーザエージェント言語 GET keiopenmark Accept: image/png keiopenmark.png PNG 画像 Web 資源 keiopenmark keiopenmark.jpg JPEG 画像 keiopenmark.png PNG 画像 keiopenmark.gif GIF 画像ユーザエージェント GET index.html Accept-Language: ja, en-us;q=0.8, en;q=0.7 index.html index.html.en 英語文書 index.html.ja index.html.ja 日本語文書 16 日本語文書 index.html.kr 韓国語文書

17 PUT と POST メソッド PUTメソッド資源を作成あるいは更新する GETの逆通常のブラウザはPUTを使わない POSTメソッド資源にデータを送る資源はデータを処理する HTMLのFORMで利用 GET PUT Web 資源 GET vs POST FROMのmethod 属性によりGETまたはPOSTを指定副作用がない場合にGET 資源の更新など副作用があるときにはPOST POSTは冪等ではない POST POST POST 17

18 Other Features of HTTP 転送認証資源が別のところに移動ユーザ名とパスワードによる認証 BasicあるいはDigest 認証 Virtual Host 一つのサーバで複数のWebサイトをホスト DNSの別名を利用 TCP/IP の効率的利用 Persistent connection (keepalive) パイプライン処理 Proxy キャッシュ制御 max-age no-cache public あるいはprivate WebDAV への拡張 COPY, MOVE, LOCK, UNLOCK 18

19 課題 : 多言語対応架空のオンラインショップのトップページを日本語と英語の両方で準備しなさい. 両方とも同じHTML5で記述することできるだけ同じ内容にしなさい. 日本とのトップページと英語のトップページをリンクして切り替えることができるようにしなさい. CNS での設定 myshop.html を日英で用意する場合には, myshop.html は作成しない myshop.html.ja に日本語版 myshop.html.en に英語版 Webサーバがフォルダ内を探すことができるように,otherにreadパーミッションを与える提出作成したHTMLファイルをCNS 上に置き CNS 内のみから見えるようにして下記のものを宿題登録システムから提出してくださいトップページの言語自動切換えURL 締め切り : 5 月 13 日正午 19

20 HTML5 によるページの構造化 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title> なんでもショップ </title> </head> <body> <header> <h1> なんでもオンラインショッピング </h1> </header> <nav> <ul> <li><a href="goods1.html"> 商品 1</a></li> </ul> </nav> <article> <p> このオンラインショップではなんでも売っています </p> </article> <footer> <p> 問い合わせ : <a href="help.html"> ヘルプ </a></p> </footer> </body> </html> ショップのヘッダロゴなどメニューこのページの本文フッターヘルプナビなど 20

21 まとめ URI Web 資源の識別 URL, URN, IRI HTTP Web 資源を操作するプロトコル HTTP URI メソッド : HEAD, GET, PUT, DELETE, POST 21

コンパイラ

コンパイラソフトウェアアークテクチャ第 12 回 WORLD WIDE WEB 環境情報学部萩野達也 1 Web の誕生 1989 年にスイスジュネーブ CERN で誕生 Tim Berners-Lee CERN における情報管理のため 2 スライド URL https://vu5.sfc.keio.ac.jp/sa/login.php Web = ハイパーテキスト + インターネット最初の Web サーバと