Webについて

Web について SecPrj Intro-phase

Web（WWW / World Wide Web）とは Webとは、インターネット上で標準的に用いられている文書の公開・閲覧システム。文字や図表、画像、動画などを組み合わせた文書を配布することができる。文書内の要素に別の文書を指し示す参照情報（ハイパーリンク）を埋め込むことができる「ハイパーテキスト」（hypertext）と呼ばれるシステムの一種である。（Web
【ウェブ】 WWW / World Wide Web / ワールドワイドウェブとは - IT用語辞典 e-Words より）『インターネットで文書などを公開／閲覧するための仕組み』

サーバで公開ブラウザで閲覧

サーバで公開ブラウザで閲覧インターネット

Webコンテンツの構成要素 • HTML - HyperText Markup Language ◦ Webページの構造を記述 ◦
必須（一番重要） • CSS - Cascading Style Sheet ◦ Webページの装飾を記述 ◦ なくてもいいし，HTMLに埋め込むこともできる • JavaScript ◦ 動的な処理を記述 ◦ これもHTMLに埋め込むこともできる • 静的ファイル（画像／音楽／動画／文書など）

HTML ファイルの拡張子は .html（ex: index.html） <>で囲まれたタグの入れ子によって構造を記述する <html> <head> <meta charset="UTF-8"> <title>sample
page</title> </head> <body> <h1>Hello, this is sample page.</h1> <img src="./static/sample.png"> </body> </html>

CSS ファイルの拡張子は .css（ex: index.css）それぞれのタグやクラスなどについて装飾（見た目）を記述 body { max-width: 500px; /*最大横幅を500pxに*/
margin: auto; /*marginはよしなに*/ } h1 { color: blue; /*色を青に*/ background-color: black; /*背景色を黒に*/ }

JavaScript ファイルの拡張子は .js（ex: index.js） HTMLで記述した構造について動きや機能を追加するもの JAVA言語とは何の関係もない var hoge = document.getElementById("hoge");
var fuga = document.getElementById("fuga"); hoge.onclick = function() { console.log("clicked hoge"); } fuga.onclick = function() { console.log("clicked fuga"); }

サーバで公開ブラウザで解釈＆描画

Webページのリクエストに使われるプロトコル（L7） HTTP : HyperText Transfer Protocol URL（http://www.google.com/...）とメソッド（GET/POST...）によって HTTPサーバに対してリクエストする HTTPサーバはリクエストに応じてコンテンツを返送する HTTPリクエスト
HTTPレスポンス HTTP | MDN https://developer.mozilla.org/en-US/docs/Web/HTTP

IPアドレスとドメイン名 Web上のサービスにアクセスする時，IPアドレスは指定しない（してもいいけど）ドメイン名の方が人間にわかりやすい www.google.com 216.58.196.228 ドメイン名 IPアドレス

IPアドレスとドメイン名 www.google.com 216.58.196.228 ドメイン名 IPアドレスどちらもGoogle検索のトップページにつながる Web上のサービスにアクセスする時，IPアドレスは指定しない（してもいいけど）ドメイン名の方が人間にわかりやすい

ドメイン名とIPアドレスの変換 DNS: Domain Name System ドメイン名とIPアドレスとを変換する L7プロトコルドメイン名 IPアドレス DNSサーバ
ドメイン名 www.google.com IPアドレス 216.58.196.228 インターネット10分講座 DNS - JPNIC https://www.nic.ad.jp/ja/newsletter/No22/080.html

ドメイン名とIPアドレスの変換 2.ドメイン名 3.IPアドレス DNSサーバドメイン名 www.google.com IPアドレス 216.58.196.228 4.IPアドレス 1.ドメイン名
クライアントに入力されたドメイン名は DNSサーバでIPアドレスに変換されてリクエストされる

http://www.example.com:80/hoge/index.html?key=fuga#doc

http://www.example.com:80/hoge/index.html?key=fuga#doc スキーマドメイン名ポート番号リソースへのパスパラメータアンカー What is
a URL? - Learn web development | MDN https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_URL

http://www.example.com:80/hoge/index.html?key=fuga#doc スキーマスキーマ（Scheme）通信に使用するプロトコルを記述するブラウザはこれを見て使用するプロトコルを認識する Webサイトの場合はHTTPかHTTPSが使われる ftp: や mailto: なども使用できる
List of URI schemes - Wikipedia https://en.wikipedia.org/wiki/List_of_URI_schemes

http://www.example.com:80/hoge/index.html?key=fuga#doc ドメイン名（Domain Name）とポート番号（Port）リクエストするWebサーバを指定ドメイン名は人間が便利なように生み出された．IPアドレスでもいいポート番号はサーバにアクセスするためのゲートのようなものプロトコルによってデフォルトが決まっている（80 - HTTP, 443
- HTTPS, ...) デフォルトの場合は省略可ポート番号 List of TCP and UDP port numbers - Wikipedia https://en.wikipedia.org/wiki/List_of_TCP_and_UDP_port_numbers ドメイン名

http://www.example.com:80/hoge/index.html?key=fuga#doc リソースへのパスリソースへのパスドメイン名が指し示すWebサーバ上のコンテンツの場所を示す初期の頃はサーバ上の物理的なファイルの場所を示していたが最近では論理的なパスが提供されていることが多い論理的なパス：Webサーバ側でコンテンツの実体へのルーティングを行う Webサーバごと独自に好きなパスを設定することができる

パラメータ（parameters） Webサーバに渡す追加の情報 ?から始まる Key=Valueの形式になっており，&で連結できるこれもWebサーバ内のコンテンツを提供する上での処理に使われる例）Google検索でhelloと検索パラメータ http://www.example.com:80/hoge/index.html?key=fuga#doc

http://www.example.com:80/hoge/index.html?key=fuga#doc アンカー（Anchor）リソース内部の別の場所（デフォはトップ）へのアンカーリソースの中の任意の場所（小タイトルや再生時間など）を指定できるこの部分はWebサーバに送信されるのではなく受け取ったリソースに対して適用されるリソース側にAnchor記述しておく必要はあるアンカー

http://www.example.com:80/hoge/index.html?key=fuga#doc スキーマドメイン名ポート番号リソースへのパスパラメータアンカー

http://www.example.com:80/hoge/index.html?key=fuga#doc

ユーザブラウザ HTTPサーバ DNSサーバ http://www.example.com:80/hoge/index.html?key=fuga#doc インターネット

ユーザブラウザ HTTPサーバ DNSサーバ URL（ドメイン名） http://www.example.com:80/hoge/index.html?key=fuga#doc インターネット

インターネットユーザブラウザ HTTPサーバ DNSサーバ URL（ドメイン名）ドメイン名 ↓ IPアドレス http://www.example.com:80/hoge/index.html?key=fuga#doc
93.184.216.34

インターネットユーザブラウザ HTTPサーバ DNSサーバ URL（ドメイン名） HTTPリクエスト http://www.example.com:80/hoge/index.html?key=fuga#doc 93.184.216.34

インターネットユーザブラウザ HTTPサーバ DNSサーバ URL（ドメイン名） HTTPリクエスト http://www.example.com:80/hoge/index.html?key=fuga#doc 93.184.216.34 リクエストされた
コンテンツを用意

インターネットユーザブラウザ HTTPサーバ DNSサーバ URL（ドメイン名） HTTPレスポンス http://www.example.com:80/hoge/index.html?key=fuga#doc 93.184.216.34

インターネットユーザブラウザ HTTPサーバ DNSサーバ URL（ドメイン名） http://www.example.com:80/hoge/index.html?key=fuga#doc 93.184.216.34

インターネットユーザブラウザ HTTPサーバ DNSサーバ http://www.example.com:80/hoge/index.html?key=fuga#doc 93.184.216.34 コンテンツを読み込んでページを描画 URL（ドメイン名）

インターネットユーザブラウザ HTTPサーバ DNSサーバコンテンツを享受 http://www.example.com:80/hoge/index.html?key=fuga#doc 93.184.216.34 コンテンツを読み込んでページを描画

まとめ Web（World Wide Web）はインターネット上でコンテンツを公開／閲覧するための仕組み WebページはHTML／CSS／JavaScriptで構成される主なプロトコルはHTTP／HTTPS URLにはちゃんと全部意味がある

Webについて

Webについて

Seiya

More Decks by Seiya

Featured

Transcript