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
150
Web技術の基本 6回目 / Introduction to Web technologies 6th class
bath_poo_
1
240
Web技術の基本 5回目 / Introduction to Web technologies 5th class
bath_poo_
0
120
Web技術の基本 4回目 / Introduction to Web technologies 4th class
bath_poo_
0
200
Web技術の基本 3回目 / Introduction to Web technologies 3rd class
bath_poo_
0
240
Other Decks in Technology
See All in Technology
AWS re:Invent 2024 recap in 20min / JAWSUG 千葉 2025.1.14
shimy
1
100
Reactフレームワークプロダクトを モバイルアプリにして、もっと便利に。 ユーザに価値を届けよう。/React Framework with Capacitor
rdlabo
0
140
.NET 最新アップデート ~ AI とクラウド時代のアプリモダナイゼーション
chack411
0
200
Azureの開発で辛いところ
re3turn
0
240
機械学習を「社会実装」するということ 2025年版 / Social Implementation of Machine Learning 2025 Version
moepy_stats
7
1.6k
EMConf JP の楽しみ方 / How to enjoy EMConf JP
pauli
2
150
生成AIのビジネス活用
seosoft
0
110
My small contributions - Fujiwara Tech Conference 2025
ijin
0
1.5k
Visual StudioとかIDE関連小ネタ話
kosmosebi
1
380
デジタルアイデンティティ人材育成推進ワーキンググループ 翻訳サブワーキンググループ 活動報告 / 20250114-OIDF-J-EduWG-TranslationSWG
oidfj
0
550
Copilotの力を実感!3ヶ月間の生成AI研修の試行錯誤&成功事例をご紹介。果たして得たものとは・・?
ktc_shiori
0
360
深層学習と3Dキャプチャ・3Dモデル生成(土木学会応用力学委員会 応用数理・AIセミナー)
pfn
PRO
0
460
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
GitHub's CSS Performance
jonrohan
1030
460k
Into the Great Unknown - MozCon
thekraken
34
1.6k
What's in a price? How to price your products and services
michaelherold
244
12k
The World Runs on Bad Software
bkeepers
PRO
66
11k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
30
2.1k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
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