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技術の基本 1回目 / Introduction to Web technologies...
Search
muttan
December 08, 2017
Technology
0
220
Web技術の基本 1回目 / Introduction to Web technologies 1st class
muttan
December 08, 2017
Tweet
Share
More Decks by muttan
See All by muttan
さわやか待ち時間LINE botを作った話 / Sawayaka LINE bot
bath_poo_
0
110
コンテナ開発入門 1回目/Introduction to Container Development 1
bath_poo_
0
170
ISUCONってなんだ / What is ISUCON
bath_poo_
0
360
Web技術の基本 8回目 / Introduction to Web technologies 8th class
bath_poo_
0
190
Web技術の基本 7回目 / Introduction to Web technologies 7th class
bath_poo_
0
160
Web技術の基本 6回目 / Introduction to Web technologies 6th class
bath_poo_
1
260
Web技術の基本 5回目 / Introduction to Web technologies 5th class
bath_poo_
0
140
Web技術の基本 4回目 / Introduction to Web technologies 4th class
bath_poo_
0
220
Web技術の基本 3回目 / Introduction to Web technologies 3rd class
bath_poo_
0
250
Other Decks in Technology
See All in Technology
What's new in OpenShift 4.20
redhatlivestreaming
0
320
AI時代の発信活動 ~技術者として認知してもらうための発信法~ / 20251028 Masaki Okuda
shift_evolve
PRO
1
110
東京大学「Agile-X」のFPGA AIデザインハッカソンを制したソニーのAI最適化
sony
0
140
AI機能プロジェクト炎上の 3つのしくじりと学び
nakawai
0
120
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.5k
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
13
11k
OSSで50の競合と戦うためにやったこと
yamadashy
3
1k
可観測性は開発環境から、開発環境にもオブザーバビリティ導入のススメ
layerx
PRO
4
1.5k
abema-trace-sampling-observability-cost-optimization
tetsuya28
0
200
OTEPsで知るOpenTelemetryの未来 / Observability Conference Tokyo 2025
arthur1
0
280
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
14
82k
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
140
Featured
See All Featured
Speed Design
sergeychernyshev
32
1.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Building Applications with DynamoDB
mza
96
6.7k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Side Projects
sachag
455
43k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Faster Mobile Websites
deanohume
310
31k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Transcript
Webٕज़ͷجຊ 1ճ Keisuke KAMIYA
͡Ίʹ
ࠓճͷςʔϚ
Chapter 1 Webٕज़ͱ
࣍ 1. Webͱ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥβ 5.
WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷΈ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ
࣍ 1. Webͱ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥβ 5.
WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷΈ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ
Webͱ • จॻͷެ։ɾӾཡͷͨΊͷγεςϜ → Web(Σϒ) • ਖ਼໊ࣜশ,World Wide Web(ੈքதʹ͕ΔΫϞͷ) →
ུশWWW • WebϖʔδHyperTextͰهड़͞ΕΔ → HTML (HyperText Markup Language) • ϋΠύʔςΩετ͔ΒϋΠύʔςΩετͷϦϯΫ(ϋΠ ύʔϦϯΫ)Λ͚Δ͜ͱͰؔ࿈͚Λߦ͍, શମ͕େ ͖ͳใͷू߹ମͱͳΔ ΩʔϫʔυɿWeb, WWW, HyperText, HyperLink
Webͱ HyperText HyperLink HyperText HyperText HyperText HyperLink HyperLink d(^_^o) ϢʔβWebϒϥβ͔ΒΞΫηε
ϋΠύʔϦϯΫͷΠϝʔδਤ
Webͱ ੈքதͷจॻΛϋΠύʔϦϯΫͰؔ࿈͚Δ ɹˠʮੈքنͷᥨͷʯͱ͍͏ҙຯͰWWW
࣍ 1. Webͱ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥβ 5.
WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷΈ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ
ΠϯλʔωοτͱWeb World Wide Webͷྺ࢙తഎܠ • 1980 CERN(Ԥถݪࢠ֩ݚڀػߏ)ͷςΟϜɾόʔφʔζ=ϦʔͱϩόʔτɾΧΠ Ϧϡʔ͕WebͷݪܕͱͳΔENQUIREΛ։ൃ • 1989
WWW, HTTP, URL, HTMLΛఏҊɺ։ൃ • 1990 ʮWorldWideWeb: Proposal for a HyperText ProjectʯΛൃද͠, ࣗͰWeb ϒϥβͱWebαʔόΛNeXT্Ͱެ։ • 1991 ࠷ॳͷWebϖʔδ͕ެ։ ΩʔϫʔυɿςΟϜɾόʔφʔζ=Ϧʔ
ςΟϜɾόʔφʔζ=Ϧʔͬͯʁ Webͷ, ςΟϜɾόʔφʔζ=Ϧʔ • WebʹΔٕज़(WWW, HTML, HTTP, URL)ͷઃܭ։ൃ • W3C(World
Wide Web Consortium)ઃཱऀ • νϡʔϦϯάड • ੈքͰ࠷ॳͷϗʔϜϖʔδ http://info.cern.ch/ Ҿ༻ɿhttps://ja.wikipedia.org/wiki/%E3%83%86%E3%82%A3%E3%83%A0%E3%83%BB%E3%83%90%E3%83%BC%E3%83%8A%E3%83%BC%E3%82%BA%EF%BC%9D%E3%83%AA%E3%83%BC
ΠϯλʔωοτͱWeb • Πϯλʔωοτͷݪܕ → ARPANET(ΞϝϦΧࠃ૯লͷωοτϫʔΫ) • 1982 TCP/IP͕ඪ४Խ͞Ε, ੈքنͰ૬ޓଓΛߦͳ͏Πϯ λʔωοτͱ͍͏֓೦͕ఏএ͞ΕΔ.
→ ॳඇৗʹߴՁͳͷ͕ͩͬͨ, ଓճઢ͕҆Ձͱ ͳΔ͜ͱͰҰൠϢʔβʹ·Γ, Webͷരൃతͳී ٴʹܨ͕ͬͨ
ΠϯλʔωοτͱWeb • Πϯλʔωοτͷత ੈք֤ͷίϯϐϡʔλΛ૬ޓଓ͍ͨ͠ʂ → ARPANETΛجʹΠϯλʔωοτ͕ੜ • Webͷత υΩϡϝϯτΛڞ༗͢ΔγεςϜ͕΄͍͠ʂ →
ENQUIREΛجʹWeb͕ੜ ҟͳΔతͰ։ൃ͞Ε͕ͨͭ߹Θ͞Δ͜ͱͰ രൃతʹ͕ͬͨ
࣍ 1. Webͱ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥβ 5.
WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷΈ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ
͞·͟·ͳWebͷ༻్ • WebαΠτ 1ͭͷυϝΠϯʹ͋Δෳͷจॻͷ͜ͱ. HyperLinkʹ Αͬͯ૬ޓʹͭͳ͕͓ͬͯΓ, ͦͷϦϯΫΛͨͲΔ͜ͱ ͰWebϖʔδؒΛҠಈ͢Δʢؔ࿈͚Δʣࣄ͕Ͱ͖Δ → ۙͰจॻͷӾཡ͚ͩͰͳ͘,
ΞϓϦέʔγϣϯ ͱͯ͠ར༻͞ΕΔέʔε͕ଟ͍ ΩʔϫʔυɿWebαΠτ
• API (Application Programming Interface) ΞϓϦέʔγϣϯΛιϑτΣΞ͔Βૢ࡞͢ΔͨΊͷ ΠϯλʔϑΣʔε ͞·͟·ͳWebͷ༻్ API SV
APIΛͬͯఱؾΛϦΫΤετ ࢦఆ͞ΕͨͷใΛฦ͢ Ϣʔβʔ d(^_^o) APIͷྫ ‣ ఱؾ༧ใAPIΛͬͯ, ఱؾΛऔಘ͢Δ. ‣ TwitterͷTimeLineΛऔಘ͢Δ etc… ΩʔϫʔυɿAPI
࣍ 1. Webͱ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥβ 5.
WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷΈ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ
• ϋΠύʔςΩετΛهड़͢ΔͨΊͷݴޠ → HTML (Hyper Text Markup Language) <!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>d(^_^o)</h1> <img src="ha.png"> ͜Ε<a href="http://example.com/">ϦϯΫ</a>ͷྫͰ͢. </body> </html> HTMLͱWebϒϥβ ΩʔϫʔυɿHTML, λά λάΛͬͯهड़
• HyperTextΛදࣔ͢ΔιϑτΣΞ → WebϒϥβʢϒϥβͱݺΕΔ͜ͱ͕ଟ͍ʣ • ϒϥβ༷ʑͳاۀ͕ϦϦʔε͍ͯ͠Δ • Google Chrome •
Firefox Quantum • Safari • Vivaldi • (Sleipnirͬͯ·ͩੜ͖ͯΔΜͰ͔͢ʁʣ HTMLͱWebϒϥβ ʢ༨ஊʣݹ͍ͷͩͱMosaic͕༗໊Ͱ͢Ͷ.
࣍ 1. Webͱ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥβ 5.
WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷΈ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ
WebαʔόͱHTTP • Webαʔό ΫϥΠΞϯτ͔ΒͷཁٻʹԠͯ͡ίϯςϯπΛฦ͢ ιϑτΣΞʢಈ࡞ͯ͠ΔίϯϐϡʔλͦͷͷΛࢦ ͢͜ͱ͋Δʣ ‣ Apache, nginx, IIS(Internet
Information Service)͋ͨ Γ͕༗໊ ΩʔϫʔυɿWebαʔό
WebαʔόͱHTTP Webαʔό ϢʔβʔT ϢʔβʔS ϦΫΤετͨ͠ίϯςϯπ͕ແ͍߹ ແ͔ͬͨ͜ͱΛࣔ͢εςʔλείʔυΛฦ͢ “ࣗຫͷΞϨ”Λ͍ͩ͘͞ request “͠·Μ"Λ͍ͩ͘͞
request :HTTPͰ௨৴ ͳ͍Ͱ͢ response (404) response Ͳ͏ͧ ͠·Μ (200)
WebαʔόͱHTTP • HTTP(Hyper Text Transfer Protocol) ϋΠύʔςΩετͷΓऔΓΛඪ४Խͨ͠ͷ ‣ ϋΠύʔςΩετͷཁٻ, ૹ৴खॱ
‣ Webϖʔδ͕ଘࡏ͠ͳ͍߹, సૹ͢Δ߹ εςʔλείʔυ ҙຯ ϦΫΤετޭ YY ϦμΠϨΫτ ېࢭ͞Ε͍ͯΔ ݟ͔ͭΒͳ͔ͬͨ खॱΛඪ४Խ͢Δ͜ͱͰ, ࡞ݩʹΑΔґଘΛݮΒ͢ ΩʔϫʔυɿHTTP
࣍ 1. Webͱ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥβ 5.
WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷΈ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ
Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 1. ΫϥΠΞϯτ͕URLΛࢦఆ 2. WebαʔόʹHTTPϦΫΤετΛૹΔ 3. Webαʔό͕ϦΫΤετΛղੳ 4. ΫϥΠΞϯτϨεϙϯεΛฦ͢ 5.
ϨεϙϯεΛWebϒϥβ͕ղੳ͠දࣔ͢Δ ᶃ ᶄHTTP Request ᶅ ᶆResponse ᶇ
Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 1. ΫϥΠΞϯτ͕URLΛࢦఆ URL(Uniform Resource Locator)Λࢦఆͯ͠ϦΫΤετ http://example.com/index.html httpΛ༻͢Δ example.comʹΞΫηε index.htmlΛཁٻ
URLͷҰൠతͳදݱܗࣜ ʢεΩʔϜ໊ʣɿʢεΩʔϜ͝ͱͷදݱܗࣜʣ ΩʔϫʔυɿURL
Webϖʔδ͕දࣔ͞ΕΔྲྀΕ ίϨʹؔ͢Δৄ͍͠هड़RFC1738͋ͨΓΛಡΉͱৄ͘͠ॻ͍ͯ͋Γ·͢ //<user>:<password>@<host>:<port>/<url-path> http://<user>:<password>@<host>:<port>/<url-path> IP-basedͳଓ(http, ftp, etc..)ͷ߹ͷsyntax ͜ΕRFC1738Ͱͬͨͭͩʂ (Scheme) :
(Syntax)ʹଇͬͯදه͢Δͱ,
RFCͱʢ༨ஊʣ • RFC(Request for Comments) IETF(Internet Engineering Task Force)ʹΑΔΠϯλʔ ωοτʹؔΘΔ༷ʑͳٕज़ͷ༻Λอଘɾެ։͢Δܗ
ࣜͷ͜ͱ → ༷ʑͳաఔ(IETFʹఏग़)Λܦͯ, ඪ४Խ͞ΕΔ • શͯެ։͞Ε͍ͯΔͷͰ, ୭ͰٞʹࢀՃ͢Δ͜ͱ͕ Մೳ Webϖʔδ͕දࣔ͞ΕΔྲྀΕʹΓ·͢ ͱ͜ΖͰRFCͬͯ·͔͢ʁ
Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 2. WebαʔόʹHTTPϦΫΤετΛૹΔ ։࢝ߦɾϔομɾϘσΟͰߏ͞Ε͍ͯΔ • ։࢝ߦ HTTPͷϝιου(GET, POST, PUTͳͲ)ͱϦΫΤετର, HTTPόʔδϣϯใ
• ϔομ User-AgentAccept-Type, Content-TypeͳͲ • ϘσΟ ૹ৴͍ͨ͠σʔλͦͷͷ
Webϖʔδ͕දࣔ͞ΕΔྲྀΕ • HTTPϔομͷྫ https://developer.mozilla.org/ja/docs/Web/HTTP/Messages#HTTP_RequestsΑΓҾ༻ ։࢝ߦ ϘσΟ
Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 3. Webαʔό͕ϦΫΤετΛղੳ 4. ΫϥΠΞϯτϨεϙϯεΛฦ͢ • εςʔλεߦ ϓϩτίϧͷόʔδϣϯ(௨ৗHTTP/1.1), εςʔλείʔυ, εςʔλεϝοηʔδ
• ϔομʔ EtagConent-TypeͳͲ༷ʑͳใ • ϘσΟ ϦΫΤετͨ͠σʔλͦͷͷ
Webϖʔδ͕දࣔ͞ΕΔྲྀΕ • Ϩεϙϯεϔομͷྫ https://developer.mozilla.org/ja/docs/Web/HTTP/Messages#HTTP_RequestsΑΓҾ༻ ։࢝ߦ ϘσΟ
Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 5. ϨεϙϯεΛWebϒϥβ͕ղੳ͠දࣔ͢Δ ࣍ͷΑ͏ͳσʔλ͕ฦͬͯ͘Δ <!DOCTYPE html> <html lang="en"> <head> <meta
charset="UTF-8"> <title>Document</title> </head> <body> <h1>d(^_^o)</h1> <img src="ha.png"> ͜Ε<a href="http://example.com/">ϦϯΫ</a>ͷྫͰ͢. </body> </html> ಘΒΕͨσʔλWebϒϥβ͕ղऍͯ͠දࣔ
Webϖʔδ͕දࣔ͞ΕΔྲྀΕ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head>
<body> <h1>d(^_^o)</h1> <img src="ha.png"> ͜Ε<a href="http://example.com/">ϦϯΫ</a>ͷྫͰ͢. </body> </html> 1ͭͷϦΫΤετͰಘΒΕΔσʔλ1ͭͷΈ → ը૾σʔλͳͲ, ͋ΒͨΊͯϦΫΤετΛߦͳ͏
Webϖʔδ͕දࣔ͞ΕΔྲྀΕ HTMLϖʔδΛಘͨ͋ͱ… ha.pngΛ͍ͩ͘͞ Ͳ͏ͧ(200 OK) <!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>d(^_^o)</h1> <img src="ha.png"> ͜Ε<a href="http://example.com/">ϦϯΫ</a>ͷྫͰ͢. </body> </html>
࣍ 1. Webͱ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥβ 5.
WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷΈ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ
੩తϖʔδͱಈతϖʔδ • ԿΞΫηεͯ͠, ݅Λม͑ͯಉ͡༰Λฦ͢ → ੩తϖʔδ • ͱͱWebจॻΛڞ༗͢ΔͨΊʹ࢈·Εͨγες ϜͰ͋ΔͨΊ,ϖʔδ੩తͳͷ͚ͩͰྑ͔ͬͨ →
Web͕ීٴ͢Δͱ, ಈతͳϖʔδͷधཁ͕ߴ·ͬͨ Ωʔϫʔυɿ੩తϖʔδ, ಈతϖʔδ
੩తϖʔδͱಈతϖʔδ • ݅ʹΑͬͯ༰͕มΘΔϖʔδ → ಈతϖʔδ ‣ GoogleͷΑ͏ͳݕࡧαΠτͰ୯ޠΛࢦఆ͢Δͱ, ͦΕ ʹԠͨ͡ϖʔδ͕ฦͬͯ͘Δ ‣
ܝࣔ൘ͷΑ͏ͳνϟοτγεςϜ ‣ ϩάΠϯ͢Δͱ͚ࣗͩͷϖʔδ͕දࣔ͞ΕΔ ಈతϖʔδͷྫ
࣍ 1. Webͱ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥβ 5.
WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷΈ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ
ಈతϖʔδͷΈ • CGI (Common Gateway Interface) ಈతͳWebϖʔδΛੜ͢Δํ๏ͷ1ͭ ‣ ΫϥΠΞϯτCGIΛࣔ͢URLϦΫΤετ͢Δ ‣
αʔόଆCGIʹΑͬͯϓϩάϥϜ͕࣮ߦ͞Ε, ࡞ ͞ΕͨHTMLϑΝΠϧ͕ΫϥΠΞϯτʹฦΔ - ϓϩάϥϜΛαʔόʔαΠυɾεΫϦϓτͱݺͿ - εΫϦϓτݴޠͰهड़͞ΕΔࣄ͕ଟ͍ ΩʔϫʔυɿCGI, αʔόʔαΠυεΫϦϓτ, εΫϦϓτݴޠ
ಈతϖʔδͷΈ • αʔόʔαΠυɾεΫϦϓτ CGI͔Βݺͼग़͞ΕΔϓϩάϥϜͷ͜ͱ. ‣ εΫϦϓτݴޠ͕ΘΕΔ͜ͱ͕ଟ͍ - Perl, Ruby, Python,
PHP, etc… • ࠷ۙPythonͷWSGIͱ͔, RubyͷRackͱ͔… • ͜ΕΒWebΞϓϦͱWebαʔόͷؒʹೖΓ, ͦΕͧ ΕΛܨ͙ڮ͠Λ୲͍ͬͯΔ ΩʔϫʔυɿαʔόʔαΠυεΫϦϓτ
ಈతϖʔδͷΈ • Rubyͷ߹ • Webαʔό nginx, Apache, etc… • ΞϓϦέʔγϣϯαʔό
Unicorn, puma, RainbowsͳͲ OHJOY Webαʔό 6OJDPSO APαʔό 6OJDPSO Rack 4JOBUSB 3BJMT ΞϓϦέʔγϣϯ "1αʔόΞϓϦέʔγϣϯ 3BDLΛڬΊ͓ޓ͍͕ԿͰ͋Δ͔ Λؾʹ͢Δඞཁ͕ͳ͍
ಈతϖʔδͷΈ • ΫϥΠΞϯταΠυεΫϦϓτ αʔόʔαΠυɾεΫϦϓτͱҟͳΓ, ΫϥΠΞϯτ ͷHTMLʹຒΊࠐ·ΕͨεΫϦϓτʹΑͬͯϖʔδΛಈ తʹมߋ͢Δͷ. ‣ ओʹJavaScript͕༻͍ΒΕΔ ΩʔϫʔυɿΫϥΠΞϯτεΫϦϓτ
ಈతϖʔδͷΈ 8FCαʔό $(* αʔόʔαΠυ εΫϦϓτ ϓϩάϥϜىಈ HTMLϑΝΠϧ αʔόʔαΠυɾεΫϦϓτ XFCϒϥβଆͰ εΫϦϓτΛ࣮ߦ͠ͳ͍
webϖʔδΛཁٻ ࡞ͨ͠HTML ϑΝΠϧΛૹ৴ αʔόଆͰεΫϦϓτΛ࣮ߦ͠ ࡞ͨ͠)5.-ϑΝΠϧΛฦ͢ ΫϥΠΞϯτ αʔό
ಈతϖʔδͷΈ ΫϥΠΞϯτɾεΫϦϓτ XFCϒϥβଆͰ εΫϦϓτΛ࣮ߦ͢Δ webϖʔδΛཁٻ εΫϦϓτ͕ຒ Ίࠐ·ΕͨHTML ϑΝΠϧΛฦ͢ ͋Β͔͡ΊεΫϦϓτ͕ຒΊࠐ ·Εͨ)5.-ϑΝΠϧΛฦ͢
ΫϥΠΞϯτ αʔό 8FCαʔό
࣍ 1. Webͱ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥβ 5.
WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷΈ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ
Webͷඪ४Խ Webٕज़ͷൃలʹͱͳͬͯ, ༷ʑͳٕज़͕։ൃ͞Εͨ • HTML(HyperText Markup Language) • XHTML(Extensible HyperText
Markup Language) • XML(Extensible Markup Language) • CSS(Cascading Style Sheets) • etc… ͜ͷΑ͏ͳػೳ֦ுΛ༷ʑͳاۀݸਓ͕ߦͳ͏ͱ, Web ϒϥβଆͰͲͷΑ͏ʹॲཧͨ͠Βྑ͍ͷ͔Θ͔Βͳ͍ ΩʔϫʔυɿHTML, XHTML, XML, CSS
Webͷඪ४Խ Webٕज़ͷඪ४Խ͕ඞཁʹͳͬͨ • ඪ४ͱ[1] ϧʔϧنଇɾن੍ͳͲͷ”औΓܾΊ”ͷ͜ͱ • ඪ४Խͱ[1] ඪ४Λҙࣝతʹ࡞ͬͯར༻͢Δ׆ಈͷ͜ͱ Webͷඪ४ԽΛߦ͏ஂମ →
W3C(World Wide Web Consortium) [1] https://www.jsa.or.jp/datas/media/10000/md_736.pdf ΩʔϫʔυɿW3C
• W3C(World Wide Web Consortium) ςΟϜɾόʔφʔζ=Ϧʔ͕ઃͨ͠, WebͰ༻͞ΕΔ֤ छٕज़ͷඪ४ԽΛਪਐ͢ΔͨΊʹઃཱ͞Εͨஂମ
• W3C͕ඪ४Խͨ͠ͷ, ʮקࠂʯͱ͍͏ܗͰൃද͞ΕΔ ͨΊڧ੍͞ΕΔͷͰͳ͍͕, ຆͲͷαΠτ͕W3Cඪ४ ʹ४ڌ͍ͯ͠Δ Webͷඪ४Խ ඪ४ԽΛߦ͍ͬͯΔن֨ͷྫ HTML, CSS, XML, XHTML, DOM, CGI, etc…
࣍ 1. Webͱ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥβ 5.
WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷΈ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ
Webͷઃܭࢥ ඪ४Խ͞ΕͨΘ͚Ͱͳ͍͕, WebۀքͰελϯμʔυ ͳઃܭࢥʹ, ࣍ͷΑ͏ͳͷ͕͋Δ • RESTful(REpresentational State Transfer) •
ηϚϯςΟοΫWeb
RESTfulͳαʔϏε
Webͷઃܭࢥ • RESTful(REpresentational State Transfer) 4ͭͷݪଇ͔ΒͳΔγϯϓϧͳઃܭͷ͜ͱ 1. εςʔτϨε ΓऔΓ1ճ͝ͱʹ݁. ଞͷΓऔΓʹӨڹ͠ͳ͍.
2. ΞυϨεՄಡੑ ͯ͢ͷϦιʔε͕ҰҙͳURIͷߏจͰදݱՄೳ 3. ౷ҰΠϯλʔϑΣʔε HTTPϝιουͷར༻͕౷Ұ͞Ε͍ͯΔ 4. ଓੑ ΓऔΓ͞ΕΔใʹϦϯΫΛؚΊΔࣄ͕Ͱ͖Δ
Webͷઃܭࢥ • εςʔτϨε εςʔτ=ʮঢ়ଶʯͷ͜ͱ. εςʔτϨεͱ͍͏͜ͱ, ΓऔΓΛߦ͏ࡍʹΫϥΠΞϯτͷίϯςΩετҰ ߟྀʢอ࣋ʣ͞Εͳ͍. ‣ ϦΫΤετඞཁͳใΛશؚͯΜͰ͍ͳ͚ΕͳΒ ͳ͍
→ ʁͲ͏͍͏͜ͱʁʢྫΛݟͯΈ·͠ΐ͏ʣ
Webͷઃܭࢥ εςʔτϑϧͷྫ ٬: ϋϯόʔΨʔηοτΛ͓ئ͍͠·͢ ళһ: αΠυϝχϡʔԿʹͳ͍͞·͔͢? ٬: ϙςτͰ ళһ: υϦϯΫԿʹͳ͍͞·͔͢?
٬: δϯδϟʔΤʔϧͰ ళһ: +50ԁͰυϦϯΫΛLαΠζʹͰ͖·͕͍͔͕͢Ͱ͔͢? ٬: MͰ͍͍Ͱ͢ ళһ: Ҏ্ͰΑΖ͍͠Ͱ͔͢? ٬: ͍ ళһ: ͔͜͠·Γ·ͨ͠ Ҿ༻ɿhttp://yohei-y.blogspot.jp/2007/10/blog-post.html
Webͷઃܭࢥ εςʔτϨεͷྫ ٬: ϋϯόʔΨʔηοτΛ͓ئ͍͠·͢ ళһ: αΠυϝχϡʔԿʹͳ͍͞·͔͢? ٬: ϋϯόʔΨʔηοτΛϙςτͰ͓ئ͍͠·͢ ళһ: υϦϯΫԿʹͳ͍͞·͔͢?
٬: ϋϯόʔΨʔηοτΛϙςτͱδϯδϟʔΤʔϧͰ͓ئ͍͠·͢ ళһ: +50ԁͰυϦϯΫΛLαΠζʹͰ͖·͕͍͔͕͢Ͱ͔͢? ٬: ϋϯόʔΨʔηοτΛϙςτͱδϯδϟʔΤʔϧ(M)Ͱ͓ئ͍͠·͢ ళһ: Ҏ্ͰΑΖ͍͠Ͱ͔͢? ٬: ϋϯόʔΨʔηοτΛϙςτͱδϯδϟʔΤʔϧ(M)Ͱ͓ئ͍͠·͢ɻҎ্ ళһ: ͔͜͠·Γ·ͨ͠ Ҿ༻ɿhttp://yohei-y.blogspot.jp/2007/10/blog-post.html
Webͷઃܭࢥ ྆ऀͷҧ͍ͳʹ͔ʁ ‣ ళһ͞Μ͕͓٬͞ΜͷཔΜͩใ(ίϯςΩετ)Λ֮ ͍͑ͯΔʢอ͍࣋ͯ͠Δʣ͔Ͳ͏͔ ‣ εςʔτϨεͳγεςϜͰ, ళһ͞Μ͕ใΛอ࣋ ͍ͯ͠ͳ͍ͨΊ, ϦΫΤετ͕ͲΜͲΜ͘ͳΓ
ʹͳΔ → ͳͥ͏ͷ͔ʁ
Webͷઃܭࢥ εςʔτϨεͷར εςʔτϨεͷܽ • ୯ҰͷϦΫΤετʹશͯͷใؚ͕·ΕΔ • ηογϣϯͷཧ͕γϯϓϧʹͳΔ • εέʔϥϏϦςΟͷ্ •
ωοτϫʔΫύϑΥʔϚϯεͷԼ
Webͷઃܭࢥ • ΞυϨεՄಡੑ ͯ͢ͷϦιʔε, ҰҙͳURIͰΞΫηεՄೳ api.github.comͷఏڙ͢Δeventsͱ͍͏ϦιʔεΛཁٻ͠ ͍ͯΔ
→ URIΛ͏͜ͱͰ, ײతͰ͔Γ͘͢ϦιʔεΛද͢ ͜ͱ͕ग़དྷΔ https://api.github.com/events github͕ఏڙ͢ΔAPIͷྫ
Webͷઃܭࢥ • ౷ҰΠϯλʔϑΣʔε RESTͰ༻͍ΒΕΔHTTPϝιου͕༧ΊܾΊΒΕ͓ͯ Γ, CRUDʹରԠ͍ͯ͠Δ ॲཧ )551ϝιου $36%ૢ࡞ ొ
1045 $3&"5& औಘ (&5 3&"% ߋ৽ 165 61%"5& আ %&-&5& %&-&5&
Webͷઃܭࢥ • CRUD Ӭଓੑͷجຊػೳ4ͭͷػೳͷ಄จࣈΛܨ͛ͨͷ (Create, Read, Update, Deleteͷ಄จࣈ) $36%ૢ࡞ ॲཧ
42- $3&"5& ొ */4&35 3&"% औಘ 4&-&$5 61%"5& ߋ৽ 61%"5& %&-&5& আ %&-&5&
Webͷઃܭࢥ URLͱHTTPϝιουͷΈ߹ΘͤΛఆ͓͖ٛͯ͠, ͦΕʹ ߹Θͤͯॲཧ͕มΘΔ. ॲཧ )551ϝιου $36%ૢ࡞ ొ 1045 DBMFOEBSTDBMFOEBS*EFWFOUT
औಘ (&5 DBMFOEBSTDBMFOEBS*EFWFOUTFWFOU*E ߋ৽ 165 DBMFOEBSTDBMFOEBS*EFWFOUTFWFOU*E আ %&-&5& DBMFOEBSTDBMFOEBS*EFWFOUTFWFOU*E googleΧϨϯμʔͷྫ
Webͷઃܭࢥ • ଓੑ RESTfulͳαʔϏεͰ, JSONXMLͰσʔλΛΓऔ Γ͢Δ͜ͱ͕ଟ͍. ͦͷதʹଞͷϦιʔεͷϦϯΫΛ ؚΊΔ͜ͱͰ, ͦͷϦϯΫΛḷΔ͚ͩͰଞͷϦιʔεʹ ΞΫηε͢Δ͜ͱ͕ग़དྷΔ.
ηϚϯςΟοΫWeb
ηϚϯςΟοΫWeb • ηϚϯςΟοΫWeb WebϖʔδʹใΛ͚Ճ͑Δ͜ͱͰ, ίϯϐϡʔλ͕ ࣗಈతʹҙຯΛཧղͯ͠ॲཧͰ͖ΔΑ͏ʹͳΔߏ → ςΟϜɾόʔφʔζ=Ϧʔ͕ఏএ͍ͯ͠Δ • HTML͚ͩͰҙຯΛཧղͰ͖ͳ͍ͨΊ,
XMLͰϚʔΫ Ξοϓ͠RDF(Resource Description Framework)ͱ OWL(Web ontology language)Λ༻͍ͯද͢. ‣ RDFOWLΛϝλσʔλͱݺͿ
ࠓޙͷ༧ఆ
༻ૉࡐ, ࢀߟϦϯΫ • ͍Β͢ͱ • k-tamura/cocha-icons https://github.com/k-tamura/cocha-icons • HTTPϝοηʔδ https://developer.mozilla.org/ja/docs/Web/HTTP/Messages
• RESTೖ جૅࣝ https://qiita.com/TakahiRoyte/items/949f4e88caecb02119aa • RESTful WebαʔϏεͷجຊ https://www.ibm.com/developerworks/jp/webservices/library/ ws-restful/index.html
༻ૉࡐ, ࢀߟϦϯΫ • Πϯλʔωοτ10ߨ࠲ɿRFC https://www.nic.ad.jp/ja/newsletter/No24/090.html • εςʔτϨεͱԿ͔ http://yohei-y.blogspot.jp/2007/10/blog-post.html