Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

もりてつ
November 24, 2018

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

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

もりてつ

November 24, 2018
Tweet

More Decks by もりてつ

Other Decks in Technology

Transcript

  1. ϒϥ΢βͷγΣΞͱ܏޲ͱରࡦվ
    ৿Ӭ఩ฏ ΋Γͯͭ

    '30/5&/%$0/'&3&/$&

    View full-size slide

  2. '30/5&/%$0/'&3&/$&
    ࠓճͷ಺༰

    w ͸͡Ίʹ
    w ϒϥ΢βγΣΞ 1$ฤ

    w *&ͷݱࡏͷγΣΞͱαϙʔτঢ়گ
    w 1$ͷϒϥ΢βରԠΛͲ͏͢΂͖͔
    w ϒϥ΢βγΣΞ εϚϗฤ

    w "OESPJEͱJ04ɺͦΕͧΕͷόʔδϣϯผγΣΞ
    w εϚϗͷϒϥ΢βରԠΛͲ͏͢΂͖͔
    w ·ͱΊ

    View full-size slide

  3. '30/5&/%$0/'&3&/$&
    ࣗݾ঺հ

    ˒ ΋Γͯͭ ৿Ӭ఩ฏ

    ˒ גࣜձࣾάϥουΩϡʔϒ

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

    ˠιϑτ΢ΣΞϝʔΧʔ

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

    View full-size slide

  4. '30/5&/%$0/'&3&/$&
    ͸͡Ίʹ

    ϒϥ΢β͸ԿΛ

    ࢖͍ͬͯ·͔͢ʁ

    View full-size slide

  5. '30/5&/%$0/'&3&/$&
    ϒϥ΢βͷγΣΞ

    ੲ͸*&ׂ͕Λ઎Ί͍ͯͨ࣌୅΋͋ͬͨ
    ʜʜࠓ͸Ͳ͏ͳͷ͔ʁ
    ʁ

    View full-size slide

  6. '30/5&/%$0/'&3&/$&
    ϒϥ΢βͷγΣΞ

    ༷ʑͳௐࠪػ͕ؔσʔλΛൃද͍ͯ͠Δ
    ࠓճ͸4UBU$PVOUFS

    ΞΠϧϥϯυ
    ͷ

    σʔλΛࢀর͠·͢
    IUUQHTTUBUDPVOUFSDPN

    View full-size slide

  7. '30/5&/%$0/'&3&/$&
    1$ͷϒϥ΢βγΣΞ

    શੈք ೥݄

    $ISPNF

    'JSFGPY

    *&

    4BGBSJ

    View full-size slide

  8. '30/5&/%$0/'&3&/$&
    1$ͷϒϥ΢βγΣΞ

    ೔ຊ ೥݄

    $ISPNF

    'JSFGPY

    *&

    4BGBSJ

    View full-size slide

  9. '30/5&/%$0/'&3&/$&
    εϚϗͷϒϥ΢βγΣΞ

    ೔ຊͰ͸*&͕ڧ͔ͬͨ
    ͔͠͠ɺ೥݄ʹ

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

    View full-size slide

  10. '30/5&/%$0/'&3&/$&
    *&ͷݱࡏͷࠃ಺γΣΞ

    ͔͠͠ͳ͕Βɺ͍·ͩʹγΣΞ͸
    ͔͕ͨɺ͞ΕͲ
    8FCαΠτ੍࡞8FCΞϓϦ։ൃͰ

    ࠷৽8FCٕज़ͷେ൒Λ

    αϙʔτ͍ͯ͠ͳ͍

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

    View full-size slide

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

    *&Λ੾Δ͜ͱʹΑͬͯ

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

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

    View full-size slide

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

    UFNQMBUFλά






    UPC_Code

    Product_Name
























    View full-size 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 full-size slide

  14. '30/5&/%$0/'&3&/$&
    *&Λ੾Ε͹࢖͑Δ+BWB4DSJQU

    &4Ҏ߱
    w MFUDPOTU
    w Ξϩʔؔ਺
    w DMBTTߏจ
    FUDʜ

    View full-size slide

  15. '30/5&/%$0/'&3&/$&
    *&ͷαϙʔτΛܧଓ͢΂͖͔

    جຊతʹ͸ࢭΊΔ΄͏͕͍͍
    w ࠓޙ৽ن։ൃ͢ΔҊ݅

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

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

    View full-size slide

  16. '30/5&/%$0/'&3&/$&
    εϚϗͷϒϥ΢βγΣΞ

    શੈք ೥݄

    $ISPNF

    6$#SPXTFS

    4BGBSJ

    View full-size slide

  17. '30/5&/%$0/'&3&/$&
    εϚϗͷϒϥ΢βγΣΞ

    ೔ຊ ೥݄

    4BGBSJ

    $ISPNF

    View full-size slide

  18. '30/5&/%$0/'&3&/$&
    εϚϗͷϒϥ΢βγΣΞ

    ܏޲
    w ࠃʹΑͬͯେ͖͘܏޲͕มΘΔ
    w ઌਐࠃ͸4BGBSJ͕ɺ৽ڵࠃ͸$ISPNF͕ڧ͍܏޲
    w ͨͩ͠ɺ೔ຊ΄Ͳ4BGBSJ͕ڧ͍ࠃ͸ଞʹ͸ͳ͍
    w ٯʹΠϯυͰ͸4BGBSJͷγΣΞ͸

    View full-size slide

  19. '30/5&/%$0/'&3&/$&
    εϚϗͷϒϥ΢βαϙʔτ

    ߟ͑ํ
    $ISPNFͱ4BGBSJ͚ͩͰߟ͑ΔͳΒ
    ϒϥ΢βผΑΓ΋
    04ͷόʔδϣϯผͰ
    ߟ͍͑ͯ͘΄͏͕ྑ͍

    View full-size slide

  20. '30/5&/%$0/'&3&/$&
    εϚϗͷ04όʔδϣϯผγΣΞ

    "OESPJE
    IUUQTEFWFMPQFSBOESPJEDPNBCPVUEBTICPBSET
    ·Ͱɿ
    ɿ
    Ҏ߱ɿ
    ೥݄೔·Ͱͷ೔ؒ

    View full-size slide

  21. '30/5&/%$0/'&3&/$&
    04όʔδϣϯผαϙʔτ

    "OESPJE
    w ·Ͱ9Ҏ߱ͷஈ֊Ͱϒϥ΢βͷ܏޲
    ͕มΘ͖͍ͬͯͯΔ
    w ·Ͱͷʮ"OESPJEඪ४ϒϥ΢βʯ͕Ͱഇ
    ࢭɺ$ISPNF͕σϑΥϧτʹ
    w Ͱ͸8FC7JFXίϯϙʔωϯτ͕04͔Β੾Γ
    ཭͞ΕΔ

    View full-size slide

  22. '30/5&/%$0/'&3&/$&
    04όʔδϣϯผαϙʔτ

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

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

    View full-size slide

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

    J04
    IUUQTEFWFMPQFSBQQMFDPNTVQQPSUBQQTUPSF
    ·Ͱɿ
    ɿ
    ɿ

    View full-size slide

  24. '30/5&/%$0/'&3&/$&
    04όʔδϣϯผαϙʔτ

    J04
    w 'MFYCPYɿ·Ͱ͸ϕϯμʔϓϨϑΟοΫεඞ
    ཁɺҎ߱͸໰୊ͳ͠
    w $44(SJE-BZPVUɿ·Ͱର৅֎ͳͷͰ஫ҙ
    w &4ɿҎ߱Ͱαϙʔτ

    View full-size slide

  25. '30/5&/%$0/'&3&/$&
    Ͳͷόʔδϣϯ·Ͱαϙʔτ͢΂͖͔

    ݁ہ1$ͱಉ͡
    w ࠓޙ৽ن։ൃ͢ΔҊ݅

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

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

    View full-size slide

  26. '30/5&/%$0/'&3&/$&
    ·ͱΊ

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

    ʜʜͱ͍͏͔ࢭΊ͍ͨ

    View full-size slide


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

    View full-size slide