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
200
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
100
コンテナ開発入門 1回目/Introduction to Container Development 1
bath_poo_
0
140
ISUCONってなんだ / What is ISUCON
bath_poo_
0
320
Web技術の基本 8回目 / Introduction to Web technologies 8th class
bath_poo_
0
170
Web技術の基本 7回目 / Introduction to Web technologies 7th class
bath_poo_
0
140
Web技術の基本 6回目 / Introduction to Web technologies 6th class
bath_poo_
1
230
Web技術の基本 5回目 / Introduction to Web technologies 5th class
bath_poo_
0
110
Web技術の基本 4回目 / Introduction to Web technologies 4th class
bath_poo_
0
200
Web技術の基本 3回目 / Introduction to Web technologies 3rd class
bath_poo_
0
230
Other Decks in Technology
See All in Technology
多領域インシデントマネジメントへの挑戦:ハードウェアとソフトウェアの融合が生む課題/Challenge to multidisciplinary incident management: Issues created by the fusion of hardware and software
bitkey
PRO
2
110
PHPerのための計算量入門/Complexity101 for PHPer
hanhan1978
5
210
2024年にチャレンジしたことを振り返るぞ
mitchan
0
140
ブラックフライデーで購入したPixel9で、Gemini Nanoを動かしてみた
marchin1989
1
540
プロダクト開発を加速させるためのQA文化の築き方 / How to build QA culture to accelerate product development
mii3king
1
270
10個のフィルタをAXI4-Streamでつなげてみた
marsee101
0
170
ガバメントクラウドのセキュリティ対策事例について
fujisawaryohei
0
560
5分でわかるDuckDB
chanyou0311
10
3.2k
LINE Developersプロダクト(LIFF/LINE Login)におけるフロントエンド開発
lycorptech_jp
PRO
0
120
NW-JAWS #14 re:Invent 2024(予選落ち含)で 発表された推しアップデートについて
nagisa53
0
270
DevOps視点でAWS re:invent2024の新サービス・アプデを振り返ってみた
oshanqq
0
180
ゼロから創る横断SREチーム 挑戦と進化の軌跡
rvirus0817
2
270
Featured
See All Featured
Practical Orchestrator
shlominoach
186
10k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Done Done
chrislema
181
16k
GraphQLとの向き合い方2022年版
quramy
44
13k
Adopting Sorbet at Scale
ufuk
73
9.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building Your Own Lightsaber
phodgson
103
6.1k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
Faster Mobile Websites
deanohume
305
30k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
48
2.2k
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