ブラウザのシェアと傾向と対策 2018改

2018/11/24「FRONTEND CONFERENCE 2018」アンカンファレンスでのセッション「ブラウザのシェアと傾向と対策 2018改」のスライドです。

Transcript

1. ϒϥ΢βͷγΣΞͱ܏޲ͱରࡦվ
   ৿Ӭ఩ฏ ΋Γͯͭ
   
   '30/5&/%$0/'&3&/$&
   

   View Slide

2. '30/5&/%$0/'&3&/$&
   ࠓճͷ಺༰
   
   w ͸͡Ίʹ
   w ϒϥ΢βγΣΞ 1$ฤ
   
   w *&ͷݱࡏͷγΣΞͱαϙʔτঢ়گ
   w 1$ͷϒϥ΢βରԠΛͲ͏͢΂͖͔
   w ϒϥ΢βγΣΞ εϚϗฤ
   
   w "OESPJEͱJ04ɺͦΕͧΕͷόʔδϣϯผγΣΞ
   w εϚϗͷϒϥ΢βରԠΛͲ͏͢΂͖͔
   w ·ͱΊ
   

   View Slide

3. '30/5&/%$0/'&3&/$&
   ࣗݾ঺հ
   
   ˒ ΋Γͯͭ ৿Ӭ఩ฏ
   
   ˒ גࣜձࣾάϥουΩϡʔϒ

   ϓϩμΫτ։ൃνʔϜΤϯδχΞ
   ˒ ๭ిػϝʔΧʔ

   ˠιϑτ΢ΣΞϝʔΧʔ

   ˠ೥݄͔Βݱ৬
   ˒ ೥ྸɿ໌ޙ೔Ͱࡀ
   ˒ झຯɿίϯτϥόεɺύζϧɺήʔϜ
   ˒ ޷͖ͳ΋ͷɿϥʔϝϯɺᰤࢠɺ'MFYCPY
   ˒ 5XJUUFSɿ!N@O@U@Q
   

   View Slide

4. '30/5&/%$0/'&3&/$&
   ͸͡Ίʹ
   
   ϒϥ΢β͸ԿΛ

   ࢖͍ͬͯ·͔͢ʁ
   

   View Slide

5. '30/5&/%$0/'&3&/$&
   ϒϥ΢βͷγΣΞ
   
   ੲ͸*&ׂ͕Λ઎Ί͍ͯͨ࣌୅΋͋ͬͨ
   ʜʜࠓ͸Ͳ͏ͳͷ͔ʁ
   ʁ
   

   View Slide

6. '30/5&/%$0/'&3&/$&
   ϒϥ΢βͷγΣΞ
   
   ༷ʑͳௐࠪػ͕ؔσʔλΛൃද͍ͯ͠Δ
   ࠓճ͸4UBU$PVOUFS

   ΞΠϧϥϯυ
   ͷ

   σʔλΛࢀর͠·͢
   IUUQHTTUBUDPVOUFSDPN
   

   View Slide

7. '30/5&/%$0/'&3&/$&
   1$ͷϒϥ΢βγΣΞ
   
   શੈք ೥݄
   
   $ISPNF
   
   'JSFGPY
   
   *&
   
   4BGBSJ
   
   

   View Slide

8. '30/5&/%$0/'&3&/$&
   1$ͷϒϥ΢βγΣΞ
   
   ೔ຊ ೥݄
   
   $ISPNF
   
   'JSFGPY
   
   *&
   
   4BGBSJ
   
   

   View Slide

9. '30/5&/%$0/'&3&/$&
   εϚϗͷϒϥ΢βγΣΞ
   
   ೔ຊͰ͸*&͕ڧ͔ͬͨ
   ͔͠͠ɺ೥݄ʹ

   $ISPNF͕ٯస
   ࠩ͸ͲΜͲΜ։͍͍ͯΔ
   

   View Slide

10. '30/5&/%$0/'&3&/$&
    *&ͷݱࡏͷࠃ಺γΣΞ
    
    ͔͠͠ͳ͕Βɺ͍·ͩʹγΣΞ͸
    ͔͕ͨɺ͞ΕͲ
    8FCαΠτ੍࡞8FCΞϓϦ։ൃͰ

    ࠷৽8FCٕज़ͷେ൒Λ

    αϙʔτ͍ͯ͠ͳ͍

    *&ͷαϙʔτΛܧଓ͢΂͖͔ʁ
    ˞*&͕ɺ*&Ҏલ͕
    

    View Slide

11. '30/5&/%$0/'&3&/$&
    *&ͷαϙʔτΛ੾Δͱʜ
    
    *&Λ੾Δ͜ͱʹΑͬͯ

    ؆୯ʹ࢖͑ΔΑ͏ʹͳΔٕज़͕

    ֨ஈʹ૿͑·͢
    ޻਺࡟ݮʹܨ͕Δ৔߹΋ʂ
    

    View Slide

12. '30/5&/%$0/'&3&/$&
    *&Λ੾Ε͹࢖͑Δ)5.-
    
    UFNQMBUFλά
    
    
    
    
    
    
    UPC_Code
    
    Product_Name
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

13. '30/5&/%$0/'&3&/$&
    *&Λ੾Ε͹࢖͑Δ$44
    
    $44(SJE-BZPVU ৽࢓༷
    
    main{
    
    display: grid;
    
    grid-template-columns: 100px 100px 100px;
    
    grid-template-rows: 100px 100px;
    
    gap: 6px;
    
    }
    w *&ͩͱϕϯμʔϓϨϑΟοΫεΛ͚ͭͯ͞Βʹ
    چ࢓༷΁ͷಡΈସ͕͑ඞཁ

    ˞"VUPQSJpYFSΛ௨ͤ͹ҰԠม׵͸Մೳ͕ͩ

    ɹͻͱख͔͔ؒΔˍίʔυ͕૿͑Δ
    

    View Slide

14. '30/5&/%$0/'&3&/$&
    *&Λ੾Ε͹࢖͑Δ+BWB4DSJQU
    
    &4Ҏ߱
    w MFUDPOTU
    w Ξϩʔؔ਺
    w DMBTTߏจ
    FUDʜ
    

    View Slide

15. '30/5&/%$0/'&3&/$&
    *&ͷαϙʔτΛܧଓ͢΂͖͔
    
    جຊతʹ͸ࢭΊΔ΄͏͕͍͍
    w ࠓޙ৽ن։ൃ͢ΔҊ݅

    ˠαϙʔτର৅֎ʹ͢Δ
    w ैདྷ͔Βଓ͍͍ͯΔҊ݅

    ˠόʔδϣϯΞοϓ࣌ʹର৅͔Β֎͍ͯ͘͠
    ্૚෦΍ΫϥΠΞϯτ౳ͷ౎߹Ͱ֎ͤͳͦ͞͏ͳ৔߹ʜ
    ஍ಓʹࠜճ͍ͯͩ͘͠͠͞
    ˞ࢲ΋ઈࢍࠜճ͠தͰ͢ ྦ
    
    

    View Slide

16. '30/5&/%$0/'&3&/$&
    εϚϗͷϒϥ΢βγΣΞ
    
    શੈք ೥݄
    
    $ISPNF
    
    6$#SPXTFS
    
    4BGBSJ
    
    

    View Slide

17. '30/5&/%$0/'&3&/$&
    εϚϗͷϒϥ΢βγΣΞ
    
    ೔ຊ ೥݄
    
    4BGBSJ
    
    $ISPNF
    
    

    View Slide

18. '30/5&/%$0/'&3&/$&
    εϚϗͷϒϥ΢βγΣΞ
    
    ܏޲
    w ࠃʹΑͬͯେ͖͘܏޲͕มΘΔ
    w ઌਐࠃ͸4BGBSJ͕ɺ৽ڵࠃ͸$ISPNF͕ڧ͍܏޲
    w ͨͩ͠ɺ೔ຊ΄Ͳ4BGBSJ͕ڧ͍ࠃ͸ଞʹ͸ͳ͍
    w ٯʹΠϯυͰ͸4BGBSJͷγΣΞ͸
    

    View Slide

19. '30/5&/%$0/'&3&/$&
    εϚϗͷϒϥ΢βαϙʔτ
    
    ߟ͑ํ
    $ISPNFͱ4BGBSJ͚ͩͰߟ͑ΔͳΒ
    ϒϥ΢βผΑΓ΋
    04ͷόʔδϣϯผͰ
    ߟ͍͑ͯ͘΄͏͕ྑ͍
    

    View Slide

20. '30/5&/%$0/'&3&/$&
    εϚϗͷ04όʔδϣϯผγΣΞ
    
    "OESPJE
    IUUQTEFWFMPQFSBOESPJEDPNBCPVUEBTICPBSET
    ·Ͱɿ
    ɿ
    Ҏ߱ɿ
    ೥݄೔·Ͱͷ೔ؒ
    
    

    View Slide

21. '30/5&/%$0/'&3&/$&
    04όʔδϣϯผαϙʔτ
    
    "OESPJE
    w ·Ͱ9Ҏ߱ͷஈ֊Ͱϒϥ΢βͷ܏޲
    ͕มΘ͖͍ͬͯͯΔ
    w ·Ͱͷʮ"OESPJEඪ४ϒϥ΢βʯ͕Ͱഇ
    ࢭɺ$ISPNF͕σϑΥϧτʹ
    w Ͱ͸8FC7JFXίϯϙʔωϯτ͕04͔Β੾Γ
    ཭͞ΕΔ
    

    View Slide

22. '30/5&/%$0/'&3&/$&
    04όʔδϣϯผαϙʔτ
    
    "OESPJE
    w ·Ͱͷඪ४ϒϥ΢βͩͱ
    'MFYCPY͸ϕϯμʔϓϨϑΟοΫε͕ඞཁ
    $44(SJE-BZPVU͕αϙʔτ͞Ε͍ͯͳ͍
    &4͕μϝ
    w Ҏ߱Ͱ͋Ε͹$ISPNFΛ࠷৽൛ʹ͓͚ͯ͠͹໰୊ͳ
    ͍͸ͣ
    w ͨͩ͠ɺ͸8FC7JFX͕04͔Β੾Γ཭͞Ε͍ͯͳ͍
    ͨΊͦͪΒΛ࢖͏৔߹͸ཁ஫ҙ

    ·Ͱͷαϙʔτൣғಉ༷ͱߟ͑ͯྑ͍
    
    

    View Slide

23. '30/5&/%$0/'&3&/$&
    εϚϗͷ04όʔδϣϯผγΣΞ
    
    J04
    IUUQTEFWFMPQFSBQQMFDPNTVQQPSUBQQTUPSF
    ·Ͱɿ
    ɿ
    ɿ
    

    View Slide

24. '30/5&/%$0/'&3&/$&
    04όʔδϣϯผαϙʔτ
    
    J04
    w 'MFYCPYɿ·Ͱ͸ϕϯμʔϓϨϑΟοΫεඞ
    ཁɺҎ߱͸໰୊ͳ͠
    w $44(SJE-BZPVUɿ·Ͱର৅֎ͳͷͰ஫ҙ
    w &4ɿҎ߱Ͱαϙʔτ
    

    View Slide

25. '30/5&/%$0/'&3&/$&
    Ͳͷόʔδϣϯ·Ͱαϙʔτ͢΂͖͔
    
    ݁ہ1$ͱಉ͡
    w ࠓޙ৽ن։ൃ͢ΔҊ݅

    ˠݹ͍όʔδϣϯ͸αϙʔτର৅֎ʹ͢Δ
    w ैདྷ͔Βଓ͍͍ͯΔҊ݅

    ˠόʔδϣϯΞοϓ࣌ʹݹ͍΋ͷΛ֎͍ͯ͘͠
    ্૚෦΍ΫϥΠΞϯτ౳ͷ౎߹Ͱ֎ͤͳͦ͞͏ͳ৔߹ʜ
    ஍ಓʹࠜճ͍ͯͩ͘͠͠͞
    

    View Slide

26. '30/5&/%$0/'&3&/$&
    ·ͱΊ
    
    w ϒϥ΢βͷγΣΞɺόʔδϣϯผγΣΞ͸೔ʑมԽ
    ͍ͯ͠Δ
    w ϒϥ΢βɺόʔδϣϯʹΑͬͯͲͷΑ͏ͳٕज़Λα
    ϙʔτ͍ͯ͠Δ͔ΛϦαʔν͓ͯ͘͠ඞཁ͋Γ
    w Ͳͷϒϥ΢βɺόʔδϣϯΛαϙʔτ͢Δ͔ͷ൑அ
    ΋త֬ʹ΍͍ͬͯ͘ඞཁ͕͋Δ
    w Ϣʔβʔ໨ઢͰߟ͑·͠ΐ͏
    w *&ͷαϙʔτ͸ͦΖͦΖࢭΊ·͠ΐ͏

    ʜʜͱ͍͏͔ࢭΊ͍ͨ
    

    View Slide

27. ऴ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ
    

    View Slide