Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Web技術の基本 5回目 / Introduction to Web technologies 5th class
muttan
March 30, 2018
Technology
0
80
Web技術の基本 5回目 / Introduction to Web technologies 5th class
muttan
March 30, 2018
Tweet
Share
More Decks by muttan
See All by muttan
bath_poo_
0
22
bath_poo_
0
71
bath_poo_
0
220
bath_poo_
0
80
bath_poo_
0
80
bath_poo_
1
170
bath_poo_
0
110
bath_poo_
0
160
bath_poo_
0
140
Other Decks in Technology
See All in Technology
nwiizo
1
120
kraj
0
3.4k
ishiayaya
PRO
0
350
sasakendayo
2
440
ocise
0
160
sky_joker
0
120
hmatsu47
0
150
ytaka23
4
820
nkjzm
1
860
yutamakotaro
1
190
chaspy
1
290
fujiihda
8
1.1k
Featured
See All Featured
swwweet
206
6.8k
skipperchong
7
670
kastner
54
1.9k
bkeepers
52
4.1k
eitanlees
111
9.9k
morganepeng
17
1.1k
carmenhchung
26
1.3k
rasmusluckow
318
18k
revolveconf
200
9.6k
roundedbygravity
241
21k
jmmastey
9
540
sugarenia
233
840k
Transcript
Webٕज़ͷجຊ 5ճ Keisuke KAMIYA
ࠓճͷςʔϚ
Chapter 4 Webͷ༷ʑͳσʔλܗࣜ
࣍ 1. HTML 2. WebϖʔδͰ༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.
εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Իɾಈը৴ 11.ϝσΟΞλΠϓ
࣍ 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ऴྃ
࣍ 1. HTML 2. WebϖʔδͰ༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.
εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Իɾಈը৴ 11.ϝσΟΞλΠϓ
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) • JPEGDCT(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ΑΓѹॖޮ͕ྑ͍ - GIFLZW, PNGDeflate(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 ಛఆͷྖҬͷಁ໌ ΛௐՄೳ ✕ ը૾ϑΥʔϚοτऴྃ
࣍ 1. HTML 2. WebϖʔδͰ༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.
εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Իɾಈը৴ 11.ϝσΟΞλΠϓ
XML • XML(Extensible Markup Language) HTMLͱಉ͡ϚʔΫΞοϓݴޠʢߏͳͲΛࣔ͢ݴޠʣ ‣ HTMLͱҟͳΓ, ༷ʑͳ༻్ʹ൚༻తʹར༻Մೳ -
HTMLHyper TextʹಛԽͨ͠ϚʔΫΞοϓݴޠ ‣ HTMLXML, ಉ͡ݴޠ͔Βੜͯ͠Ͱ͖ͨ - SGML(Standard Generalized Markup Language)
XML • HTMLHyper TextΛهड़͢Δ͜ͱʹରͯ͠ಛԽͨ͠ ༻ࡦఆ͕קΊΒΕ͍ͯͨ • ͦΕʹରͯ͠, XMLతʹԠͯࣗ͡ΒλάΛఆٛ͢Δ ͜ͱ͕ՄೳͰ, ࣗ༝ͳܗࣜͰॊೈʹߏԽ͞ΕͨจষΛ
࡞Δ͜ͱ͕Մೳ ‣ XMLHTMLW3Cʹͯඪ४Խ͞Εקࠂ͞ΕΔ
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ͷ྆ํͷػೳΛ͏͜ͱ͕ग़དྷΔ - ࣜΛຒΊࠐΉMathMLSVGͳͲΛຒΊࠐΉ͜ͱ ͕Մೳ
<?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ͷྫ ඞͣ։࢝λάͱऴྃλά͕ඞཁ
࣍ 1. HTML 2. WebϖʔδͰ༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.
εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Իɾಈը৴ 11.ϝσΟΞλΠϓ
CSS • CSS(Cascading Style Sheets) ‣ HTMLXMLͷදࣔํ๏ʢମࡋʣΛදݱ͢Δͷ ‣ ελΠϧγʔτͱݺΕΔ͜ͱ͕ଟ͍ ‣
HTMLXML͋͘·ͰߏΛදݱ͢Δͷ - 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…)ʹదͨ͠ελΠϧΛద ༻͢Δ͜ͱ͕Մೳ
࣍ 1. HTML 2. WebϖʔδͰ༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.
εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Իɾಈը৴ 11.ϝσΟΞλΠϓ
εΫϦϓτݴޠ • ಈతͳϖʔδʹεΫϦϓτݴޠͷଘࡏ͕ඞཁෆՄܽ • 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ͷެࣜαΠτࠨ্
࣍ 1. HTML 2. WebϖʔδͰ༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.
εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Իɾಈը৴ 11.ϝσΟΞλΠϓ
DOM • DOM(Document Object Model) HTMLXMLจॻΛѻ͏ͨΊͷ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จॻ ͷΓऔΓʹΘΕͯΔͬΆ͍ • DOMW3C͕ඪ४Խ, קࠂΛߦ͍ͬͯΔ • 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πϦʔ͕ڊେʹͳΔͨΊ, จॻͷྔ͕ଟ͍߹ॲཧʹ͕͔͔࣌ؒΔ
࣍ 1. HTML 2. WebϖʔδͰ༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.
εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Իɾಈը৴ 11.ϝσΟΞλΠϓ
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()ͱ͔ͰΑͦ͞͏
࣍ 1. HTML 2. WebϖʔδͰ༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.
εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Իɾಈը৴ 11.ϝσΟΞλΠϓ
ϑΟʔυ • ϑΟʔυ WebαΠτͷߋ৽ཤྺΛ৴͢ΔͨΊͷϑΝΠϧ • ϑΟʔυΛνΣοΫ͢Δ͜ͱͰ, ࣮ࡍʹϖʔδʹΞΫη εͤͣʹϖʔδͷߋ৽ࠩΛಘΔ͜ͱ͕ग़དྷΔ ‣ ϑΟʔυͷதओʹϋΠύʔϦϯΫͷू·Γ
• ҎԼͷΑ͏ͳϑΥʔϚοτ͕͋Δ ‣ RSS ‣ Atom
ϑΟʔυ • RSSͷྺ࢙ࠞಱͱ͍ͯ͠Δ ݱঢ়ΘΕͯΔͷ2छྨ Ҿ༻ɿ https://developer.mozilla.org/ja/docs/Archive/RSS/Version
ϑΟʔυ(RDF) • RSS ݱࡏ, RSS2ͭͷܥྻʹ͔Ε͍ͯΔ ‣ RSS 1.0(RDF Site Summary
1.0) - RDF(Resource Description Framework)͕ϕʔεʹͳ͍ͬͯΔ - ߏจෳࡶ, ໊લۭؒͷαϙʔτ ‣ RSS 2.0(Really Simple Syndication 2.0) - XML͕ϕʔεʹͳ͍ͬͯΔ - 1.0ʹൺΔͱγϯϓϧ • ུশͷ௨Γ, RSS2.0RSS1.0ͷޙܧͰͳ͍ผͰ͋Δʹҙ
ϑΟʔυ(Atom) • Atom IETFͰඪ४Խ͕ਐΊΒΕ͍ͯΔϑΥʔϚοτ ‣ XMLΛϕʔεͱͨ͠ϑΥʔϚοτ ‣ 2छྨ͕ଘࡏ - ৴ϑΥʔϚοτͷAtom
Syndication Format - ग़൛ϓϩτίϧͷAtom Publishing Protocol
ϑΟʔυ • ϑΟʔυϦʔμʔʢϑΟʔυΞάϦήʔλʔʣ Web্ͷϑΟʔυΛऔಘͯ͠ཧ͢Διϑτ ‣ Feedlyͱ͔༗໊Ͱ͢ΑͶ ϑΟʔυ ϑΟʔυ ϑΟʔυ ఆظతʹΞΫηε
ϑΟʔυϦʔμʔ
ϑΟʔυ • ϙουΩϟετ Webαʔό্ʹಈըԻָΛΞοϓϩʔυ͠, RSSΛ௨ ͯ͠৴͢Δํ๏ Իָ ಈը ϑΟʔυ ϑΟʔυϦʔμʔ
αʔόʹΞοϓϩʔυ͞Εͨ ԻָಈըͷϦετ
࣍ 1. HTML 2. WebϖʔδͰ༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.
εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Իɾಈը৴ 11.ϝσΟΞλΠϓ
ϚΠΫϩϑΥʔϚοτ • ϚΠΫϩϑΥʔϚοτ HTMLXHTMLͰهड़͞Εͨ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">info@commerce.net</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ͳΜ͔͕ओମ
࣍ 1. HTML 2. WebϖʔδͰ༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.
εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Իɾಈը৴ 11.ϝσΟΞλΠϓ
Իɾಈը৴ • ԻಈըͷσʔλΛͦͷ··ྲྀ͢ͱ༷ʑͳʢసૹ࣌ ؒɾଳҬʣ͕ൃੜ͢ΔͨΊ, ѹॖΛߦ͏ඞཁ͕͋Δ ‣ Τϯίʔυ σʔλΛѹॖ͢Δ͜ͱ ‣ σίʔυ
ѹॖͨ͠σʔλΛ෮ݩ͢Δ͜ͱ • σʔλͷѹॖʹ, ίʔσοΫͱݺΕΔιϑτΣΞ͕ ༻͞ΕΔ ‣ 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ͳͲͰΘΕ͍ͯΔํࣜ ϑΝΠϧΛ ͦͷ··ૹ৴ μϯϩʔυதʹ ࠶ੜ։࢝Ͱ͖Δ
μϯϩʔυ৴ μϯϩʔυதʹ࠶ੜ͢Δ͜ͱ͕Ͱ͖ μϯ ϩʔυͨ͠ͷΩϟογϡͱͯ͠อଘ
Իɾಈը৴ • ετϦʔϛϯά৴ ϑΝΠϧΛࡉׂ͔ͯ͘͠Ϣʔβ৴͢Δ ‣ ετϦʔϛϯάαʔό͕ඞཁ ϑΝΠϧΛ ׂͯ͠ૹ৴ ड͚औͬͨͱ͜Ζ͔Β ࠶ੜ͠,
࠶ੜࡁΈͷͷഁغ μϯϩʔυ৴ σʔλ͕Βͳ͍ͨΊ ࠶ੜ͢Δͨͼʹσʔλ Λμϯϩʔυ͢Δඞཁ͕͋Δ
࣍ 1. HTML 2. WebϖʔδͰ༻͞ΕΔը૾ܗࣜ 3. XML 4. CSS 5.
εΫϦϓτݴޠ 6. DOM 7. JSON 8. ϑΟʔυ 9. ϚΠΫϩϑΥʔϚοτ 10.Իɾಈը৴ 11.ϝσΟΞλΠϓ
ϝσΟΞλΠϓ • ϝσΟΞλΠϓ Ӿཡʹ༻͢ΔػثͷछྨΛࢦఆ͢Δํ๏ • ػثʹΑͬͯը໘ͷେ͖͞දࣔํ๏͕ҟͳΔ ‣ ϓϦϯλʔ ‣ 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
bath_poo_
nwiizo
kraj
ishiayaya
sasakendayo
ocise
sky_joker
hmatsu47
ytaka23
nkjzm
yutamakotaro
chaspy
fujiihda
swwweet
skipperchong
kastner
bkeepers
eitanlees
morganepeng
carmenhchung
rasmusluckow
revolveconf
roundedbygravity
jmmastey
sugarenia
