Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࠓճͷςʔϚ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Document

d(^_^o)

͜Ε͸link HTMLͷߏ଄ headཁૉ htmlཁૉ ϦϯΫ ։࢝λά ऴྃλά ಺༰ ଐੑ(ଐੑ໊=ଐੑ஋) bodyཁૉ IUNMཁૉ IFBEཁૉ NFUBཁૉ UJUMFཁૉ CPEZཁૉ Iཁૉ Bཁૉ ֊૚ߏ଄ʢೖΕࢠʣɹ ʹͳ͍ͬͯΔ example.html

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

XHTML Gambardella, Matthew XML Developer's Guide Computer 44.95 2000-10-01 An in-depth look at creating applications with XML. λά͸ࣗ෼Ͱಠࣗʹఆٛ͢Δ͜ͱ͕Մೳ )5.-ͱಉ༷ʹ ։࢝λάͱऴྃλάͰ
 จষΛڬΉ XMLͷྫ

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Document

My Homepage

͸͡Ί·ͯ͠ɻ○○Ͱ͢ɻ

͜Ε͸ɺϦϯΫͰ͢ɻ
XHTML 9.-એݴ͔Β։࢝ ։࢝λά͚ͩ͸ڐ͞Εͳ͍ͷͰ ऴྃλά Λ෇͚Δ͔຤ඌʹΛ෇͚Δ XHTMLͷྫ ඞͣ։࢝λάͱऴྃλά͕ඞཁ

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

CSS • CSS͕ଘࡏ͠ͳ͍ੈք ͠·΋Μͷ෦԰

ݟग़͠͸20pxͰ੨৭

͔͜͜Βຊจ ͜͜͸10pxͰهड़
2ߦ໨͜͜͸10pxͰ੺ fontλά͸ྑ͘ͳ͍ htmlͷΈ(ߏ଄+ମࡋ)

Slide 29

Slide 29 text

CSS • CSSΛ࢖༻͢Δͱ… ͠·΋Μͷ෦԰

ݟग़͠͸20pxͰ੨৭

͔͜͜Βຊจ
͜͜͸10pxͰهड़

2ߦ໨
͜͜͸10pxͰ੺
h1 { color: blue; font-size: 20px; } .red10 { color: red; font-size: 10px; } 
 
 
 
 
 html(ߏ଄) css(ମࡋ) ΘΓͱγϯϓϧʹͳهड़ʹ"

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

DOM • DOM(Document Object Model)
 HTML΍XMLจॻΛѻ͏ͨΊͷAPI • DOMΛ࢖͏͜ͱͰ, ϓϩάϥϜ͔Βจॻߏ଄Λ؆୯ʹ ࢀরɾ੍ޚ͢Δ͜ͱ͕Մೳ ϓϩάϥϜ %0. ͠·΋Μͷ෦԰

ݟग़͠

͔͜͜Βຊจ head಺ͷtitleཁૉͷ ஋Λ͍ͩ͘͞ “͠·΋Μͷ෦԰”Ͱ͢ HTMLΛḷͬͯ ஋Λऔಘ ϓϩάϥϜͱ)5.- ͷڮ౉͠໾

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

• DOM͸, ର৅ͱͳΔจॻͷ֤ཁૉΛπϦʔߏ଄ʹͯ͠ ѻ͍ͬͯΔ(DOMπϦʔ) DOM ͠·΋Μͷ෦԰

ݟग़͠

͔͜͜Βຊจ )5.- IFBE CPEZ NFUB UJUMF MJOL I ͠·΋Μͷ෦԰ ݟग़͠ ͔͜͜Βຊจ %0.πϦʔ

Slide 42

Slide 42 text

DOM ͠·΋Μͷ෦԰

ݟग़͠

͔͜͜Βຊจ )5.- IFBE CPEZ NFUB UJUMF MJOL I ͠·΋Μͷ෦԰ ݟग़͠ ͔͜͜Βຊจ %0.πϦʔ ͭͭΛ ϊʔυͱ͍͏ ཁૉ͕ଟ͘ͳΔͱDOMπϦʔ͕ڊେʹͳΔͨΊ, จॻͷྔ͕ଟ͍৔߹͸ॲཧʹ͕͔͔࣌ؒΔ ໰୊఺

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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/

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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": "௕໺ݝ ௕໺ ͷఱؾ" } 26 http://weather.livedoor.com/ livedoor ఱؾ৘ใ http://weather.livedoor.com/img/cmn/livedoor.gif 118 http://weather.livedoor.com/ (C) LINE Corporation 2018-03-14T17:00:00+0900 ௕໺ݝ ௕໺ ͷఱؾ JSON XML

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

ϚΠΫϩϑΥʔϚοτ • ϚΠΫϩϑΥʔϚοτ
 HTML΍XHTMLͰهड़͞ΕͨWebϖʔδͷதʹ, ҙຯΛ ද͢هड़ΛຒΊࠐΉͨΊͷॻࣜ ళฮ໊ ୸ম͖Ϩετϥϯ͞Θ΍͔ ඿দࣰέ੉ళ ి࿩൪߸ 053-421-8911 63- IUUQXXXHFOLPUTVICDPN TIPQTIPQTTIPQIUNM
  • ୸ম͖Ϩετϥϯ͞Θ΍͔ ඿দࣰέ੉ళ
  • 053-421-8911
  • http://www.genkotsu-hb…
webϖʔδͷදݱʹӨڹͷ಺༰ʹ classଐੑͳͲΛ࢖ͬͯҙຯΛຒΊࠐΉ

Slide 58

Slide 58 text

ϚΠΫϩϑΥʔϚοτ • ࿈བྷઌΛද͢hCard
CommerceNet
Work:
169 University Avenue
Palo Alto, CA   94301
USA
Work +1-650-289-4040
Fax +1-650-289-4041
Email: [email protected]

Slide 59

Slide 59 text

ϚΠΫϩϑΥʔϚοτ • Πϕϯτ৘ใΛද͢hCalendar

XYZ Project Review

Project XYZ Review Meeting

To be held on the 12th of March from 8:30am EST until 9:30am EST

Location: 1CP Conference Room 4350

Booked by: guid-1.host1.com on the 9th at 6:00pm

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

ϝσΟΞλΠϓ • HTMLͰࢦఆ͢Δํ๏ • CSSͰࢦఆ͢Δํ๏ d(^_^o) ఺ࣈεΫϦʔϯͷ৔߹, braille.cssΛద༻͢Δ @media screen,tv { body {font-size: large;} } @media projection { body {font-size: small;} } @media braille { body {font-size: large;} } - @media ͷܗͰࢦఆ͢Δ - ର৅ͷϝσΟΞ͕ෳ਺ଘࡏ͢Δ৔߹, ΧϯϚ۠੾ΓͰࢦఆ

Slide 73

Slide 73 text

ࢀߟαΠτ౳

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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