Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
Web技術の基本 1回目 / Introduction to Web technologies...
Search
muttan
December 08, 2017
Technology
250
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Web技術の基本 1回目 / Introduction to Web technologies 1st class
muttan
December 08, 2017
More Decks by muttan
See All by muttan
さわやか待ち時間LINE botを作った話 / Sawayaka LINE bot
bath_poo_
0
140
コンテナ開発入門 1回目/Introduction to Container Development 1
bath_poo_
0
240
ISUCONってなんだ / What is ISUCON
bath_poo_
0
410
Web技術の基本 8回目 / Introduction to Web technologies 8th class
bath_poo_
0
250
Web技術の基本 7回目 / Introduction to Web technologies 7th class
bath_poo_
0
230
Web技術の基本 6回目 / Introduction to Web technologies 6th class
bath_poo_
1
300
Web技術の基本 5回目 / Introduction to Web technologies 5th class
bath_poo_
0
180
Web技術の基本 4回目 / Introduction to Web technologies 4th class
bath_poo_
0
260
Web技術の基本 3回目 / Introduction to Web technologies 3rd class
bath_poo_
0
280
Other Decks in Technology
See All in Technology
ストレスなくAIと付き合いたい!こんなときどうしてる?
namiki64
4
630
「エーアイ」をバズワードにしないために RPA 導入経験と Kiro 上での Claude モデル利用経験から
kazzpapa3
0
100
React改造してみた
tsukina_7mochi
0
140
Claude の新機能を、 出た日に触って社内に届けるまで
rfdnxbro
1
190
AIがコードを書く時代に、エンジニアは何で自分の価値を証明するのか / In an era where AI writes code how do engineers prove their value
carta_engineering
3
1.1k
LambdaWebFunctionsを試してみた / exploring-lambda-web-functions
koukihosaka
1
360
日本語に強いオープンな大規模言語モデル「LLM-jp」
odashi
5
1.2k
エンタメ企業のM&Aを支えるデータ基盤 ― 統合から店舗のリアルタイム分析まで / Data Engineering Summit 2026
genda
0
210
NDIでApple Vision Proにリアルタイム映像送信
jyouryuusui
0
130
Running Kotlin + Quarkus with Lambda
nealle
1
4k
ウォンテッドリーの最近のプロダクトと技術の紹介
stomk
0
220
USB PDを使ってスマホを労わりたい
raspython3
0
180
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
6.1k
Odyssey Design
rkendrick25
PRO
2
880
VelocityConf: Rendering Performance Case Studies
addyosmani
331
25k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
37
6.6k
The Spectacular Lies of Maps
axbom
PRO
1
1.1k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
1
3.4k
A better future with KSS
kneath
240
18k
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
580
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
600
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
600
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
2
310
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