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

Fd09da0d9751bb7875ef4ff7e6201860?s=47 muttan
December 08, 2017
Technology
0
130

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

Fd09da0d9751bb7875ef4ff7e6201860?s=128

muttan

December 08, 2017
Tweet

More Decks by muttan

See All by muttan
Fd09da0d9751bb7875ef4ff7e6201860?s=48 bath_poo_
0
21
Fd09da0d9751bb7875ef4ff7e6201860?s=48 bath_poo_
0
71
Fd09da0d9751bb7875ef4ff7e6201860?s=48 bath_poo_
0
220
Fd09da0d9751bb7875ef4ff7e6201860?s=48 bath_poo_
0
78
Fd09da0d9751bb7875ef4ff7e6201860?s=48 bath_poo_
0
80
Fd09da0d9751bb7875ef4ff7e6201860?s=48 bath_poo_
1
160
Fd09da0d9751bb7875ef4ff7e6201860?s=48 bath_poo_
0
78
Fd09da0d9751bb7875ef4ff7e6201860?s=48 bath_poo_
0
110
Fd09da0d9751bb7875ef4ff7e6201860?s=48 bath_poo_
0
160

Other Decks in Technology

See All in Technology
332f89cc697355902a817506b6995f2b?s=48 ytaka23
1
880
3f2e97dc4e6a5daaf1cb8a406c533176?s=48 knqyf263
0
310
0479057e04d0dbef40692b5f171f60e4?s=48 takanakahiko
0
450
42d77f62a04b402d6f7cad816a417592?s=48 watawatavoltage
0
200
2102a6b8760bd6f57f672805723dd83a?s=48 line_developers_tw
0
640
11d3072d628a7b976cd2f4e6a3cf750f?s=48 yuyaabo
0
570
Fccb5974b63d64636a7c90faf3bab51f?s=48 kikuzo
9
1.3k
5e25aec60358948cd53cfcdfd3714c6b?s=48 weblyzard
1
2k
57eb5b1713206c5edb521dde99cc5f30?s=48 key
0
200
57e8d22493c141fd3c7e7dbe62196c1b?s=48 uenitty
0
370
5c772b62f1974e9da3a88fbb4ef02696?s=48 hariby
1
120
Cc8a208e174943d1da814783841abd50?s=48 shinodogg
0
170

Featured

See All Featured
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
142
19k
5b6a2bd86ef643786a381a212e0ef2f1?s=48 geoffreycrofte
11
510
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
155
11k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
293
39k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
241
20k
78b475797a14c84799063c7cd073962f?s=48 holman
287
130k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
435
28k
C7393b7ba7ec9c8890dd77d209fbb3c9?s=48 maltzj
499
36k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
682
180k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
108
9.6k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
216
16k
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
218
14k

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