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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
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
130
コンテナ開発入門 1回目/Introduction to Container Development 1
bath_poo_
0
220
ISUCONってなんだ / What is ISUCON
bath_poo_
0
400
Web技術の基本 8回目 / Introduction to Web technologies 8th class
bath_poo_
0
230
Web技術の基本 7回目 / Introduction to Web technologies 7th class
bath_poo_
0
220
Web技術の基本 6回目 / Introduction to Web technologies 6th class
bath_poo_
1
290
Web技術の基本 5回目 / Introduction to Web technologies 5th class
bath_poo_
0
170
Web技術の基本 4回目 / Introduction to Web technologies 4th class
bath_poo_
0
250
Web技術の基本 3回目 / Introduction to Web technologies 3rd class
bath_poo_
0
280
Other Decks in Technology
See All in Technology
ASTを使って影響範囲を特定する
nealle
0
190
Screen Lens - 今見てる画面を翻訳する
komagata
0
280
AIネイティブプロダクトで顧客価値を最大化するプロダクトエンジニアとFDEの協働
righttouch
PRO
0
280
Reactの設計論
uhyo
20
11k
Adaptive Warehouse を今すぐ導入すべき理由と迷ったときの判断基準
__allllllllez__
0
220
2026-09-11 【Snowflake World Tour Tokyo 2026】Snowflakeを起点に、AI Agentが自律稼働し続ける未来へ / Driving AI Agents with Snowflake
civitaspo
0
390
俺の仕事は AIに奪われないし、たぶんその BIも要らない
hikaruri
0
420
Snowflakeのコスト最適化を支えるアーキテクチャ設計
ktatsuya
1
1.5k
新機種発売前に見直そう!端末移行で再ログインが要るアプリ・要らないアプリは何が違うのか 〜シームレスに再開できる設計と実装〜
zozotech
PRO
0
160
WAF 運用改善の承認サイクル/SRE_BizReach_MIXI_1
visional_engineering_and_design
2
640
GoCon2026 - Open Source, Open World
sanposhiho
4
3.9k
「守り」で活用するオンデバイスLLM 〜写ってはいけないを総力戦で防ぐ〜 / iOSDC Japan 2026
nakamuuu
0
140
Featured
See All Featured
Speed Design
sergeychernyshev
33
2.1k
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
720
Evolving SEO for Evolving Search Engines
ryanjones
0
290
Done Done
chrislema
186
16k
How STYLIGHT went responsive
nonsquared
100
6.3k
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
aleyda
2
12k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Design in an AI World
tapps
1
310
What does AI have to do with Human Rights?
axbom
PRO
1
2.4k
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
490
Everyday Curiosity
cassininazir
0
320
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
520
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