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
120
Webについて
大学サークルのイントロ用資料です
Webがどういう風に成っているかを説明します
mina
June 14, 2021
Tweet
Share
More Decks by mina
See All by mina
おうちGitLabのススメ
silmin_
3
870
Git入門
silmin_
21
12k
暗号について
silmin_
0
100
LinuxCommand入門
silmin_
0
250
LinuxCommand入門2
silmin_
0
180
ネットワークとは
silmin_
0
160
コンピュータとは|初心者向け資料
silmin_
0
87
ビットについて|入門者向け資料
silmin_
0
120
GitLab-CIとGoogleCloudRunで作るSandBox環境
silmin_
2
210
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
Ruby is Unlike a Banana
tanoku
96
10k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
25
1.3k
Unsuck your backbone
ammeep
667
57k
Code Reviewing Like a Champion
maltzj
518
39k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
How STYLIGHT went responsive
nonsquared
93
5.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
Music & Morning Musume
bryan
46
6k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Code Review Best Practice
trishagee
62
16k
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にはちゃんと全部意味がある