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

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

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

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
25
Fd09da0d9751bb7875ef4ff7e6201860?s=48 bath_poo_
0
76
Fd09da0d9751bb7875ef4ff7e6201860?s=48 bath_poo_
0
230
Fd09da0d9751bb7875ef4ff7e6201860?s=48 bath_poo_
0
82
Fd09da0d9751bb7875ef4ff7e6201860?s=48 bath_poo_
0
82
Fd09da0d9751bb7875ef4ff7e6201860?s=48 bath_poo_
1
180
Fd09da0d9751bb7875ef4ff7e6201860?s=48 bath_poo_
0
81
Fd09da0d9751bb7875ef4ff7e6201860?s=48 bath_poo_
0
110
Fd09da0d9751bb7875ef4ff7e6201860?s=48 bath_poo_
0
170

Other Decks in Technology

See All in Technology
49f49940f0831a426745c028684bcdad?s=48 hatena
1
2.9k
351ad6de24f57760f9275bc0ad06e564?s=48 quiver
0
220
79dcb04101764d7bf66f898dd446838e?s=48 tsukubachallenge
0
170
0350fb935be160186cd72472c9e5543b?s=48 hayaosuzuki
0
100
97d180294474e9df01503148f3b11f39?s=48 lambda
0
2.9k
744424a2b6307140bf794ffb00ce5ec1?s=48 yujioshima
1
500
091dd27febe18fcb155ffbdb0dd63e02?s=48 hatumeika
0
2k
898361eff829c27d6357f23b3d0259f5?s=48 hanafusa1991
0
620
8aba6de431668fc8d09977c0e33c63c1?s=48 jaguar_imo
1
340
140494d272a4d89883a94fdfdb29dea2?s=48 oracle4engineer
PRO
1
120
53850955f15249a1a9dc49df6113e400?s=48 line_developers
PRO
0
2.1k
49f49940f0831a426745c028684bcdad?s=48 hatena
0
2.8k

Featured

See All Featured
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
43
2k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
148
20k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
443
29k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
147
20k
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
6
940
32de0bd2ba869609d26fd052a4622778?s=48 cromwellryan
107
6.6k
Fe6b81005d1553accd6b2a28f6a2bef1?s=48 phodgson
92
4.2k
465724d73fe3a92c0879fdfb43a3a6f3?s=48 philhawksworth
196
17k
651dcfe41723207fbb0aa044a4f7c07f?s=48 dotmariusz
99
5.7k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
55
4.8k
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
118
26k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
218
16k

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