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

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

Avatar for muttan muttan
December 08, 2017
Technology
0
220

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

Avatar for muttan

muttan

December 08, 2017
Tweet

More Decks by muttan

See All by muttan
さわやか待ち時間LINE botを作った話 / Sawayaka LINE bot
Avatar for muttan bath_poo_
0
110
コンテナ開発入門 1回目/Introduction to Container Development 1
Avatar for muttan bath_poo_
0
160
ISUCONってなんだ / What is ISUCON
Avatar for muttan bath_poo_
0
350
Web技術の基本 8回目 / Introduction to Web technologies 8th class
Avatar for muttan bath_poo_
0
190
Web技術の基本 7回目 / Introduction to Web technologies 7th class
Avatar for muttan bath_poo_
0
160
Web技術の基本 6回目 / Introduction to Web technologies 6th class
Avatar for muttan bath_poo_
1
260
Web技術の基本 5回目 / Introduction to Web technologies 5th class
Avatar for muttan bath_poo_
0
140
Web技術の基本 4回目 / Introduction to Web technologies 4th class
Avatar for muttan bath_poo_
0
220
Web技術の基本 3回目 / Introduction to Web technologies 3rd class
Avatar for muttan bath_poo_
0
250

Other Decks in Technology

See All in Technology
本当にわかりやすいAIエージェント入門
Avatar for segavvy segavvy
9
4.8k
Microsoft Defender XDRで疲弊しないためのインシデント対応
Avatar for Kunii, Suguru sophiakunii
3
380
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
Avatar for Yusuke WADA fillznoh
0
140
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
Avatar for CUEBiC Inc. cuebic9bic
2
190
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
4.6k
Autify Company Deck
Avatar for Autify autifyhq
2
44k
Maintainer Meetupで「生の声」を聞く ～講演だけじゃないKubeCon
Avatar for Takuto Nagami logica0419
0
140
Bliki (ja), and the Cathedral, and the Bazaar
Avatar for Koichi ITO koic
6
840
AI Ready API ─ AI時代に求められるAPI設計とは？/ AI-Ready API - Designing MCP and APIs in the AI Era
Avatar for Yoichi Kawasaki yokawasa
20
5.4k
Shadow DOM & Security - Exploring the boundary between light and shadow
Avatar for Masato Kinugawa masatokinugawa
0
610
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
Avatar for Hiroshi Toda carnappopper
2
810
名刺メーカーDevグループ 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
820

Featured

See All Featured
Side Projects
Avatar for Sacha Greif sachag
455
43k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
130
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
50
5.5k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Code Review Best Practice
Avatar for Trisha Gee trishagee
69
19k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
21k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.9k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
54
6.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
47
9.6k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
18
1k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k

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