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

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

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. ໨࣍ 1. HTML 2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.

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

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

    จষΛλάͰғΉ͜ͱͰཁૉʹͳΔ
 λά͸, ғΜͩจষ͕ʮԿΛ͔ࣔ͢ʯΛද͢ 2. ཁૉΛೖΕࢠʹ͢Δ͜ͱ͕Մೳ 3. ཁૉʹରͯ͠ଐੑΛ௥Ճ͢Δ͜ͱ͕Մೳ
 <a href=“https://example.com/“>ͷhrefͱ͔
  4. <!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
  5. HTMLͷྺ࢙ όʔδϣϯ ػೳ )5.- )5.-ͷݪܕ ʢجຊతͳจॻߏ଄ͱϦϯΫʣ )5.- ೖྗϑΥʔϜ )5.- ද૊Έ

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

    εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Ի੠ɾಈը഑৴ 11.ϝσΟΞλΠϓ
  8. WebϖʔδͰར༻͞ΕΔը૾ܗࣜ(JPEG) • JPEG͸DCT(Discrete Cosine transform)ͭ·Γ཭ࢄί αΠϯม׵Λ༻͍ͯѹॖ͍ͯ͠Δ • ਓͷ໨Ͱ͸ೝࣝͰ͖ͳ͍ߴप೾
 ੒෼Λ࡟Γ, ߋʹྔࢠԽςʔϒϧ


    ʹج͍ͮͯྔࢠԽΛߦͳ͏͜ͱ
 Ͱ, ৘ใྔΛେ෯ʹݮΒ͍ͯ͠Δ • IDCTΛͯ͠ը૾Λ࡞੒ ը૾Ҿ༻ɿhttps://en.wikipedia.org/wiki/Discrete_cosine_transform Two-dimensional DCT frequencies from the JPEG DCT
  9. WebϖʔδͰར༻͞ΕΔը૾ܗࣜ(GIF) • GIF(Graphics Interchange Format)
 ΪϑͰ͸ͳ͍, ΪϑͰ͋Δ ‣ ѻ͑Δ৭ͷछྨ͸256छྨ ‣

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

    ‣ ՄٯѹॖʢྼԽͳ͠ʣ ‣ ಉ͡಺༰Ͱ΋, GIFΑΓ΋ѹॖޮ཰͕ྑ͍ - GIF͸LZW, PNG͸Deflate(LZ77+huffman coding) ‣ ಁ໌౓Λѻ͑Δʢ൒ಁ໌͕Մೳʣ
  11. WebϖʔδͰར༻͞ΕΔը૾ܗࣜ ը૾ܗࣜ ৭ͷछྨ ѹॖܗࣜ ಁաॲཧ Ξχϝʔγϣϯ +1&( ࠷େສ৭ ඇՄٯ
 %$5

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

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

    HTML͸Hyper TextʹಛԽͨ͠ϚʔΫΞοϓݴޠ ‣ HTML΋XML΋, ಉ͡ݴޠ͔Β೿ੜͯ͠Ͱ͖ͨ - SGML(Standard Generalized Markup Language)
  14. 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ͷྫ
  15. XHTML • XHTML(Extensible HyperText Markup Language)
 HTMLΛXMLͷจ๏Ͱ࠶ఆٛͨ͠΋ͷ ‣ XMLͷจ๏੍໿ʹΑΓ, ด͡λάͷলུ΍λά໊ͷ

    έʔεͷࠞࡏ͕ڐ͞Εͳ͘ͳΔͳͲHTMLΑΓ΋ݫີ ‣ HTMLͱXMLͷ྆ํͷػೳΛ࢖͏͜ͱ͕ग़དྷΔ - ਺ࣜΛຒΊࠐΉMathML΍SVGͳͲΛຒΊࠐΉ͜ͱ ͕Մೳ
  16. <?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ͷྫ ඞͣ։࢝λάͱऴྃλά͕ඞཁ
  17. ໨࣍ 1. HTML 2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.

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

    HTML΍XML͸͋͘·Ͱߏ଄Λදݱ͢Δ΋ͷ - HTMLͰ͸, όʔδϣϯ4.0͔ΒCSSΛ༻͍ͯจॻߏ ଄ͱମࡋͷهड़Λ෼཭͢Δ͜ͱΛਪ঑ ‣ CSS1, CSS2ͱ͖ͯ, ݱࡏ͸CSS3
  19. 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ͷΈ(ߏ଄+ମࡋ)
  20. 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(ମࡋ) ΘΓͱγϯϓϧʹͳهड़ʹ"
  21. ໨࣍ 1. HTML 2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.

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

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

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

    ͨ ‣ ECMAΠϯλʔφγϣφϧ͕த৺ͱͳΓ, ECMAScript ͱ͍͏JavaScriptͷඪ४Λࡦఆ ‣ ଟ͘ͷϒϥ΢β͕ECMAScriptΛαϙʔτ
  25. ໨࣍ 1. HTML 2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.

    εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Ի੠ɾಈը഑৴ 11.ϝσΟΞλΠϓ
  26. 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.- ͷڮ౉͠໾
  27. 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πϦʔͷಡΈॻ͖ػೳͳͲͷ௥Ճ
  28. • 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.πϦʔ
  29. 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πϦʔ͕ڊେʹͳΔͨΊ, จॻͷྔ͕ଟ͍৔߹͸ॲཧʹ͕͔͔࣌ؒΔ ໰୊఺
  30. ໨࣍ 1. HTML 2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.

    εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Ի੠ɾಈը഑৴ 11.ϝσΟΞλΠϓ
  31. 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/
  32. JSON • XMLͷಛ௃ ‣ σʔλͱͯ͠จࣈྻ͔͠ද͢͜ͱ͕Ͱ͖ͳ͍ ‣ શͯͷ৘ใʹλά෇͚͕ඞཁ ‣ ςΩετͷ೚ҙͷ৔ॴʹλά෇͚͕Մೳ •

    JSONͷಛ௃ ‣ จࣈྻҎ֎ʹ, ਺஋΍ۭΛҙຯ͢ΔσʔλΛ࢖༻Մೳ ‣ σʔλΛΧοίͰׅΔ͚ͩͳͷͰ, αΠζ͸খ͞Ί ‣ λάʹΑΔϚʔΫ෇͕ͳ͍ͷͰՄಡੑ͕௿͍
  33. 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
  34. ໨࣍ 1. HTML 2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.

    εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Ի੠ɾಈը഑৴ 11.ϝσΟΞλΠϓ
  35. ϑΟʔυ(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ͷޙܧͰͳ͍ผ෺Ͱ͋Δ఺ʹ஫ҙ
  36. ໨࣍ 1. HTML 2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.

    εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Ի੠ɾಈը഑৴ 11.ϝσΟΞλΠϓ
  37. ϚΠΫϩϑΥʔϚοτ • ϚΠΫϩϑΥʔϚοτ
 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ଐੑͳͲΛ࢖ͬͯҙຯΛຒΊࠐΉ
  38. ϚΠΫϩϑΥʔϚοτ • ࿈བྷઌΛද͢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">[email protected]</span> </div> </div>
  39. ϚΠΫϩϑΥʔϚοτ • Πϕϯτ৘ใΛද͢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>
  40. ໨࣍ 1. HTML 2. WebϖʔδͰ࢖༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.

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


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

    ༻్ ""$ BBD NBͳͲ ܞଳܕԻָϓϨʔϠʔ .1 NQ ܞଳܕԻָϓϨʔϠʔ 8." 8JOEPXT.FEJB "VEJP XNB 8JOEPXT1$ ن໊֨ ֦ுࢠ ༻్ .1&( NQ NWͳͲ ܞଳܕԻָϓϨʔϠʔ .1&( NQH NQ ஍্σδλϧ์ૹ 8.7 8JOEPXT.FEJB 7JEFP XNW 8JOEPXT1$
  43. Ի੠ɾಈը഑৴ • ετϦʔϛϯά഑৴
 ϑΝΠϧΛࡉ͔͘෼ׂͯ͠Ϣʔβ΁഑৴͢Δ ‣ ετϦʔϛϯάαʔό͕ඞཁ ϑΝΠϧΛ ෼ׂͯ͠ૹ৴ ड͚औͬͨͱ͜Ζ͔Β ࠶ੜ͠,

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

    εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Ի੠ɾಈը഑৴ 11.ϝσΟΞλΠϓ
  45. ϝσΟΞλΠϓ • ϝσΟΞλΠϓͷྫ ϝσΟΞλΠϓ छྨ TDSFFO 1$ͷεΫϦʔϯ UUZ จࣈ෯͕ݻఆͷػث UW

    ςϨϏ QSPKFDUJPO ϓϩδΣΫλʔ CSBJMMF ఺ࣈσΟεϓϨΠ BVSBM TQFFDI Ի੠߹੒ػث BMM શͯͷϝσΟΞ
  46. ϝσΟΞλΠϓ • 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>ͷܗͰࢦఆ͢Δ - ର৅ͷϝσΟΞ͕ෳ਺ଘࡏ͢Δ৔߹, ΧϯϚ۠੾ΓͰࢦఆ
  47. ࢀߟαΠτ • ͜ͷҰ࡭Ͱશ෦Θ͔Δ 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