ざっくりブラウザ

2015年に社内向けに実施した勉強会資料です

Transcript

1. ͬ͟ ͘ Γ ϒϥ΢β w w w w ϨϯμϦ ϯάΤϯδϯΛத৺ʹ
2. ϒϥ΢βͬ ͯ৭ʑ͋ Γ ·͢Ͷ
4. ೺Ѳ͖͠Ε·ͤΜ…
5. ϨϯμϦϯάΤϯδϯʹϑ ΥʔΧε Λ ౰ͯΔ͜ ͱͰͬ͟ ͘ Γ੔ཧ͢Δ͜ ͱ͕Ͱ͖·͢ w w w w
6. HTMLϨ ϯμϦ ϯάΤϯδϯ
7. HTMLϨ ϯμϦ ϯάΤϯ δϯ • HTMLϨϯμϦϯάΤϯδϯʢҎԼϨϯμϦϯάΤϯδϯʣͱ ͸ɺHTMLΛղऍͯ͠ը໘ʹදࣔ͢Δจࣈ΍ը૾ͳͲ ͷ഑ஔΛ ܭࢉ͢Δ ϓϩάϥ ϜͰ͢ɻ • HTMLͷଞʹCSS΍JavaScriptͳͲ΋ղऍͰ͖Δ΋ͷ͕ଟ͍Ͱ ͢ɻ
8. HTMLϨ ϯμϦ ϯάΤϯ δϯ ϒϥ΢β͸ɺ ϨϯμϦϯάΤϯδϯΛ֩ ͱ ͠ɺ ༷ʑͳػೳ͕ू·ͬ ͯߏ੒ ͞Ε ͍ͯ·͢ • ϨϯμϦ ϯάΤϯδϯ • UI • ϒ οΫϚʔΫ • ֦ுػೳʢΤΫ εςϯγϣ ϯͳͲʣ • etc...
9. ୅දతͳϨ ϯμϦ ϯάΤϯδϯ • Trident 
 InternetExplore • Edge 
 Spartan • Gecko 
 FireFox • Webkit
 Safari, Chrome • Blink 
 Chrome, Opera
10. ͜ͷΑ ͏ʹ ϨϯμϦ ϯάΤϯδϯʹతΛߜΕ͹ɺ ϒϥ ΢β͸େ͖ ͘5ͭʹେผ͞Ε·͢ ɻ ϨϯμϦ ϯάΤϯδϯ͕ಉ͡Ͱ͋Ε͹ϒϥ΢β ͷڍಈ΋େํࣅ௨ͬ ͍ͯ·͢
11. ϨϯμϦ ϯάΤϯδϯ /ϒϥ΢β঺հ(PC)
12. Trident, Edge • MicroSoft੡ͷϒϥ΢βʹ౥ࡌ͞Ε͍ͯΔϨϯμϦϯάΤϯδ ϯͰ͢ • ௕Β͘։ൃ͕ଓ͍͖ͯͨTridentΤϯδϯ͔Βɺ৽ϒϥ΢β SpartanͰ͸Edgeͱ͍͏৽͍͠ΤϯδϯʹҠߦ͢Δ͜ͱ͕ൃ ද͞Ε͍ͯ·͢ɻ
13. Trident/IE(Under 8) • IE6Λத৺ʹݹ͍όʔδϣϯͷ IE͸WEB੍࡞ऀͷ೰Έͷλω ͱͳ͖ͬͯ·ͨ͠
14. ͳͥʁ • େྔͷΦϨΦϨ࢓༷ 
 IEͰ͔͠௨༻͠ͳ͍HTML/CSSͷ࢓༷ • MicroSoftͷғ͍͜Έઓུ
 ͨͱ͑͹IE8·Ͱ͸JScriptͱ͍͏ΦϨΦϨ࢓༷ͷ JavaScript΋Ͳ͖͕౥ࡌ͞Ε͍ͯ·ͨ͠ • ์ஔ͞ΕΔόά
 Ξοϓσʔτظ͕ؒ௕͍ͨΊ͍ͭ·Ͱͨͬͯ΋मਖ਼͞Εͳ ͍
15. w *&͸೥݄ ೔ʹαϙʔ τऴྃ ͠·͢ ɻ
 ͦͷޙ͸֤8JOEPXT04ͷόʔδ ϣ ϯ͝ ͱ ʹ࢖༻Ͱ͖ Δ࠷৽ͷ*&ͷΈαϙʔ τ ͞ΕΔ༧ఆͰ͢
16. Trident/IE 9 ʙ • IE8͔ΒWEBඪ४ʹ४ڌͯ͠։ ൃ͕ਐΊΒΕΔΑ͏ʹͳΓ· ͨ͠ɻͦͯ͠ɺIE9ͰHTML5ͷ ࢓༷ͷଟ͕࣮͘૷͞Ε·ͨ͠ • ͨͩ͠ɺIEݻ༗ͷόά͸·ͩ ·ͩݟड͚ΒΕ·͢ɻ
 ͦ͠૬มΘΒͣΞοϓσʔτ ͕ͳ͔ͳ͔͞Ε·ͤΜ
17. Edge/Spartan • Internet ExploreʹมΘΔ৽ϒ ϥ΢βͰ͢ɻϨϯμϦϯάΤϯ δϯ΋Edgeʹ࡮৽͞Ε·͢ • ϒϥϯυνΣϯδͷҙຯ߹͍ ͕ڧ͍ͱࢥΘΕ·͢ • IEޓ׵ͰɺEdgeͱTridentΛαΠ τ ʹΑͬ ͯγʔϜ Ϩεʹ੾Γସ͑Δ ػೳ͕͋Δͦ͏Ͱ͢
18. Note: modern.IE • MicroSoft͕഑෍͍ͯ͠ΔԾ૝ ؀ڥͰ࢖͑ΔWEBݕূ༻ͷ Windows+IE͕͋Γ·͢ • IE6͔Β࠷৽൛·Ͱ͢΂ͯͷIE Λѻ͏͜ͱ͕Ͱ͖·͢ • ͨͩ͠ӳޠ൛Ͱ೔ຊޠͷWEB Λදࣔ͢Δʹ͸ઃఆ͕ඞཁͰ ͢
19. Note:Ϧ ϦʔεαΠ Ϋ ϧ ϒϥ΢βͷϦϦʔεαΠΫϧ͸େ͖͘෼͚ͯ2छྨ͋Γ·͢ • ैདྷܕͷϦϦʔε • ߴ଎ϦϦʔε
20. ैདྷܕͷ Ϧ Ϧʔε InternetExplore΍SafariͳͲ
 ൒೥ʙ਺೥ʹҰ౓ϦϦʔε • ϝϦοτ
 ֤όʔδϣϯαϙʔτظ͕ؒ௕͍ • σϝϦοτ
 ৽ػೳͷಋೖ͕஗ΕΔɺόάमਖ਼͕஗͍
21. ߴ଎Ϧ Ϧʔε ChromeͱFirefoxͳͲ
 جຊ̒िؒʹҰ౓ϦϦʔε͞ΕΔɺࣗಈͰߋ৽ • ϝϦοτ
 ϒϥ΢β৽ػೳͷԸܙΛ͍ͪૣ͘ड͚ΕΔ • σϝϦοτ
 ؾ͔ͮͳ͍͏ͪʹϒϥ΢βͷಈ࡞͕มΘΔͨΊɺࢥΘ͵ό ά͕ੜ·ΕΔ͜ͱ