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

Web技術の基本 6回目 / Introduction to Web technologies 6th class

muttan
April 13, 2018

Web技術の基本 6回目 / Introduction to Web technologies 6th class

muttan

April 13, 2018
Tweet

More Decks by muttan

Other Decks in Technology

Transcript

  1. ໨࣍ 1. WebΞϓϦέʔγϣϯͷ3૚ߏ଄ 2. MVCϞσϧ 3. Webαʔό 4. ΞϓϦέʔγϣϯαʔό 5.

    σʔλϕʔε؅ཧγεςϜ 6. Ωϟογϡαʔό 7. Ajax 8. Web API 9. CGI 10.αʔόؒͷ࿈ܞ ※͕͢͞ʹ෼͔ΔͰ͠ΐͬͯॴ͸Χοτͯ͠·͢
  2. ໨࣍ 1. WebΞϓϦέʔγϣϯͷ3૚ߏ଄ 2. MVCϞσϧ 3. Webαʔό 4. ΞϓϦέʔγϣϯαʔό 5.

    σʔλϕʔε؅ཧγεςϜ 6. Ωϟογϡαʔό 7. Ajax 8. Web API 9. CGI 10.αʔόؒͷ࿈ܞ
  3. WebΞϓϦέʔγϣϯͷ3૚ߏ଄ WebγεςϜ ΞϓϦέʔγϣϯ૚ σʔλ૚ ϓϨθϯςʔγϣϯ૚ Webϒϥ΢β (ΫϥΠΞϯτεΫϦϓτ) (Webαʔό) (APαʔό) (DBαʔό)

    Ϣʔβʔ΁ͷදࣔ  Ϣʔβʔ͔Βͷૢ࡞ड෇ 8FCαʔό͔Βͷ ໋ྩ࣮ߦ ը໘ͷੜ੒ σʔλͷநग़΍ ߋ৽ ิؒ
  4. WebΞϓϦέʔγϣϯͷ3૚ߏ଄ • 3૚ΞʔΩςΫνϟͰ͋Ε͹, WebαʔόͱAPαʔόͱ DBαʔό͕ಠཱ͍ͯ͠ΔͨΊ, ͦΕͧΕͷ਺ͷௐ੔ʢε έʔϧΞ΢τʣ͕΍Γ΍͍͢ ‣ 1ͭͷϚγϯʹશͯͷαʔόΛཱͯͯ͠·͏ͱ, Web

    αʔόΛ૿΍ͨͯ͘͠΋, ୯ମͰ૿΍͢͜ͱ͕ෆՄೳ ‣ Ұൠʹ, DBαʔόͷεέʔϧΞ΢τ͸೉͍͠ - աڈʹॻ͍ͨεϥΠυʹ৭ʑ͔͍ͯ͋ΔΑ
  5. ໨࣍ 1. WebΞϓϦέʔγϣϯͷ3૚ߏ଄ 2. MVCϞσϧ 3. Webαʔό 4. ΞϓϦέʔγϣϯαʔό 5.

    σʔλϕʔε؅ཧγεςϜ 6. Ωϟογϡαʔό 7. Ajax 8. Web API 9. CGI 10.αʔόؒͷ࿈ܞ
  6. MVCϞσϧ $POUSPMMFS 7JFX .PEFM ॲཧ໋ྩ σ ʔ λ ͷ ද

    ࣔ ໋ ྩ ׬ ྃ Ԡ ౴ දࣔσʔλ σ ʔ λ ͷ ॲ ཧ ໋ ྩ ׬ ྃ Ԡ ౴ σʔλཁٻ ը໘දࣔ σʔλॲཧ໋ྩͷྲྀΕ σʔλද໋ࣔྩͷྲྀΕ 7JFXͱ.PEFMʹࢦࣔ ग़ྗ දࣔ Λ୲౰ σʔλॲཧ
  7. ໨࣍ 1. WebΞϓϦέʔγϣϯͷ3૚ߏ଄ 2. MVCϞσϧ 3. Webαʔό 4. ΞϓϦέʔγϣϯαʔό 5.

    σʔλϕʔε؅ཧγεςϜ 6. Ωϟογϡαʔό 7. Ajax 8. Web API 9. CGI 10.αʔόؒͷ࿈ܞ
  8. ໨࣍ 1. WebΞϓϦέʔγϣϯͷ3૚ߏ଄ 2. MVCϞσϧ 3. Webαʔό 4. ΞϓϦέʔγϣϯαʔό 5.

    σʔλϕʔε؅ཧγεςϜ 6. Ωϟογϡαʔό 7. Ajax 8. Web API 9. CGI 10.αʔόؒͷ࿈ܞ
  9. ʢ෮शʣηογϣϯ • ෳ਺ͷΫϥΠΞϯτ͔ΒΞΫηε͞ΕΔWebαʔό͸, ηο γϣϯΛͲͷΑ͏ʹ؅ཧ͢Δͷ͔ʁ ‣ CookieΛ༻͍ͯηογϣϯΛ؅ཧ͢Δ ‣ Cookie͕࢖͑ͳ͍৔߹͸URLʹؚΊΔͱ͖΋͋Δ͕, ηΩϡ

    ϦςΟͷ໘͔Βਪ঑͞Εͳ͍ํ๏Ͱ͋Δ • ηογϣϯ؅ཧʹ͓͍ͯ, Webϒϥ΢βΛࣝผ͢ΔͨΊͷࣝผ ࢠ(id)ΛηογϣϯIDͱݺͿ ‣ ηογϣϯID͸WebαʔόͰੜ੒͞Ε, CookieʹؚΊͯWeb ϒϥ΢βʹૹ৴͞ΕΔ
  10. ʢ෮शʣηογϣϯ 4*%BBBBBB 4*%CCCCCC webαʔό webϒϥ΢βB webϒϥ΢βA ηογϣϯ*% Ϣʔβʔ ϩάΠϯ ങ͍෺͔͝

    BBBBBB TBUP 536& Ξ΢λʔº γϟπº CCCCCC HVFTU '"-4& γϡʔζº දɿWebαʔό͕อଘ͍ͯ͠Δηογϣϯσʔλ
  11. ʢ෮शʣηογϣϯ webαʔό webϒϥ΢βA Set-Cookie:SID=aaaaaa Cookie:SID=aaaaaa CookieʹؚΊͯ౉͢ ϦϯΫͷURLʹؚΊΔ webαʔό webϒϥ΢βA http://example.com/cart?SID=aaaaaa

    ͱ͍͏ϦϯΫ෇͖ͷWebϖʔδΛૹ৴ ϦϯΫ͕ΫϦοΫ͞ΕΔͱ, ηογϣϯID෇͖ ͰWebαʔό΁ϦΫΤετ͕ૹ৴͞ΕΔ http://example.com/cart?SID=aaaaaa ηογϣϯIDΛURLͷύϥϝʔλͱͯ͠ૹ৴
  12. ΞϓϦέʔγϣϯαʔόʢτϥϯβΫγϣϯ؅ཧػೳʣ ᶃϩάΠϯ ᶄີࣨ৘ใͷ֬ೝ ᶅ٬ࣨΛ෦԰ݮΒ͢ ᶆۭࣨʹ༧໿ऀ৘ใΛ௥Ճ ᶇ༧໿ͷ੒ཱ ᶈϩάΞ΢τ ᶆͷΈࣦഊͯ͠ଞ͸͢΂ͯਖ਼ৗʹऴྃͨ͠ͱ͠ ͯ΋ ॓ധࢪઃͷ༧໿࡞ۀͱͯ͠੒ޭͨ͠ͱ͸

    ͍͑ͳ͍ 1τϥϯβΫγϣϯ 1τϥϯβΫγϣϯ 4τϥϯβΫγϣϯ ᶈͷΈͷࣦഊͰ͋Ε͹ ϩάΞ΢τॲཧ͸ࣦഊ͕ͩͦ ͷલͷ࡞ۀͰ͋Δ॓ധࢪઃͷ༧໿࡞ۀ͸੒ޭ͍ͯ͠Δ τϥϯβΫγϣϯͷྫ ΞϓϦέʔγϣϯαʔό ऴྃ
  13. ໨࣍ 1. WebΞϓϦέʔγϣϯͷ3૚ߏ଄ 2. MVCϞσϧ 3. Webαʔό 4. ΞϓϦέʔγϣϯαʔό 5.

    σʔλϕʔε؅ཧγεςϜ 6. Ωϟογϡαʔό 7. Ajax 8. Web API 9. CGI 10.αʔόؒͷ࿈ܞ
  14. σʔλϕʔε؅ཧγεςϜ ίωΫγϣϯ εϨου ίωΫγϣϯ εϨου ίωΫγϣϯ εϨου ύʔαɾΦϓςΟϚΠβɾΞΫηε؅ཧͳͲ ετϨʔδΤϯδϯ"1* .Z*4".

    *OOP%# .Z42-ͳͲͷ ετϨʔδΤϯδϯ ετϨʔδϑΝΠϧ ΫϥΠΞϯτ͔ΒͷϦΫΤετ MySQL SELECT * FROM …
  15. σʔλϕʔε؅ཧγεςϜ • ετϨʔδΤϯδϯʹ΋ෳ਺ଘࡏ͢Δ ‣ InnoDB
 ݱࡏMySQLͷσϑΥϧτετϨʔδΤϯδϯ ‣ MyISAM
 ͔ͭͯMySQLͷσϑΥϧτͩͬͨ ‣

    MEMORY
 ϝϞϦ্ʹσʔλΛετΞ͢ΔʢͷͰشൃੑʣ ‣ Blackhole
 Ұ੾σʔλΛه࿥͠ͳ͍ʢ͚Ͳϩά͸࢒͢ʣ
  16. σʔλϕʔε؅ཧγεςϜʢ৑௕Խʣ webαʔό APαʔό ϓϦϯγύϧʢਖ਼ʣ ϛϥʔʢ෭ʣ ߋ৽໋ྩ ߋ৽໋ྩ ฏৗ࣌͸ϓϦϯγύϧʹ໋ྩΛૹΓ  ো֐ൃੜ࣌ʹ͸ϛϥʔʹ໋ྩΛૹΔ

    ϓϦϯγύϧ͕ߋ৽໋ྩΛड͚Δͱ  ϛϥʔʹ΋ߋ৽໋ྩΛసૹ͢Δ ϛϥʔ%#.4͸ߋ৽໋ྩΛड͚ ϛϥʔ ͷσʔλϕʔεߋ৽Λߦͳ͏ ฏৗ࣌ͷॲཧΛߦͳ͏ػثɿਖ਼ܥ ো֐࣌ʹਖ਼ܥʹ୅ΘͬͯॲཧΛߦ͏ػثɿ෭ܥor଴ػܥ ϛϥʔϦϯά
  17. σʔλϕʔε؅ཧγεςϜʢ৑௕Խʣ webαʔό APαʔό Ϛελʢਖ਼ʣ εϨʔϒʢ෭ʣ ߋ৽໋ྩ ฏৗ࣌͸Ϛελʹ໋ྩΛૹΓ ো֐ൃ ੜ࣌ʹ͸εϨʔϒʹ໋ྩΛૹΔ ߋ৽ͷ໋ྩ͸ϚελʹͷΈૹΒΕΔ

    ߋ৽͢Δͱ εϨʔϒʹ
 ߋ৽ϩάϑΝΠϧ͕ૹΒΕΔ ߋ৽ϩάͷ಺༰Λجʹ εϨʔϒͷσʔ λϕʔεͷߋ৽Λ೚ҙͷλΠϛϯάͰ ߦ͏ Master-Slaveߏ੒ͷ৔߹, ߋ৽ʹಉظ/ඇಉظ͕ଘࡏ͢Δ. ϨϓϦέʔγϣϯ
  18. σʔλϕʔε؅ཧγεςϜʢ৑௕Խʣ webαʔό APαʔό DBMS ϛϥʔʢ෭ʣ ߋ৽໋ྩ ߋ৽໋ྩ ໋ྩ͸Ͳͷ%#.4Ͱ΋ྑ͍ γΣΞʔυσΟεΫͷ%#.4ʹ͸ ਖ਼෭ͷ֓೦͸ͳ͍

    γΣΞʔυσΟεΫ DBMS σʔλετϨʔδ σʔλϕʔε͸৑௕Խ ͞Εͳ͍ͷͰରো֐ੑ ͷڧ͍෺ΛબͿ DBMS ऴྃ
  19. ໨࣍ 1. WebΞϓϦέʔγϣϯͷ3૚ߏ଄ 2. MVCϞσϧ 3. Webαʔό 4. ΞϓϦέʔγϣϯαʔό 5.

    σʔλϕʔε؅ཧγεςϜ 6. Ωϟογϡαʔό 7. Ajax 8. Web API 9. CGI 10.αʔόؒͷ࿈ܞ
  20. ໨࣍ 1. WebΞϓϦέʔγϣϯͷ3૚ߏ଄ 2. MVCϞσϧ 3. Webαʔό 4. ΞϓϦέʔγϣϯαʔό 5.

    σʔλϕʔε؅ཧγεςϜ 6. Ωϟογϡαʔό 7. Ajax 8. Web API 9. CGI 10.αʔόؒͷ࿈ܞ
  21. Ajax • Ajaxʹ࢖༻͞Ε͍ͯΔٕज़ ‣ HTML
 WebϖʔδΛهड़͢ΔͨΊͷݴޠ ‣ JavaScript
 JavaScriptͷXMLHttpRequestΦϒδΣΫτΛ࢖༻ ‣

    DHTML
 ΫϥΠΞϯτεΫϦϓτͰϖʔδΛಈతʹมߋ͢Δ΢Σϒٕ ज़Λࢦ͢ந৅֓೦ ‣ DOM
 HTML΍XMLΛѻ͏ͨΊͷAPI Ajax ऴྃ
  22. ໨࣍ 1. WebΞϓϦέʔγϣϯͷ3૚ߏ଄ 2. MVCϞσϧ 3. Webαʔό 4. ΞϓϦέʔγϣϯαʔό 5.

    σʔλϕʔε؅ཧγεςϜ 6. Ωϟογϡαʔό 7. Ajax 8. Web API 9. CGI 10.αʔόؒͷ࿈ܞ
  23. Web API • WebAPI(Web Application Program Interface)
 WebΛ௨ͯ͡ϓϩάϥϜ͕௚઀αʔϏεΛར༻͢Δͨ ΊͷΠϯλʔϑΣʔε ར༻ঢ়گ

    WebAPIͷURL΁ σʔλΛૹ৴ ॲཧ݁Ռ WebAPIͷURL΁ σʔλΛૹ৴ ॲཧ݁Ռ Webαʔό 8FC"1* APαʔό
  24. Web API • Web APIͷྫ ‣ Ң౓ͱܦ౓Λૹ৴͢Δͱ, ରԠ͢Δ৔ॴͷఱؾ༧ใ͕ ฦ৴͞ΕΔఱؾ༧ใAPI(Weather Hacksͱ͔)

    ‣ ϩάΠϯ৘ใͱจষΛૹ৴͢Ε͹, จষΛϙετ͢Δ ͜ͱ͕ग़དྷΔ(Twitterͱ͔) ‣ σʔλΛૹΔͱ෼ੳͨ݁͠ՌΛฦͯ͘͠ΕΔ(Watson API)
  25. Web API • Web APIͷ΍ΓऔΓʹ͸༷ʑͳํ๏͕࢖ΘΕΔ ‣ XML-RPCʢϓϩτίϧʣ
 XMLͰූ߸Խͯ͠ॲཧͷ࣮ߦΛཁٻ͢Δ ‣ SOAPʢϓϩτίϧʣ


    XML-RPCΛ֦ுͨ͠ߴػೳͳϓϩτίϧ ‣ RESTʢઃܭࢥ૝ʣ
 Web্ͷϦιʔεΛҰҙͳURLͰදͯ͠, ࢖༻͢Δϝ ιουʹΑͬͯڍಈΛม͑ΔΞϨʢલʹ΍ͬͨʣ
  26. Web API(XML-RPCͷྫ) <?xml version="1.0"?> <methodCall> <methodName>examples.getStateName</methodName> <params> <param> <value><i4>40</i4></value> </param>

    </params> </methodCall> XML-RPCϦΫΤετ XML-RPCϨεϙϯε <?xml version="1.0"?> <methodResponse> <params> <param> <value><string>South Dakota</string></value> </param> </params> </methodResponse>
  27. Web API(SOAPͷྫ) SOAPϦΫΤετ SOAPϨεϙϯε <SOAP-ENV:Envelope xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/"> <SOAP-ENV:Body> <getProductDetails xmlns="http://warehouse.example.com/ws"> <productId>827635</productId>

    </getProductDetails> </SOAP-ENV:Body> </SOAP-ENV:Envelope> <SOAP-ENV:Envelope xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/"> <SOAP-ENV:Body> <getProductDetailsResponse xmlns="http://warehouse.example.com/ws"> <getProductDetailsResult> <productName>Toptimate 3-Piece Set</productName> <productId>827635</productId> <description>3-Piece luggage set. Black Polyester.</description> <price>100.50</price> <inStock>true</inStock> </getProductDetailsResult> </getProductDetailsResponse> </SOAP-ENV:Body> </SOAP-ENV:Envelope>
  28. Web API(RESTͷࢥ૝(෮श)) • RESTful(REpresentational State Transfer)
 4ͭͷݪଇ͔ΒͳΔγϯϓϧͳઃܭͷ͜ͱ 1. εςʔτϨε
 ΍ΓऔΓ͸1ճ͝ͱʹ׬݁.

    ଞͷ΍ΓऔΓʹӨڹ͠ͳ͍. 2. ΞυϨεՄಡੑ
 ͢΂ͯͷϦιʔε͕ҰҙͳURIͷߏจͰදݱՄೳ 3. ౷ҰΠϯλʔϑΣʔε
 HTTPϝιουͷར༻͕౷Ұ͞Ε͍ͯΔ 4. ઀ଓੑ
 ΍ΓऔΓ͞ΕΔ৘ใʹϦϯΫΛؚΊΔࣄ͕Ͱ͖Δ
  29. ໨࣍ 1. WebΞϓϦέʔγϣϯͷ3૚ߏ଄ 2. MVCϞσϧ 3. Webαʔό 4. ΞϓϦέʔγϣϯαʔό 5.

    σʔλϕʔε؅ཧγεςϜ 6. Ωϟογϡαʔό 7. Ajax 8. Web API 9. CGI 10.αʔόؒͷ࿈ܞ
  30. CGI 8FCαʔό ίϯςϯπ $(*ϓϩάϥϜ ಡΈࠐΈ ϓϩάϥϜͷىಈ ࣮ߦ݁Ռ ϦΫΤετ Ϩεϙϯε w

    $(*΁ͷϦΫΤετ
 $(*ϓϩάϥϜͷಈ࡞݁Ռ w ͦΕҎ֎
 63-ʹରԠ͢Δίϯςϯπ Λฦ৴ DHJCJOϑΥϧμ֎ͷϑΝΠϧ΍  ֦ுࢠ͕DHJͰͳ͍ϑΝΠϧ DHJCJOϑΥϧμʹ͋Δ֦ுࢠ ͕DHJͰ͋ΔϑΝΠϧΛ$(*ϓ ϩάϥϜͱΈͳ͢ %JSFDUPSZDHJCJO 0QUJPOT &YFD$(*
 "EE)BOEMFSDHJTDSJQUDHJ %JSFDUPSZ DHJCJOϑΥϧμ಺ʹ͋Δ֦ுࢠ ͕DHJͰ͋ΔϑΝΠϧ
  31. CGI 8FCαʔό $(*ϓϩάϥϜ σʔλΛ౉ͯ͠ ϓϩάϥϜͷىಈ http://example.com/program.cgi? σʔλ1+σʔλ2 ίϚϯυϥΠϯҾ਺౉͠ 8FCαʔό $(*ϓϩάϥϜ

    σʔλΛ౉ͯ͠ ϓϩάϥϜͷىಈ http://example.com/program.cgi/ σʔλ1/σʔλ2 ύε౉͠ ىಈ࣌ʹσʔλΛอ͍࣋ͯ͠Δ ىಈޙʹ1"5)@*/'0͔Βऔಘ
  32. CGI 8FCαʔό $(*ϓϩάϥϜ σʔλΛ౉ͯ͠ ϓϩάϥϜͷىಈ http://example.com/program.cgi? σʔλ໊1=σʔλ1 GETϝιου 8FCαʔό $(*ϓϩάϥϜ

    σʔλΛ౉ͯ͠ ϓϩάϥϜͷىಈ http://example.com/program.cgi/ POSTϝιου ىಈޙ ม਺26&3:@453*/(
 ͔ΒσʔλΛऔಘ ىಈޙผʹૹΒΕ͖ͯͨ
 σʔλΛಡΈࠐΉ TUEJO
  33. ໨࣍ 1. WebΞϓϦέʔγϣϯͷ3૚ߏ଄ 2. MVCϞσϧ 3. Webαʔό 4. ΞϓϦέʔγϣϯαʔό 5.

    σʔλϕʔε؅ཧγεςϜ 6. Ωϟογϡαʔό 7. Ajax 8. Web API 9. CGI 10.αʔόؒͷ࿈ܞ
  34. αʔόؒͷ࿈ܞ ػث͕ҟͳΔ৔߹ Webαʔό ip-addr : 127.18.1.100 172.18.1.150ͷ8009ϙʔτʹ઀ଓ APαʔό ip-addr :

    127.18.1.150 port : 8009 ػث͕ҟͳΔ৔߹ Webαʔό 127.18.1.100ͷ8009ϙʔτʹ઀ଓ APαʔό port : 8009 ip-addr : 127.18.1.100 localhostͷ8009ϙʔτʹ઀ଓ
  35. αʔόؒͷ࿈ܞʢར༻͢Δϓϩτίϧʣ • WebαʔόͱAPαʔόͷ࿈ܞʹ࢖ΘΕΔن֨ ‣ HTTP ‣ AJP(Apache Jserv Protocol)
 ApacheͱTomcat(JSPͷ࣮ߦίϯςφʣͷ࿈ܞʹ࢖Θ

    Ε͍ͯΔ ‣ WebSocket
 ΫϥΠΞϯτͱαʔόؒͰ1౓઀ଓΛཱ֬ͨ͠ޙ, σʔ λͷ΍ΓऔΓΛιέοτ௨৴Ͱߦ͏΋ͷʢϦΞϧλΠ Ϝੑ͕ߴ͍ʣ
  36. αʔόؒͷ࿈ܞʢར༻͢Δϓϩτίϧʣ • APαʔόͱDBαʔό͸Ͳ͏͢Δͷ͔ ‣ ODBC(Open DataBase Connectivity)
 DBMSຖͷҧ͍Λٵऩ͠, ڞ௨ͷίʔυͰσʔλϕʔ εʹΞΫηε͢ΔͨΊͷن֨

    - ODBCυϥΠόΛ࢖͏͜ͱͰ࣮ݱ 0%#$υϥΠό APαʔό DBαʔό ODBCυϥΠόΛར༻༷ͯ͠ʑͳ
 DBMSͷಠࣗن֨ʹରԠ ಠࣗϓϩτίϧͰ௨৴
  37. ࢀߟαΠτ • MySQLೖ໳ɹϨϓϦέʔγϣϯฤ
 https://qiita.com/Tocyuki/items/c224cef57493f536a94 • Ajax Introduction
 https://www.w3schools.com/js/js_ajax_intro.asp • Ajaxͷ঺հʢݹΊʣ


    https://www.ibm.com/developerworks/jp/web/library/wa- ajaxintro1.html • XML-RPC
 https://ja.wikipedia.org/wiki/XML-RPC • SOAP
 https://ja.wikipedia.org/wiki/ SOAP_(%E3%83%97%E3%83%AD%E3%83%88%E3%82%B3%E3% 83%AB)