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

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

muttan
March 30, 2018

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

muttan

March 30, 2018
Tweet

More Decks by muttan

Other Decks in Technology

Transcript

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

    View full-size slide

  2. ࠓճͷςʔϚ

    View full-size slide

  3. Chapter 4
    Webͷ༷ʑͳσʔλܗࣜ

    View full-size slide

  4. ໨࣍
    1. HTML
    2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ
    3. XML
    4. CSS
    5. εΫϦϓτݴޠ
    6. DOM
    7. JSON
    8. ϑΟʔυ
    9. ϚΠΫϩϑΥʔϚοτ
    10.Ի੠ɾಈը഑৴
    11.ϝσΟΞλΠϓ

    View full-size slide

  5. ໨࣍
    1. HTML
    2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ
    3. XML
    4. CSS
    5. εΫϦϓτݴޠ
    6. DOM
    7. JSON
    8. ϑΟʔυ
    9. ϚΠΫϩϑΥʔϚοτ
    10.Ի੠ɾಈը഑৴
    11.ϝσΟΞλΠϓ

    View full-size slide

  6. HTMLͷߏ଄
    • HTML(Hyper Text Markup Language)

    ϋΠύʔςΩετ(Webϖʔδ)Λهड़͢Δݴޠ
    • ಛ௃
    1. จষΛλάͰғΉ͜ͱͰཁૉʹͳΔ

    λά͸, ғΜͩจষ͕ʮԿΛ͔ࣔ͢ʯΛද͢
    2. ཁૉΛೖΕࢠʹ͢Δ͜ͱ͕Մೳ
    3. ཁૉʹରͯ͠ଐੑΛ௥Ճ͢Δ͜ͱ͕Մೳ

    ͷhrefͱ͔

    View full-size slide





  7. Document


    d(^_^o)
    ͜Ε͸link


    HTMLͷߏ଄
    headཁૉ
    htmlཁૉ
    ϦϯΫ
    ։࢝λά ऴྃλά
    ಺༰
    ଐੑ(ଐੑ໊=ଐੑ஋)
    bodyཁૉ
    IUNMཁૉ
    IFBEཁૉ
    NFUBཁૉ
    UJUMFཁૉ
    CPEZཁૉ
    Iཁૉ
    Bཁૉ
    ֊૚ߏ଄ʢೖΕࢠʣɹ
    ʹͳ͍ͬͯΔ
    example.html

    View full-size slide

  8. HTMLͷྺ࢙
    • HTML͸౰ॳจॻͱϦϯΫΛදͨ͢Ίͷ΋ͷͩͬͨ
    ‣ Q. HTMLΛ࡞੒ͨ͠ͷ͸୭Ͱ͔͢ʁ
    • ࣌୅͕ਐΉʹͭΕͯWebʹٻΊΒΕΔػೳ͸૿Ճͯ͠
    ͍ͬͨʢΞϓϦέʔγϣϯԽʣ
    ‣ Webͷීٴ΍৽ͨͳٕज़ͷൃలʹͭΕͯόʔδϣϯ
    Ξοϓ͕ߦΘΕ͖ͯͨ
    - Q. קࠂ͸Ͳ͜ߦ͍ͬͯ·͔͢ʁ

    View full-size slide

  9. HTMLͷྺ࢙
    όʔδϣϯ ػೳ
    )5.-
    )5.-ͷݪܕ
    ʢجຊతͳจॻߏ଄ͱϦϯΫʣ
    )5.- ೖྗϑΥʔϜ
    )5.- ද૊Έ ৭෇͚
    )5.-
    ૷০ ॻࣜͳͲͷࢿ֨දݱΛ)5.-͔Β੾
    Γ཭͠ ݴޠ࢓༷ΛڧԽ
    )5.-
    8FCΞϓϦͷػೳ޲্Λࢹ໺ʹೖΕͨେ෯
    ͳ֦ுಈը ԻݯͷຒΊࠐΈ͕Մೳʹ
    )5.- ϞόΠϧ޲͚ͷը૾ղ૾౓ରԠͳͲ

    View full-size slide

  10. HTMLͷྺ࢙
    όʔδϣϯ %0$5:1&ͷܗࣜ
    )5.-Ҏ߱ %0$5:1&IUNM
    )5.-4USJDU
    %0$5:1&)5.-16#-*$l8$%5%
    )5.-&/zlIUUQXXXXPSH53
    IUNMTUSJDUEUEz
    )5.-5SBOTJUJPOBM
    %0$5:1&)5.-16#-*$l8$%5%
    )5.-5SBOTJUJPOBM&/zlIUUQ
    XXXXPSH53IUNMMPPTFEUEz
    )5.-'SBNFTFU
    %0$5:1&)5.-16#-*$l8$%5%
    )5.-'SBNFTFU&/zlIUUQ
    XXXXPSH53IUNMGSBNFTFUEUEz
    ྺ୅ͷDOCTYPEએݴͨͪ
    HTMLऴྃ

    View full-size slide

  11. ໨࣍
    1. HTML
    2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ
    3. XML
    4. CSS
    5. εΫϦϓτݴޠ
    6. DOM
    7. JSON
    8. ϑΟʔυ
    9. ϚΠΫϩϑΥʔϚοτ
    10.Ի੠ɾಈը഑৴
    11.ϝσΟΞλΠϓ

    View full-size slide

  12. WebϖʔδͰར༻͞ΕΔը૾ܗࣜ
    WebϖʔδͰར༻͞Ε͍ͯΔը૾ܗࣜΛ͍͔ͭ͘঺հ
    1. JPEG (xxx.jpeg, xxx.jpg)
    2. GIF (xxx.gif)
    3. PNG (xxx.png)
    4. WebP (xxx.webp)

    View full-size slide

  13. WebϖʔδͰར༻͞ΕΔը૾ܗࣜ(JPEG)
    • JPEG(Joint Photographic Experts Group)

    ҰൠతͳඇՄٯѹॖͷը૾ϑΥʔϚοτ.
    ‣ 1677ສ৭ͷ৭Λѻ͏͜ͱ͕Մೳʢࣸਅͷը૾ܗࣜͱ
    ͯ͠༻͍ΒΕΔ͜ͱ͕ଟ͍ʣ
    ‣ ඇՄٯѹॖͳͷͰ, jpeg͔Βݩͷը૾ʹ׬શʹ෮ݩ͢
    Δ͜ͱ͸ෆՄೳ

    View full-size slide

  14. WebϖʔδͰར༻͞ΕΔը૾ܗࣜ(JPEG)
    • JPEG͸DCT(Discrete Cosine transform)ͭ·Γ཭ࢄί
    αΠϯม׵Λ༻͍ͯѹॖ͍ͯ͠Δ
    • ਓͷ໨Ͱ͸ೝࣝͰ͖ͳ͍ߴप೾

    ੒෼Λ࡟Γ, ߋʹྔࢠԽςʔϒϧ

    ʹج͍ͮͯྔࢠԽΛߦͳ͏͜ͱ

    Ͱ, ৘ใྔΛେ෯ʹݮΒ͍ͯ͠Δ
    • IDCTΛͯ͠ը૾Λ࡞੒
    ը૾Ҿ༻ɿhttps://en.wikipedia.org/wiki/Discrete_cosine_transform
    Two-dimensional DCT frequencies
    from the JPEG DCT

    View full-size slide

  15. WebϖʔδͰར༻͞ΕΔը૾ܗࣜ(GIF)
    • GIF(Graphics Interchange Format)

    ΪϑͰ͸ͳ͍, ΪϑͰ͋Δ
    ‣ ѻ͑Δ৭ͷछྨ͸256छྨ
    ‣ ՄٯѹॖʢྼԽ͸ൃੜ͠ͳ͍ʣ, LZWΛ࢖༻
    ‣ ಁ໌৭Λѻ͏͜ͱ͕Մೳ
    ‣ ෳ਺ͷGIFը૾ΛΞχϝʔγϣϯ͢Δ͜ͱ͕Մೳ
    ‣ ͔ͭͯUNISYSࣾͷಛڐྉ੥ٻͷӨڹͰར༻ऀ͕ܹݮ
    ͕ͨ͠, ಛڐࣦޮʹ൐͍ར༻ऀ͕࠶ͼ૿Ճ

    View full-size slide

  16. WebϖʔδͰར༻͞ΕΔը૾ܗࣜ(PNG)
    • PNG(Portable Network Graphics)

    GIF͕ಛڐ໰୊ͰᎍΊͨ࣌ʹ, GIFͷ୅ΘΓʹར༻͢Δ
    ϑΥʔϚοτͱͯ͠W3CͰ։ൃ͞Εͨ
    ‣ 1,677ສ৭Ҏ্ͷ৭Λѻ͏͜ͱ͕Մೳ
    ‣ ՄٯѹॖʢྼԽͳ͠ʣ
    ‣ ಉ͡಺༰Ͱ΋, GIFΑΓ΋ѹॖޮ཰͕ྑ͍
    - GIF͸LZW, PNG͸Deflate(LZ77+huffman coding)
    ‣ ಁ໌౓Λѻ͑Δʢ൒ಁ໌͕Մೳʣ

    View full-size slide

  17. WebϖʔδͰར༻͞ΕΔը૾ܗࣜ(WebP)
    • WebPʢ΢Σοϐʔʣ

    Google͕։ൃ͍ͯ͠Δ࣍ੈ୅ͷը૾ϑΥʔϚοτ. ֦ு
    ࢠ͸.webp
    ‣ ϩεϨεϞʔυͰPNGΑΓ΋26%খ͍͞
    ‣ ϩογʔϞʔυͰ͸JPEGΑΓ25ʙ34%΄Ͳখ͍͞
    - ͱ, Google͸ओு͍ͯ͠·͢
    ‣ ඇՄٯѹॖͰ΋ΞϧϑΝνϟϯωϧΛ࢖༻Մೳ
    https://developers.google.com/speed/webp/

    View full-size slide

  18. WebϖʔδͰར༻͞ΕΔը૾ܗࣜ
    ը૾ܗࣜ ৭ͷछྨ ѹॖܗࣜ ಁաॲཧ Ξχϝʔγϣϯ
    +1&( ࠷େສ৭
    ඇՄٯ

    %$52VBOUJ[F

    ✕ ✕
    (*' ࠷େ৭
    Մٯ

    -;8

    ಛఆͷ৭Λಁ໌৭
    ʹ͢Δ͜ͱ͕Մೳ
    Մೳ
    1/( ࠷େສ৭
    Մٯ

    %FqBUF

    ಛఆͷྖҬͷಁ໌
    ౓Λௐ੔Մೳ

    ը૾ϑΥʔϚοτऴྃ

    View full-size slide

  19. ໨࣍
    1. HTML
    2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ
    3. XML
    4. CSS
    5. εΫϦϓτݴޠ
    6. DOM
    7. JSON
    8. ϑΟʔυ
    9. ϚΠΫϩϑΥʔϚοτ
    10.Ի੠ɾಈը഑৴
    11.ϝσΟΞλΠϓ

    View full-size slide

  20. XML
    • XML(Extensible Markup Language)

    HTMLͱಉ͡ϚʔΫΞοϓݴޠʢߏ଄ͳͲΛࣔ͢ݴޠʣ
    ‣ HTMLͱ͸ҟͳΓ, ༷ʑͳ༻్ʹ൚༻తʹར༻Մೳ
    - HTML͸Hyper TextʹಛԽͨ͠ϚʔΫΞοϓݴޠ
    ‣ HTML΋XML΋, ಉ͡ݴޠ͔Β೿ੜͯ͠Ͱ͖ͨ
    - SGML(Standard Generalized Markup Language)

    View full-size slide

  21. XML
    • HTML͸Hyper TextΛهड़͢Δ͜ͱʹରͯ͠ಛԽͨ͠࢖
    ༻ࡦఆ͕קΊΒΕ͍ͯͨ
    • ͦΕʹରͯ͠, XML͸໨తʹԠͯࣗ͡ΒλάΛఆٛ͢Δ
    ͜ͱ͕ՄೳͰ, ࣗ༝ͳܗࣜͰॊೈʹߏ଄Խ͞ΕͨจষΛ
    ࡞Δ͜ͱ͕Մೳ
    ‣ XML΋HTML΋W3Cʹͯඪ४Խ͞Εקࠂ͞ΕΔ

    View full-size slide

  22. XHTML



    Gambardella, Matthew
    XML Developer's Guide
    Computer
    44.95
    2000-10-01
    An in-depth look at creating applications
    with XML.


    λά͸ࣗ෼Ͱಠࣗʹఆٛ͢Δ͜ͱ͕Մೳ
    )5.-ͱಉ༷ʹ ։࢝λάͱऴྃλάͰ

    จষΛڬΉ
    XMLͷྫ

    View full-size slide

  23. XHTML
    • XHTML(Extensible HyperText Markup Language)

    HTMLΛXMLͷจ๏Ͱ࠶ఆٛͨ͠΋ͷ
    ‣ XMLͷจ๏੍໿ʹΑΓ, ด͡λάͷলུ΍λά໊ͷ
    έʔεͷࠞࡏ͕ڐ͞Εͳ͘ͳΔͳͲHTMLΑΓ΋ݫີ
    ‣ HTMLͱXMLͷ྆ํͷػೳΛ࢖͏͜ͱ͕ग़དྷΔ
    - ਺ࣜΛຒΊࠐΉMathML΍SVGͳͲΛຒΊࠐΉ͜ͱ
    ͕Մೳ

    View full-size slide




  24. Document


    My Homepage
    ͸͡Ί·ͯ͠ɻ○○Ͱ͢ɻ

    ͜Ε͸ɺϦϯΫͰ͢ɻ



    XHTML
    9.-એݴ͔Β։࢝
    ։࢝λά͚ͩ͸ڐ͞Εͳ͍ͷͰ ऴྃλά
    Λ෇͚Δ͔຤ඌʹΛ෇͚Δ
    XHTMLͷྫ
    ඞͣ։࢝λάͱऴྃλά͕ඞཁ

    View full-size slide

  25. ໨࣍
    1. HTML
    2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ
    3. XML
    4. CSS
    5. εΫϦϓτݴޠ
    6. DOM
    7. JSON
    8. ϑΟʔυ
    9. ϚΠΫϩϑΥʔϚοτ
    10.Ի੠ɾಈը഑৴
    11.ϝσΟΞλΠϓ

    View full-size slide

  26. CSS
    • CSS(Cascading Style Sheets)
    ‣ HTML΍XMLͷදࣔํ๏ʢମࡋʣΛදݱ͢Δ΋ͷ
    ‣ ελΠϧγʔτͱݺ͹ΕΔ͜ͱ͕ଟ͍
    ‣ HTML΍XML͸͋͘·Ͱߏ଄Λදݱ͢Δ΋ͷ
    - HTMLͰ͸, όʔδϣϯ4.0͔ΒCSSΛ༻͍ͯจॻߏ
    ଄ͱମࡋͷهड़Λ෼཭͢Δ͜ͱΛਪ঑
    ‣ CSS1, CSS2ͱ͖ͯ, ݱࡏ͸CSS3

    View full-size slide

  27. CSS
    • ಛఆͷจࣈͷେ͖͞΍৭ͳͲΛมߋ͍ͨ͠৔߹
    ‣ CSS͕ଘࡏ͠ͳ͍ੈք

    fontλάͳͲΛ࢖ͬͯ, HTML্Ͱදࣔํ๏Λࢦఆ
    - ڽͬͨදࣔʹ͠Α͏ͱ͢Δͱ, HTMLϑΝΠϧ͕ෳ
    ࡶԽͯ͠͠·͏
    ‣ CSS͕ଘࡏ͢Δੈք

    ʮ͋ΔಛఆͷλάΛ੨৭ʹ͢ΔʯΈ͍ͨͳ͜ͱ͕Մ
    ೳʹͳͬͨ

    View full-size slide

  28. CSS
    • CSS͕ଘࡏ͠ͳ͍ੈք




    ͠·΋Μͷ෦԰


    ݟग़͠͸20pxͰ੨৭
    ͔͜͜Βຊจ ͜͜͸10pxͰهड़

    2ߦ໨͜͜͸10pxͰ੺


    fontλά͸ྑ͘ͳ͍
    htmlͷΈ(ߏ଄+ମࡋ)

    View full-size slide

  29. CSS
    • CSSΛ࢖༻͢Δͱ…




    ͠·΋Μͷ෦԰



    ݟग़͠͸20pxͰ੨৭
    ͔͜͜Βຊจ ͜͜͸10pxͰهड़

    2ߦ໨͜͜͸10pxͰ੺


    h1 {
    color: blue;
    font-size: 20px;
    }
    .red10 {
    color: red;
    font-size: 10px;
    }





    html(ߏ଄) css(ମࡋ)
    ΘΓͱγϯϓϧʹͳهड़ʹ"

    View full-size slide

  30. CSS
    • HTMLϑΝΠϧͷதʹ௚઀ελΠϧΛॻ͘͜ͱ΋Մೳ
    • CSSʢମࡋʣΛ෼཭͓ͯ͘͜͠ͱͰ
    ‣ σβΠϯΛڞ༗͢Δ͜ͱ͕Մೳ
    ‣ ద༻͢ΔCSSΛมߋ͢Δ͜ͱͰ, ར༻͢ΔΫϥΠΞϯ
    τ(PC, εϚʔτϑΥϯ, etc…)ʹదͨ͠ελΠϧΛద
    ༻͢Δ͜ͱ͕Մೳ

    View full-size slide

  31. ໨࣍
    1. HTML
    2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ
    3. XML
    4. CSS
    5. εΫϦϓτݴޠ
    6. DOM
    7. JSON
    8. ϑΟʔυ
    9. ϚΠΫϩϑΥʔϚοτ
    10.Ի੠ɾಈը഑৴
    11.ϝσΟΞλΠϓ

    View full-size slide

  32. εΫϦϓτݴޠ
    • ಈతͳϖʔδʹ͸εΫϦϓτݴޠͷଘࡏ͕ඞཁෆՄܽ
    • 2छྨͷεΫϦϓτ͕ଘࡏ
    ‣ αʔόʔαΠυεΫϦϓτ

    CGIʢαʔόଆʣ͔Βݺͼग़͞ΕΔεΫϦϓτ. Perl΍
    Python, RubyͳͲ͕ଟ͍Ͷ
    ‣ ΫϥΠΞϯταΠυεΫϦϓτ

    Webϒϥ΢βଆʢΫϥΠΞϯτଆʣͰ࣮ߦ͞ΕΔεΫ
    Ϧϓτ. JavaScript͕࢖ΘΕΔ͜ͱ͕ଟ͍Ͷ

    View full-size slide

  33. εΫϦϓτݴޠʢαʔόʔαΠυεΫϦϓτʣ
    • αʔόʔαΠυεΫϦϓτʹ͸, Ruby, Python, Perl, PHP
    ͳͲ͕࢖ΘΕΔ͜ͱ͕ଟ͍
    ݴޠ ಛ௃
    3VCZ ΦϒδΣΫτࢦ޲ΛऔΓೖΕͨݴޠ
    1ZUIPO ΠϯσϯτͰϒϩοΫΛද͢
    1FSM ྺ࢙Λײ͡Δʜ
    1)1 )5.-ʹຒΊࠐΊΔΑͶ
    ※ݸਓͷײ૝Ͱ͢
    ͪΐͬͱͨ͠ͷͩͱPHP࢖͏ײ

    View full-size slide

  34. εΫϦϓτݴޠʢΫϥΠΞϯτεΫϦϓτʣ
    • ΫϥΠΞϯτεΫϦϓτʹ͸, JavaScript͕࢖ΘΕΔࣄ
    ͕ଟ͍(JavaScript ≠ Java)
    • NetMozilla FoundationͱMicrosoft͕ͦΕͧΕ։ൃͯ͠
    ͨ
    ‣ ECMAΠϯλʔφγϣφϧ͕த৺ͱͳΓ, ECMAScript
    ͱ͍͏JavaScriptͷඪ४Λࡦఆ
    ‣ ଟ͘ͷϒϥ΢β͕ECMAScriptΛαϙʔτ

    View full-size slide

  35. εΫϦϓτݴޠʢΫϥΠΞϯτεΫϦϓτʣ
    • ES6ͱES2015͸ಉ͡΋ͷΛࢦ͠·͢
    ‣ ES2016Ͱݴ͓͚ͬͯ͹ؒҧ͍ͳͦ͞͏
    ‣ ͕͜͜ৄ͍͠ˠhttp://blog.cybozu.io/entry/9081
    • ES6ΛES5ʹม׵͢ΔτϥϯεύΠϥͬͯͷ΋͋Γ·͢
    ‣ Babel
    • AltJSͱ͍͏΋ͷ΋ଘࡏ͢Δ
    ‣ CoffeeScript, TypeScript, …

    View full-size slide

  36. εΫϦϓτݴޠʢΫϥΠΞϯτεΫϦϓτʣ
    • ϑϨʔϜϫʔΫ΋ଓʑొ৔
    ‣ jQueryʢ͜Ε͸ϑϨʔϜϫʔΫͰ͸ͳ͍ʣ
    ‣ React
    ‣ Angular
    ‣ Vue.js

    View full-size slide

  37. εΫϦϓτݴޠʢΫϥΠΞϯτεΫϦϓτʣ
    • ࠷ۙ͸αʔόʔαΠυjsͬͯͷ΋͋Γ·͢Ͷ



    • খωλ

    Node.jsͷύοέʔδϚωʔδϟnpmͷެࣜαΠτࠨ্

    View full-size slide

  38. ໨࣍
    1. HTML
    2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ
    3. XML
    4. CSS
    5. εΫϦϓτݴޠ
    6. DOM
    7. JSON
    8. ϑΟʔυ
    9. ϚΠΫϩϑΥʔϚοτ
    10.Ի੠ɾಈը഑৴
    11.ϝσΟΞλΠϓ

    View full-size slide

  39. DOM
    • DOM(Document Object Model)

    HTML΍XMLจॻΛѻ͏ͨΊͷAPI
    • DOMΛ࢖͏͜ͱͰ, ϓϩάϥϜ͔Βจॻߏ଄Λ؆୯ʹ
    ࢀরɾ੍ޚ͢Δ͜ͱ͕Մೳ
    ϓϩάϥϜ %0.




    ͠·΋Μͷ෦԰



    ݟग़͠
    ͔͜͜Βຊจ


    head಺ͷtitleཁૉͷ
    ஋Λ͍ͩ͘͞
    “͠·΋Μͷ෦԰”Ͱ͢
    HTMLΛḷͬͯ
    ஋Λऔಘ
    ϓϩάϥϜͱ)5.-
    ͷڮ౉͠໾

    View full-size slide

  40. DOM
    • Webϒϥ΢βʹݶΒͣ, Webϒϥ΢βͱWebαʔόؒͰͷXMLจॻ
    ͷ΍ΓऔΓʹ΋࢖ΘΕͯΔͬΆ͍
    • DOM͸W3C͕ඪ४Խ, קࠂΛߦ͍ͬͯΔ
    • Levelͱ͍͏֓೦͕͋Δ
    ‣ Level 1

    XML1.0ͱXHTML4.0x΁ͷରԠ
    ‣ Level 2

    XML1.0ͷ֦ுͱXHTML1.0, CSSͷαϙʔτ௥Ճ
    ‣ Level 3

    XML1.0ͷ֦ுͱDOMπϦʔͷಡΈॻ͖ػೳͳͲͷ௥Ճ

    View full-size slide

  41. • DOM͸, ର৅ͱͳΔจॻͷ֤ཁૉΛπϦʔߏ଄ʹͯ͠
    ѻ͍ͬͯΔ(DOMπϦʔ)
    DOM




    ͠·΋Μͷ෦԰



    ݟग़͠
    ͔͜͜Βຊจ


    )5.- IFBE
    CPEZ
    NFUB
    UJUMF
    MJOL
    I
    ͠·΋Μͷ෦԰
    ݟग़͠
    ͔͜͜Βຊจ
    %0.πϦʔ

    View full-size slide

  42. DOM




    ͠·΋Μͷ෦԰



    ݟग़͠
    ͔͜͜Βຊจ


    )5.- IFBE
    CPEZ
    NFUB
    UJUMF
    MJOL
    I
    ͠·΋Μͷ෦԰
    ݟग़͠
    ͔͜͜Βຊจ
    %0.πϦʔ
    ͭͭΛ
    ϊʔυͱ͍͏
    ཁૉ͕ଟ͘ͳΔͱDOMπϦʔ͕ڊେʹͳΔͨΊ,
    จॻͷྔ͕ଟ͍৔߹͸ॲཧʹ͕͔͔࣌ؒΔ
    ໰୊఺

    View full-size slide

  43. ໨࣍
    1. HTML
    2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ
    3. XML
    4. CSS
    5. εΫϦϓτݴޠ
    6. DOM
    7. JSON
    8. ϑΟʔυ
    9. ϚΠΫϩϑΥʔϚοτ
    10.Ի੠ɾಈը഑৴
    11.ϝσΟΞλΠϓ

    View full-size slide

  44. JSON
    • JSON(JavaScript Object Notation)

    ߏ଄Խͨ͠σʔλΛදͨ͢Ίͷσʔλهड़ݴޠ.
    JavaScriptͷΦϒδΣΫτදݱͷαϒηοτ
    ‣ JavaScriptͰ͔͠࢖͑ͳ͍ͱ͔Ͱ͸ͳ͍
    {
    "copyright": {
    "image": {
    "height": 26,
    "link": "http://weather.livedoor.com/",
    "title": "livedoor ఱؾ৘ใ",
    "url": "http://weather.livedoor.com/img/cmn/livedoor.gif",
    "width": 118
    },
    "link": "http://weather.livedoor.com/",
    "title": "(C) LINE Corporation"
    },
    "publicTime": "2018-03-14T17:00:00+0900",
    "title": "௕໺ݝ ௕໺ ͷఱؾ"
    }
    Weather Hacks: http://weather.livedoor.com/weather_hacks/

    View full-size slide

  45. JSON
    • JSONΛར༻͢Δ͜ͱͰ, σʔλΛ໦ߏ଄Ͱදݱ͢Δ͜
    ͱ͕Մೳ
    ‣ ͦͷ఺Ͱ͸XMLͱ͋·ΓมΘΒͳ͍ͷͰ͸
    • XML͸λάͰσʔλͷߏ଄Λද͢
    • JSON͸σʔλΛ֊૚తʹฒ΂ͯߏ଄Λද͢

    View full-size slide

  46. JSON
    • XMLͷಛ௃
    ‣ σʔλͱͯ͠จࣈྻ͔͠ද͢͜ͱ͕Ͱ͖ͳ͍
    ‣ શͯͷ৘ใʹλά෇͚͕ඞཁ
    ‣ ςΩετͷ೚ҙͷ৔ॴʹλά෇͚͕Մೳ
    • JSONͷಛ௃
    ‣ จࣈྻҎ֎ʹ, ਺஋΍ۭΛҙຯ͢ΔσʔλΛ࢖༻Մೳ
    ‣ σʔλΛΧοίͰׅΔ͚ͩͳͷͰ, αΠζ͸খ͞Ί
    ‣ λάʹΑΔϚʔΫ෇͕ͳ͍ͷͰՄಡੑ͕௿͍

    View full-size slide

  47. JSON
    {
    "copyright": {
    "image": {
    "height": 26,
    "link": "http://weather.livedoor.com/",
    "title": "livedoor ఱؾ৘ใ",
    "url": "http://weather.livedoor.com/img/cmn/livedoor.gif",
    "width": 118
    },
    "link": "http://weather.livedoor.com/",
    "title": "(C) LINE Corporation"
    },
    "publicTime": "2018-03-14T17:00:00+0900",
    "title": "௕໺ݝ ௕໺ ͷఱؾ"
    }



    26
    http://weather.livedoor.com/
    livedoor ఱؾ৘ใ
    http://weather.livedoor.com/img/cmn/livedoor.gif
    118

    http://weather.livedoor.com/
    (C) LINE Corporation

    2018-03-14T17:00:00+0900
    ௕໺ݝ ௕໺ ͷఱؾ
    JSON
    XML

    View full-size slide

  48. JSON
    • Web্Ͱͷσʔλͷ΍ΓऔΓͰ͸, JSON͕Α͘ར༻͞
    Ε͍ͯΔ
    • JSON͸·Μ·JavaScriptͷΦϒδΣΫτͳͷͰ, DOM
    Λ࢖༻͢ΔXMLʹൺ΂ͯΦʔόʔϔου͕গͳ͍
    ϓϩάϥϜ %0. 9.-
    ϓϩάϥϜ +40/
    XML
    JSON
    DOMΛܦ༝͢Δඞཁ͋Γ
    DOMΛܦ༝͢Δඞཁͳ͠
    JSON.parse()ͱ͔ͰΑͦ͞͏

    View full-size slide

  49. ໨࣍
    1. HTML
    2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ
    3. XML
    4. CSS
    5. εΫϦϓτݴޠ
    6. DOM
    7. JSON
    8. ϑΟʔυ
    9. ϚΠΫϩϑΥʔϚοτ
    10.Ի੠ɾಈը഑৴
    11.ϝσΟΞλΠϓ

    View full-size slide

  50. ϑΟʔυ
    • ϑΟʔυ

    WebαΠτͷߋ৽ཤྺΛ഑৴͢ΔͨΊͷϑΝΠϧ
    • ϑΟʔυΛνΣοΫ͢Δ͜ͱͰ, ࣮ࡍʹϖʔδʹΞΫη
    εͤͣʹϖʔδͷߋ৽ࠩ෼ΛಘΔ͜ͱ͕ग़དྷΔ
    ‣ ϑΟʔυͷத਎͸ओʹϋΠύʔϦϯΫͷू·Γ
    • ҎԼͷΑ͏ͳϑΥʔϚοτ͕͋Δ
    ‣ RSS
    ‣ Atom

    View full-size slide

  51. ϑΟʔυ
    • RSSͷྺ࢙͸ࠞಱͱ͍ͯ͠Δ
    ݱঢ়࢖ΘΕͯΔͷ͸2छྨ
    Ҿ༻ɿ https://developer.mozilla.org/ja/docs/Archive/RSS/Version

    View full-size slide

  52. ϑΟʔυ(RDF)
    • RSS

    ݱࡏ, RSS͸2ͭͷܥྻʹ෼͔Ε͍ͯΔ
    ‣ RSS 1.0(RDF Site Summary 1.0)
    - RDF(Resource Description Framework)͕ϕʔεʹͳ͍ͬͯΔ
    - ߏจ͸ෳࡶ, ໊લۭؒͷαϙʔτ
    ‣ RSS 2.0(Really Simple Syndication 2.0)
    - XML͕ϕʔεʹͳ͍ͬͯΔ
    - 1.0ʹൺ΂Δͱγϯϓϧ
    • ུশͷ௨Γ, RSS2.0͸RSS1.0ͷޙܧͰͳ͍ผ෺Ͱ͋Δ఺ʹ஫ҙ

    View full-size slide

  53. ϑΟʔυ(Atom)
    • Atom

    IETFͰඪ४Խ͕ਐΊΒΕ͍ͯΔϑΥʔϚοτ
    ‣ XMLΛϕʔεͱͨ͠ϑΥʔϚοτ
    ‣ 2छྨ͕ଘࡏ
    - ഑৴ϑΥʔϚοτͷAtom Syndication Format
    - ग़൛ϓϩτίϧͷAtom Publishing Protocol

    View full-size slide

  54. ϑΟʔυ
    • ϑΟʔυϦʔμʔʢϑΟʔυΞάϦήʔλʔʣ

    Web্ͷϑΟʔυΛऔಘͯ͠؅ཧ͢Διϑτ
    ‣ Feedlyͱ͔༗໊Ͱ͢ΑͶ
    ϑΟʔυ
    ϑΟʔυ
    ϑΟʔυ
    ఆظతʹΞΫηε
    ϑΟʔυϦʔμʔ

    View full-size slide

  55. ϑΟʔυ
    • ϙουΩϟετ

    Webαʔό্ʹಈը΍ԻָΛΞοϓϩʔυ͠, RSSΛ௨
    ͯ͠഑৴͢Δํ๏
    Իָ
    ಈը
    ϑΟʔυ
    ϑΟʔυϦʔμʔ
    αʔόʹΞοϓϩʔυ͞Εͨ
    Իָ΍ಈըͷϦετ

    View full-size slide

  56. ໨࣍
    1. HTML
    2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ
    3. XML
    4. CSS
    5. εΫϦϓτݴޠ
    6. DOM
    7. JSON
    8. ϑΟʔυ
    9. ϚΠΫϩϑΥʔϚοτ
    10.Ի੠ɾಈը഑৴
    11.ϝσΟΞλΠϓ

    View full-size slide

  57. ϚΠΫϩϑΥʔϚοτ
    • ϚΠΫϩϑΥʔϚοτ

    HTML΍XHTMLͰهड़͞ΕͨWebϖʔδͷதʹ, ҙຯΛ
    ද͢هड़ΛຒΊࠐΉͨΊͷॻࣜ
    ళฮ໊
    ୸ম͖Ϩετϥϯ͞Θ΍͔
    ඿দࣰέ੉ళ
    ి࿩൪߸ 053-421-8911
    63-
    IUUQXXXHFOLPUTVICDPN
    TIPQTIPQTTIPQIUNM

    ୸ম͖Ϩετϥϯ͞Θ΍͔ ඿দࣰέ੉ళ
    053-421-8911
    http://www.genkotsu-hb…

    webϖʔδͷදݱʹӨڹͷ಺༰ʹ
    classଐੑͳͲΛ࢖ͬͯҙຯΛຒΊࠐΉ

    View full-size slide

  58. ϚΠΫϩϑΥʔϚοτ
    • ࿈བྷઌΛද͢hCard

    CommerceNet

    Work:
    169 University Avenue
    Palo Alto,
    CA  
    94301
    USA


    Work +1-650-289-4040


    Fax +1-650-289-4041

    Email:
    [email protected]


    View full-size slide

  59. ϚΠΫϩϑΥʔϚοτ
    • Πϕϯτ৘ใΛද͢hCalendar

    XYZ Project Review
    Project XYZ Review Meeting
    To be held on

    the 12th of March
    from 8:30am EST
    until

    9:30am EST


    Location: 1CP Conference Room 4350
    Booked by: guid-1.host1.com on

    the 9th at 6:00pm



    View full-size slide

  60. ϚΠΫϩϑΥʔϚοτ
    • ҙຯʹؔ͢Δ৘ใΛຒΊࠐΉ͜ͱͰ, ηϚϯςΟοΫ
    Webͷ࣮ݱ͕Մೳ
    • GoogleͷϦονεχϖοτ͕༗໊
    ͜͜ͱ͔
    (o^_^)
    Կ͕Ͳͷ৘ใԽΛϚʔΫΞοϓ͓ͯ͘͠ͱ, ίϯϐϡʔλ͕ཧղͯ͠දࣔͯ͘͠ΕΔ

    View full-size slide

  61. ϚΠΫϩϑΥʔϚοτ
    • ϚΠΫϩϑΥʔϚοτ͸, microformatsίϛϡχςΟ͕
    ؅ཧ͍ͯ͠Δ
    • ϚΠΫϩϑΥʔϚοτͷΑ͏ʹߏ଄ԽϚʔΫΞοϓΛߦ
    ͳ͏΋ͷ͸༷ʑͳஂମͰ։ൃ͞Ε͍ͯΔ
    ‣ ϚΠΫϩσʔλ
    ‣ PDFa
    ‣ Schema.org

    Google, Yahoo, Microsoft, YandexͳΜ͔͕ओମ

    View full-size slide

  62. ໨࣍
    1. HTML
    2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ
    3. XML
    4. CSS
    5. εΫϦϓτݴޠ
    6. DOM
    7. JSON
    8. ϑΟʔυ
    9. ϚΠΫϩϑΥʔϚοτ
    10.Ի੠ɾಈը഑৴
    11.ϝσΟΞλΠϓ

    View full-size slide

  63. Ի੠ɾಈը഑৴
    • Ի੠΍ಈըͷσʔλΛͦͷ··ྲྀ͢ͱ༷ʑͳ໰୊ʢసૹ࣌
    ؒɾଳҬʣ͕ൃੜ͢ΔͨΊ, ѹॖΛߦ͏ඞཁ͕͋Δ
    ‣ Τϯίʔυ

    σʔλΛѹॖ͢Δ͜ͱ
    ‣ σίʔυ

    ѹॖͨ͠σʔλΛ෮ݩ͢Δ͜ͱ
    • σʔλͷѹॖʹ͸, ίʔσοΫͱݺ͹ΕΔιϑτ΢ΣΞ͕࢖
    ༻͞ΕΔ
    ‣ H.265(HEVC), H.264, MPEG-2, etc…

    View full-size slide

  64. Ի੠ɾಈը഑৴
    • Ի੠ίʔσοΫ




    • ಈըίʔσοΫ
    ن໊֨ ֦ுࢠ ༻్
    ""$ BBD NBͳͲ ܞଳܕԻָϓϨʔϠʔ
    .1 NQ ܞଳܕԻָϓϨʔϠʔ
    8." 8JOEPXT.FEJB
    "VEJP

    XNB 8JOEPXT1$
    ن໊֨ ֦ுࢠ ༻్
    .1&( NQ NWͳͲ ܞଳܕԻָϓϨʔϠʔ
    .1&( NQH NQ ஍্σδλϧ์ૹ
    8.7 8JOEPXT.FEJB
    7JEFP

    XNW 8JOEPXT1$

    View full-size slide

  65. Ի੠ɾಈը഑৴
    • ഑৴ํ๏͸ओʹ3छྨଘࡏ͢Δ
    1. μ΢ϯϩʔυ഑৴
    2. ϓϩάϨογϒμ΢ϯϩʔυ഑৴

    YouTubeͱ͔χίχίಈըͳͲͷΦϯσϚϯυ
    3. ετϦʔϛϯά഑৴

    AbemaTV΍Βχίੜ΍Β

    View full-size slide

  66. Ի੠ɾಈը഑৴
    • μ΢ϯϩʔυ഑৴

    Webαʔό͔ΒಈըϑΝΠϧΛμ΢ϯϩʔυ͠, ׬ྃ͠
    ͔ͯΒ࠶ੜ͢Δ
    ϑΝΠϧΛ
    ͦͷ··ૹ৴
    μ΢ϯϩʔυ͕
    ׬͔ྃͯ͠Β࠶ੜ
    μ΢ϯϩʔυ഑৴
    μ΢ϯϩʔυத͸࠶ੜͰ͖ͳ͍͕ 

    μ΢ϯϩʔυ͕ऴྃ͢Ε͹͍ͭͰ΋࠶ੜՄೳ

    View full-size slide

  67. Ի੠ɾಈը഑৴
    • ϓϩάϨογϒμ΢ϯϩʔυํࣜ

    ϑΝΠϧΛμ΢ϯϩʔυ͠ͳ͕Β࠶ੜ͢Δํ๏
    ‣ YouTubeͳͲͰ࢖ΘΕ͍ͯΔํࣜ
    ϑΝΠϧΛ
    ͦͷ··ૹ৴
    μ΢ϯϩʔυதʹ
    ࠶ੜ։࢝Ͱ͖Δ
    μ΢ϯϩʔυ഑৴
    μ΢ϯϩʔυதʹ࠶ੜ͢Δ͜ͱ͕Ͱ͖ μ΢ϯ
    ϩʔυͨ͠΋ͷ͸Ωϟογϡͱͯ͠อଘ

    View full-size slide

  68. Ի੠ɾಈը഑৴
    • ετϦʔϛϯά഑৴

    ϑΝΠϧΛࡉ͔͘෼ׂͯ͠Ϣʔβ΁഑৴͢Δ
    ‣ ετϦʔϛϯάαʔό͕ඞཁ
    ϑΝΠϧΛ
    ෼ׂͯ͠ૹ৴
    ड͚औͬͨͱ͜Ζ͔Β
    ࠶ੜ͠, ࠶ੜࡁΈͷ΋ͷ͸ഁغ
    μ΢ϯϩʔυ഑৴
    σʔλ͕࢒Βͳ͍ͨΊ ࠶ੜ͢Δͨͼʹσʔλ
    Λμ΢ϯϩʔυ͢Δඞཁ͕͋Δ

    View full-size slide

  69. ໨࣍
    1. HTML
    2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ
    3. XML
    4. CSS
    5. εΫϦϓτݴޠ
    6. DOM
    7. JSON
    8. ϑΟʔυ
    9. ϚΠΫϩϑΥʔϚοτ
    10.Ի੠ɾಈը഑৴
    11.ϝσΟΞλΠϓ

    View full-size slide

  70. ϝσΟΞλΠϓ
    • ϝσΟΞλΠϓ

    Ӿཡʹ࢖༻͢ΔػثͷछྨΛࢦఆ͢Δํ๏
    • ػثʹΑͬͯը໘ͷେ͖͞΍දࣔํ๏͕ҟͳΔ
    ‣ ϓϦϯλʔ
    ‣ PC
    ‣ ఺ࣈσΟεϓϨΠ
    ‣ εϚʔτϑΥϯ
    • ͦΕͧΕͷػثʹ͋ͬͨσβΠϯΛࢦఆՄೳ

    View full-size slide

  71. ϝσΟΞλΠϓ
    • ϝσΟΞλΠϓͷྫ
    ϝσΟΞλΠϓ छྨ
    TDSFFO 1$ͷεΫϦʔϯ
    UUZ จࣈ෯͕ݻఆͷػث
    UW ςϨϏ
    QSPKFDUJPO ϓϩδΣΫλʔ
    CSBJMMF ఺ࣈσΟεϓϨΠ
    BVSBM TQFFDI Ի੠߹੒ػث
    BMM શͯͷϝσΟΞ

    View full-size slide

  72. ϝσΟΞλΠϓ
    • HTMLͰࢦఆ͢Δํ๏
    • CSSͰࢦఆ͢Δํ๏







    d(^_^o)


    ఺ࣈεΫϦʔϯͷ৔߹, braille.cssΛద༻͢Δ
    @media screen,tv {
    body {font-size: large;}
    }
    @media projection {
    body {font-size: small;}
    }
    @media braille {
    body {font-size: large;}
    }
    - @media ͷܗͰࢦఆ͢Δ
    - ର৅ͷϝσΟΞ͕ෳ਺ଘࡏ͢Δ৔߹, ΧϯϚ۠੾ΓͰࢦఆ

    View full-size slide

  73. ࢀߟαΠτ౳

    View full-size slide

  74. ࢀߟαΠτ
    • ͜ͷҰ࡭Ͱશ෦Θ͔Δ Webٕज़ͷجຊ, ιϑτόϯΫΫ
    ϦΤΠςΟϒ, 2017
    • Descrete Cosine Transform

    https://en.wikipedia.org/wiki/Discrete_cosine_transform
    • A new image format for the Web

    https://developers.google.com/speed/webp/
    • JavaScript͕ḷͬͨมભ

    https://qiita.com/naoki_mochizuki/items/
    cc6ef57d35ba6a69117f

    View full-size slide

  75. ࢀߟαΠτ
    • DOM

    https://developer.mozilla.org/ja/docs/DOM
    • RSS

    https://developer.mozilla.org/ja/docs/Archive/RSS
    • schema.orgͰߏ଄ԽϚʔΫΞοϓʂϦονεχϖοτ
    දࣔͰΫϦοΫ཰Λվળ

    https://promonista.com/schema-org/
    • microformats.org

    http://microformats.org/wiki/Main_Page

    View full-size slide