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

Fd09da0d9751bb7875ef4ff7e6201860?s=47 muttan
March 30, 2018

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

Fd09da0d9751bb7875ef4ff7e6201860?s=128

muttan

March 30, 2018
Tweet

Transcript

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

  2. ࠓճͷςʔϚ

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

  4. ໨࣍ 1. HTML 2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.

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

    εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Ի੠ɾಈը഑৴ 11.ϝσΟΞλΠϓ
  6. HTMLͷߏ଄ • HTML(Hyper Text Markup Language)
 ϋΠύʔςΩετ(Webϖʔδ)Λهड़͢Δݴޠ • ಛ௃ 1.

    จষΛλάͰғΉ͜ͱͰཁૉʹͳΔ
 λά͸, ғΜͩจষ͕ʮԿΛ͔ࣔ͢ʯΛද͢ 2. ཁૉΛೖΕࢠʹ͢Δ͜ͱ͕Մೳ 3. ཁૉʹରͯ͠ଐੑΛ௥Ճ͢Δ͜ͱ͕Մೳ
 <a href=“https://example.com/“>ͷhrefͱ͔
  7. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body>

    <h1>d(^_^o)</h1> ͜Ε͸<a href=“https://example.com”>link</a> </body> </html> HTMLͷߏ଄ headཁૉ htmlཁૉ <a href=“http://example.com/“>ϦϯΫ</a> ։࢝λά ऴྃλά ಺༰ ଐੑ(ଐੑ໊=ଐੑ஋) bodyཁૉ IUNMཁૉ IFBEཁૉ NFUBཁૉ UJUMFཁૉ CPEZཁૉ Iཁૉ Bཁૉ ֊૚ߏ଄ʢೖΕࢠʣɹ ʹͳ͍ͬͯΔ example.html
  8. HTMLͷྺ࢙ • HTML͸౰ॳจॻͱϦϯΫΛදͨ͢Ίͷ΋ͷͩͬͨ ‣ Q. HTMLΛ࡞੒ͨ͠ͷ͸୭Ͱ͔͢ʁ • ࣌୅͕ਐΉʹͭΕͯWebʹٻΊΒΕΔػೳ͸૿Ճͯ͠ ͍ͬͨʢΞϓϦέʔγϣϯԽʣ ‣

    Webͷීٴ΍৽ͨͳٕज़ͷൃలʹͭΕͯόʔδϣϯ Ξοϓ͕ߦΘΕ͖ͯͨ - Q. קࠂ͸Ͳ͜ߦ͍ͬͯ·͔͢ʁ
  9. HTMLͷྺ࢙ όʔδϣϯ ػೳ )5.- )5.-ͷݪܕ ʢجຊతͳจॻߏ଄ͱϦϯΫʣ )5.- ೖྗϑΥʔϜ )5.- ද૊Έ

    ৭෇͚ )5.- ૷০ ॻࣜͳͲͷࢿ֨දݱΛ)5.-͔Β੾ Γ཭͠ ݴޠ࢓༷ΛڧԽ )5.- 8FCΞϓϦͷػೳ޲্Λࢹ໺ʹೖΕͨେ෯ ͳ֦ுಈը ԻݯͷຒΊࠐΈ͕Մೳʹ )5.- ϞόΠϧ޲͚ͷը૾ղ૾౓ରԠͳͲ
  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ऴྃ
  11. ໨࣍ 1. HTML 2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.

    εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Ի੠ɾಈը഑৴ 11.ϝσΟΞλΠϓ
  12. WebϖʔδͰར༻͞ΕΔը૾ܗࣜ WebϖʔδͰར༻͞Ε͍ͯΔը૾ܗࣜΛ͍͔ͭ͘঺հ 1. JPEG (xxx.jpeg, xxx.jpg) 2. GIF (xxx.gif) 3.

    PNG (xxx.png) 4. WebP (xxx.webp)
  13. WebϖʔδͰར༻͞ΕΔը૾ܗࣜ(JPEG) • JPEG(Joint Photographic Experts Group)
 ҰൠతͳඇՄٯѹॖͷը૾ϑΥʔϚοτ. ‣ 1677ສ৭ͷ৭Λѻ͏͜ͱ͕Մೳʢࣸਅͷը૾ܗࣜͱ ͯ͠༻͍ΒΕΔ͜ͱ͕ଟ͍ʣ

    ‣ ඇՄٯѹॖͳͷͰ, jpeg͔Βݩͷը૾ʹ׬શʹ෮ݩ͢ Δ͜ͱ͸ෆՄೳ
  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
  15. WebϖʔδͰར༻͞ΕΔը૾ܗࣜ(GIF) • GIF(Graphics Interchange Format)
 ΪϑͰ͸ͳ͍, ΪϑͰ͋Δ ‣ ѻ͑Δ৭ͷछྨ͸256छྨ ‣

    ՄٯѹॖʢྼԽ͸ൃੜ͠ͳ͍ʣ, LZWΛ࢖༻ ‣ ಁ໌৭Λѻ͏͜ͱ͕Մೳ ‣ ෳ਺ͷGIFը૾ΛΞχϝʔγϣϯ͢Δ͜ͱ͕Մೳ ‣ ͔ͭͯUNISYSࣾͷಛڐྉ੥ٻͷӨڹͰར༻ऀ͕ܹݮ ͕ͨ͠, ಛڐࣦޮʹ൐͍ར༻ऀ͕࠶ͼ૿Ճ
  16. WebϖʔδͰར༻͞ΕΔը૾ܗࣜ(PNG) • PNG(Portable Network Graphics)
 GIF͕ಛڐ໰୊ͰᎍΊͨ࣌ʹ, GIFͷ୅ΘΓʹར༻͢Δ ϑΥʔϚοτͱͯ͠W3CͰ։ൃ͞Εͨ ‣ 1,677ສ৭Ҏ্ͷ৭Λѻ͏͜ͱ͕Մೳ

    ‣ ՄٯѹॖʢྼԽͳ͠ʣ ‣ ಉ͡಺༰Ͱ΋, GIFΑΓ΋ѹॖޮ཰͕ྑ͍ - GIF͸LZW, PNG͸Deflate(LZ77+huffman coding) ‣ ಁ໌౓Λѻ͑Δʢ൒ಁ໌͕Մೳʣ
  17. WebϖʔδͰར༻͞ΕΔը૾ܗࣜ(WebP) • WebPʢ΢Σοϐʔʣ
 Google͕։ൃ͍ͯ͠Δ࣍ੈ୅ͷը૾ϑΥʔϚοτ. ֦ு ࢠ͸.webp ‣ ϩεϨεϞʔυͰPNGΑΓ΋26%খ͍͞ ‣ ϩογʔϞʔυͰ͸JPEGΑΓ25ʙ34%΄Ͳখ͍͞

    - ͱ, Google͸ओு͍ͯ͠·͢ ‣ ඇՄٯѹॖͰ΋ΞϧϑΝνϟϯωϧΛ࢖༻Մೳ https://developers.google.com/speed/webp/
  18. WebϖʔδͰར༻͞ΕΔը૾ܗࣜ ը૾ܗࣜ ৭ͷछྨ ѹॖܗࣜ ಁաॲཧ Ξχϝʔγϣϯ +1&( ࠷େສ৭ ඇՄٯ
 %$5

    2VBOUJ[F ✕ ✕ (*' ࠷େ৭ Մٯ
 -;8 ಛఆͷ৭Λಁ໌৭ ʹ͢Δ͜ͱ͕Մೳ Մೳ 1/( ࠷େສ৭ Մٯ
 %FqBUF ಛఆͷྖҬͷಁ໌ ౓Λௐ੔Մೳ ✕ ը૾ϑΥʔϚοτऴྃ
  19. ໨࣍ 1. HTML 2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.

    εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Ի੠ɾಈը഑৴ 11.ϝσΟΞλΠϓ
  20. XML • XML(Extensible Markup Language)
 HTMLͱಉ͡ϚʔΫΞοϓݴޠʢߏ଄ͳͲΛࣔ͢ݴޠʣ ‣ HTMLͱ͸ҟͳΓ, ༷ʑͳ༻్ʹ൚༻తʹར༻Մೳ -

    HTML͸Hyper TextʹಛԽͨ͠ϚʔΫΞοϓݴޠ ‣ HTML΋XML΋, ಉ͡ݴޠ͔Β೿ੜͯ͠Ͱ͖ͨ - SGML(Standard Generalized Markup Language)
  21. XML • HTML͸Hyper TextΛهड़͢Δ͜ͱʹରͯ͠ಛԽͨ͠࢖ ༻ࡦఆ͕קΊΒΕ͍ͯͨ • ͦΕʹରͯ͠, XML͸໨తʹԠͯࣗ͡ΒλάΛఆٛ͢Δ ͜ͱ͕ՄೳͰ, ࣗ༝ͳܗࣜͰॊೈʹߏ଄Խ͞ΕͨจষΛ

    ࡞Δ͜ͱ͕Մೳ ‣ XML΋HTML΋W3Cʹͯඪ४Խ͞Εקࠂ͞ΕΔ
  22. XHTML <?xml version="1.0"?> <catalog> <book id="bk101"> <author>Gambardella, Matthew</author> <title>XML Developer's

    Guide</title> <genre>Computer</genre> <price>44.95</price> <publish_date>2000-10-01</publish_date> <description>An in-depth look at creating applications with XML.</description> </book> </catalog> λά͸ࣗ෼Ͱಠࣗʹఆٛ͢Δ͜ͱ͕Մೳ )5.-ͱಉ༷ʹ ։࢝λάͱऴྃλάͰ
 จষΛڬΉ XMLͷྫ
  23. XHTML • XHTML(Extensible HyperText Markup Language)
 HTMLΛXMLͷจ๏Ͱ࠶ఆٛͨ͠΋ͷ ‣ XMLͷจ๏੍໿ʹΑΓ, ด͡λάͷলུ΍λά໊ͷ

    έʔεͷࠞࡏ͕ڐ͞Εͳ͘ͳΔͳͲHTMLΑΓ΋ݫີ ‣ HTMLͱXMLͷ྆ํͷػೳΛ࢖͏͜ͱ͕ग़དྷΔ - ਺ࣜΛຒΊࠐΉMathML΍SVGͳͲΛຒΊࠐΉ͜ͱ ͕Մೳ
  24. <?xml version="1.0" encoding="UTF-8"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="jp" lang="jp"> <head> <title>Document</title> </head>

    <body> <h1>My Homepage</h1> ͸͡Ί·ͯ͠ɻ<u>◦◦</u>Ͱ͢ɻ<br></br> ͜Ε͸ɺ<a href="https://example.com/">ϦϯΫ</a>Ͱ͢ɻ<br /> </body> </html> XHTML 9.-એݴ͔Β։࢝ ։࢝λά͚ͩ͸ڐ͞Εͳ͍ͷͰ ऴྃλά Λ෇͚Δ͔຤ඌʹΛ෇͚Δ XHTMLͷྫ ඞͣ։࢝λάͱऴྃλά͕ඞཁ
  25. ໨࣍ 1. HTML 2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.

    εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Ի੠ɾಈը഑৴ 11.ϝσΟΞλΠϓ
  26. CSS • CSS(Cascading Style Sheets) ‣ HTML΍XMLͷදࣔํ๏ʢମࡋʣΛදݱ͢Δ΋ͷ ‣ ελΠϧγʔτͱݺ͹ΕΔ͜ͱ͕ଟ͍ ‣

    HTML΍XML͸͋͘·Ͱߏ଄Λදݱ͢Δ΋ͷ - HTMLͰ͸, όʔδϣϯ4.0͔ΒCSSΛ༻͍ͯจॻߏ ଄ͱମࡋͷهड़Λ෼཭͢Δ͜ͱΛਪ঑ ‣ CSS1, CSS2ͱ͖ͯ, ݱࡏ͸CSS3
  27. CSS • ಛఆͷจࣈͷେ͖͞΍৭ͳͲΛมߋ͍ͨ͠৔߹ ‣ CSS͕ଘࡏ͠ͳ͍ੈք
 fontλάͳͲΛ࢖ͬͯ, HTML্Ͱදࣔํ๏Λࢦఆ - ڽͬͨදࣔʹ͠Α͏ͱ͢Δͱ, HTMLϑΝΠϧ͕ෳ

    ࡶԽͯ͠͠·͏ ‣ CSS͕ଘࡏ͢Δੈք
 ʮ͋ΔಛఆͷλάΛ੨৭ʹ͢ΔʯΈ͍ͨͳ͜ͱ͕Մ ೳʹͳͬͨ
  28. CSS • CSS͕ଘࡏ͠ͳ͍ੈք <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">

    <title>͠·΋Μͷ෦԰</title> </head> <body> <h1><font size="20" color="blue">ݟग़͠͸20pxͰ੨৭</font></h1> ͔͜͜Βຊจ <font size="10" color="red">͜͜͸10pxͰهड़</font><br> 2ߦ໨<font size="10" color="red">͜͜͸10pxͰ੺</font> </body> </html> fontλά͸ྑ͘ͳ͍ htmlͷΈ(ߏ଄+ମࡋ)
  29. CSS • CSSΛ࢖༻͢Δͱ… <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">

    <title>͠·΋Μͷ෦԰</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>ݟग़͠͸20pxͰ੨৭</h1> ͔͜͜Βຊจ <div class="red10">͜͜͸10pxͰهड़</div><br> 2ߦ໨<div class="red10">͜͜͸10pxͰ੺</div> </body> </html> h1 { color: blue; font-size: 20px; } .red10 { color: red; font-size: 10px; } 
 
 
 
 
 html(ߏ଄) css(ମࡋ) ΘΓͱγϯϓϧʹͳهड़ʹ"
  30. CSS • HTMLϑΝΠϧͷதʹ௚઀ελΠϧΛॻ͘͜ͱ΋Մೳ • CSSʢମࡋʣΛ෼཭͓ͯ͘͜͠ͱͰ ‣ σβΠϯΛڞ༗͢Δ͜ͱ͕Մೳ ‣ ద༻͢ΔCSSΛมߋ͢Δ͜ͱͰ, ར༻͢ΔΫϥΠΞϯ

    τ(PC, εϚʔτϑΥϯ, etc…)ʹదͨ͠ελΠϧΛద ༻͢Δ͜ͱ͕Մೳ
  31. ໨࣍ 1. HTML 2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.

    εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Ի੠ɾಈը഑৴ 11.ϝσΟΞλΠϓ
  32. εΫϦϓτݴޠ • ಈతͳϖʔδʹ͸εΫϦϓτݴޠͷଘࡏ͕ඞཁෆՄܽ • 2छྨͷεΫϦϓτ͕ଘࡏ ‣ αʔόʔαΠυεΫϦϓτ
 CGIʢαʔόଆʣ͔Βݺͼग़͞ΕΔεΫϦϓτ. Perl΍ Python,

    RubyͳͲ͕ଟ͍Ͷ ‣ ΫϥΠΞϯταΠυεΫϦϓτ
 Webϒϥ΢βଆʢΫϥΠΞϯτଆʣͰ࣮ߦ͞ΕΔεΫ Ϧϓτ. JavaScript͕࢖ΘΕΔ͜ͱ͕ଟ͍Ͷ
  33. εΫϦϓτݴޠʢαʔόʔαΠυεΫϦϓτʣ • αʔόʔαΠυεΫϦϓτʹ͸, Ruby, Python, Perl, PHP ͳͲ͕࢖ΘΕΔ͜ͱ͕ଟ͍ ݴޠ ಛ௃

    3VCZ ΦϒδΣΫτࢦ޲ΛऔΓೖΕͨݴޠ 1ZUIPO ΠϯσϯτͰϒϩοΫΛද͢ 1FSM ྺ࢙Λײ͡Δʜ 1)1 )5.-ʹຒΊࠐΊΔΑͶ ※ݸਓͷײ૝Ͱ͢ ͪΐͬͱͨ͠ͷͩͱPHP࢖͏ײ
  34. εΫϦϓτݴޠʢΫϥΠΞϯτεΫϦϓτʣ • ΫϥΠΞϯτεΫϦϓτʹ͸, JavaScript͕࢖ΘΕΔࣄ ͕ଟ͍(JavaScript ≠ Java) • NetMozilla FoundationͱMicrosoft͕ͦΕͧΕ։ൃͯ͠

    ͨ ‣ ECMAΠϯλʔφγϣφϧ͕த৺ͱͳΓ, ECMAScript ͱ͍͏JavaScriptͷඪ४Λࡦఆ ‣ ଟ͘ͷϒϥ΢β͕ECMAScriptΛαϙʔτ
  35. εΫϦϓτݴޠʢΫϥΠΞϯτεΫϦϓτʣ • ES6ͱES2015͸ಉ͡΋ͷΛࢦ͠·͢ ‣ ES2016Ͱݴ͓͚ͬͯ͹ؒҧ͍ͳͦ͞͏ ‣ ͕͜͜ৄ͍͠ˠhttp://blog.cybozu.io/entry/9081 • ES6ΛES5ʹม׵͢ΔτϥϯεύΠϥͬͯͷ΋͋Γ·͢ ‣

    Babel • AltJSͱ͍͏΋ͷ΋ଘࡏ͢Δ ‣ CoffeeScript, TypeScript, …
  36. εΫϦϓτݴޠʢΫϥΠΞϯτεΫϦϓτʣ • ϑϨʔϜϫʔΫ΋ଓʑొ৔ ‣ jQueryʢ͜Ε͸ϑϨʔϜϫʔΫͰ͸ͳ͍ʣ ‣ React ‣ Angular ‣

    Vue.js
  37. εΫϦϓτݴޠʢΫϥΠΞϯτεΫϦϓτʣ • ࠷ۙ͸αʔόʔαΠυjsͬͯͷ΋͋Γ·͢Ͷ
 
 
 • খωλ
 Node.jsͷύοέʔδϚωʔδϟnpmͷެࣜαΠτࠨ্

  38. ໨࣍ 1. HTML 2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.

    εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Ի੠ɾಈը഑৴ 11.ϝσΟΞλΠϓ
  39. DOM • DOM(Document Object Model)
 HTML΍XMLจॻΛѻ͏ͨΊͷAPI • DOMΛ࢖͏͜ͱͰ, ϓϩάϥϜ͔Βจॻߏ଄Λ؆୯ʹ ࢀরɾ੍ޚ͢Δ͜ͱ͕Մೳ

    ϓϩάϥϜ %0. <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>͠·΋Μͷ෦԰</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>ݟग़͠</h1> ͔͜͜Βຊจ </body> </html> head಺ͷtitleཁૉͷ ஋Λ͍ͩ͘͞ “͠·΋Μͷ෦԰”Ͱ͢ HTMLΛḷͬͯ ஋Λऔಘ ϓϩάϥϜͱ)5.- ͷڮ౉͠໾
  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πϦʔͷಡΈॻ͖ػೳͳͲͷ௥Ճ
  41. • DOM͸, ର৅ͱͳΔจॻͷ֤ཁૉΛπϦʔߏ଄ʹͯ͠ ѻ͍ͬͯΔ(DOMπϦʔ) DOM <!DOCTYPE html> <html lang="ja"> <head>

    <meta charset="UTF-8"> <title>͠·΋Μͷ෦԰</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>ݟग़͠</h1> ͔͜͜Βຊจ </body> </html> )5.- IFBE CPEZ NFUB UJUMF MJOL I ͠·΋Μͷ෦԰ ݟग़͠ ͔͜͜Βຊจ %0.πϦʔ
  42. DOM <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>͠·΋Μͷ෦԰</title> <link

    rel="stylesheet" href="style.css"> </head> <body> <h1>ݟग़͠</h1> ͔͜͜Βຊจ </body> </html> )5.- IFBE CPEZ NFUB UJUMF MJOL I ͠·΋Μͷ෦԰ ݟग़͠ ͔͜͜Βຊจ %0.πϦʔ ͭͭΛ ϊʔυͱ͍͏ ཁૉ͕ଟ͘ͳΔͱDOMπϦʔ͕ڊେʹͳΔͨΊ, จॻͷྔ͕ଟ͍৔߹͸ॲཧʹ͕͔͔࣌ؒΔ ໰୊఺
  43. ໨࣍ 1. HTML 2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.

    εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Ի੠ɾಈը഑৴ 11.ϝσΟΞλΠϓ
  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/
  45. JSON • JSONΛར༻͢Δ͜ͱͰ, σʔλΛ໦ߏ଄Ͱදݱ͢Δ͜ ͱ͕Մೳ ‣ ͦͷ఺Ͱ͸XMLͱ͋·ΓมΘΒͳ͍ͷͰ͸ • XML͸λάͰσʔλͷߏ଄Λද͢ •

    JSON͸σʔλΛ֊૚తʹฒ΂ͯߏ଄Λද͢
  46. JSON • XMLͷಛ௃ ‣ σʔλͱͯ͠จࣈྻ͔͠ද͢͜ͱ͕Ͱ͖ͳ͍ ‣ શͯͷ৘ใʹλά෇͚͕ඞཁ ‣ ςΩετͷ೚ҙͷ৔ॴʹλά෇͚͕Մೳ •

    JSONͷಛ௃ ‣ จࣈྻҎ֎ʹ, ਺஋΍ۭΛҙຯ͢ΔσʔλΛ࢖༻Մೳ ‣ σʔλΛΧοίͰׅΔ͚ͩͳͷͰ, αΠζ͸খ͞Ί ‣ λάʹΑΔϚʔΫ෇͕ͳ͍ͷͰՄಡੑ͕௿͍
  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": "௕໺ݝ ௕໺ ͷఱؾ" } <?xml version="1.0" encoding="UTF-8" ?> <copyright> <image> <height>26</height> <link>http://weather.livedoor.com/</link> <title>livedoor ఱؾ৘ใ</title> <url>http://weather.livedoor.com/img/cmn/livedoor.gif</url> <width>118</width> </image> <link>http://weather.livedoor.com/</link> <title>(C) LINE Corporation</title> </copyright> <publicTime>2018-03-14T17:00:00+0900</publicTime> <title>௕໺ݝ ௕໺ ͷఱؾ</title> JSON XML
  48. JSON • Web্Ͱͷσʔλͷ΍ΓऔΓͰ͸, JSON͕Α͘ར༻͞ Ε͍ͯΔ • JSON͸·Μ·JavaScriptͷΦϒδΣΫτͳͷͰ, DOM Λ࢖༻͢ΔXMLʹൺ΂ͯΦʔόʔϔου͕গͳ͍ ϓϩάϥϜ

    %0. 9.- ϓϩάϥϜ +40/ XML JSON DOMΛܦ༝͢Δඞཁ͋Γ DOMΛܦ༝͢Δඞཁͳ͠ JSON.parse()ͱ͔ͰΑͦ͞͏
  49. ໨࣍ 1. HTML 2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.

    εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Ի੠ɾಈը഑৴ 11.ϝσΟΞλΠϓ
  50. ϑΟʔυ • ϑΟʔυ
 WebαΠτͷߋ৽ཤྺΛ഑৴͢ΔͨΊͷϑΝΠϧ • ϑΟʔυΛνΣοΫ͢Δ͜ͱͰ, ࣮ࡍʹϖʔδʹΞΫη εͤͣʹϖʔδͷߋ৽ࠩ෼ΛಘΔ͜ͱ͕ग़དྷΔ ‣ ϑΟʔυͷத਎͸ओʹϋΠύʔϦϯΫͷू·Γ

    • ҎԼͷΑ͏ͳϑΥʔϚοτ͕͋Δ ‣ RSS ‣ Atom
  51. ϑΟʔυ • RSSͷྺ࢙͸ࠞಱͱ͍ͯ͠Δ ݱঢ়࢖ΘΕͯΔͷ͸2छྨ Ҿ༻ɿ https://developer.mozilla.org/ja/docs/Archive/RSS/Version

  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ͷޙܧͰͳ͍ผ෺Ͱ͋Δ఺ʹ஫ҙ
  53. ϑΟʔυ(Atom) • Atom
 IETFͰඪ४Խ͕ਐΊΒΕ͍ͯΔϑΥʔϚοτ ‣ XMLΛϕʔεͱͨ͠ϑΥʔϚοτ ‣ 2छྨ͕ଘࡏ - ഑৴ϑΥʔϚοτͷAtom

    Syndication Format - ग़൛ϓϩτίϧͷAtom Publishing Protocol
  54. ϑΟʔυ • ϑΟʔυϦʔμʔʢϑΟʔυΞάϦήʔλʔʣ
 Web্ͷϑΟʔυΛऔಘͯ͠؅ཧ͢Διϑτ ‣ Feedlyͱ͔༗໊Ͱ͢ΑͶ ϑΟʔυ ϑΟʔυ ϑΟʔυ ఆظతʹΞΫηε

    ϑΟʔυϦʔμʔ
  55. ϑΟʔυ • ϙουΩϟετ
 Webαʔό্ʹಈը΍ԻָΛΞοϓϩʔυ͠, RSSΛ௨ ͯ͠഑৴͢Δํ๏ Իָ ಈը ϑΟʔυ ϑΟʔυϦʔμʔ

    αʔόʹΞοϓϩʔυ͞Εͨ Իָ΍ಈըͷϦετ
  56. ໨࣍ 1. HTML 2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.

    εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Ի੠ɾಈը഑৴ 11.ϝσΟΞλΠϓ
  57. ϚΠΫϩϑΥʔϚοτ • ϚΠΫϩϑΥʔϚοτ
 HTML΍XHTMLͰهड़͞ΕͨWebϖʔδͷதʹ, ҙຯΛ ද͢هड़ΛຒΊࠐΉͨΊͷॻࣜ ళฮ໊ ୸ম͖Ϩετϥϯ͞Θ΍͔ ඿দࣰέ੉ళ ి࿩൪߸

    053-421-8911 63- IUUQXXXHFOLPUTVICDPN TIPQTIPQTTIPQIUNM <ul class="vcard"> <li class="org">୸ম͖Ϩετϥϯ͞Θ΍͔ ඿দࣰέ੉ళ</li> <li class="tel">053-421-8911</li> <li class=“url">http://www.genkotsu-hb…</li> </ul> webϖʔδͷදݱʹӨڹͷ಺༰ʹ classଐੑͳͲΛ࢖ͬͯҙຯΛຒΊࠐΉ
  58. ϚΠΫϩϑΥʔϚοτ • ࿈བྷઌΛද͢hCard <div class="vcard"> <a class="fn org url" href="http://www.commerce.net/">CommerceNet</a>

    <div class="adr"> <span class="type">Work</span>: <div class="street-address">169 University Avenue</div> <span class="locality">Palo Alto</span>, <abbr class="region" title="California">CA</abbr>&nbsp;&nbsp; <span class="postal-code">94301</span> <div class="country-name">USA</div> </div> <div class="tel"> <span class="type">Work</span> +1-650-289-4040 </div> <div class="tel"> <span class="type">Fax</span> +1-650-289-4041 </div> <div>Email: <span class="email">info@commerce.net</span> </div> </div>
  59. ϚΠΫϩϑΥʔϚοτ • Πϕϯτ৘ใΛද͢hCalendar <div class="vevent"> <h3 class="summary">XYZ Project Review</h3> <p

    class="description">Project XYZ Review Meeting</p> <p>To be held on <span class="dtstart"> <abbr class="value" title="1998-03-12">the 12th of March</abbr> from <span class="value">8:30am</span> <abbr class="value" title="-0500">EST</abbr> </span> until <span class="dtend"> <span class="value">9:30am</span> <abbr class="value" title="-0500">EST</abbr> </span> </p> <p>Location: <span class="location">1CP Conference Room 4350</span></p> <small>Booked by: <span class="uid">guid-1.host1.com</span> on <span class="dtstamp"> <abbr class="value" title="1998-03-09">the 9th</abbr> at <span class="value">6:00pm</span> </span> </small> </div>
  60. ϚΠΫϩϑΥʔϚοτ • ҙຯʹؔ͢Δ৘ใΛຒΊࠐΉ͜ͱͰ, ηϚϯςΟοΫ Webͷ࣮ݱ͕Մೳ • GoogleͷϦονεχϖοτ͕༗໊ ͜͜ͱ͔ (o^_^) Կ͕Ͳͷ৘ใԽΛϚʔΫΞοϓ͓ͯ͘͠ͱ,

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

    ‣ PDFa ‣ Schema.org
 Google, Yahoo, Microsoft, YandexͳΜ͔͕ओମ
  62. ໨࣍ 1. HTML 2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.

    εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Ի੠ɾಈը഑৴ 11.ϝσΟΞλΠϓ
  63. Ի੠ɾಈը഑৴ • Ի੠΍ಈըͷσʔλΛͦͷ··ྲྀ͢ͱ༷ʑͳ໰୊ʢసૹ࣌ ؒɾଳҬʣ͕ൃੜ͢ΔͨΊ, ѹॖΛߦ͏ඞཁ͕͋Δ ‣ Τϯίʔυ
 σʔλΛѹॖ͢Δ͜ͱ ‣ σίʔυ


    ѹॖͨ͠σʔλΛ෮ݩ͢Δ͜ͱ • σʔλͷѹॖʹ͸, ίʔσοΫͱݺ͹ΕΔιϑτ΢ΣΞ͕࢖ ༻͞ΕΔ ‣ H.265(HEVC), H.264, MPEG-2, etc…
  64. Ի੠ɾಈը഑৴ • Ի੠ίʔσοΫ
 
 
 
 • ಈըίʔσοΫ ن໊֨ ֦ுࢠ

    ༻్ ""$ BBD NBͳͲ ܞଳܕԻָϓϨʔϠʔ .1 NQ ܞଳܕԻָϓϨʔϠʔ 8." 8JOEPXT.FEJB "VEJP XNB 8JOEPXT1$ ن໊֨ ֦ுࢠ ༻్ .1&( NQ NWͳͲ ܞଳܕԻָϓϨʔϠʔ .1&( NQH NQ ஍্σδλϧ์ૹ 8.7 8JOEPXT.FEJB 7JEFP XNW 8JOEPXT1$
  65. Ի੠ɾಈը഑৴ • ഑৴ํ๏͸ओʹ3छྨଘࡏ͢Δ 1. μ΢ϯϩʔυ഑৴ 2. ϓϩάϨογϒμ΢ϯϩʔυ഑৴
 YouTubeͱ͔χίχίಈըͳͲͷΦϯσϚϯυ 3. ετϦʔϛϯά഑৴


    AbemaTV΍Βχίੜ΍Β
  66. Ի੠ɾಈը഑৴ • μ΢ϯϩʔυ഑৴
 Webαʔό͔ΒಈըϑΝΠϧΛμ΢ϯϩʔυ͠, ׬ྃ͠ ͔ͯΒ࠶ੜ͢Δ ϑΝΠϧΛ ͦͷ··ૹ৴ μ΢ϯϩʔυ͕ ׬͔ྃͯ͠Β࠶ੜ

    μ΢ϯϩʔυ഑৴ μ΢ϯϩʔυத͸࠶ੜͰ͖ͳ͍͕ 
 μ΢ϯϩʔυ͕ऴྃ͢Ε͹͍ͭͰ΋࠶ੜՄೳ
  67. Ի੠ɾಈը഑৴ • ϓϩάϨογϒμ΢ϯϩʔυํࣜ
 ϑΝΠϧΛμ΢ϯϩʔυ͠ͳ͕Β࠶ੜ͢Δํ๏ ‣ YouTubeͳͲͰ࢖ΘΕ͍ͯΔํࣜ ϑΝΠϧΛ ͦͷ··ૹ৴ μ΢ϯϩʔυதʹ ࠶ੜ։࢝Ͱ͖Δ

    μ΢ϯϩʔυ഑৴ μ΢ϯϩʔυதʹ࠶ੜ͢Δ͜ͱ͕Ͱ͖ μ΢ϯ ϩʔυͨ͠΋ͷ͸Ωϟογϡͱͯ͠อଘ
  68. Ի੠ɾಈը഑৴ • ετϦʔϛϯά഑৴
 ϑΝΠϧΛࡉ͔͘෼ׂͯ͠Ϣʔβ΁഑৴͢Δ ‣ ετϦʔϛϯάαʔό͕ඞཁ ϑΝΠϧΛ ෼ׂͯ͠ૹ৴ ड͚औͬͨͱ͜Ζ͔Β ࠶ੜ͠,

    ࠶ੜࡁΈͷ΋ͷ͸ഁغ μ΢ϯϩʔυ഑৴ σʔλ͕࢒Βͳ͍ͨΊ ࠶ੜ͢Δͨͼʹσʔλ Λμ΢ϯϩʔυ͢Δඞཁ͕͋Δ
  69. ໨࣍ 1. HTML 2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.

    εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Ի੠ɾಈը഑৴ 11.ϝσΟΞλΠϓ
  70. ϝσΟΞλΠϓ • ϝσΟΞλΠϓ
 Ӿཡʹ࢖༻͢ΔػثͷछྨΛࢦఆ͢Δํ๏ • ػثʹΑͬͯը໘ͷେ͖͞΍දࣔํ๏͕ҟͳΔ ‣ ϓϦϯλʔ ‣ PC

    ‣ ఺ࣈσΟεϓϨΠ ‣ εϚʔτϑΥϯ • ͦΕͧΕͷػثʹ͋ͬͨσβΠϯΛࢦఆՄೳ
  71. ϝσΟΞλΠϓ • ϝσΟΞλΠϓͷྫ ϝσΟΞλΠϓ छྨ TDSFFO 1$ͷεΫϦʔϯ UUZ จࣈ෯͕ݻఆͷػث UW

    ςϨϏ QSPKFDUJPO ϓϩδΣΫλʔ CSBJMMF ఺ࣈσΟεϓϨΠ BVSBM TQFFDI Ի੠߹੒ػث BMM શͯͷϝσΟΞ
  72. ϝσΟΞλΠϓ • HTMLͰࢦఆ͢Δํ๏ • CSSͰࢦఆ͢Δํ๏ <html> <head> <link rel="stylesheet" type="text/css"

    media="screen, tv" href=“screen.css”> <link rel="stylesheet" type="text/css" media="projection" href=“projection.css"> <link rel="stylesheet" type="text/css" media="braille" href=“braille.css"> </head> <body> d(^_^o) </body> </html> ఺ࣈεΫϦʔϯͷ৔߹, braille.cssΛద༻͢Δ @media screen,tv { body {font-size: large;} } @media projection { body {font-size: small;} } @media braille { body {font-size: large;} } - @media <media-type>ͷܗͰࢦఆ͢Δ - ର৅ͷϝσΟΞ͕ෳ਺ଘࡏ͢Δ৔߹, ΧϯϚ۠੾ΓͰࢦఆ
  73. ࢀߟαΠτ౳

  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
  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