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

Web技術の基本 3回目 / Introduction to Web technologies 3rd class

muttan
January 05, 2018

Web技術の基本 3回目 / Introduction to Web technologies 3rd class

muttan

January 05, 2018
Tweet

More Decks by muttan

Other Decks in Technology

Transcript

  1. Webٕज़ͷجຊ 3ճ໨
    Keisuke KAMIYA

    View full-size slide

  2. ࠓճͷςʔϚ

    View full-size slide

  3. HTTPͰ΍ΓऔΓ͢Δ࢓૊Έ
    - લ൒ઓ -

    View full-size slide

  4. ໨࣍
    1. HTTPϝοηʔδ
    2. HTTPϦΫΤετ/HTTPϨεϙϯε
    3. HTTPϝιου
    4. εςʔλείʔυ
    5. TCPʹΑΔσʔλ௨৴
    6. HTTP/1.1ͷ΍ΓͱΓ
    7. HTTP/2.0ͷ΍ΓͱΓ

    View full-size slide

  5. ໨࣍
    1. HTTPϝοηʔδ
    2. HTTPϦΫΤετ/HTTPϨεϙϯε
    3. HTTPϝιου
    4. εςʔλείʔυ
    5. TCPʹΑΔσʔλ௨৴
    6. HTTP/1.1ͷ΍ΓͱΓ
    7. HTTP/2ͷ΍ΓͱΓ

    View full-size slide

  6. HTTPϝοηʔδ
    • HTTP(Hyper Text Transfer Protocol)

    ϋΠύʔςΩετͷ΍ΓऔΓΛඪ४Խͨ͠΋ͷ
    ‣ ొ৔͸1990೥୅
    όʔδϣϯ ొ৔೥ ؆୯ͳઆ໌
    )551 ೥ ౰࣌͸(&5͔͠ແ͔ͬͨ
    )551 ೥
    1045ͳͲ

    (&5Ҏ֎ͷϝιου͕ొ৔
    )551 ೥
    ಉ͡*1ΞυϨεͰҟͳΔυϝΠϯΛ
    ఏڙ͢Δ)PTUϔομʔͷ௥Ճ
    )551 ೥ ετϦʔϜͷ௥Ճ

    View full-size slide

  7. HTTPϝοηʔδ
    • HTTPͰ͸, Webϒϥ΢β(ΫϥΠΞϯτ)͕ཁٻΛૹΓ,
    Webαʔό(αʔό)͕ͦͷཁٻʹؔͯ͠Ԡ౴Λฦ͢ͱ͍
    ͏΍ΓऔΓΛ܁Γฦ͍ͯ͠Δ
    ‣ HTTPϝοηʔδͱݺ͹ΕΔσʔλΛૹड৴͍ͯ͠Δ
    ཁٻ(HTTP request)
    Ԡ౴(HTTP response)
    HTTPͷόʔδϣϯ͸,
    ௿͍ํʹ߹ΘͤΒΕΔ.

    (HTTP/2.0ͱHTTP/1.1
    ͳΒHTTP/1.1Λ࢖༻)

    View full-size slide

  8. HTTPϝοηʔδ
    • HTTPϝοηʔδ͸2छྨଘࡏ͢Δ
    ‣ HTTPϦΫΤετ

    Webϒϥ΢β͔Βͷཁٻ
    ‣ HTTPϨεϙϯε

    Webϒϥ΢β΁ͷԠ౴
    HTTPϦΫΤετ
    HTTPϨεϙϯε

    View full-size slide

  9. HTTPϝοηʔδ
    • HTTPϝοηʔδ͸, ෳ਺ߦͷσʔλͰߏ੒͞ΕΔ
    ։࢝ߦʢϦΫΤετߦ εςʔλεߦʣ
    ϝοηʔδϔομʔ
    ۭߦ
    ϝοηʔδϘσΟ
    1ߦͷΈ
    ෳ਺ߦՄ
    1ߦͷΈ
    ෳ਺ߦՄ
    ֤߲໨͸CR+LFͰ۠੾ΒΕΔ

    View full-size slide

  10. HTTPϝοηʔδ
    • HTTPϝοηʔδ͸, ෳ਺ߦͷσʔλͰߏ੒͞ΕΔ
    ։࢝ߦ
    ϘσΟ
    https://developer.mozilla.org/ja/docs/Web/HTTP/Messages#HTTP_RequestsΑΓҾ༻
    HTTPϦΫΤετͷྫ

    View full-size slide

  11. ໨࣍
    1. HTTPϝοηʔδ
    2. HTTPϦΫΤετ/HTTPϨεϙϯε
    3. HTTPϝιου
    4. εςʔλείʔυ
    5. TCPʹΑΔσʔλ௨৴
    6. HTTP/1.1ͷ΍ΓͱΓ
    7. HTTP/2ͷ΍ΓͱΓ

    View full-size slide

  12. HTTPϦΫΤετ/HTTPϨεϙϯε
    • HTTPϝοηʔδ͸2छྨଘࡏ͢Δ
    ‣ HTTPϦΫΤετ

    Webϒϥ΢β͔Βͷཁٻ
    ‣ HTTPϨεϙϯε

    Webϒϥ΢β΁ͷԠ౴
    HTTPϦΫΤετ
    HTTPϨεϙϯε

    View full-size slide

  13. HTTPϦΫΤετ

    View full-size slide

  14. HTTPϦΫΤετ
    • HTTPϦΫΤετ

    3ͭͷϝοηʔδͰߏ੒͞Ε͍ͯΔ
    1. ϦΫΤετߦ

    Webαʔόʹରͯ͠ͲͷΑ͏ͳॲཧΛཁٻ͢Δ͔
    2. ϝοηʔδϔομ

    Webϒϥ΢βͷछྨ΍όʔδϣϯ, σʔλܗࣜͳͲ
    3. ϝοηʔδϘσΟ

    ϑΥʔϜʹೖྗ͞ΕͨσʔλͳͲͷσʔλ

    View full-size slide

  15. HTTPϦΫΤετʢϦΫΤετߦʣ
    • ϦΫΤετߦ

    ৘ใΛऔಘ͍ͨ͠, ৘ใΛૹ৴͍ͨ͠ͳͲͷαʔόʹର
    ͯ͠ͷϦΫΤετΛهड़. ҎԼͷ3ͭΛهࡌ
    ‣ HTTPϝιου
    ‣ ϦΫΤετର৅
    ‣ HTTPόʔδϣϯ

    View full-size slide

  16. HTTPϦΫΤετʢϦΫΤετߦʣ
    • HTTPϝιου

    ࣮ߦ͢ΔΞΫγϣϯΛද͢ಈࢺ(GET, POST, PUT, etc..)
    ·ͨ͸, ໊ࢺ(Head, Option)Λࢦఆ
    ॲཧ )551ϝιου $36%ૢ࡞
    ొ࿥ 1045 $3&"5&
    औಘ (&5 3&"%
    ߋ৽ 165 61%"5&
    ࡟আ %&-&5& %&-&5&

    View full-size slide

  17. HTTPϦΫΤετʢϦΫΤετߦʣ
    • ϦΫΤετର৅

    ϦΫΤετର৅Λࢦఆ. ௨ৗ͸URLͰࢦఆ͢Δ





    • HTTPόʔδϣϯ

    HTTPͷόʔδϣϯʢͦΕ͸ͦ͏ʣ
    POST / HTTP 1.1
    GET /background.png HTTP/1.0
    HEAD /test.html?query=alibaba HTTP/1.1
    OPTIONS /anypage.html HTTP/1.0
    ϓϩτίϧ, ϙʔτ, υϝΠϯ͸ϦΫΤετ͔Β໌Β͔ʹ͞ΕΔ

    View full-size slide

  18. HTTPϦΫΤετ
    • HTTPϦΫΤετ

    3ͭͷϝοηʔδͰߏ੒͞Ε͍ͯΔ
    1. ϦΫΤετߦ

    Webαʔόʹରͯ͠ͲͷΑ͏ͳॲཧΛཁٻ͢Δ͔
    2. ϝοηʔδϔομ

    Webϒϥ΢βͷछྨ΍όʔδϣϯ, σʔλܗࣜͳͲ
    3. ϝοηʔδϘσΟ

    ϑΥʔϜʹೖྗ͞ΕͨσʔλͳͲͷσʔλ

    View full-size slide

  19. HTTPϦΫΤετʢϝοηʔδϔομʣ
    • ϝοηʔδϔομ

    Webϒϥ΢βͷछྨ, σʔλλΠϓ, σʔλͷѹॖํ๏, ࢖༻ݴޠͳͲΛ఻͑Δ
    ‣ Ұൠϔομ(General Headers)

    ϝοηʔδશମʹద༻͞ΕΔ(Via, Date, ConnectionͳͲ)
    ‣ ϦΫΤετϔομ(Request Headers)

    User-Agent, Accept-Type, ࢦఆ͢ΔͱϦΫΤετΛมߋ͢Δ΋ͷ(Accept-
    Language), ঢ়گΛࣔ͢΋ͷ(Referer౳), ৚݅Λ༩͑Δ΋ͷ(If-None)
    ‣ ΤϯςΟςΟϔομ(Entity Headers)

    ϘσΟʹద༻͞ΕΔ(Content-length౳), ϘσΟ͕ແ͍৔߹͸ΤϯςΟςΟ
    ϔομ͸෇Ճ͞Εͳ͍

    View full-size slide

  20. HTTPϦΫΤετʢϝοηʔδϔομʣ
    • Ұൠϔομ(General Headers)
    ໊শ ಺༰
    $POOFDUJPO
    ઀ଓঢ়ଶʹؔ͢Δ௨஌ʢݱࡏͷτϥ
    ϯβΫγϣϯ͕ऴྃͨ͋͠ͱ΋ίω
    ΫγϣϯΛอ࣋͢Δ͔Ͳ͏͔ʣ
    %BUF
    )551ϝοηʔδ͕

    ࡞੒͞Εͨ೔࣌
    6QHSBEF
    )551ͷόʔδϣϯΛΞοϓσʔτ͢
    ΔΑ͏ʹཁٻ

    View full-size slide

  21. HTTPϦΫΤετʢϝοηʔδϔομʣ
    • ϦΫΤετϔομ(Request Headers)
    ໊শ ಺༰
    )PTU ϦΫΤετઌͷαʔό໊
    3FGFSFS ௚લʹ๚Ε͍ͯͨ8FCϖʔδͷ63-
    6TFS"HFOU 8FCϒϥ΢βͷݻ༗৘ใ
    Host: developer.mozilla.org

    User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
    Referer: https://developer.mozilla.org/testpage.html
    ϦΫΤετϔομͷྫ

    View full-size slide

  22. HTTPϦΫΤετʢϝοηʔδϔομʣ
    • ΤϯςΟςΟϔομϑΟʔϧυ(Entity Headers)
    ໊শ ಺༰
    "MMPX ར༻Մೳͳ)551ϝιουҰཡ
    $POUFOU&ODPEJOH ίϯςϯπͷΤϯίʔυ
    $POUFOU-BOHVBHF ίϯςϯπͷ࢖༻ݴޠ
    $POUFOU-FOHUI ίϯςϯπͷ௕͞
    $POUFOU5ZQF ίϯςϯπͷछྨʢςΩετ ը૾ʣ
    &YQJSFT ίϯςϯπͷ༗ޮظݶ
    -BTU.PEJpFE ίϯςϯπͷ࠷ऴߋ৽࣌ࠁ

    View full-size slide

  23. HTTPϦΫΤετ
    • HTTPϦΫΤετ

    3ͭͷϝοηʔδͰߏ੒͞Ε͍ͯΔ
    1. ϦΫΤετߦ

    Webαʔόʹରͯ͠ͲͷΑ͏ͳॲཧΛཁٻ͢Δ͔
    2. ϝοηʔδϔομ

    Webϒϥ΢βͷछྨ΍όʔδϣϯ, σʔλܗࣜͳͲ
    3. ϝοηʔδϘσΟ

    ϑΥʔϜʹೖྗ͞ΕͨσʔλͳͲͷσʔλ

    View full-size slide

  24. HTTPϦΫΤετʢϘσΟʣ
    • ϘσΟ

    WebαʔόʹૹΔσʔλ. ۭ(empty)ͳ৔߹΋͋Δ
    ‣ GET΍HEAD, DELETE, OPTIONSͳͲͷ৔߹, ௨ৗϘ
    σΟ͸ۭͱͳΔ

    View full-size slide

  25. HTTPϦΫΤετʢϘσΟʣ
    • େ͖͘2ͭʹ෼ྨ
    ‣ ୯ҰϦιʔεϘσΟ

    1ͭͷϑΝΠϧͰߏ੒. Content-TypeͱContent-
    Lengthͷ2छྨͰߏ੒͞ΕΔ
    ‣ ෳ਺ϦιʔεϘσΟ

    ϑΥʔϜͷ಺༰ʢෳ਺ͷσʔλʣΛૹΔΑ͏ͳ࣌ʹ
    ༻͍ΒΕΔ

    View full-size slide

  26. HTTPϦΫΤετʢϝοηʔδϔομʣ
    • HTTPϔομͷྫ
    https://developer.mozilla.org/ja/docs/Web/HTTP/Messages#HTTP_RequestsΑΓҾ༻
    ։࢝ߦ
    ϘσΟ
    ۭߦ
    ۭߦ͸ϔομͷऴΘΓΛ஌ΒͤΔ

    View full-size slide

  27. HTTPϨεϙϯε

    View full-size slide

  28. HTTPϨεϙϯε
    • HTTPϨεϙϯε

    3ͭͷϝοηʔδͰߏ੒͞Ε͍ͯΔ
    1. εςʔλεߦ

    ΫϥΠΞϯτʹॲཧ݁ՌΛ஌ΒͤΔ
    2. ϝοηʔδϔομ

    Webϒϥ΢βͷछྨ΍όʔδϣϯ, σʔλܗࣜͳͲ
    3. ϝοηʔδϘσΟ

    HTML΍ը૾ͳͲͷσʔλ

    View full-size slide

  29. HTTPϨεϙϯεʢεςʔλεߦʣ
    • ϦΫΤετߦ

    αʔό಺Ͱͷॲཧͷ݁ՌΛ఻͑Δ. ҎԼͷ3ͭͷ৘ใͰ
    ߏ੒͞Ε͍ͯΔ
    1. ϓϩτίϧόʔδϣϯ
    2. εςʔλείʔυ
    3. εςʔλεจࣈྻ

    View full-size slide

  30. HTTPϨεϙϯεʢεςʔλεߦʣ
    • ϓϩτίϧόʔδϣϯ

    ௨ৗ͸HTTP/1.1ͱͳΔ
    • εςʔλείʔυ

    ϦΫΤετ͕੒ޭ͔ͨ͠Ͳ͏͔Λฦ͢
    εςʔλείʔυ ҙຯ
    ϦΫΤετ੒ޭ
    YY ϦμΠϨΫτ
    ېࢭ͞Ε͍ͯΔ
    ݟ͔ͭΒͳ͔ͬͨ

    View full-size slide

  31. HTTPϨεϙϯεʢεςʔλεߦʣ
    • εςʔλεจࣈྻ

    εςʔλεΛද͢୹͍จࣈྻͰ, ਓ͕ؒHTTPϝοηʔ
    δΛཧղ͢ΔͷΛॿ͚Δ
    ‣ HTTPϨεϙϯεͷεςʔλεߦ͸ҎԼͷΑ͏ʹͳΔ
    )551/PU'PVOE
    εςʔλεߦͷྫ

    View full-size slide

  32. HTTPϨεϙϯε
    • HTTPϨεϙϯε

    3ͭͷϝοηʔδͰߏ੒͞Ε͍ͯΔ
    1. εςʔλεߦ

    ΫϥΠΞϯτʹॲཧ݁ՌΛ஌ΒͤΔ
    2. ϝοηʔδϔομ

    Webϒϥ΢βͷछྨ΍όʔδϣϯ, σʔλܗࣜͳͲ
    3. ϝοηʔδϘσΟ

    HTML΍ը૾ͳͲͷσʔλ

    View full-size slide

  33. HTTPϨεϙϯεʢϝοηʔδϔομʣ
    • ϝοηʔδϔομ

    Webϒϥ΢βͷछྨ, σʔλλΠϓ, σʔλͷѹॖํ๏, ࢖༻ݴޠͳͲΛ఻͑Δ
    ‣ Ұൠϔομ(General Headers)

    ϝοηʔδશମʹద༻͞ΕΔ(ViaͳͲ)
    ‣ ϦΫΤετϔομ(Request Headers)

    Vary, Accept-RangesͳͲεςʔλεߦͰ͸఻ΘΒͳ͍αʔόͷ௥Ճ৘ใΛ
    ෇Ճ͢Δ
    ‣ ΤϯςΟςΟϔομ(Entity Headers)

    ϘσΟʹద༻͞ΕΔ(Content-length౳), ϘσΟ͕ແ͍৔߹͸ΤϯςΟςΟ
    ϔομ͸෇Ճ͞Εͳ͍

    View full-size slide

  34. HTTPϨεϙϯε
    • HTTPϨεϙϯε

    3ͭͷϝοηʔδͰߏ੒͞Ε͍ͯΔ
    1. εςʔλεߦ

    ΫϥΠΞϯτʹॲཧ݁ՌΛ஌ΒͤΔ
    2. ϝοηʔδϔομ

    Webϒϥ΢βͷछྨ΍όʔδϣϯ, σʔλܗࣜͳͲ
    3. ϝοηʔδϘσΟ

    HTML΍ը૾ͳͲͷσʔλ

    View full-size slide

  35. HTTPϦΫΤετʢϘσΟʣ
    • ϘσΟ

    HTML΍ը૾ͳͲͷσʔλ
    ‣ 201΍204ͱ͍͏Ϩεϙϯείʔυͷ৔߹͸, ϘσΟΛ
    ࣋ͨͳ͍

    View full-size slide

  36. HTTPϦΫΤετʢϘσΟʣ
    • େ͖͘3छྨʹ෼ྨ͞ΕΔ
    ‣ αΠζ͕൑໌͍ͯ͠Δ୯ҰϦιʔεͷϘσΟ

    1ͭͷϑΝΠϧͰߏ੒. Content-TypeͱContent-Lengthͷ2छ
    ྨͰߏ੒͞ΕΔ
    ‣ αΠζ͕ෆ໌ͳ୯ҰϦιʔεͷϘσΟ

    σʔλΛνϟϯΫʢմʣʹ෼͚ͯૹ৴. Transfer-EncodingΛ
    chunkedʹͯ͠ૹ৴͢Δ
    ‣ ෳ਺ϦιʔεͷϘσΟ

    ൺֱత·Ε

    View full-size slide

  37. Webϖʔδ͕දࣔ͞ΕΔྲྀΕ
    • Ϩεϙϯεϔομͷྫ
    https://developer.mozilla.org/ja/docs/Web/HTTP/Messages#HTTP_RequestsΑΓҾ༻
    ։࢝ߦ
    ϘσΟ
    ۭߦ
    ۭߦ͸ϔομͷऴΘΓΛ஌ΒͤΔ

    View full-size slide

  38. ໨࣍
    1. HTTPϝοηʔδ
    2. HTTPϦΫΤετ/HTTPϨεϙϯε
    3. HTTPϝιου
    4. εςʔλείʔυ
    5. TCPʹΑΔσʔλ௨৴
    6. HTTP/1.1ͷ΍ΓͱΓ
    7. HTTP/2ͷ΍ΓͱΓ

    View full-size slide

  39. • HTTPϦΫΤετΛ༻͍ͯ۩ମతͳཁٻ಺༰Λ఻͍͑ͯ
    Δͷ͸HTTPϝιου

    HTTPϝιου
    ϝιουͷྫ
    • GET

    ίϯςϯπΛऔಘ͍ͨ͠৔߹
    • POST

    σʔλΛWebαʔόʹૹ৴͍ͨ͠৔߹
    ଞͷϝιου͸RESTͷ͋ͨΓͰ͓࿩ͨ͠΋ͷͱ͔

    View full-size slide

  40. HTTPϝιου
    ϝιου໊ આ໌
    )&"%
    )551ϔομʔͷ৘ใͷΈΛऔಘ͢Δ
    σʔλͷߋ৽೔࣌΍σʔλαΠζͷΈ
    Λ஌Γ͍ͨ৔߹ʹ࢖༻
    (&5
    )5.-ϑΝΠϧ΍ը૾ͱ͍ͬͨσʔλ
    Λऔಘ͢Δ৔߹ʹ࢖༻
    1045
    ύεϫʔυͷΑ͏ͳσʔλΛૹ৴͢Δ
    ৔߹ʹ࢖༻
    165
    σʔλΛΞοϓϩʔυ͢ΔͨΊʹ࢖༻
    ઀ଓઌͷσʔλΛॻ͖׵͑Δ VQEBUF

    ͢Δ͜ͱ͕Մೳ

    View full-size slide

  41. HTTPϝιου
    ϝιου໊ આ໌
    %&-&5&
    ࢦఆͨ͠σʔλΛ࡟আ͢ΔͨΊʹ࢖༻
    165ͱڞʹ࢖༻੍͕ݶ͞Ε͍ͯΔ৔߹
    ͕ଟ͍
    $0//&$5
    8FCαʔόʹ઀ଓ͢Δ·Ͱʹผͷαʔ
    όΛதܧ͢Δ৔߹ʹ࢖༻
    015*0/4
    ར༻Ͱ͖Δ)551ϝιουΛ໰͍߹Θ
    ͤΔͨΊʹར༻͢Δ
    53"$&
    ϒϥ΢βͱαʔόͷܦ࿏ΛνΣοΫ͢
    Δ৔߹ʹ࢖༻͢Δ
    PUT, DELETE, CONNECT, TRACE͸ѱ༻Λ๷͙ͨΊ੍ݶ͞Ε͍ͯΔ͜ͱ͕ଟ͍

    View full-size slide

  42. HTTPϝιου
    • GETͱPOST͸զʑ΋ೃછΈͷ͋Δϝιου͕ͩ, ͲͷΑ͏ͳҧ͍
    ͕͋Δͷ͔ʁ
    ‣ GET͸ύϥϝʔλΛURLͷޙΖʹ෇Ճ͢Δ
    ‣ Կ͔৘ใΛಘΔ࣌ʹ࢖͏͜ͱ͕ଟ͍
    ‣ ϒοΫϚʔΫ͕Մೳ
    ‣ σʔλྔʹ੍ݶΞϦ
    ‣ POST͸ύϥϝʔλΛϝοηʔδϘσΟʹؚΊΔ
    ‣ Կ͔৘ใΛొ࿥͢Δ࣌ʹ࢖͏͜ͱ͕ଟ͍
    ‣ σʔλྔ͕ଟ͍, όΠφϦσʔλΛૹΔ৔߹
    ‣ ύεϫʔυೝূʹ࢖ΘΕΔ͜ͱ͕ଟ͍
    ࢀߟɿhttps://www.w3schools.com/tags/ref_httpmethods.asp

    View full-size slide

  43. ໨࣍
    1. HTTPϝοηʔδ
    2. HTTPϦΫΤετ/HTTPϨεϙϯε
    3. HTTPϝιου
    4. εςʔλείʔυ
    5. TCPʹΑΔσʔλ௨৴
    6. HTTP/1.1ͷ΍ΓͱΓ
    7. HTTP/2ͷ΍ΓͱΓ

    View full-size slide

  44. εςʔλείʔυ
    • εςʔλείʔυ

    HTTPϨεϙϯεʹؚ·Ε͍ͯΔ, WebαʔόͰͷॲཧ݁
    ՌΛද͢3ܻͷ਺ࣈ
    ‣ ਖ਼ৗऴྃͨ͠৔߹ͷεςʔλείʔυ͸200
    aiko.comΛݟʹߦͬͨͱ͖ͷεςʔλείʔυ
    (chromeͷΠϯεϖΫλ͸େมศརͰ͢)

    View full-size slide

  45. εςʔλείʔυ
    • εςʔλείʔυͷ෼ྨ
    ‣ 100൪୆

    HTTPϦΫΤετΛॲཧதͰ͋Δ͜ͱΛ௨஌͢Δ. Webαʔό͕
    σʔλड͚ೖΕՄೳ͔ͷ֬ೝͰ࢖ΘΕΔ
    ‣ 200൪୆

    HTTPϦΫΤετʹରͯ͠, ਖ਼ৗʹॲཧ͕ऴྃͨ͜͠ͱΛ௨஌͢Δ
    ‣ 300൪୆

    సૹॲཧͳͲWebϒϥ΢βଆͰ௥Ճͷॲཧ͕ඞཁͰ͋Δ͜ͱΛ
    ௨஌͢ΔʢϦμΠϨΫτͳͲʣ

    View full-size slide

  46. εςʔλείʔυ
    ൪߸ εςʔλεจࣈྻ ҙຯ
    $POUJOVF
    ͦΕ·Ͱͷશͯʹ໰୊͕ͳ͍ͨΊ Ϧ
    ΫΤετΛܧଓͯ͠Α͍
    0, ϦΫΤετ͕ਖ਼ৗʹडཧ͞Εͨ
    .PWFE1BSNBOFOUMZ ίϯςϯπ͕Ҡಈͨ͠
    'PVOE
    Ұ࣌తʹҠಈʢผͷ৔ॴͰൃݟʣ

    ͞Εͨ
    /PU.PEJpFE
    ϦΫΤετ͞Εͨίϯςϯπ͕ະߋ৽
    Ͱ͋ΔʢΩϟογϡΛ࢖͏ʣ

    View full-size slide

  47. εςʔλείʔυ
    • εςʔλείʔυͷ෼ྨ
    ‣ 400൪୆

    ΫϥΠΞϯτଆͷΤϥʔͰ͋Δ͜ͱΛ௨஌͢Δ. ࢦఆͨ͠Ϧ
    ιʔε͕ଘࡏ͠ͳ͍, ݖݶ͕ͳ͍৔߹ͳͲͰ400൪୆͕௨஌
    ͞ΕΔ
    ‣ 500൪୆

    WebαʔόͷΤϥʔΛ௨஌͢Δ. ߴෛՙͳঢ়ଶͰԠ౴Λฦ͢
    ͜ͱ͕Ͱ͖ͳ͍৔߹, Ұ࣌తʹར༻Ͱ͖ͳ͍৔߹ʹ500൪୆
    ͕௨஌͞ΕΔ

    View full-size slide

  48. εςʔλείʔυ
    ൪߸ εςʔλεจࣈྻ ҙຯ
    #BE3FRVFTU ෆਖ਼ͳϦΫΤετ
    'PSCJEEFO
    ΫϥΠΞϯτʹίϯςϯπ΁ͷΞΫη
    εݖ͕ͳ͍
    /PU'PVOE
    ϦΫΤετ͞Εͨίϯςϯπ͕ະݕग़
    Ͱ͋Δ
    *OUFSOBM4FSWFS&SSPS
    ϦΫΤετॲཧதʹαʔό಺෦ͰΤ
    ϥʔ͕ൃੜͨ͜͠ͱΛ஌ΒͤΔ
    4FSWJDF6OBWBJMBCMF
    ΞΫηεूத ϝϯςφϯε౳ͰҰ࣌
    తʹར༻ෆՄೳͰ͋Δ͜ͱΛ஌ΒͤΔ

    View full-size slide

  49. ໨࣍
    1. HTTPϝοηʔδ
    2. HTTPϦΫΤετ/HTTPϨεϙϯε
    3. HTTPϝιου
    4. εςʔλείʔυ
    5. TCPʹΑΔσʔλ௨৴
    6. HTTP/1.1ͷ΍ΓͱΓ
    7. HTTP/2ͷ΍ΓͱΓ

    View full-size slide

  50. TCPʹΑΔσʔλ௨৴
    ૹ৴ࣦഊ
    ࠶ૹ৴
    "$,Λૹ৴
    ࠶ૹ੍ޚ ॱং੍ޚ
    ॱং͕
    ೖΕସΘΔ
    γʔέϯε൪߸Λجʹ
    σʔλΛ૊Έཱͯ
    TCP͕΍͍ͬͯΔ͜ͱ

    View full-size slide

  51. TCPʹΑΔσʔλ௨৴
    • HTTPͷσʔλͷ΍ΓऔΓΛߦͳ͏ͷ͸, TCP(Transmission Control
    Protocol)ͷ໾໨
    • TCP͸௨৴૬खͱͷ࿦ཧతͳ௨৴࿏Ͱ͋ΔίωΫγϣϯΛཱ֬ͨ͠
    ޙ, ௨৴Λ։࢝͢Δ
    ‣ 3ճͷ΍ΓऔΓʢ3΢ΣΠϋϯυγΣΠΫʣΛߦͬͯίωΫγϣϯ
    Λཱ֬͢Δ
    - ΫϥΠΞϯτ͔Βͷ઀ଓཁٻ(SYN)
    - ΫϥΠΞϯτ΁ͷ֬ೝԠ౴, αʔό͔Βͷ઀ଓཁٻ(SYN+ACK)
    - αʔόʹରͯ֬͠ೝԠ౴(ACK)

    View full-size slide

  52. TCPʹΑΔσʔλ௨৴
    • ΫϥΠΞϯτ͔Βͷ઀ଓཁٻ(SYN)

    ΫϥΠΞϯτ͔Βαʔόʹରͯ͠, ઀ଓΛཁٻ͢ΔͨΊ
    ͷSYNύέοτΛૹΔ.
    ‣ TCPϔομͷதʹSYNϑϥάΛཱͯͨ΋ͷΛૹΔ

    View full-size slide

  53. TCPʹΑΔσʔλ௨৴
    • ΫϥΠΞϯτ΁ͷ֬ೝԠ౴&αʔό͔Βͷ઀ଓཁٻ

    ΫϥΠΞϯτ͔Βͷ઀ଓཁٻΛड͚ͨαʔό͸, ʮ઀ଓ
    ཁٻͷγʔέϯε൪߸+1ʯΛACKϑϥάʹ͠, ΫϥΠΞ
    ϯτ΁֬ೝԠ౴Λฦ͢. ͦΕͱಉ࣌ʹ, ΫϥΠΞϯτ΁
    ઀ଓཁٻ(SYN)Λ͓͜ͳ͏
    ‣ TCPͰ͸, ௨৴૬ख͔Βͷ֬ೝԠ౴Λड͚औΔ͜ͱͰ,
    ૹ৴׬ྃͨ͠ͱΈͳ͢

    View full-size slide

  54. TCPʹΑΔσʔλ௨৴
    • αʔόʹରͯ͠ͷ֬ೝԠ౴(ACK)

    αʔό͔ΒΫϥΠΞϯτ΁ͷ઀ଓཁٻʹରͯ͠, ΫϥΠ
    Ξϯτଆ͸αʔό͔ΒͷSYNύέοτʹهࡌ͞Εͨγʔ
    έϯε൪߸+1ΛACKϑϥάͱͯ֬͠ೝԠ౴Λߦ͏

    View full-size slide

  55. ᶃFIN(Seq:30000)
    ᶄACK(Ԡ౴൪߸:30001)
    ᶆACK(Ԡ౴൪߸:40001)
    ੾அཁٻͷૹ৴
    ੾அཁٻͷԠ౴
    ੾அڐՄͷԠ౴
    TCPʹΑΔσʔλ௨৴
    ᶃSYN(Seq:10000)
    ᶄSYN(Seq:20000)+ACK(Ԡ౴൪߸:10001)
    ᶅACK(Seq:20001)
    ઀ଓཁٻͷૹ৴
    ઀ଓڐՄͷԠ౴
    ઀ଓڐՄͷԠ౴
    ઀ଓཁٻͷૹ৴
    σʔλͷૹड৴
    ᶅFIN(Seq:40000)
    ੾அཁٻͷૹ৴
    ίωΫγϣϯͷཱ֬
    ίωΫγϣϯͷ੾அ

    View full-size slide

  56. ໨࣍
    1. HTTPϝοηʔδ
    2. HTTPϦΫΤετ/HTTPϨεϙϯε
    3. HTTPϝιου
    4. εςʔλείʔυ
    5. TCPʹΑΔσʔλ௨৴
    6. HTTP/1.1ͷ΍ΓͱΓ
    7. HTTP/2ͷ΍ΓͱΓ

    View full-size slide

  57. HTTP/1.1ͷ΍ΓͱΓ
    • HTTP͸, HTTP/0.9→HTTP/1.0→HTTP/1.1→HTTP/2ͱ
    ਐԽ͖ͯͨ͠
    ‣ ݱࡏओྲྀͳͷ͸HTTP/1.1
    όʔδϣϯ ొ৔೥ ؆୯ͳઆ໌
    )551 ೥ ౰࣌͸(&5͔͠ແ͔ͬͨ
    )551 ೥
    1045ͳͲ

    (&5Ҏ֎ͷϝιου͕ొ৔
    )551 ೥
    ಉ͡*1ΞυϨεͰҟͳΔυϝΠϯΛ
    ఏڙ͢Δ)PTUϔομʔͷ௥Ճ
    )551 ೥ ετϦʔϜͷ௥Ճ

    View full-size slide

  58. HTTP/1.1ͷ΍ΓͱΓ
    • HTTP/1.1͸1997೥ॳ಄ʹެ։͞Εͨ
    • ࠓ·Ͱʹ2౓վఆ͞Ε͍ͯΔ
    ‣ 1999೥1݄ʹൃߦ͞ΕͨRFC2616
    ‣ 2014೥6݄ʹൃߦ͞ΕͨRFC7230
    • HTTP/1.1ͷओͳಛ௃͸࣍ͷ௨Γ
    ‣ HTTPΩʔϓΞϥΠϒ
    ‣ HTTPύΠϓϥΠϯ

    View full-size slide

  59. HTTP/1.1ͷ΍ΓͱΓ
    • HTTPΩʔϓΞϥΠϒ

    ίωΫγϣϯΛܧଓͯ͠ར༻͢Δ͜ͱ
    ‣ HTTP/1.0ҎલͰ͸, HTTPϦΫΤετΛ͢Δͨͼʹί
    ωΫγϣϯཱ֬Λ͍ͯͨ͠ʢ1౓௨৴ͨ͠Βͦͷͨͼ
    ʹίωΫγϣϯΛΫϩʔζ͍ͯͨ͠ʣ
    ‣ ඇৗʹޮ཰͕ѱ͍

    View full-size slide

  60. HTTP/1.1ͷ΍ΓͱΓ
    • HTTPΩʔϓΞϥΠϒ

    ͦͷͨΊ, HTTP/1.1Ҏ߱Ͱ͸ίωΫγϣϯΛܧଓͯ͠ར༻͢Δ͜ͱ͕Մ
    ೳʹͳͬͨ.
    ίωΫγϣϯཱ֬
    ϦΫΤετ
    Ϩεϙϯε
    ίωΫγϣϯ੾அ
    ίωΫγϣϯཱ֬
    ϦΫΤετ
    Ϩεϙϯε
    ίωΫγϣϯ੾அ
    ίωΫγϣϯཱ֬
    ϦΫΤετ
    Ϩεϙϯε
    ϦΫΤετ
    Ϩεϙϯε
    ίωΫγϣϯ੾அ
    ඇHTTPΩʔϓΞϥΠϒ HTTPΩʔϓΞϥΠϒ

    View full-size slide

  61. HTTP/1.1ͷ΍ΓͱΓ
    • HTTPύΠϓϥΠϯ
    ‣ HTTP͸, ௨ৗHTTPϨεϙϯεΛड͚औͬͨ͋ͱ࣍ͷ
    ϦΫΤετΛൃߦ͢Δ
    ‣ ωοτϫʔΫͷঢ়ଶʹΑͬͯ͸, ஶ͍͠஗Ԇ͕ൃੜ
    → HTTPϨεϙϯεΛ଴ͭ͜ͱແ͘, ෳ਺ͷHTTPϦΫ
    ΤετΛૹ৴͢Δ͜ͱΛՄೳʹ͢ΔػೳΛHTTPύ
    ΠϓϥΠϯͱ͍͏

    View full-size slide

  62. HTTP/1.1ͷ΍ΓͱΓ
    • HTTPύΠϓϥΠϯ
    ίωΫγϣϯཱ֬
    ϦΫΤετ
    Ϩεϙϯε
    ϦΫΤετ
    Ϩεϙϯε
    ίωΫγϣϯ੾அ
    ίωΫγϣϯཱ֬
    ίωΫγϣϯ੾அ
    ϦΫΤετ
    Ϩεϙϯε
    ϦΫΤετ
    Ϩεϙϯε
    ϨεϙϯεΛ଴ͨͣʹ

    ϦΫΤετΛૹ৴͢Δ
    HTTP/1.0Ҏલ HTTP/1.1Ҏ߱
    ࣌ؒ୹ॖ

    View full-size slide

  63. ໨࣍
    1. HTTPϝοηʔδ
    2. HTTPϦΫΤετ/HTTPϨεϙϯε
    3. HTTPϝιου
    4. εςʔλείʔυ
    5. TCPʹΑΔσʔλ௨৴
    6. HTTP/1.1ͷ΍ΓͱΓ
    7. HTTP/2ͷ΍ΓͱΓ

    View full-size slide

  64. HTTP/2ͷ΍ΓͱΓ
    • ࣌୅ͱڞʹWebϖʔδ͸ෳࡶԽ͍͖ͯ͠, ը૾αΠζ΍
    εΫϦϓταΠζ͕େ͖͘ͳ͍ͬͯͬͨ
    • HTTP/1.1ͰύΠϓϥΠϯػೳ͕௥Ճ͞Ε, ଟ͘ͷσʔλ
    Λޮ཰తʹసૹ͢Δ͜ͱ͕Մೳʹͳͬͨ΋ͷͷ, ύΠϓ
    ϥΠϯػೳ͸େ͖ͳΦʔόʔϔουʹͳΔ
    ‣ ৽ͨͳόʔδϣϯͰ͋ΔHTTP/2͕ఏҊ͞Εͨ

    View full-size slide

  65. HTTP/2ͷ΍ΓͱΓ
    • HTTP/2

    Googleͷ։ൃͨ͠, ௨৴ͷߴ଎ԽΛ໨తͱ࣮ͨ͠ݧతͳ
    ϓϩτίϧSPDYͱ͍͏ϓϩτίϧΛϕʔεʹ࡞੒ͨ͠ϓ
    ϩτίϧ. 2015೥ͷ5݄ʹਖ਼ࣜͳඪ४Խ͕ͳ͞Εͨ
    • ࣍ͷΑ͏ͳಛ௃͕͋Δ
    ‣ ετϦʔϜʹΑΔଟॏԽ
    ‣ όΠφϦܗࣜͰૹΔ͜ͱͰߋͳΔ࠷దԽ͕Մೳ
    ‣ ϔομʔͷѹॖ
    ‣ αʔόϓογϡ

    View full-size slide

  66. HTTP/2ͷ΍ΓͱΓʢετϦʔϜʹΑΔଟॏԽʣ
    • ετϦʔϜʹΑΔଟॏԽ
    ‣ HTTP/1.0Ҏલ

    HTTPϦΫΤετ͸, HTTPϨεϙϯεΛ଴ͬͨޙʹૹ৴
    ՄೳͱͳΔ
    ‣ HTTP/1.1

    ύΠϓϥΠϯʹΑΓ, ಉ࣌ʹෳ਺ͷϦΫΤετΛૹ৴͢
    Δ͜ͱ͕Մೳʹͳͬͨ
    → ʮHTTPϦΫΤετͷॱ൪ͰϨεϙϯεΛฦ͢ʯͱ͍
    ͏੍໿͕͍͍ͭͯͨ

    View full-size slide

  67. HTTP/2ͷ΍ΓͱΓʢετϦʔϜʹΑΔଟॏԽʣ
    • Webϒϥ΢β͔Βෳ਺ͷϦΫΤετ͕ඈΜͰ͖ͯ΋, ͋
    Δ1ͭͷHTTPϨεϙϯεͷॲཧʹ͕͔͔࣌ؒΔ৔߹, શ
    ͯͷϨεϙϯελΠϜ͕૿Ճ͢Δͱ͍͏໰୊఺͕͋ͬͨ
    ‣ ͜ͷ໰୊Λղܾ͢ΔͨΊ, 1ͭͷ઀ଓ্ʹετϦʔϜ
    ͱݺ͹ΕΔԾ૝తͳ૒ํ޲γʔέϯεΛ࡞ͬͯରࡦ

    View full-size slide

  68. HTTP/2ͷ΍ΓͱΓʢετϦʔϜʹΑΔଟॏԽʣ
    HTTP/2઀ଓʢ1ίωΫγϣϯʣ
    ετϦʔϜᶃ
    ετϦʔϜᶄ
    ετϦʔϜᶅ
    ετϦʔϜᶆ
    ϦΫΤετ
    Ϩεϙϯε
    ϦΫΤετ
    Ϩεϙϯε
    ϦΫΤετ
    Ϩεϙϯε
    ϦΫΤετ
    Ϩεϙϯε

    View full-size slide

  69. HTTP/2ͷ΍ΓͱΓʢετϦʔϜʹΑΔଟॏԽʣ
    ϦΫΤετᶃ
    Ϩεϙϯεᶃ
    Ϩεϙϯεᶄ
    HTTPύΠϓϥΠϯ ετϦʔϜʹΑΔଟॏԽ
    ࣌ؒ୹ॖ
    ϦΫΤετᶄ
    ϦΫΤετᶅ
    ॲཧ଴ͪ
    Ϩεϙϯεᶅ
    ϦΫΤετᶃ
    ϦΫΤετᶄ
    ϦΫΤετᶅ
    Ϩεϙϯεᶃ
    Ϩεϙϯεᶄ
    Ϩεϙϯεᶅ
    ϦΫΤετͷॱ൪Ͱ

    ϨεϙϯεΛฦ͢ඞཁ͋Γ
    ετϦʔϜ͕ҟͳΕ͹ 

    Ϩεϙϯεͷॱ൪͸

    ੍ݶ͞Εͳ͍

    View full-size slide

  70. ࢖༻ૉࡐ, ࢀߟϦϯΫ

    View full-size slide

  71. ࢖༻ૉࡐ, ࢀߟϦϯΫ
    • ͍Β͢ͱ΍
    • k-tamura/cocha-icons

    https://github.com/k-tamura/cocha-icons
    • HTTPϝοηʔδ

    https://developer.mozilla.org/ja/docs/Web/HTTP/
    Messages
    • HTTP Ϩεϙϯεεςʔλείʔυ

    https://developer.mozilla.org/ja/docs/Web/HTTP/
    Status

    View full-size slide

  72. ࢖༻ૉࡐ, ࢀߟϦϯΫ
    • ʮεϦʔ΢ΣΠϋϯυγΣΠΫʯͷखॱɺΘ͔͍ͬͯ·
    ͔͢ʁ

    http://ascii.jp/elem/000/000/619/619702/
    • HTTP/2ೖ໳

    https://techblog.yahoo.co.jp/infrastructure/http2/
    introduction_to_http2/

    View full-size slide