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

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.-
    &/z
    lIUUQXXXXPSH53 IUNMTUSJDUEUEz )5.-
    
    5SBOTJUJPOBM %0$5:1&
    )5.-
    16#-*$
    l8$%5%
    )5.-
    
    5SBOTJUJPOBM&/z
    lIUUQ XXXXPSH53IUNMMPPTFEUEz )5.-
    
    'SBNFTFU %0$5:1&
    )5.-
    16#-*$
    l8$%5%
    )5.-
    
    'SBNFTFU&/z
    lIUUQ 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 8JOEPXT
    1$ ن໊֨ ֦ுࢠ ༻్ .1&( NQ
    NWͳͲ ܞଳܕԻָϓϨʔϠʔ .1&( NQH
    NQ ஍্σδλϧ์ૹ 8.7 8JOEPXT
    .FEJB
    7JEFP XNW 8JOEPXT
    1$
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