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

Webٕज़ͷجຊ 5ճ໨ Keisuke KAMIYA

ࠓճͷςʔϚ

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

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

HTMLͷߏ଄ • HTML(Hyper Text Markup Language)  ϋΠύʔςΩετ(Webϖʔδ)Λهड़͢Δݴޠ • ಛ௃ 1.
จষΛλάͰғΉ͜ͱͰཁૉʹͳΔ  λά͸, ғΜͩจষ͕ʮԿΛ͔ࣔ͢ʯΛද͢ 2. ཁૉΛೖΕࢠʹ͢Δ͜ͱ͕Մೳ 3. ཁૉʹରͯ͠ଐੑΛ௥Ճ͢Δ͜ͱ͕Մೳ  <a href=“https://example.com/“>ͷhrefͱ͔

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

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

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

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

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

WebϖʔδͰར༻͞ΕΔը૾ܗࣜ(JPEG) • JPEG(Joint Photographic Experts Group)  ҰൠతͳඇՄٯѹॖͷը૾ϑΥʔϚοτ. ‣ 1677ສ৭ͷ৭Λѻ͏͜ͱ͕Մೳʢࣸਅͷը૾ܗࣜͱ ͯ͠༻͍ΒΕΔ͜ͱ͕ଟ͍ʣ
‣ ඇՄٯѹॖͳͷͰ, jpeg͔Βݩͷը૾ʹ׬શʹ෮ݩ͢ Δ͜ͱ͸ෆՄೳ

WebϖʔδͰར༻͞ΕΔը૾ܗࣜ(JPEG) • JPEG͸DCT(Discrete Cosine transform)ͭ·Γ཭ࢄί αΠϯม׵Λ༻͍ͯѹॖ͍ͯ͠Δ • ਓͷ໨Ͱ͸ೝࣝͰ͖ͳ͍ߴप೾  ੒෼Λ࡟Γ, ߋʹྔࢠԽςʔϒϧ 
ʹج͍ͮͯྔࢠԽΛߦͳ͏͜ͱ  Ͱ, ৘ใྔΛେ෯ʹݮΒ͍ͯ͠Δ • IDCTΛͯ͠ը૾Λ࡞੒ ը૾Ҿ༻ɿhttps://en.wikipedia.org/wiki/Discrete_cosine_transform Two-dimensional DCT frequencies from the JPEG DCT

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

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

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

WebϖʔδͰར༻͞ΕΔը૾ܗࣜ ը૾ܗࣜ ৭ͷछྨ ѹॖܗࣜ ಁաॲཧ Ξχϝʔγϣϯ +1&( ࠷େສ৭ ඇՄٯ  %$5
2VBOUJ[F ✕ ✕ (*' ࠷େ৭ Մٯ  -;8 ಛఆͷ৭Λಁ໌৭ ʹ͢Δ͜ͱ͕Մೳ Մೳ 1/( ࠷େສ৭ Մٯ  %FqBUF ಛఆͷྖҬͷಁ໌ ౓Λௐ੔Մೳ ✕ ը૾ϑΥʔϚοτऴྃ

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

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

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

XHTML • XHTML(Extensible HyperText Markup Language)  HTMLΛXMLͷจ๏Ͱ࠶ఆٛͨ͠΋ͷ ‣ XMLͷจ๏੍໿ʹΑΓ, ด͡λάͷলུ΍λά໊ͷ
έʔεͷࠞࡏ͕ڐ͞Εͳ͘ͳΔͳͲHTMLΑΓ΋ݫີ ‣ HTMLͱXMLͷ྆ํͷػೳΛ࢖͏͜ͱ͕ग़དྷΔ - ਺ࣜΛຒΊࠐΉMathML΍SVGͳͲΛຒΊࠐΉ͜ͱ ͕Մೳ

<?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ͷྫ ඞͣ։࢝λάͱऴྃλά͕ඞཁ

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

CSS • ಛఆͷจࣈͷେ͖͞΍৭ͳͲΛมߋ͍ͨ͠৔߹ ‣ CSS͕ଘࡏ͠ͳ͍ੈք  fontλάͳͲΛ࢖ͬͯ, HTML্Ͱදࣔํ๏Λࢦఆ - ڽͬͨදࣔʹ͠Α͏ͱ͢Δͱ, HTMLϑΝΠϧ͕ෳ
ࡶԽͯ͠͠·͏ ‣ CSS͕ଘࡏ͢Δੈք  ʮ͋ΔಛఆͷλάΛ੨৭ʹ͢ΔʯΈ͍ͨͳ͜ͱ͕Մ ೳʹͳͬͨ

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ͷΈ(ߏ଄+ମࡋ)

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(ମࡋ) ΘΓͱγϯϓϧʹͳهड़ʹ"

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

εΫϦϓτݴޠ • ಈతͳϖʔδʹ͸εΫϦϓτݴޠͷଘࡏ͕ඞཁෆՄܽ • 2छྨͷεΫϦϓτ͕ଘࡏ ‣ αʔόʔαΠυεΫϦϓτ  CGIʢαʔόଆʣ͔Βݺͼग़͞ΕΔεΫϦϓτ. Perl΍ Python,
RubyͳͲ͕ଟ͍Ͷ ‣ ΫϥΠΞϯταΠυεΫϦϓτ  Webϒϥ΢βଆʢΫϥΠΞϯτଆʣͰ࣮ߦ͞ΕΔεΫ Ϧϓτ. JavaScript͕࢖ΘΕΔ͜ͱ͕ଟ͍Ͷ

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

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

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

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

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

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.- ͷڮ౉͠໾

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πϦʔͷಡΈॻ͖ػೳͳͲͷ௥Ճ

• 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.πϦʔ

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πϦʔ͕ڊେʹͳΔͨΊ, จॻͷྔ͕ଟ͍৔߹͸ॲཧʹ͕͔͔࣌ؒΔ ໰୊఺

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/

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

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

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

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

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

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

ϑΟʔυ(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ͷޙܧͰͳ͍ผ෺Ͱ͋Δ఺ʹ஫ҙ

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

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

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

ϚΠΫϩϑΥʔϚοτ • ϚΠΫϩϑΥʔϚοτ  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ଐੑͳͲΛ࢖ͬͯҙຯΛຒΊࠐΉ

ϚΠΫϩϑΥʔϚοτ • ࿈བྷઌΛද͢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> <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>

ϚΠΫϩϑΥʔϚοτ • Πϕϯτ৘ใΛද͢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>

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

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

Ի੠ɾಈը഑৴ • Ի੠΍ಈըͷσʔλΛͦͷ··ྲྀ͢ͱ༷ʑͳ໰୊ʢసૹ࣌ ؒɾଳҬʣ͕ൃੜ͢ΔͨΊ, ѹॖΛߦ͏ඞཁ͕͋Δ ‣ Τϯίʔυ  σʔλΛѹॖ͢Δ͜ͱ ‣ σίʔυ 
ѹॖͨ͠σʔλΛ෮ݩ͢Δ͜ͱ • σʔλͷѹॖʹ͸, ίʔσοΫͱݺ͹ΕΔιϑτ΢ΣΞ͕࢖ ༻͞ΕΔ ‣ H.265(HEVC), H.264, MPEG-2, etc…

Ի੠ɾಈը഑৴ • Ի੠ίʔσοΫ        • ಈըίʔσοΫ ن໊֨ ֦ுࢠ
༻్ ""$ BBD NBͳͲ ܞଳܕԻָϓϨʔϠʔ .1 NQ ܞଳܕԻָϓϨʔϠʔ 8." 8JOEPXT.FEJB "VEJP XNB 8JOEPXT1$ ن໊֨ ֦ுࢠ ༻్ .1&( NQ NWͳͲ ܞଳܕԻָϓϨʔϠʔ .1&( NQH NQ ஍্σδλϧ์ૹ 8.7 8JOEPXT.FEJB 7JEFP XNW 8JOEPXT1$

Ի੠ɾಈը഑৴ • ഑৴ํ๏͸ओʹ3छྨଘࡏ͢Δ 1. μ΢ϯϩʔυ഑৴ 2. ϓϩάϨογϒμ΢ϯϩʔυ഑৴  YouTubeͱ͔χίχίಈըͳͲͷΦϯσϚϯυ 3. ετϦʔϛϯά഑৴ 
AbemaTV΍Βχίੜ΍Β

Ի੠ɾಈը഑৴ • μ΢ϯϩʔυ഑৴  Webαʔό͔ΒಈըϑΝΠϧΛμ΢ϯϩʔυ͠, ׬ྃ͠ ͔ͯΒ࠶ੜ͢Δ ϑΝΠϧΛ ͦͷ··ૹ৴ μ΢ϯϩʔυ͕ ׬͔ྃͯ͠Β࠶ੜ
μ΢ϯϩʔυ഑৴ μ΢ϯϩʔυத͸࠶ੜͰ͖ͳ͍͕   μ΢ϯϩʔυ͕ऴྃ͢Ε͹͍ͭͰ΋࠶ੜՄೳ

Ի੠ɾಈը഑৴ • ϓϩάϨογϒμ΢ϯϩʔυํࣜ  ϑΝΠϧΛμ΢ϯϩʔυ͠ͳ͕Β࠶ੜ͢Δํ๏ ‣ YouTubeͳͲͰ࢖ΘΕ͍ͯΔํࣜ ϑΝΠϧΛ ͦͷ··ૹ৴ μ΢ϯϩʔυதʹ ࠶ੜ։࢝Ͱ͖Δ
μ΢ϯϩʔυ഑৴ μ΢ϯϩʔυதʹ࠶ੜ͢Δ͜ͱ͕Ͱ͖ μ΢ϯ ϩʔυͨ͠΋ͷ͸Ωϟογϡͱͯ͠อଘ

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

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

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

ϝσΟΞλΠϓ • 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>ͷܗͰࢦఆ͢Δ - ର৅ͷϝσΟΞ͕ෳ਺ଘࡏ͢Δ৔߹, ΧϯϚ۠੾ΓͰࢦఆ

ࢀߟαΠτ౳

ࢀߟαΠτ • ͜ͷҰ࡭Ͱશ෦Θ͔Δ 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

ࢀߟαΠτ • 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

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

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

More Decks by muttan

Other Decks in Technology

Featured

Transcript