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

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

muttan
December 08, 2017

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

muttan

December 08, 2017
Tweet

More Decks by muttan

Other Decks in Technology

Transcript

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

    WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷ࢓૊Έ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ૝
  2. ໨࣍ 1. Webͱ͸ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥ΢β 5.

    WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷ࢓૊Έ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ૝
  3. Webͱ͸ • จॻͷެ։ɾӾཡͷͨΊͷγεςϜ → Web(΢Σϒ) • ਖ਼໊ࣜশ͸,World Wide Web(ੈքதʹ޿͕ΔΫϞͷ૥) →

    ུশ͸WWW • Webϖʔδ͸HyperTextͰهड़͞ΕΔ → HTML (HyperText Markup Language) • ϋΠύʔςΩετ͔ΒϋΠύʔςΩετ΁ͷϦϯΫ(ϋΠ ύʔϦϯΫ)Λ෇͚Δ͜ͱͰؔ࿈෇͚Λߦ͍, શମ͕େ ͖ͳ৘ใͷू߹ମͱͳΔ ΩʔϫʔυɿWeb, WWW, HyperText, HyperLink
  4. ໨࣍ 1. Webͱ͸ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥ΢β 5.

    WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷ࢓૊Έ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ૝
  5. Πϯλʔωοτͱ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ϖʔδ͕ެ։ ΩʔϫʔυɿςΟϜɾόʔφʔζ=Ϧʔ
  6. ςΟϜɾόʔφʔζ=Ϧʔͬͯʁ 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
  7. ໨࣍ 1. Webͱ͸ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥ΢β 5.

    WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷ࢓૊Έ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ૝
  8. • API (Application Programming Interface)
 ΞϓϦέʔγϣϯΛιϑτ΢ΣΞ͔Βૢ࡞͢ΔͨΊͷ ΠϯλʔϑΣʔε
 ͞·͟·ͳWebͷ༻్ API SV

    APIΛ࢖ͬͯఱؾΛϦΫΤετ ࢦఆ͞Εͨ஍఺ͷ৘ใΛฦ͢ Ϣʔβʔ d(^_^o) APIͷྫ ‣ ఱؾ༧ใAPIΛ࢖ͬͯ, ఱؾΛऔಘ͢Δ. ‣ TwitterͷTimeLineΛऔಘ͢Δ etc… ΩʔϫʔυɿAPI
  9. ໨࣍ 1. Webͱ͸ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥ΢β 5.

    WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷ࢓૊Έ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ૝
  10. • ϋΠύʔςΩετΛهड़͢ΔͨΊͷݴޠ → 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, λά λάΛ࢖ͬͯهड़
  11. • HyperTextΛදࣔ͢Διϑτ΢ΣΞ → Webϒϥ΢βʢϒϥ΢βͱݺ͹ΕΔ͜ͱ͕ଟ͍ʣ • ϒϥ΢β͸༷ʑͳاۀ͕ϦϦʔε͍ͯ͠Δ • Google Chrome •

    Firefox Quantum • Safari • Vivaldi • (Sleipnirͬͯ·ͩੜ͖ͯΔΜͰ͔͢ʁʣ HTMLͱWebϒϥ΢β ʢ༨ஊʣݹ͍΋ͷͩͱMosaic͕༗໊Ͱ͢Ͷ.
  12. ໨࣍ 1. Webͱ͸ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥ΢β 5.

    WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷ࢓૊Έ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ૝
  13. WebαʔόͱHTTP • HTTP(Hyper Text Transfer Protocol)
 ϋΠύʔςΩετͷ΍ΓऔΓΛඪ४Խͨ͠΋ͷ ‣ ϋΠύʔςΩετͷཁٻ, ૹ৴खॱ

    ‣ Webϖʔδ͕ଘࡏ͠ͳ͍৔߹, సૹ͢Δ৔߹ εςʔλείʔυ ҙຯ  ϦΫΤετ੒ޭ YY ϦμΠϨΫτ  ېࢭ͞Ε͍ͯΔ  ݟ͔ͭΒͳ͔ͬͨ खॱΛඪ४Խ͢Δ͜ͱͰ, ࡞੒ݩʹΑΔґଘΛݮΒ͢ ΩʔϫʔυɿHTTP
  14. ໨࣍ 1. Webͱ͸ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥ΢β 5.

    WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷ࢓૊Έ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ૝
  15. RFCͱ͸ʢ༨ஊʣ • RFC(Request for Comments)
 IETF(Internet Engineering Task Force)ʹΑΔΠϯλʔ ωοτʹؔΘΔ༷ʑͳٕज़ͷ࢖༻Λอଘɾެ։͢Δܗ

    ࣜͷ͜ͱ → ༷ʑͳաఔ(IETFʹఏग़)Λܦͯ, ඪ४Խ͞ΕΔ • શͯެ։͞Ε͍ͯΔͷͰ, ୭Ͱ΋ٞ࿦ʹࢀՃ͢Δ͜ͱ͕ Մೳ Webϖʔδ͕දࣔ͞ΕΔྲྀΕʹ໭Γ·͢ ͱ͜ΖͰRFC஌ͬͯ·͔͢ʁ
  16. 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ϒϥ΢β͕ղऍͯ͠දࣔ
  17. 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ͭͷΈ → ը૾σʔλͳͲ͸, ͋ΒͨΊͯϦΫΤετΛߦͳ͏
  18. 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>
  19. ໨࣍ 1. Webͱ͸ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥ΢β 5.

    WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷ࢓૊Έ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ૝
  20. ໨࣍ 1. Webͱ͸ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥ΢β 5.

    WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷ࢓૊Έ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ૝
  21. ಈతϖʔδͷ࢓૊Έ • CGI (Common Gateway Interface) ಈతͳWebϖʔδΛੜ੒͢Δํ๏ͷ1ͭ ‣ ΫϥΠΞϯτ͸CGIΛࣔ͢URL΁ϦΫΤετ͢Δ ‣

    αʔόଆ͸CGIʹΑͬͯϓϩάϥϜ͕࣮ߦ͞Ε, ࡞੒ ͞ΕͨHTMLϑΝΠϧ͕ΫϥΠΞϯτʹฦΔ - ϓϩάϥϜΛαʔόʔαΠυɾεΫϦϓτͱݺͿ - εΫϦϓτݴޠͰهड़͞ΕΔࣄ͕ଟ͍ ΩʔϫʔυɿCGI, αʔόʔαΠυεΫϦϓτ, εΫϦϓτݴޠ
  22. ಈతϖʔδͷ࢓૊Έ • αʔόʔαΠυɾεΫϦϓτ
 CGI͔Βݺͼग़͞ΕΔϓϩάϥϜͷ͜ͱ. ‣ εΫϦϓτݴޠ͕࢖ΘΕΔ͜ͱ͕ଟ͍ - Perl, Ruby, Python,

    PHP, etc… • ࠷ۙ͸PythonͷWSGIͱ͔, RubyͷRackͱ͔… • ͜ΕΒ͸WebΞϓϦͱWebαʔόͷؒʹೖΓ, ͦΕͧ ΕΛܨ͙ڮ౉͠໾Λ୲͍ͬͯΔ ΩʔϫʔυɿαʔόʔαΠυεΫϦϓτ
  23. ಈతϖʔδͷ࢓૊Έ • Rubyͷ৔߹ • Webαʔό
 nginx, Apache, etc… • ΞϓϦέʔγϣϯαʔό


    Unicorn, puma, RainbowsͳͲ OHJOY Webαʔό 6OJDPSO APαʔό 6OJDPSO Rack 4JOBUSB 3BJMT ΞϓϦέʔγϣϯ "1αʔό΋ΞϓϦέʔγϣϯ΋  3BDLΛڬΊ͹͓ޓ͍͕ԿͰ͋Δ͔ Λؾʹ͢Δඞཁ͕ͳ͍
  24. ಈతϖʔδͷ࢓૊Έ 8FCαʔό $(* αʔόʔαΠυ εΫϦϓτ ϓϩάϥϜىಈ HTMLϑΝΠϧ αʔόʔαΠυɾεΫϦϓτ XFCϒϥ΢βଆͰ͸ εΫϦϓτΛ࣮ߦ͠ͳ͍

    webϖʔδΛཁٻ ࡞੒ͨ͠HTML ϑΝΠϧΛૹ৴ αʔόଆͰεΫϦϓτΛ࣮ߦ͠  ࡞੒ͨ͠)5.-ϑΝΠϧΛฦ͢ ΫϥΠΞϯτ αʔό
  25. ໨࣍ 1. Webͱ͸ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥ΢β 5.

    WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷ࢓૊Έ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ૝
  26. 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
  27. • W3C(World Wide Web Consortium)
 ςΟϜɾόʔφʔζ=Ϧʔ͕૑ઃͨ͠, WebͰ࢖༻͞ΕΔ֤ छٕज़ͷඪ४ԽΛਪਐ͢ΔͨΊʹઃཱ͞Εͨஂମ
 
 


    • W3C͕ඪ४Խͨ͠΋ͷ͸, ʮקࠂʯͱ͍͏ܗͰൃද͞ΕΔ ͨΊڧ੍͞ΕΔ΋ͷͰ͸ͳ͍͕, ຆͲͷαΠτ͕W3Cඪ४ ʹ४ڌ͍ͯ͠Δ Webͷඪ४Խ ඪ४ԽΛߦ͍ͬͯΔن֨ͷྫ HTML, CSS, XML, XHTML, DOM, CGI, etc…
  28. ໨࣍ 1. Webͱ͸ 2. ΠϯλʔωοτͱWeb 3. ͞·͟·ͳWebͷ༻్ 4. HTMLͱWebϒϥ΢β 5.

    WebαʔόͱHTTP 6. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ 7. ੩తϖʔδͱಈతϖʔδ 8. ಈతϖʔδͷ࢓૊Έ 9. Webͷඪ४Խ 10.Webͷઃܭࢥ૝
  29. Webͷઃܭࢥ૝ • RESTful(REpresentational State Transfer)
 4ͭͷݪଇ͔ΒͳΔγϯϓϧͳઃܭͷ͜ͱ 1. εςʔτϨε
 ΍ΓऔΓ͸1ճ͝ͱʹ׬݁. ଞͷ΍ΓऔΓʹӨڹ͠ͳ͍.

    2. ΞυϨεՄಡੑ
 ͢΂ͯͷϦιʔε͕ҰҙͳURIͷߏจͰදݱՄೳ 3. ౷ҰΠϯλʔϑΣʔε
 HTTPϝιουͷར༻͕౷Ұ͞Ε͍ͯΔ 4. ઀ଓੑ
 ΍ΓऔΓ͞ΕΔ৘ใʹϦϯΫΛؚΊΔࣄ͕Ͱ͖Δ
  30. Webͷઃܭࢥ૝ εςʔτϑϧͷྫ ٬: ϋϯόʔΨʔηοτΛ͓ئ͍͠·͢ ళһ: αΠυϝχϡʔ͸Կʹͳ͍͞·͔͢? ٬: ϙςτͰ ళһ: υϦϯΫ͸Կʹͳ͍͞·͔͢?

    ٬: δϯδϟʔΤʔϧͰ ళһ: +50ԁͰυϦϯΫΛLαΠζʹͰ͖·͕͍͔͕͢Ͱ͔͢? ٬: MͰ͍͍Ͱ͢ ళһ: Ҏ্ͰΑΖ͍͠Ͱ͔͢? ٬: ͸͍ ళһ: ͔͜͠·Γ·ͨ͠ Ҿ༻ɿhttp://yohei-y.blogspot.jp/2007/10/blog-post.html
  31. Webͷઃܭࢥ૝ εςʔτϨεͷྫ ٬: ϋϯόʔΨʔηοτΛ͓ئ͍͠·͢ ళһ: αΠυϝχϡʔ͸Կʹͳ͍͞·͔͢? ٬: ϋϯόʔΨʔηοτΛϙςτͰ͓ئ͍͠·͢ ళһ: υϦϯΫ͸Կʹͳ͍͞·͔͢?

    ٬: ϋϯόʔΨʔηοτΛϙςτͱδϯδϟʔΤʔϧͰ͓ئ͍͠·͢ ళһ: +50ԁͰυϦϯΫΛLαΠζʹͰ͖·͕͍͔͕͢Ͱ͔͢? ٬: ϋϯόʔΨʔηοτΛϙςτͱδϯδϟʔΤʔϧ(M)Ͱ͓ئ͍͠·͢ ళһ: Ҏ্ͰΑΖ͍͠Ͱ͔͢? ٬: ϋϯόʔΨʔηοτΛϙςτͱδϯδϟʔΤʔϧ(M)Ͱ͓ئ͍͠·͢ɻҎ্ ళһ: ͔͜͠·Γ·ͨ͠ Ҿ༻ɿhttp://yohei-y.blogspot.jp/2007/10/blog-post.html
  32. Webͷઃܭࢥ૝ • ΞυϨεՄಡੑ
 ͢΂ͯͷϦιʔε͸, ҰҙͳURIͰΞΫηεՄೳ
 
 
 
 api.github.comͷఏڙ͢Δeventsͱ͍͏ϦιʔεΛཁٻ͠ ͍ͯΔ

    → URIΛ࢖͏͜ͱͰ, ௚ײతͰ෼͔Γ΍͘͢ϦιʔεΛද͢ ͜ͱ͕ग़དྷΔ https://api.github.com/events github͕ఏڙ͢ΔAPIͷྫ
  33. Webͷઃܭࢥ૝ URLͱHTTPϝιουͷ૊Έ߹ΘͤΛఆ͓͖ٛͯ͠, ͦΕʹ ߹Θͤͯॲཧ͕มΘΔ. ॲཧ )551ϝιου $36%ૢ࡞ ొ࿥ 1045 DBMFOEBSTDBMFOEBS*EFWFOUT

    औಘ (&5 DBMFOEBSTDBMFOEBS*EFWFOUTFWFOU*E ߋ৽ 165 DBMFOEBSTDBMFOEBS*EFWFOUTFWFOU*E ࡟আ %&-&5& DBMFOEBSTDBMFOEBS*EFWFOUTFWFOU*E googleΧϨϯμʔͷྫ
  34. ࢖༻ૉࡐ, ࢀߟϦϯΫ • ͍Β͢ͱ΍ • 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