Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web技術の基本 1回目 / Introduction to Web technologies...

muttan
December 08, 2017
Technology
0
200

Web技術の基本 1回目 / Introduction to Web technologies 1st class

muttan

December 08, 2017
Tweet

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
統計データで2024年の クラウド・インフラ動向を眺める
ysknsid25
2
850
PHP ユーザのための OpenTelemetry 入門 / phpcon2024-opentelemetry
shin1x1
1
420
LINEヤフーのフロントエンド組織・体制の紹介【24年12月】
lycorp_recruit_jp
0
530
宇宙ベンチャーにおける最近の情シス取り組みについて
axelmizu
0
110
ゼロから創る横断SREチーム 挑戦と進化の軌跡
rvirus0817
2
270
どちらを使う?GitHub or Azure DevOps Ver. 24H2
kkamegawa
0
870
1等無人航空機操縦士一発試験 合格までの道のり ドローンミートアップ@大阪 2024/12/18
excdinc
0
170
レンジャーシステムズ | 会社紹介（採用ピッチ）
rssytems
0
200
5分でわかるDuckDB
chanyou0311
10
3.2k
alecthomas/kong はいいぞ / kamakura.go#7
fujiwara3
1
300
10分で学ぶKubernetesコンテナセキュリティ/10min-k8s-container-sec
mochizuki875
3
360
Storage Browser for Amazon S3
miu_crescent
1
240

Featured

See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
450
Raft: Consensus for Rubyists
vanstee
137
6.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
Automating Front-end Workflow
addyosmani
1366
200k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Facilitating Awesome Meetings
lara
50
6.1k
A Tale of Four Properties
chriscoyier
157
23k
Code Review Best Practice
trishagee
65
17k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
Building a Scalable Design System with Sketch
lauravandoore
460
33k

Transcript

  1. Webٕज़ͷجຊ 1ճ໨ Keisuke KAMIYA

  2. ͸͡Ίʹ

  3. ࠓճͷςʔϚ

  4. Chapter 1 Webٕज़ͱ͸

  5. ໨࣍ 1. Webͱ͸ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥ΢β 5.

    WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷ࢓૊Έ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ૝

  6. ໨࣍ 1. Webͱ͸ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥ΢β 5.

    WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷ࢓૊Έ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ૝

  7. Webͱ͸ • จॻͷެ։ɾӾཡͷͨΊͷγεςϜ → Web(΢Σϒ) • ਖ਼໊ࣜশ͸,World Wide Web(ੈքதʹ޿͕ΔΫϞͷ૥) →

    ུশ͸WWW • Webϖʔδ͸HyperTextͰهड़͞ΕΔ → HTML (HyperText Markup Language) • ϋΠύʔςΩετ͔ΒϋΠύʔςΩετ΁ͷϦϯΫ(ϋΠ ύʔϦϯΫ)Λ෇͚Δ͜ͱͰؔ࿈෇͚Λߦ͍, શମ͕େ ͖ͳ৘ใͷू߹ମͱͳΔ ΩʔϫʔυɿWeb, WWW, HyperText, HyperLink

  8. Webͱ͸ HyperText HyperLink HyperText HyperText HyperText HyperLink HyperLink d(^_^o) Ϣʔβ͸Webϒϥ΢β͔ΒΞΫηε

    ϋΠύʔϦϯΫͷΠϝʔδਤ

  9. Webͱ͸ ੈքதͷจॻΛϋΠύʔϦϯΫͰؔ࿈෇͚Δ ɹˠʮੈքن໛ͷ஖ᥨͷ૥ʯͱ͍͏ҙຯͰWWW

  10. ໨࣍ 1. Webͱ͸ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥ΢β 5.

    WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷ࢓૊Έ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ૝

  11. Πϯλʔωοτͱ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ϖʔδ͕ެ։ ΩʔϫʔυɿςΟϜɾόʔφʔζ=Ϧʔ

  12. ςΟϜɾόʔφʔζ=Ϧʔͬͯʁ 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

  13. ΠϯλʔωοτͱWeb • Πϯλʔωοτͷݪܕ → ARPANET(ΞϝϦΧࠃ๷૯লͷωοτϫʔΫ) • 1982೥
 TCP/IP͕ඪ४Խ͞Ε, ੈքن໛Ͱ૬ޓ઀ଓΛߦͳ͏Πϯ λʔωοτͱ͍͏֓೦͕ఏএ͞ΕΔ.

    → ౰ॳ͸ඇৗʹߴՁͳ΋ͷ͕ͩͬͨ, ઀ଓճઢ͕҆Ձͱ ͳΔ͜ͱͰҰൠϢʔβʹ΋޿·Γ, Webͷരൃతͳී ٴʹܨ͕ͬͨ

  14. ΠϯλʔωοτͱWeb • Πϯλʔωοτͷ໨త
 ੈք֤஍ͷίϯϐϡʔλΛ૬ޓ઀ଓ͍ͨ͠ʂ → ARPANETΛجʹΠϯλʔωοτ͕஀ੜ • Webͷ໨త
 υΩϡϝϯτΛڞ༗͢ΔγεςϜ͕΄͍͠ʂ →

    ENQUIREΛجʹWeb͕஀ੜ ҟͳΔ໨తͰ։ൃ͞Ε͕ͨͭ߹Θ͞Δ͜ͱͰ രൃతʹ޿͕ͬͨ

  15. ໨࣍ 1. Webͱ͸ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥ΢β 5.

    WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷ࢓૊Έ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ૝

  16. ͞·͟·ͳWebͷ༻్ • WebαΠτ
 1ͭͷυϝΠϯʹ͋Δෳ਺ͷจॻͷ͜ͱ. HyperLinkʹ Αͬͯ૬ޓʹͭͳ͕͓ͬͯΓ, ͦͷϦϯΫΛͨͲΔ͜ͱ ͰWebϖʔδؒΛҠಈ͢Δʢؔ࿈෇͚Δʣࣄ͕Ͱ͖Δ → ۙ೥Ͱ͸จॻͷӾཡ͚ͩͰ͸ͳ͘,

    ΞϓϦέʔγϣϯ ͱͯ͠΋ར༻͞ΕΔέʔε͕ଟ͍ ΩʔϫʔυɿWebαΠτ

  17. • API (Application Programming Interface)
 ΞϓϦέʔγϣϯΛιϑτ΢ΣΞ͔Βૢ࡞͢ΔͨΊͷ ΠϯλʔϑΣʔε
 ͞·͟·ͳWebͷ༻్ API SV

    APIΛ࢖ͬͯఱؾΛϦΫΤετ ࢦఆ͞Εͨ஍఺ͷ৘ใΛฦ͢ Ϣʔβʔ d(^_^o) APIͷྫ ‣ ఱؾ༧ใAPIΛ࢖ͬͯ, ఱؾΛऔಘ͢Δ. ‣ TwitterͷTimeLineΛऔಘ͢Δ etc… ΩʔϫʔυɿAPI

  18. ໨࣍ 1. Webͱ͸ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥ΢β 5.

    WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷ࢓૊Έ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ૝

  19. • ϋΠύʔςΩετΛهड़͢ΔͨΊͷݴޠ → 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, λά λάΛ࢖ͬͯهड़

  20. • HyperTextΛදࣔ͢Διϑτ΢ΣΞ → Webϒϥ΢βʢϒϥ΢βͱݺ͹ΕΔ͜ͱ͕ଟ͍ʣ • ϒϥ΢β͸༷ʑͳاۀ͕ϦϦʔε͍ͯ͠Δ • Google Chrome •

    Firefox Quantum • Safari • Vivaldi • (Sleipnirͬͯ·ͩੜ͖ͯΔΜͰ͔͢ʁʣ HTMLͱWebϒϥ΢β ʢ༨ஊʣݹ͍΋ͷͩͱMosaic͕༗໊Ͱ͢Ͷ.

  21. ໨࣍ 1. Webͱ͸ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥ΢β 5.

    WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷ࢓૊Έ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ૝

  22. WebαʔόͱHTTP • Webαʔό
 ΫϥΠΞϯτ͔ΒͷཁٻʹԠͯ͡ίϯςϯπΛฦ͢
 ιϑτ΢ΣΞʢಈ࡞ͯ͠Δίϯϐϡʔλͦͷ΋ͷΛࢦ ͢͜ͱ΋͋Δʣ ‣ Apache, nginx, IIS(Internet

    Information Service)͋ͨ Γ͕༗໊ ΩʔϫʔυɿWebαʔό

  23. WebαʔόͱHTTP Webαʔό ϢʔβʔT ϢʔβʔS ϦΫΤετͨ͠ίϯςϯπ͕ແ͍৔߹͸ 
 ແ͔ͬͨ͜ͱΛࣔ͢εςʔλείʔυΛฦ͢ “ࣗຫͷΞϨ”Λ͍ͩ͘͞ request “͠·΋Μ"Λ͍ͩ͘͞

    request :HTTPͰ௨৴ ͳ͍Ͱ͢ response (404) response Ͳ͏ͧ ͠·΋Μ (200)

  24. WebαʔόͱHTTP • HTTP(Hyper Text Transfer Protocol)
 ϋΠύʔςΩετͷ΍ΓऔΓΛඪ४Խͨ͠΋ͷ ‣ ϋΠύʔςΩετͷཁٻ, ૹ৴खॱ

    ‣ Webϖʔδ͕ଘࡏ͠ͳ͍৔߹, సૹ͢Δ৔߹ εςʔλείʔυ ҙຯ  ϦΫΤετ੒ޭ YY ϦμΠϨΫτ  ېࢭ͞Ε͍ͯΔ  ݟ͔ͭΒͳ͔ͬͨ खॱΛඪ४Խ͢Δ͜ͱͰ, ࡞੒ݩʹΑΔґଘΛݮΒ͢ ΩʔϫʔυɿHTTP

  25. ໨࣍ 1. Webͱ͸ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥ΢β 5.

    WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷ࢓૊Έ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ૝

  26. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 1. ΫϥΠΞϯτ͕URLΛࢦఆ 2. WebαʔόʹHTTPϦΫΤετΛૹΔ 3. Webαʔό͕ϦΫΤετΛղੳ 4. ΫϥΠΞϯτ΁ϨεϙϯεΛฦ͢ 5.

    ϨεϙϯεΛWebϒϥ΢β͕ղੳ͠දࣔ͢Δ ᶃ ᶄHTTP Request ᶅ ᶆResponse ᶇ

  27. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 1. ΫϥΠΞϯτ͕URLΛࢦఆ
 URL(Uniform Resource Locator)Λࢦఆͯ͠ϦΫΤετ http://example.com/index.html httpΛ࢖༻͢Δ example.comʹΞΫηε index.htmlΛཁٻ

    URLͷҰൠతͳදݱܗࣜ ʢεΩʔϜ໊ʣɿʢεΩʔϜ͝ͱͷදݱܗࣜʣ ΩʔϫʔυɿURL

  28. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ ίϨʹؔ͢Δৄ͍͠هड़͸RFC1738͋ͨΓΛಡΉͱৄ͘͠ॻ͍ͯ͋Γ·͢ //<user>:<password>@<host>:<port>/<url-path> http://<user>:<password>@<host>:<port>/<url-path> IP-basedͳ઀ଓ(http, ftp, etc..)ͷ৔߹ͷsyntax ͜ΕRFC1738Ͱ΍ͬͨ΍ͭͩʂ (Scheme) :

    (Syntax)ʹଇͬͯදه͢Δͱ,

  29. RFCͱ͸ʢ༨ஊʣ • RFC(Request for Comments)
 IETF(Internet Engineering Task Force)ʹΑΔΠϯλʔ ωοτʹؔΘΔ༷ʑͳٕज़ͷ࢖༻Λอଘɾެ։͢Δܗ

    ࣜͷ͜ͱ → ༷ʑͳաఔ(IETFʹఏग़)Λܦͯ, ඪ४Խ͞ΕΔ • શͯެ։͞Ε͍ͯΔͷͰ, ୭Ͱ΋ٞ࿦ʹࢀՃ͢Δ͜ͱ͕ Մೳ Webϖʔδ͕දࣔ͞ΕΔྲྀΕʹ໭Γ·͢ ͱ͜ΖͰRFC஌ͬͯ·͔͢ʁ

  30. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 2. WebαʔόʹHTTPϦΫΤετΛૹΔ
 ։࢝ߦɾϔομɾϘσΟͰߏ੒͞Ε͍ͯΔ • ։࢝ߦ
 HTTPͷϝιου(GET, POST, PUTͳͲ)ͱϦΫΤετର৅, HTTPόʔδϣϯ৘ใ

    • ϔομ
 User-Agent΍Accept-Type, Content-TypeͳͲ • ϘσΟ
 ૹ৴͍ͨ͠σʔλͦͷ΋ͷ

  31. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ • HTTPϔομͷྫ https://developer.mozilla.org/ja/docs/Web/HTTP/Messages#HTTP_RequestsΑΓҾ༻ ։࢝ߦ ϘσΟ

  32. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 3. Webαʔό͕ϦΫΤετΛղੳ 4. ΫϥΠΞϯτ΁ϨεϙϯεΛฦ͢ • εςʔλεߦ
 ϓϩτίϧͷόʔδϣϯ(௨ৗHTTP/1.1), εςʔλείʔυ, εςʔλεϝοηʔδ

    • ϔομʔ
 Etag΍Conent-TypeͳͲ༷ʑͳ৘ใ • ϘσΟ
 ϦΫΤετͨ͠σʔλͦͷ΋ͷ

  33. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ • Ϩεϙϯεϔομͷྫ https://developer.mozilla.org/ja/docs/Web/HTTP/Messages#HTTP_RequestsΑΓҾ༻ ։࢝ߦ ϘσΟ

  34. 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ϒϥ΢β͕ղऍͯ͠දࣔ

  35. 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ͭͷΈ → ը૾σʔλͳͲ͸, ͋ΒͨΊͯϦΫΤετΛߦͳ͏

  36. 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>

  37. ໨࣍ 1. Webͱ͸ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥ΢β 5.

    WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷ࢓૊Έ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ૝

  38. ੩తϖʔδͱಈతϖʔδ • Կ౓ΞΫηεͯ͠΋, ৚݅Λม͑ͯ΋ಉ͡಺༰Λฦ͢ → ੩తϖʔδ • ΋ͱ΋ͱWeb͸จॻΛڞ༗͢ΔͨΊʹ࢈·Εͨγες ϜͰ͋ΔͨΊ,ϖʔδ͸੩తͳ΋ͷ͚ͩͰྑ͔ͬͨ →

    Web͕ීٴ͢Δͱ, ಈతͳϖʔδͷधཁ͕ߴ·ͬͨ Ωʔϫʔυɿ੩తϖʔδ, ಈతϖʔδ

  39. ੩తϖʔδͱಈతϖʔδ • ৚݅ʹΑͬͯ಺༰͕มΘΔϖʔδ → ಈతϖʔδ ‣ GoogleͷΑ͏ͳݕࡧαΠτͰ୯ޠΛࢦఆ͢Δͱ, ͦΕ ʹԠͨ͡ϖʔδ͕ฦͬͯ͘Δ ‣

    ܝࣔ൘ͷΑ͏ͳνϟοτγεςϜ ‣ ϩάΠϯ͢Δͱࣗ෼͚ͩͷϖʔδ͕දࣔ͞ΕΔ ಈతϖʔδͷྫ

  40. ໨࣍ 1. Webͱ͸ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥ΢β 5.

    WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷ࢓૊Έ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ૝

  41. ಈతϖʔδͷ࢓૊Έ • CGI (Common Gateway Interface) ಈతͳWebϖʔδΛੜ੒͢Δํ๏ͷ1ͭ ‣ ΫϥΠΞϯτ͸CGIΛࣔ͢URL΁ϦΫΤετ͢Δ ‣

    αʔόଆ͸CGIʹΑͬͯϓϩάϥϜ͕࣮ߦ͞Ε, ࡞੒ ͞ΕͨHTMLϑΝΠϧ͕ΫϥΠΞϯτʹฦΔ - ϓϩάϥϜΛαʔόʔαΠυɾεΫϦϓτͱݺͿ - εΫϦϓτݴޠͰهड़͞ΕΔࣄ͕ଟ͍ ΩʔϫʔυɿCGI, αʔόʔαΠυεΫϦϓτ, εΫϦϓτݴޠ

  42. ಈతϖʔδͷ࢓૊Έ • αʔόʔαΠυɾεΫϦϓτ
 CGI͔Βݺͼग़͞ΕΔϓϩάϥϜͷ͜ͱ. ‣ εΫϦϓτݴޠ͕࢖ΘΕΔ͜ͱ͕ଟ͍ - Perl, Ruby, Python,

    PHP, etc… • ࠷ۙ͸PythonͷWSGIͱ͔, RubyͷRackͱ͔… • ͜ΕΒ͸WebΞϓϦͱWebαʔόͷؒʹೖΓ, ͦΕͧ ΕΛܨ͙ڮ౉͠໾Λ୲͍ͬͯΔ ΩʔϫʔυɿαʔόʔαΠυεΫϦϓτ

  43. ಈతϖʔδͷ࢓૊Έ • Rubyͷ৔߹ • Webαʔό
 nginx, Apache, etc… • ΞϓϦέʔγϣϯαʔό


    Unicorn, puma, RainbowsͳͲ OHJOY Webαʔό 6OJDPSO APαʔό 6OJDPSO Rack 4JOBUSB 3BJMT ΞϓϦέʔγϣϯ "1αʔό΋ΞϓϦέʔγϣϯ΋  3BDLΛڬΊ͹͓ޓ͍͕ԿͰ͋Δ͔ Λؾʹ͢Δඞཁ͕ͳ͍

  44. ಈతϖʔδͷ࢓૊Έ • ΫϥΠΞϯταΠυεΫϦϓτ
 αʔόʔαΠυɾεΫϦϓτͱ͸ҟͳΓ, ΫϥΠΞϯτ ͷHTMLʹຒΊࠐ·ΕͨεΫϦϓτʹΑͬͯϖʔδΛಈ తʹมߋ͢Δ΋ͷ. ‣ ओʹJavaScript͕༻͍ΒΕΔ ΩʔϫʔυɿΫϥΠΞϯτεΫϦϓτ

  45. ಈతϖʔδͷ࢓૊Έ 8FCαʔό $(* αʔόʔαΠυ εΫϦϓτ ϓϩάϥϜىಈ HTMLϑΝΠϧ αʔόʔαΠυɾεΫϦϓτ XFCϒϥ΢βଆͰ͸ εΫϦϓτΛ࣮ߦ͠ͳ͍

    webϖʔδΛཁٻ ࡞੒ͨ͠HTML ϑΝΠϧΛૹ৴ αʔόଆͰεΫϦϓτΛ࣮ߦ͠  ࡞੒ͨ͠)5.-ϑΝΠϧΛฦ͢ ΫϥΠΞϯτ αʔό

  46. ಈతϖʔδͷ࢓૊Έ ΫϥΠΞϯτɾεΫϦϓτ XFCϒϥ΢βଆͰ εΫϦϓτΛ࣮ߦ͢Δ webϖʔδΛཁٻ εΫϦϓτ͕ຒ Ίࠐ·ΕͨHTML ϑΝΠϧΛฦ͢ ͋Β͔͡ΊεΫϦϓτ͕ຒΊࠐ ·Εͨ)5.-ϑΝΠϧΛฦ͢

    ΫϥΠΞϯτ αʔό 8FCαʔό

  47. ໨࣍ 1. Webͱ͸ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥ΢β 5.

    WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷ࢓૊Έ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ૝

  48. 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

  49. Webͷඪ४Խ Webٕज़ͷඪ४Խ͕ඞཁʹͳͬͨ • ඪ४ͱ͸[1]
 ϧʔϧ΍نଇɾن੍ͳͲͷ”औΓܾΊ”ͷ͜ͱ • ඪ४Խͱ͸[1]
 ඪ४Λҙࣝతʹ࡞ͬͯར༻͢Δ׆ಈͷ͜ͱ Webͷඪ४ԽΛߦ͏ஂମ →

    W3C(World Wide Web Consortium) [1] https://www.jsa.or.jp/datas/media/10000/md_736.pdf ΩʔϫʔυɿW3C

  50. • W3C(World Wide Web Consortium)
 ςΟϜɾόʔφʔζ=Ϧʔ͕૑ઃͨ͠, WebͰ࢖༻͞ΕΔ֤ छٕज़ͷඪ४ԽΛਪਐ͢ΔͨΊʹઃཱ͞Εͨஂମ
 
 


    • W3C͕ඪ४Խͨ͠΋ͷ͸, ʮקࠂʯͱ͍͏ܗͰൃද͞ΕΔ ͨΊڧ੍͞ΕΔ΋ͷͰ͸ͳ͍͕, ຆͲͷαΠτ͕W3Cඪ४ ʹ४ڌ͍ͯ͠Δ Webͷඪ४Խ ඪ४ԽΛߦ͍ͬͯΔن֨ͷྫ HTML, CSS, XML, XHTML, DOM, CGI, etc…

  51. ໨࣍ 1. Webͱ͸ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥ΢β 5.

    WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷ࢓૊Έ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ૝

  52. Webͷઃܭࢥ૝ ඪ४Խ͞ΕͨΘ͚Ͱ͸ͳ͍͕, WebۀքͰ͸ελϯμʔυ ͳઃܭࢥ૝ʹ, ࣍ͷΑ͏ͳ΋ͷ͕͋Δ • RESTful(REpresentational State Transfer) •

    ηϚϯςΟοΫWeb

  53. RESTfulͳαʔϏε

  54. Webͷઃܭࢥ૝ • RESTful(REpresentational State Transfer)
 4ͭͷݪଇ͔ΒͳΔγϯϓϧͳઃܭͷ͜ͱ 1. εςʔτϨε
 ΍ΓऔΓ͸1ճ͝ͱʹ׬݁. ଞͷ΍ΓऔΓʹӨڹ͠ͳ͍.

    2. ΞυϨεՄಡੑ
 ͢΂ͯͷϦιʔε͕ҰҙͳURIͷߏจͰදݱՄೳ 3. ౷ҰΠϯλʔϑΣʔε
 HTTPϝιουͷར༻͕౷Ұ͞Ε͍ͯΔ 4. ઀ଓੑ
 ΍ΓऔΓ͞ΕΔ৘ใʹϦϯΫΛؚΊΔࣄ͕Ͱ͖Δ

  55. Webͷઃܭࢥ૝ • εςʔτϨε
 εςʔτ=ʮঢ়ଶʯͷ͜ͱ. εςʔτϨεͱ͍͏͜ͱ͸, ΍ΓऔΓΛߦ͏ࡍʹΫϥΠΞϯτͷίϯςΩετ͸Ұ ੾ߟྀʢอ࣋ʣ͞Εͳ͍. ‣ ϦΫΤετ͸ඞཁͳ৘ใΛશؚͯΜͰ͍ͳ͚Ε͹ͳΒ ͳ͍

    → ͸ʁͲ͏͍͏͜ͱʁʢྫΛݟͯΈ·͠ΐ͏ʣ

  56. Webͷઃܭࢥ૝ εςʔτϑϧͷྫ ٬: ϋϯόʔΨʔηοτΛ͓ئ͍͠·͢ ళһ: αΠυϝχϡʔ͸Կʹͳ͍͞·͔͢? ٬: ϙςτͰ ళһ: υϦϯΫ͸Կʹͳ͍͞·͔͢?

    ٬: δϯδϟʔΤʔϧͰ ళһ: +50ԁͰυϦϯΫΛLαΠζʹͰ͖·͕͍͔͕͢Ͱ͔͢? ٬: MͰ͍͍Ͱ͢ ళһ: Ҏ্ͰΑΖ͍͠Ͱ͔͢? ٬: ͸͍ ళһ: ͔͜͠·Γ·ͨ͠ Ҿ༻ɿhttp://yohei-y.blogspot.jp/2007/10/blog-post.html

  57. Webͷઃܭࢥ૝ εςʔτϨεͷྫ ٬: ϋϯόʔΨʔηοτΛ͓ئ͍͠·͢ ళһ: αΠυϝχϡʔ͸Կʹͳ͍͞·͔͢? ٬: ϋϯόʔΨʔηοτΛϙςτͰ͓ئ͍͠·͢ ళһ: υϦϯΫ͸Կʹͳ͍͞·͔͢?

    ٬: ϋϯόʔΨʔηοτΛϙςτͱδϯδϟʔΤʔϧͰ͓ئ͍͠·͢ ళһ: +50ԁͰυϦϯΫΛLαΠζʹͰ͖·͕͍͔͕͢Ͱ͔͢? ٬: ϋϯόʔΨʔηοτΛϙςτͱδϯδϟʔΤʔϧ(M)Ͱ͓ئ͍͠·͢ ళһ: Ҏ্ͰΑΖ͍͠Ͱ͔͢? ٬: ϋϯόʔΨʔηοτΛϙςτͱδϯδϟʔΤʔϧ(M)Ͱ͓ئ͍͠·͢ɻҎ্ ళһ: ͔͜͠·Γ·ͨ͠ Ҿ༻ɿhttp://yohei-y.blogspot.jp/2007/10/blog-post.html

  58. Webͷઃܭࢥ૝ ྆ऀͷҧ͍͸ͳʹ͔ʁ ‣ ళһ͞Μ͕͓٬͞ΜͷཔΜͩ৘ใ(ίϯςΩετ)Λ֮ ͍͑ͯΔʢอ͍࣋ͯ͠Δʣ͔Ͳ͏͔ ‣ εςʔτϨεͳγεςϜͰ͸, ళһ͞Μ͕৘ใΛอ࣋ ͍ͯ͠ͳ͍ͨΊ, ϦΫΤετ͕ͲΜͲΜ௕͘ͳΓ৑௕

    ʹͳΔ → ͳͥ࢖͏ͷ͔ʁ

  59. Webͷઃܭࢥ૝ εςʔτϨεͷར఺ εςʔτϨεͷܽ఺ • ୯ҰͷϦΫΤετʹશͯͷ৘ใؚ͕·ΕΔ • ηογϣϯͷ؅ཧ͕γϯϓϧʹͳΔ • εέʔϥϏϦςΟͷ޲্ •

    ωοτϫʔΫύϑΥʔϚϯεͷ௿Լ

  60. Webͷઃܭࢥ૝ • ΞυϨεՄಡੑ
 ͢΂ͯͷϦιʔε͸, ҰҙͳURIͰΞΫηεՄೳ
 
 
 
 api.github.comͷఏڙ͢Δeventsͱ͍͏ϦιʔεΛཁٻ͠ ͍ͯΔ

    → URIΛ࢖͏͜ͱͰ, ௚ײతͰ෼͔Γ΍͘͢ϦιʔεΛද͢ ͜ͱ͕ग़དྷΔ https://api.github.com/events github͕ఏڙ͢ΔAPIͷྫ

  61. Webͷઃܭࢥ૝ • ౷ҰΠϯλʔϑΣʔε
 RESTͰ༻͍ΒΕΔHTTPϝιου͕༧ΊܾΊΒΕ͓ͯ Γ, CRUDʹରԠ͍ͯ͠Δ ॲཧ )551ϝιου $36%ૢ࡞ ొ࿥

    1045 $3&"5& औಘ (&5 3&"% ߋ৽ 165 61%"5& ࡟আ %&-&5& %&-&5&

  62. Webͷઃܭࢥ૝ • CRUD
 Ӭଓੑͷجຊػೳ4ͭͷػೳͷ಄จࣈΛܨ͛ͨ΋ͷ (Create, Read, Update, Deleteͷ಄จࣈ) $36%ૢ࡞ ॲཧ

    42- $3&"5& ొ࿥ */4&35 3&"% औಘ 4&-&$5 61%"5& ߋ৽ 61%"5& %&-&5& ࡟আ %&-&5&

  63. Webͷઃܭࢥ૝ URLͱHTTPϝιουͷ૊Έ߹ΘͤΛఆ͓͖ٛͯ͠, ͦΕʹ ߹Θͤͯॲཧ͕มΘΔ. ॲཧ )551ϝιου $36%ૢ࡞ ొ࿥ 1045 DBMFOEBSTDBMFOEBS*EFWFOUT

    औಘ (&5 DBMFOEBSTDBMFOEBS*EFWFOUTFWFOU*E ߋ৽ 165 DBMFOEBSTDBMFOEBS*EFWFOUTFWFOU*E ࡟আ %&-&5& DBMFOEBSTDBMFOEBS*EFWFOUTFWFOU*E googleΧϨϯμʔͷྫ

  64. Webͷઃܭࢥ૝ • ઀ଓੑ
 RESTfulͳαʔϏεͰ͸, JSON΍XMLͰσʔλΛ΍Γऔ Γ͢Δ͜ͱ͕ଟ͍. ͦͷதʹଞͷϦιʔε΁ͷϦϯΫΛ ؚΊΔ͜ͱͰ, ͦͷϦϯΫΛḷΔ͚ͩͰଞͷϦιʔεʹ ΞΫηε͢Δ͜ͱ͕ग़དྷΔ.

  65. ηϚϯςΟοΫWeb

  66. ηϚϯςΟοΫWeb • ηϚϯςΟοΫWeb
 Webϖʔδʹ৘ใΛ෇͚Ճ͑Δ͜ͱͰ, ίϯϐϡʔλ͕ ࣗಈతʹҙຯΛཧղͯ͠ॲཧͰ͖ΔΑ͏ʹͳΔߏ૝ → ςΟϜɾόʔφʔζ=Ϧʔ͕ఏএ͍ͯ͠Δ • HTML͚ͩͰ͸ҙຯΛཧղͰ͖ͳ͍ͨΊ,

    XMLͰϚʔΫ Ξοϓ͠RDF(Resource Description Framework)ͱ OWL(Web ontology language)Λ༻͍ͯද͢. ‣ RDF΍OWLΛϝλσʔλͱݺͿ

  67. ࠓޙͷ༧ఆ

  68. ࢖༻ૉࡐ, ࢀߟϦϯΫ • ͍Β͢ͱ΍ • 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

  69. ࢖༻ૉࡐ, ࢀߟϦϯΫ • Πϯλʔωοτ10෼ߨ࠲ɿRFC
 https://www.nic.ad.jp/ja/newsletter/No24/090.html • εςʔτϨεͱ͸Կ͔ 
 http://yohei-y.blogspot.jp/2007/10/blog-post.html