Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webについて
Search
mina
June 14, 2021
3
130
Webについて
大学サークルのイントロ用資料です
Webがどういう風に成っているかを説明します
mina
June 14, 2021
Tweet
Share
More Decks by mina
See All by mina
おうちGitLabのススメ
silmin_
3
930
Git入門
silmin_
23
13k
暗号について
silmin_
0
110
LinuxCommand入門
silmin_
0
260
LinuxCommand入門2
silmin_
0
180
ネットワークとは
silmin_
0
160
コンピュータとは|初心者向け資料
silmin_
1
93
ビットについて|入門者向け資料
silmin_
0
140
GitLab-CIとGoogleCloudRunで作るSandBox環境
silmin_
2
220
Featured
See All Featured
Designing for humans not robots
tammielis
250
25k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
24k
Bash Introduction
62gerente
608
210k
Automating Front-end Workflow
addyosmani
1366
200k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
28
2k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
What's new in Ruby 2.0
geeforr
343
31k
Faster Mobile Websites
deanohume
305
30k
Side Projects
sachag
452
42k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Happy Clients
brianwarren
98
6.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Transcript
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にはちゃんと全部意味がある