知っておきたいブラウザについての基礎入門

知っておきたいブラウザについての基礎入門 at サポーターズ京都勉強会 https://supporterz.connpass.com/event/51220/

Transcript

1. ஌͓͖͍ͬͯͨϒϥ΢β
   ʹ͍ͭͯͷجૅೖ໳
   Pasta-K
   pasta0915@gmail.com
   at Supporterz Kyoto
   

   View Slide

2. @pastakɹ
   

   View Slide

3. @pastakɹ
   • ژ౎େֶͰֶੜΛ΍͍ͬͯ·͢
   • Nota Inc Gyazo։ൃνʔϜ ΞϧόΠτ
   • JavaScript / React
   • Ruby on Rails
   • Browser Extension
   

   View Slide

4. View Slide

5. ຊ೔ͷ͓඼ॻ͖
   • ΢Σϒϒϥ΢βʹ͍ͭͯ
   • ྺ࢙
   • ϒϥ΢βͷ࢓૊Έ঺հɾιϑτ΢ΣΞߏ੒
   • Developer ToolΛ༻͍ͯཧղΛਂΊΔ
   • ΞχϝʔγϣϯΛྫʹ
   • ͓·͚
   

   View Slide

6. ࠓ೔࿩͞ͳ͍͜ͱ
   • RenderingΤϯδϯ΍JavaScriptΤϯδϯͷৄ
   ࡉͳৼΔ෣͍ʹ͍ͭͯ
   • ͦͷଞ؆୯ͷͨΊʹઆ໌Λলུͨ͠Γ͍ͯ͠
   ·͢
   

   View Slide

7. ΢Σϒϒϥ΢β
   ʹ͍ͭͯ
   

   View Slide

8. ΢Σϒϒϥ΢βͱ͸ʁ
   ΢Σϒϒϥ΢βʢΠϯλʔωοτϒϥ΢βɺweb
   browserʣͱ͸ɺ World Wide Web (WWW) ͷར༻
   ʹڙ͢Δϒϥ΢βͰ͋ΓɺϢʔβΤʔδΣϯτ
   (UA) Ͱ͋Δɻ۩ମతʹ͸ɺ΢ΣϒϖʔδΛը໘΍
   ҹ࡮ػʹग़ྗͨ͠ΓɺϋΠύʔϦϯΫΛͨͲͬͨΓ
   ͢ΔͳͲͷػೳ͕͋Δɻ୯ʹϒϥ΢βʢϒϥ΢βʔʣ
   ͱݺΜͩ৔߹ɺଟ͘͸΢Σϒϒϥ΢βͷ͜ͱΛࢦ͢ɻ
   https://ja.wikipedia.org/wiki/
   %E3%82%A6%E3%82%A7%E3%83%96%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6
   

   View Slide

9. Question
   • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
   

   View Slide

10. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    

    View Slide

11. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    

    View Slide

12. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    

    View Slide

13. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    

    View Slide

14. View Slide

15. Chrome Opera Vivaldi
    Safari
    Firefox
    Internet Explorer
    Edge
    

    View Slide

16. Chrome Opera Vivaldi
    Safari
    Firefox
    Internet Explorer
    Edge
    

    View Slide

17. Chrome Opera Vivaldi
    Safari
    Firefox
    Internet Explorer
    Edge
    Chromium
    

    View Slide

18. Chrome Opera Vivaldi
    Safari
    Firefox
    Internet Explorer
    Edge
    Chromium
    

    View Slide

19. Chrome Opera Vivaldi
    Safari
    Firefox
    Internet Explorer
    Edge
    Chromium
    Webkit
    

    View Slide

20. Chrome Opera Vivaldi
    Safari
    Firefox
    Internet Explorer
    Edge
    

    View Slide

21. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    $ISPNF 'JSFGPY *&
    0QFSB &EHFʜ
    

    View Slide

22. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    

    View Slide

23. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    

    View Slide

24. ΢Σϒϒϥ΢β
    ͷجຊߏ੒
    

    View Slide

25. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    

    View Slide

26. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ΞυϨεόʔɾπʔϧόʔ
    ֤छϘλϯ ਐΉ໭Δ
    
    ϒοΫϚʔΫɹͳͲ
    

    View Slide

27. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    6*ͱ֤छΤϯδϯͱͷ
    ϝοηʔδͷ΍ΓऔΓΛ஥հ
    

    View Slide

28. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    )5.-9.-Λύʔε͠ɺ
    ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ
    

    View Slide

29. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    )551΍'51ͳͲΛ஻Δ
    

    View Slide

30. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    +BWB4DSJQUͷ࣮ߦ݁ՌΛ
    3FOEFSJOH&OHJOFʹ౉͢
    

    View Slide

31. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    σΟεϓϨΠʹ
    දࣔ͢Δ
    

    View Slide

32. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ࠓ೔͸͔͜͜Β
    ͜ͷͭʹ஫໨ͯ͠
    ۷ΓԼ͛ͯΈ·͢
    

    View Slide

33. ϨϯμϦϯάΤϯδϯͷ໾ׂ
    • ϨϯμϦϯάΤϯδϯ͸HTML / XML Λύʔε
    • CSSΛύʔε͠ελΠϧϧʔϧΛ೺Ѳ
    • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛ഑ஔ
    • ඳըͷੜ੒
    ※ҎԼͰ͸HTMLͱͷΈදه͠·͢
    

    View Slide

34. ϨϯμϦϯάΤϯδϯͷ໾ׂ
    • ϨϯμϦϯάΤϯδϯ͸HTML / XML Λύʔε
    • CSSΛύʔε͠ελΠϧϧʔϧΛ೺Ѳ
    • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛ഑ஔ
    • ඳըͷੜ੒
    -BZPVU
    1BSTF
    1BJOU
    

    View Slide

35. JavaScriptΠϯλʔϓϦλͷ໾ׂ
    • JavaScriptͷղੳɾ࣮ߦ
    

    View Slide

36. JavaScriptΠϯλʔϓϦλͷ໾ׂ
    • JavaScriptͷղੳɾ࣮ߦ
    &WBMVBUF
    

    View Slide

37. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    

    View Slide

38. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    )5.-$44+4ͳͲΛ
    ཧղɺ࣮ߦɺදࣔΛߦ͏ɻ
    ·ͨͦΕΒͷͨΊʹඞཁͳ
    ௨৴ͳͲͷػೳ΋͋Δɻ
    

    View Slide

39. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    

    View Slide

40. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    

    View Slide

41. 
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .P[JMMB$PSQPSBUJPO ઃཱ
    .P[JMMB$IJOB ઃཱ
    .P[JMMB.BOJGFTUP'JSTU%SBGU
    /FUTDBQF ઐ೚ελοϑ
    ͱίϛϡχςΟͱͷڞಉ
    ϓϩδΣΫτͱͯ͠
    /FUTDBQF$PNNVOJDBUJPOT
    ͷग़ࢿʹΑΓઃཱ
    /$ ༝དྷͷίʔυͷഁ
    غͱ৽ϨϯμϦϯάΤ
    ϯδϯʮ(FDLPʯϕʔ
    εͰͷࠜຊతͳઃܭͷ
    ͠௚͠Λܾఆ
    ϚʔΫ
    ɾΞϯυϦʔηϯ
    Βɺ
    .PTBJDΛ։ൃ
    ς
    ΟϜɾόʔφʔζɾ
    Ϧʔ
    8PSME8JEF8FCͷݪܕ
    ͱͳΔఏҊ
    )5.- )551 63-Λઃܭ
    ੈքॳͷ8FCαΠ
    τ
    8PSME8JEF8FCͷιʔε
    ίʔυΛύϒϦ
    ο
    Ϋ
    υϝΠϯ
    ͱ
    ͯ͠ެ։
    .PTBJDͷ
    ϥΠηϯεΛऔಘ
    ɹ
    ϚʔΫɾΞϯυϦʔηϯͱ
    δϜɾΫϥʔΫʹΑ
    Γઃཱ
    ඇӦར૊৫ͱͯ͠ಠཱ
    .P[JMMB&VSPQF ઃཱ
    .P[JMMB+BQBO ઃཱ
    NETSCAPE
    COMMUNICATIONS
    /$Y Λແঈ഑෍
    ։ൃதͷ /$ Λ
    ΦʔϓϯιʔεԽ
    ೔ຊ๏ਓઃཱ
    /$4" ͔Βͷૌ͑ʹΑΓ
    ໊ࣾมߋ
    ɾ
    'JSFGPY04
    ɾ
    )5.-קࠂ
    ɾ
    8FC$-
    ɾ
    )551
    ɾ&$."4DSJQU
    ɾ'JSFGPY0457
    ɾ$444OBQTIPU
    ɾ
    'JSFGPYԆ௕
    αϙʔτ൛
    ɾ
    )5.- ࠷ऴ૲Ҋ
    ެ։
    ɾ
    8FC(-
    ɾ
    8$ ઃཱ
    ɾ
    /FUTDBQF/BWJHBUPS
    ͕ࢢ৔Λ੮ר͢Δ
    ɾ
    :BIPP αʔϏε
    ։࢝
    ɾ
    8FC.ެ։
    ɾ$444OBQTIPU
    ɾ
    +BWB ొ৔
    ɾ
    Πϯλʔωοτ
    ར༻ऀͷٸ૿
    ɾ
    ϒϥ΢βઓ૪ܹԽ
    ɾ
    $44 קࠂ
    ɾ
    )551
    ɾ
    .PTBJD ͕ࢢ৔Λ
    ੮ר͢Δ
    ೥Ͱ ສ
    μ΢ϯϩʔυ
    ɾ
    )551
    ɾ
    Πϯλʔωο
    τ઀ଓ
    ϗετ͕ ສΛ
    ௒͑Δ
    ɾ
    Πϯλʔωο
    τ઀ଓ
    ϗετ͕ ສΛ
    ௒͑Δ
    ɾ೔ຊ࠷ॳͷ 8FC
    αΠτ͕ެ։
    ɾ
    ϒϥ΢βઓ૪
    ࣄ্࣮ͷऴᖼ
    ɾ
    *& γΣΞٸ૿
    ɾ
    $44 קࠂ
    ɾ
    9.- קࠂ
    ɾ
    %0. קࠂ
    ɾ&$."4DSJQUOE
    ɾ&$."4DSJQUSE
    ɾ
    )5.- קࠂ
    ɾ
    )551
    ɾ&$."4DSJQUTU
    ɾ
    "KBY
    ɾ
    8FC
    ɾ
    8$)5.-8(
    ઃཱ
    ɾ
    $444OBQTIPU
    ɾ
    )5.- ૲Ҋެ։
    ɾ
    8$9)5.-8(
    ׆ಈऴྃ
    ɾ&$."4DSJQUUI
    ɾ
    ถϦϋϏϦςʔ
    γϣϯ๏ ৚
    ࢪߦ։࢝
    ɾ
    ϒϩʔυόϯυ
    ීٴ͕೔ຊͰ࢝
    ·Δ
    ɾ
    "0- ͱ .JDSPTPGUɺ
    ಠې๏ૌুͰ࿨ղ
    ϒϥ΢βઓ૪ʹ
    ऴࢭූ
    ɾ
    ϒϩάϒʔϜ
    ೔ຊͰ࢝·Δ
    ɾ
    
    ʮઓޙੈ୅ʯ
    ϒϥ΢βͷ୆಄
    ɾ
    8)"58( ઃཱ
    ɾ
    +*49 ੍ఆ
    ɾ
    (3&&ɺNJYJ ͳͲ
    4/4 ͕ϒʔϜʹ
    ɾ
    "0-/FUTDBQFɺ
    .JDSPTPGU Λ
    ಠې๏ҧ൓Ͱఏૌ
    /$4"
    $&3/
    .PTBJD
    $PNNVOJDBUJPOT
    .JDSPTPGU
    "QQMF
    4QZHMBTT
    0QFSB
    4PGUXBSF
    ,%&
    1SPKFDU
    (PPHMF
    BTNKT
    BTNKT
    .P[JMMB$MBTTJD
    (FDLP
    8FC ඪ ४ ٕ ज़ Λ
    ߴ ౓ ʹ α ϙ ʔ τ
    5SJEFOU
    &EHF
    #MJOL
    1SFTUP
    8FC,JU
    /FUTDBQF/BWJHBUPS
    ʢίʔυωʔϜʮ.P[JMMBʯ
    ʣ
    /FUTDBQF/BWJHBUPS
    /FUTDBQF/BWJHBUPS
    4UBOEBSE&EJUJPO
    /FUTDBQF/BWJHBUPS
    (PME&EJUJPO
    /FUTDBQF$PNNVOJDBUPS
    /FUTDBQF$PNNVOJDBUPS
    .P[JMMB"QQMJDBUJPO4VJUF
    .P[JMMB"QQMJDBUJPO4VJUF
    <.JMFTUPOF ʙ >
    ʢίʔυωʔϜʮ4FBNPOLFZʯ
    ʣ
    /FUTDBQF
    .P[JMMB"QQMJDBUJPO4VJUF
    'JSFGPY%FWFMPQFS&EJUJPO
    J04൛'JSFGPY
    4FB.POLFZ
    
    
    
    /FUTDBQF
    .P[JMMB'JSFCJSE
    Firefox
    
    
    
    
    
    
    
    .P[JMMB"QQMJDBUJPO4VJUF
    .P[JMMB1IPFOJY
    
    
    
    
    ϦϦʔε
    ୈੈ୅+BWB4DSJQUΤϯδϯ
    ϋʔυ΢ΣΞΞΫηϥϨʔγϣϯ
    ɹɹɹɹ8FC(-
    'JSFGPY4ZOD
    ɹɹɹɹ"OESPJE൛ϦϦʔε
    ୈੈ୅+BWB4DSJQUΤϯδϯ
    ϋʔυ΢ΣΞΞΫηϥϨʔγϣϯ
    ɹɹɹɹ8FC(-
    'JSFGPY4ZOD
    ɹɹɹɹ"OESPJE൛ϦϦʔε
    "OESPJE൛/BUJWF6*
    ϦϦʔε
    "OESPJE൛/BUJWF6*
    ϦϦʔε
    Ҏޙ 'JSFGPYͷվળ఺Λ
    औΓೖΕͯߋ৽͕ଓ͘
    &QJD(BNFT ͱ
    6OSFBM&OHJOF ΛҠ২
    'JSFGPYͱ
    ฒߦͯ͠։ൃ
    Ҏޙ 'JSFGPYͷվળ఺Λ
    औΓೖΕͯߋ৽͕ଓ͘
    &QJD(BNFT ͱ
    6OSFBM&OHJOF ΛҠ২
    6OJUZ͕8FC(-
    ग़ྗʹਖ਼ࣜରԠ
    8FC(-
    'JSFGPYͱ
    ฒߦͯ͠։ൃ
    8FC(-
    *&͕࠷ޙͷ
    ϝδϟʔόʔδϣϯʹ
    *&͕࠷ޙͷ
    ϝδϟʔόʔδϣϯʹ
    #MJOLΤϯδϯ
    #MJOLΤϯδϯ
    (PPHMF(MBTT
    (PPHMF(MBTT
    "MQIBCFU ઃཱ
    "MQIBCFU ઃཱ
    1SFTUP Τϯδϯͷ
    0QFSB ࠷ऴόʔδϣϯ
    ΤϯδϯΛ8FC,JU
    ʹมߋ
    ΤϯδϯΛ8FC,JU
    ʹมߋ
    1SFTUP Τϯδϯͷ
    0QFSB ࠷ऴόʔδϣϯ
    ΤϯδϯΛ#MJOL
    ʹมߋ
    ΤϯδϯΛ#MJOL
    ʹมߋ
    6OJUZ͕8FC(-
    ग़ྗʹਖ਼ࣜରԠ
    .PTBJD ͷݖརΛ
    ८Γରཱɺ཭൓
    ϥΠηϯεڙ༩
    ϥΠηϯεڙ༩
    γϛϡϨʔλ IUUQMJOFNPEFDFSODIXXXIZQFSUFYU8885FSNTIUNM
    εΫϦϓτ΍ελΠϧγʔτʹ
    ରԠͨ͠ߴػೳϒϥ΢β ੈքॳͷ.BD༻ϒϥ΢β
    ΛϦϦʔε
    ੈքॳͷ
    8JOEPXT༻ϒϥ΢β
    ,)5.-8 ͷ
    ։ൃΛ։࢝
    .BD049W
    $IFFUBI ϦϦʔε
    .BD049W
    1BOUIFS ϦϦʔε
    Ξυϫʔζ
    αʔϏε։࢝
    (PPHMF%FTLUPQ
    ϦϦʔε
    (PPHMF.BQT
    αʔϏε։࢝
    (NBJM
    αʔϏε։࢝
    (PPHMF1BDL
    ϦϦʔε
    (PPHMF%PDT
    4QSFBETIFFUT
    αʔϏε։࢝
    "OESPJE
    ϦϦʔε
    7
    (PPHMF
    αʔϏε։࢝
    .PTBJD ͷ
    ϥΠηϯεΛऔಘ
    8JOEPXT7JTUB
    ϦϦʔε
    8JOEPXT9141
    ϦϦʔε
    8JOEPXT.F
    ϦϦʔε
    8JOEPXT91
    ϦϦʔε
    8JOEPXT
    ϦϦʔε
    8JOEPXT
    ϦϦʔε
    *& ͱ 8JOEPXT Λ౷߹
    8JOEPXT
    ϦϦʔε
    ݕࡧΤϯδϯ
    ։ൃ͔Β૑ۀ
    .BD04
    ϦϦʔε
    .BD04ϦϦʔε
    .BD049W
    1VNB ϦϦʔε
    .BD049W
    +BHVBS ϦϦʔε
    .BD049W
    5JHFS ϦϦʔε
    .BD049W
    -FPQBSE ϦϦʔε
    .BD049W
    4OPX-FPQBSE
    ϦϦʔε
    049-JPO
    ϦϦʔε
    4BGBSJ Λඪ४
    8FC ϒϥ΢β
    ʹ࠾༻
    J1BEൃച։࢝
    .BD04ϦϦʔε
    J1IPOFൃച։࢝
    5PQ4JUFT
    $PWFS'MPX
    ϦϦʔε
    ϒοΫϚʔΫͱཤྺͷ౷߹
    εϚʔτϩέʔγϣϯόʔ
    &744-
    "DJE ςετ߹֨
    ॎॻ͖දࣔ
    ,)5.- Λ
    ϕʔεʹͯ͠
    ϨϯμϦϯά
    ΤϯδϯΛ
    ։ൃ
    ϙοϓΞοϓ
    ϒϩοΫ
    μ΢ϯϩʔυ
    ϑΝΠϧͷ
    ηΩϡϦςΟܯࠂ
    ΞυΦϯ؅ཧ
    ϦϦʔε
    MJCXXXΛ
    ࢖ͬͯ։ൃ
    ࠶ར༻Մೳͳ $ ݴޠͷ
    ϥΠϒϥϦͱͯ͠Ұ෦Λ
    ॻ͖௚͠
    ϦϦʔε
    ϦϦʔε ϦϦʔε
    ϦϦʔε
    ൃల
    ൃల .BJM ͱ $PNQPTFS Λ౷߹
    +4DSJQU
    7#4DSJQU
    $44ʢ૲ҊʣͷҰ෦
    ൃల
    ഁغ
    ϧϏදࣔ
    ൃల
    ϦϦʔε
    ੒ՌΛར༻
    Πϝʔδ
    πʔϧόʔ
    ύʔιφϧόʔ
    όάमਖ਼
    ൃల
    'JSFGPY ͷ
    վળ఺ΛϑΟʔυόοΫ
    'JSFGPY ͷվળ఺Λ
    ɹɹɹϑΟʔυόοΫ
    4FB.POLFZ$PVODJM
    ͕։ൃΛܧଓ
    λϒϒϥ΢ζ
    ϑΟογϯά
    ࠮ٗܯࠂ
    8FC ඪ४ٕज़΁ͷ
    ରԠΛվળ
    &744-
    ϦϦʔε
    ϦϦʔε
    "DJE ςετ߹֨
    ϑΟʔυϦʔμʔ
    ϑΟογϯά
    ࠮ٗܯࠂ
    &744-
    8FC ΫϦοϓ
    Ϧʔμʔ
    ֦ுػೳ
    ϦʔσΟϯά
    Ϧετ
    $44ɼ%ZOBNJD)5.- ࠃࡍԽͷվળ
    +BWB4DSJQU
    ϑΟογϯά࠮ٗܯࠂ
    ηογϣϯ෮ݩ
    1FSTPOBT
    1IPFOJY ࣾͷૌ͑ʹΑΓ
    ໊শมߋ
    'JSFCJSE ϓϩδΣΫτͷ
    ૌ͑ʹΑΓ໊শมߋ
    ֦ுػೳϚωʔδϟ
    ࣗಈΞοϓσʔτ
    47(
    )5.-$BOWBT
    Ұ෦ͷίʔυͱ
    ઃܭίϯηϓτ
    Λܧঝ
    8FC ඪ४ٕज़΁ͷ
    ରԠΛվળ
    ϚϧνϓϩηεԽ
    ηογϣϯ෮ݩ
    ৽+BWF4DSJQUΤϯδϯ
    ϋʔυ΢ΣΞ
    ΞΫηϥϨʔγϣϯ
    )5.-΁ͷରԠ։࢝
    $44
    %ZOBNJD)5.-
    ϓϥάΠϯ
    ϓϩηε෼཭
    ʢʙʣ
    +BWB4DSJQUܕਪ࿦
    'JSFGPY ͷ
    վળ఺ΛϑΟʔυόοΫ
    Ͱ
    ։ൃΛऴྃ
    ͔Β
    .BD ͷඪ४
    8FC ϒϥ΢β
    ʹ࠾༻
    ϩΰมߋ
    ৽ +BWB4DSJQU Τϯδϯ
    ϓϥΠϕʔτϒϥ΢δϯά
    )5.- ΁ͷରԠΛڧԽ
    Ϧ
    Ϧ
    ồ
    ε
    47(5JOZ
    ແྉԽ
    ೔ຊޠදࣔ
    λ
    ϒ
    ϒ
    ϥ
    ΢
    ζ
    ػ
    ೳ
    ͷ
    ݪ
    ܕ
    &NBJM
    ΫϥΠΞϯτ
    ৽ +BWB4DSJQU Τϯδϯ
    ϓϥΠϕʔτϒϥ΢δϯά
    λϒελοΩϯά
    ΤΫεςϯγϣϯ
    6* σβΠϯมߋ
    #JU5PSSFOU
    ΢ΟδΣοτ
    "DJE ςετ߹֨
    ϑΟογϯά
    ࠮ٗܯࠂ
    εϐʔυμΠϠϧɺ
    ϒοΫϚʔΫͳͲͷ
    ಉظ
    ཤྺ͔Βͷશจݕࡧ
    &744-
    λϒϒϥ΢ζ
    ϙοϓΞοϓϒϩοΫ
    ϒϥ΢βػೳΛಠཱ
    ϦϦʔε
    ʢόʔδϣϯதུʣ
    ʢόʔδϣϯதུʣ
    ϦϦʔε
    ϦϦʔε
    7
    ֦ுػೳϚωʔδϟ
    049
    .PVOUBJO-JPO
    ϦϦʔε
    049
    .BSWFSJDLT
    ϦϦʔε
    8JOEPXT
    ϦϦʔε
    8JOEPXT
    ϦϦʔε
    XFC35$
    BTNKT
    XFC35$
    BTNKT
    Ϛϧνϓϩηε
    8FC&YUFOTJPO
    ϧϏɺ
    &.&
    ϧϏɺ
    &.&
    τϥοΩϯάอޢػೳ෇͖
    ϓϥΠϕʔτϒϥ΢δϯά
    τϥοΩϯάอޢػೳ෇͖
    ϓϥΠϕʔτϒϥ΢δϯά
    8JOEPXT
    ϦϦʔε
    +BWB4DSJQUΤϯδϯ
    $IBLSB$PSFΛ
    Φʔϓϯιʔεʹ
    +BWB4DSJQUΤϯδϯ
    $IBLSB$PSFΛ
    Φʔϓϯιʔεʹ
    049
    .BSWFSJDLT
    ϦϦʔε
    049
    :PTFNJUF
    ϦϦʔε
    049
    :PTFNJUF
    ϦϦʔε
    049
    &M$BQJUBO
    ϦϦʔε
    049
    &M$BQJUBO
    ϦϦʔε
    "QQMF8BUDI
    ൃച։࢝
    "QQMF8BUDI
    ൃച։࢝
    8JOEPXT1IPOF
    ϦϦʔε
    8JOEPXT
    ϦϦʔε
    /$4".PTBJD
    8PSME8JEF8FC
    -JOF.PEF#SPXTFS
    MJCXXX
    *OUFSOFU&YQMPSFS
    &EHF
    
    
    
    4QZHMBTT.PTBJD
    7JPMB
    4BNCB .BD888
    
    $FMMP
    
    
    
    41
    
    
    
    41
    4BGBSJ
    
    
    
    
    
    
    $ISPNF
    
    
    
    
    
    
    GPS.BD
    GPS.BD
    GPS.BD
    GPS.BD
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .VMUJ5PSH0QFSB
    0QFSB
    
    
    
    ϑΟʔυϦʔμʔ
    *3$ ΫϥΠΞϯτ
    ৽ϨϯμϦϯά
    Τϯδϯ
    
    
    
    
    
    ιʔείʔυΛެ։
    *& ͷ͝ઌ૆༷΋ .PTBJDɻ
    ࣮͸ *& ΋਌ੰͩͬͨΜͩͶɻ
    ೥·Ͱ͸ɺ
    /FUTDBQF/BWJHBUPS ͕
    .BDͷඪ४8FC
    ϒϥ΢βͩͬͨΜͩΑɻ
    ͜ͷ͜Ζ͔Β*&Λ࢖͏ਓ͕͍͢͝
    ੎͍Ͱ૿͑ͨΜͩɻ
    θϩ͔Β࡞ΔΜ͡Όͳͯ͘
    ͢Ͱʹ͋ͬͨ෺Λվྑͯ͠
    ࢖ͬͨΜͩͶɻ
    'JSFGPY ͷԕ͍
    ͝ઌ૆༷ͩΑ
    ʂ
    ʮ"DJEςετʯ
    ͸ ϒ ϥ
    ΢β͕ͪΌΜͱ࡞ΒΕ
    ͍ͯΔ͔Ͳ͏͔ͷ෼͔
    Γ΍͍͢໨҆ʹ࢖ΘΕ
    ͯΔΜͩɻ
    ϑΟογϯά࠮ٗܯࠂػೳ΍
    λϒػೳ͸ɺ
    ΋͏෇͍ͯΔͷ
    ͕౰ͨΓલʹͳͬͯΔΜͩͶɻ
    ࠷ۙ஫໨͞ΕͯΔٕज़
    ͷ΄ͱΜͲ͸ɺ
    ͜ͷࠒ
    ʹ͸΋͏ग़ଗͬͯͨΜ
    ͩͶɻ
    *&͕͓΍͢Έͯ͠Δؒɺ
    ΈΜͳҰੜݒ໋
    ͕Μ͹ͬͯͨΜͩΑɻ
    'JSFGPY΍ଞͷϒϥ΢β͕
    ͕Μ͹ͬͯͩΜͩΜਓؾ͕
    ग़͖͔ͯͨΒɺ
    *&΋·ͨ
    ͕Μ͹Γ࢝ΊͨΜͩɻ
    ͜Ε͔Β΋ɺ
    ΑΓ࢖͍΍͘͢ɺ
    ΑΓศརʹͲΜͲΜਐา͍ͯ͘͠Αɻ
    ָ͠Έʹͯͯ͠Ͷʂ
    ͜͏ͯ͠ίϛϡχςΟͰ
    ։ൃΛҾ͖ܧ͛Δͷ΋
    ΦʔϓϯιʔεͳΒͰ͸ͩͶʂ
    ʮ44-
    ʢ҉߸Λ࢖ͬͨ҆શͳ௨৴ʣ
    ʯ
    ΍ʮ+BWB4DSJQUʯ͸ɺ
    ͜ ͷ ͜ Ζ ʹ
    /FUTDBQF͕࡞ͬͨΜͩΑɻ
    Πϯλʔωοτͱ͍͑͹
    ωοτεέʔϓʂ
    ͍ͬͯ͏͘Β͍ͷେਓؾ
    ͩͬͨΜͩɻ
    Έ Μ ͳ ʹ ڠ ྗͯ͠ ΋
    Β͚ͬͨͲɺ
    ࠷ॳ͸͏·
    ͍͘ ͔ ͳ ͔ ͬͨ Μ ͩ
    ʜʜ
    ੈքॳͷ XFCϒϥ΢β͸
    8PSME8JEF8FCͩΑ
    ·ͩ·ͩ४උෆ଍ͩͬ
    ͔ͨΒɺ
    *&ʹ͞Βʹࠩ
    Λͭ ͚Β ΕͪΌͬͨ
    ʜʜ
    ϘϥϯςΟΞ׆ಈͰ
    ͣͬͱࢧ͑ͯ͘ΕͨΜͩΑɻ
    ΍ͬͱ'JSFGPYͷग़൪ʂ
    ΞϝϦΧͷ৽ฉʹ޿ࠂ͕ͷͬͨΓͯ͠ɺ
    ·ΔͰ͓ࡇΓΈ͍ͨͩͬͨΑɻ
    ʮ(FDLPʯ
    ͍ͬͯ͏
    ৽͍ٕ͠ज़ͷ͓͔͛Ͱੜ
    ·ΕมΘͬͨΜͩΑʂ
    ,%&͸ɺ
    8JOEPXT΍.BDͷΑ͏ͳ؀ڥΛࣗ
    ༝ͳιϑτ΢ΣΞͰ࡞ΔϓϩδΣΫ
    τͩΑɻ
    ͦͷҰ෦ͱͯ͠8FCϒϥ΢β͕ඞཁͩͬͨ
    Μͩɻ
    ൪໨ͷϒϥ΢β-JOF.PEF#SPXTFS͸
    γϛϡϨʔλͰମݧͰ͖ΔΑ
    0QFSB͸/FUTDBQF΍*&ͱ
    ಉ͘͡
    Β͍લ͔Β͋ͬͨΜͩͶɻ
    ͜ͷ͜Ζ͸*&ͱ͓ޓ͍ʹ
    ͸͛͘͠ڝ૪ͯͨ͠ΜͩͶɻ
    ήʔϜػฒͷ%ήʔϜ͕
    ಈ͘Α͏ʹͳͬͨΜͩΑʂ
    ੈքॳͷ։ൃऀ޲͚
    ϒϥ΢βʂ
    "QQ MFͱ( P P HM Fͷ
    8FC,JUڞಉ։ൃ͕ऴྃ͠
    $ISPNF͸෼ذͨ͠#MJOL
    ΤϯδϯʹͳͬͨΜͩ
    ແྉԽ͞ΕΔલ͸ɺ
    πʔϧόʔʹ޿ࠂ͕
    ෇͍ͯͨΜͩΑɻ
    Έͳ͞Μ͸ɺීஈ࢖͍ͬͯΔ 8FC ϒϥ΢β͕Ͳ͏΍ͬͯੜ·Ε͖͔ͯͨɺͲΜͳ෩ʹਐา͖͔ͯͨ͠Λ஌͍ͬͯ·͔͢ʁɹ
    ࢁ͋Γ୩͋Γͷ 'JSFGPY ͷੜཱ͍ͪͱ͋Θͤͯɺ͍ΖΜͳϒϥ΢βͷਐาͷྺ࢙Λௐ΂ͯΈ·͠ΐ͏ʂ
    フォクすけと
    学ぼう！
    .P[JMMB+BQBO͜ͷ࡞඼͸ΫϦΤΠςΟϒɾίϞϯζදࣔඇӦརࠃࡍϥΠηϯεͷԼʹఏڙ͞Ε͍ͯ·͢ɻ
    .P[JMMBɺ
    'JSFGPYɺ
    'JSFGPYϩΰ͸ɺ
    ถࠃ.P[JMMB'PVOEBUJPOͷถࠃ͓Αͼͦͷଞͷࠃʹ͓͚Δ঎ඪ·ͨ͸ొ࿥঎ඪͰ͢ɻ
    ͦͷ΄͔هࡌ͞Ε͍ͯΔ঎඼໊͸ɺ
    ֘౰͢Δ֤ࣾͷ঎ඪ·ͨ͸ొ࿥঎ඪͰ͢ɻ
    
    ΅͘ͱ͍ͬ͠ΐʹ
    ϒϥ΢βͷྺ࢙Λษڧ
    ͯ͠ΈΑ͏ʂ
    ࢁંΓ ࢁંΓ
    ୩ંΓ ୩ંΓ
    CC BY-NC 4.0 Mozilla Japan
    https://www.mozilla.jp/blog/entry/10552/
    

    View Slide

42. 
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .P[JMMB$PSQPSBUJPO ઃཱ
    .P[JMMB$IJOB ઃཱ
    .P[JMMB.BOJGFTUP'JSTU%SBGU
    /FUTDBQF ઐ೚ελοϑ
    ͱίϛϡχςΟͱͷڞಉ
    ϓϩδΣΫτͱͯ͠
    /FUTDBQF$PNNVOJDBUJPOT
    ͷग़ࢿʹΑΓઃཱ
    /$ ༝དྷͷίʔυͷഁ
    غͱ৽ϨϯμϦϯάΤ
    ϯδϯʮ(FDLPʯϕʔ
    εͰͷࠜຊతͳઃܭͷ
    ͠௚͠Λܾఆ
    ϚʔΫ
    ɾΞϯυϦʔηϯ
    Βɺ
    .PTBJDΛ։ൃ
    ς
    ΟϜɾόʔφʔζɾ
    Ϧʔ
    8PSME8JEF8FCͷݪܕ
    ͱͳΔఏҊ
    )5.- )551 63-Λઃܭ
    ੈքॳͷ8FCαΠ
    τ
    8PSME8JEF8FCͷιʔε
    ίʔυΛύϒϦ
    ο
    Ϋ
    υϝΠϯ
    ͱ
    ͯ͠ެ։
    .PTBJDͷ
    ϥΠηϯεΛऔಘ
    ɹ
    ϚʔΫɾΞϯυϦʔηϯͱ
    δϜɾΫϥʔΫʹΑ
    Γઃཱ
    ඇӦར૊৫ͱͯ͠ಠཱ
    .P[JMMB&VSPQF ઃཱ
    .P[JMMB+BQBO ઃཱ
    NETSCAPE
    COMMUNICATIONS
    /$Y Λແঈ഑෍
    ։ൃதͷ /$ Λ
    ΦʔϓϯιʔεԽ
    ೔ຊ๏ਓઃཱ
    /$4" ͔Βͷૌ͑ʹΑΓ
    ໊ࣾมߋ
    ɾ
    'JSFGPY04
    ɾ
    )5.-קࠂ
    ɾ
    8FC$-
    ɾ
    )551
    ɾ&$."4DSJQU
    ɾ'JSFGPY0457
    ɾ$444OBQTIPU
    ɾ
    'JSFGPYԆ௕
    αϙʔτ൛
    ɾ
    )5.- ࠷ऴ૲Ҋ
    ެ։
    ɾ
    8FC(-
    ɾ
    8$ ઃཱ
    ɾ
    /FUTDBQF/BWJHBUPS
    ͕ࢢ৔Λ੮ר͢Δ
    ɾ
    :BIPP αʔϏε
    ։࢝
    ɾ
    8FC.ެ։
    ɾ$444OBQTIPU
    ɾ
    +BWB ొ৔
    ɾ
    Πϯλʔωοτ
    ར༻ऀͷٸ૿
    ɾ
    ϒϥ΢βઓ૪ܹԽ
    ɾ
    $44 קࠂ
    ɾ
    )551
    ɾ
    .PTBJD ͕ࢢ৔Λ
    ੮ר͢Δ
    ೥Ͱ ສ
    μ΢ϯϩʔυ
    ɾ
    )551
    ɾ
    Πϯλʔωο
    τ઀ଓ
    ϗετ͕ ສΛ
    ௒͑Δ
    ɾ
    Πϯλʔωο
    τ઀ଓ
    ϗετ͕ ສΛ
    ௒͑Δ
    ɾ೔ຊ࠷ॳͷ 8FC
    αΠτ͕ެ։
    ɾ
    ϒϥ΢βઓ૪
    ࣄ্࣮ͷऴᖼ
    ɾ
    *& γΣΞٸ૿
    ɾ
    $44 קࠂ
    ɾ
    9.- קࠂ
    ɾ
    %0. קࠂ
    ɾ&$."4DSJQUOE
    ɾ&$."4DSJQUSE
    ɾ
    )5.- קࠂ
    ɾ
    )551
    ɾ&$."4DSJQUTU
    ɾ
    "KBY
    ɾ
    8FC
    ɾ
    8$)5.-8(
    ઃཱ
    ɾ
    $444OBQTIPU
    ɾ
    )5.- ૲Ҋެ։
    ɾ
    8$9)5.-8(
    ׆ಈऴྃ
    ɾ&$."4DSJQUUI
    ɾ
    ถϦϋϏϦςʔ
    γϣϯ๏ ৚
    ࢪߦ։࢝
    ɾ
    ϒϩʔυόϯυ
    ීٴ͕೔ຊͰ࢝
    ·Δ
    ɾ
    "0- ͱ .JDSPTPGUɺ
    ಠې๏ૌুͰ࿨ղ
    ϒϥ΢βઓ૪ʹ
    ऴࢭූ
    ɾ
    ϒϩάϒʔϜ
    ೔ຊͰ࢝·Δ
    ɾ
    
    ʮઓޙੈ୅ʯ
    ϒϥ΢βͷ୆಄
    ɾ
    8)"58( ઃཱ
    ɾ
    +*49 ੍ఆ
    ɾ
    (3&&ɺNJYJ ͳͲ
    4/4 ͕ϒʔϜʹ
    ɾ
    "0-/FUTDBQFɺ
    .JDSPTPGU Λ
    ಠې๏ҧ൓Ͱఏૌ
    /$4"
    $&3/
    .PTBJD
    $PNNVOJDBUJPOT
    .JDSPTPGU
    "QQMF
    4QZHMBTT
    0QFSB
    4PGUXBSF
    ,%&
    1SPKFDU
    (PPHMF
    BTNKT
    BTNKT
    .P[JMMB$MBTTJD
    (FDLP
    8FC ඪ ४ ٕ ज़ Λ
    ߴ ౓ ʹ α ϙ ʔ τ
    5SJEFOU
    &EHF
    #MJOL
    1SFTUP
    8FC,JU
    /FUTDBQF/BWJHBUPS
    ʢίʔυωʔϜʮ.P[JMMBʯ
    ʣ
    /FUTDBQF/BWJHBUPS
    /FUTDBQF/BWJHBUPS
    4UBOEBSE&EJUJPO
    /FUTDBQF/BWJHBUPS
    (PME&EJUJPO
    /FUTDBQF$PNNVOJDBUPS
    /FUTDBQF$PNNVOJDBUPS
    .P[JMMB"QQMJDBUJPO4VJUF
    .P[JMMB"QQMJDBUJPO4VJUF
    <.JMFTUPOF ʙ >
    ʢίʔυωʔϜʮ4FBNPOLFZʯ
    ʣ
    /FUTDBQF
    .P[JMMB"QQMJDBUJPO4VJUF
    'JSFGPY%FWFMPQFS&EJUJPO
    J04൛'JSFGPY
    4FB.POLFZ
    
    
    
    /FUTDBQF
    .P[JMMB'JSFCJSE
    Firefox
    
    
    
    
    
    
    
    .P[JMMB"QQMJDBUJPO4VJUF
    .P[JMMB1IPFOJY
    
    
    
    
    ϦϦʔε
    ୈੈ୅+BWB4DSJQUΤϯδϯ
    ϋʔυ΢ΣΞΞΫηϥϨʔγϣϯ
    ɹɹɹɹ8FC(-
    'JSFGPY4ZOD
    ɹɹɹɹ"OESPJE൛ϦϦʔε
    ୈੈ୅+BWB4DSJQUΤϯδϯ
    ϋʔυ΢ΣΞΞΫηϥϨʔγϣϯ
    ɹɹɹɹ8FC(-
    'JSFGPY4ZOD
    ɹɹɹɹ"OESPJE൛ϦϦʔε
    "OESPJE൛/BUJWF6*
    ϦϦʔε
    "OESPJE൛/BUJWF6*
    ϦϦʔε
    Ҏޙ 'JSFGPYͷվળ఺Λ
    औΓೖΕͯߋ৽͕ଓ͘
    &QJD(BNFT ͱ
    6OSFBM&OHJOF ΛҠ২
    'JSFGPYͱ
    ฒߦͯ͠։ൃ
    Ҏޙ 'JSFGPYͷվળ఺Λ
    औΓೖΕͯߋ৽͕ଓ͘
    &QJD(BNFT ͱ
    6OSFBM&OHJOF ΛҠ২
    6OJUZ͕8FC(-
    ग़ྗʹਖ਼ࣜରԠ
    8FC(-
    'JSFGPYͱ
    ฒߦͯ͠։ൃ
    8FC(-
    *&͕࠷ޙͷ
    ϝδϟʔόʔδϣϯʹ
    *&͕࠷ޙͷ
    ϝδϟʔόʔδϣϯʹ
    #MJOLΤϯδϯ
    #MJOLΤϯδϯ
    (PPHMF(MBTT
    (PPHMF(MBTT
    "MQIBCFU ઃཱ
    "MQIBCFU ઃཱ
    1SFTUP Τϯδϯͷ
    0QFSB ࠷ऴόʔδϣϯ
    ΤϯδϯΛ8FC,JU
    ʹมߋ
    ΤϯδϯΛ8FC,JU
    ʹมߋ
    1SFTUP Τϯδϯͷ
    0QFSB ࠷ऴόʔδϣϯ
    ΤϯδϯΛ#MJOL
    ʹมߋ
    ΤϯδϯΛ#MJOL
    ʹมߋ
    6OJUZ͕8FC(-
    ग़ྗʹਖ਼ࣜରԠ
    .PTBJD ͷݖརΛ
    ८Γରཱɺ཭൓
    ϥΠηϯεڙ༩
    ϥΠηϯεڙ༩
    γϛϡϨʔλ IUUQMJOFNPEFDFSODIXXXIZQFSUFYU8885FSNTIUNM
    εΫϦϓτ΍ελΠϧγʔτʹ
    ରԠͨ͠ߴػೳϒϥ΢β ੈքॳͷ.BD༻ϒϥ΢β
    ΛϦϦʔε
    ੈքॳͷ
    8JOEPXT༻ϒϥ΢β
    ,)5.-8 ͷ
    ։ൃΛ։࢝
    .BD049W
    $IFFUBI ϦϦʔε
    .BD049W
    1BOUIFS ϦϦʔε
    Ξυϫʔζ
    αʔϏε։࢝
    (PPHMF%FTLUPQ
    ϦϦʔε
    (PPHMF.BQT
    αʔϏε։࢝
    (NBJM
    αʔϏε։࢝
    (PPHMF1BDL
    ϦϦʔε
    (PPHMF%PDT
    4QSFBETIFFUT
    αʔϏε։࢝
    "OESPJE
    ϦϦʔε
    7
    (PPHMF
    αʔϏε։࢝
    .PTBJD ͷ
    ϥΠηϯεΛऔಘ
    8JOEPXT7JTUB
    ϦϦʔε
    8JOEPXT9141
    ϦϦʔε
    8JOEPXT.F
    ϦϦʔε
    8JOEPXT91
    ϦϦʔε
    8JOEPXT
    ϦϦʔε
    8JOEPXT
    ϦϦʔε
    *& ͱ 8JOEPXT Λ౷߹
    8JOEPXT
    ϦϦʔε
    ݕࡧΤϯδϯ
    ։ൃ͔Β૑ۀ
    .BD04
    ϦϦʔε
    .BD04ϦϦʔε
    .BD049W
    1VNB ϦϦʔε
    .BD049W
    +BHVBS ϦϦʔε
    .BD049W
    5JHFS ϦϦʔε
    .BD049W
    -FPQBSE ϦϦʔε
    .BD049W
    4OPX-FPQBSE
    ϦϦʔε
    049-JPO
    ϦϦʔε
    4BGBSJ Λඪ४
    8FC ϒϥ΢β
    ʹ࠾༻
    J1BEൃച։࢝
    .BD04ϦϦʔε
    J1IPOFൃച։࢝
    5PQ4JUFT
    $PWFS'MPX
    ϦϦʔε
    ϒοΫϚʔΫͱཤྺͷ౷߹
    εϚʔτϩέʔγϣϯόʔ
    &744-
    "DJE ςετ߹֨
    ॎॻ͖දࣔ
    ,)5.- Λ
    ϕʔεʹͯ͠
    ϨϯμϦϯά
    ΤϯδϯΛ
    ։ൃ
    ϙοϓΞοϓ
    ϒϩοΫ
    μ΢ϯϩʔυ
    ϑΝΠϧͷ
    ηΩϡϦςΟܯࠂ
    ΞυΦϯ؅ཧ
    ϦϦʔε
    MJCXXXΛ
    ࢖ͬͯ։ൃ
    ࠶ར༻Մೳͳ $ ݴޠͷ
    ϥΠϒϥϦͱͯ͠Ұ෦Λ
    ॻ͖௚͠
    ϦϦʔε
    ϦϦʔε ϦϦʔε
    ϦϦʔε
    ൃల
    ൃల .BJM ͱ $PNQPTFS Λ౷߹
    +4DSJQU
    7#4DSJQU
    $44ʢ૲ҊʣͷҰ෦
    ൃల
    ഁغ
    ϧϏදࣔ
    ൃల
    ϦϦʔε
    ੒ՌΛར༻
    Πϝʔδ
    πʔϧόʔ
    ύʔιφϧόʔ
    όάमਖ਼
    ൃల
    'JSFGPY ͷ
    վળ఺ΛϑΟʔυόοΫ
    'JSFGPY ͷվળ఺Λ
    ɹɹɹϑΟʔυόοΫ
    4FB.POLFZ$PVODJM
    ͕։ൃΛܧଓ
    λϒϒϥ΢ζ
    ϑΟογϯά
    ࠮ٗܯࠂ
    8FC ඪ४ٕज़΁ͷ
    ରԠΛվળ
    &744-
    ϦϦʔε
    ϦϦʔε
    "DJE ςετ߹֨
    ϑΟʔυϦʔμʔ
    ϑΟογϯά
    ࠮ٗܯࠂ
    &744-
    8FC ΫϦοϓ
    Ϧʔμʔ
    ֦ுػೳ
    ϦʔσΟϯά
    Ϧετ
    $44ɼ%ZOBNJD)5.- ࠃࡍԽͷվળ
    +BWB4DSJQU
    ϑΟογϯά࠮ٗܯࠂ
    ηογϣϯ෮ݩ
    1FSTPOBT
    1IPFOJY ࣾͷૌ͑ʹΑΓ
    ໊শมߋ
    'JSFCJSE ϓϩδΣΫτͷ
    ૌ͑ʹΑΓ໊শมߋ
    ֦ுػೳϚωʔδϟ
    ࣗಈΞοϓσʔτ
    47(
    )5.-$BOWBT
    Ұ෦ͷίʔυͱ
    ઃܭίϯηϓτ
    Λܧঝ
    8FC ඪ४ٕज़΁ͷ
    ରԠΛվળ
    ϚϧνϓϩηεԽ
    ηογϣϯ෮ݩ
    ৽+BWF4DSJQUΤϯδϯ
    ϋʔυ΢ΣΞ
    ΞΫηϥϨʔγϣϯ
    )5.-΁ͷରԠ։࢝
    $44
    %ZOBNJD)5.-
    ϓϥάΠϯ
    ϓϩηε෼཭
    ʢʙʣ
    +BWB4DSJQUܕਪ࿦
    'JSFGPY ͷ
    վળ఺ΛϑΟʔυόοΫ
    Ͱ
    ։ൃΛऴྃ
    ͔Β
    .BD ͷඪ४
    8FC ϒϥ΢β
    ʹ࠾༻
    ϩΰมߋ
    ৽ +BWB4DSJQU Τϯδϯ
    ϓϥΠϕʔτϒϥ΢δϯά
    )5.- ΁ͷରԠΛڧԽ
    Ϧ
    Ϧ
    ồ
    ε
    47(5JOZ
    ແྉԽ
    ೔ຊޠදࣔ
    λ
    ϒ
    ϒ
    ϥ
    ΢
    ζ
    ػ
    ೳ
    ͷ
    ݪ
    ܕ
    &NBJM
    ΫϥΠΞϯτ
    ৽ +BWB4DSJQU Τϯδϯ
    ϓϥΠϕʔτϒϥ΢δϯά
    λϒελοΩϯά
    ΤΫεςϯγϣϯ
    6* σβΠϯมߋ
    #JU5PSSFOU
    ΢ΟδΣοτ
    "DJE ςετ߹֨
    ϑΟογϯά
    ࠮ٗܯࠂ
    εϐʔυμΠϠϧɺ
    ϒοΫϚʔΫͳͲͷ
    ಉظ
    ཤྺ͔Βͷશจݕࡧ
    &744-
    λϒϒϥ΢ζ
    ϙοϓΞοϓϒϩοΫ
    ϒϥ΢βػೳΛಠཱ
    ϦϦʔε
    ʢόʔδϣϯதུʣ
    ʢόʔδϣϯதུʣ
    ϦϦʔε
    ϦϦʔε
    7
    ֦ுػೳϚωʔδϟ
    049
    .PVOUBJO-JPO
    ϦϦʔε
    049
    .BSWFSJDLT
    ϦϦʔε
    8JOEPXT
    ϦϦʔε
    8JOEPXT
    ϦϦʔε
    XFC35$
    BTNKT
    XFC35$
    BTNKT
    Ϛϧνϓϩηε
    8FC&YUFOTJPO
    ϧϏɺ
    &.&
    ϧϏɺ
    &.&
    τϥοΩϯάอޢػೳ෇͖
    ϓϥΠϕʔτϒϥ΢δϯά
    τϥοΩϯάอޢػೳ෇͖
    ϓϥΠϕʔτϒϥ΢δϯά
    8JOEPXT
    ϦϦʔε
    +BWB4DSJQUΤϯδϯ
    $IBLSB$PSFΛ
    Φʔϓϯιʔεʹ
    +BWB4DSJQUΤϯδϯ
    $IBLSB$PSFΛ
    Φʔϓϯιʔεʹ
    049
    .BSWFSJDLT
    ϦϦʔε
    049
    :PTFNJUF
    ϦϦʔε
    049
    :PTFNJUF
    ϦϦʔε
    049
    &M$BQJUBO
    ϦϦʔε
    049
    &M$BQJUBO
    ϦϦʔε
    "QQMF8BUDI
    ൃച։࢝
    "QQMF8BUDI
    ൃച։࢝
    8JOEPXT1IPOF
    ϦϦʔε
    8JOEPXT
    ϦϦʔε
    /$4".PTBJD
    8PSME8JEF8FC
    -JOF.PEF#SPXTFS
    MJCXXX
    *OUFSOFU&YQMPSFS
    &EHF
    
    
    
    4QZHMBTT.PTBJD
    7JPMB
    4BNCB .BD888
    
    $FMMP
    
    
    
    41
    
    
    
    41
    4BGBSJ
    
    
    
    
    
    
    $ISPNF
    
    
    
    
    
    
    GPS.BD
    GPS.BD
    GPS.BD
    GPS.BD
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .VMUJ5PSH0QFSB
    0QFSB
    
    
    
    ϑΟʔυϦʔμʔ
    *3$ ΫϥΠΞϯτ
    ৽ϨϯμϦϯά
    Τϯδϯ
    
    
    
    
    
    ιʔείʔυΛެ։
    *& ͷ͝ઌ૆༷΋ .PTBJDɻ
    ࣮͸ *& ΋਌ੰͩͬͨΜͩͶɻ
    ೥·Ͱ͸ɺ
    /FUTDBQF/BWJHBUPS ͕
    .BDͷඪ४8FC
    ϒϥ΢βͩͬͨΜͩΑɻ
    ͜ͷ͜Ζ͔Β*&Λ࢖͏ਓ͕͍͢͝
    ੎͍Ͱ૿͑ͨΜͩɻ
    θϩ͔Β࡞ΔΜ͡Όͳͯ͘
    ͢Ͱʹ͋ͬͨ෺Λվྑͯ͠
    ࢖ͬͨΜͩͶɻ
    'JSFGPY ͷԕ͍
    ͝ઌ૆༷ͩΑ
    ʂ
    ʮ"DJEςετʯ
    ͸ ϒ ϥ
    ΢β͕ͪΌΜͱ࡞ΒΕ
    ͍ͯΔ͔Ͳ͏͔ͷ෼͔
    Γ΍͍͢໨҆ʹ࢖ΘΕ
    ͯΔΜͩɻ
    ϑΟογϯά࠮ٗܯࠂػೳ΍
    λϒػೳ͸ɺ
    ΋͏෇͍ͯΔͷ
    ͕౰ͨΓલʹͳͬͯΔΜͩͶɻ
    ࠷ۙ஫໨͞ΕͯΔٕज़
    ͷ΄ͱΜͲ͸ɺ
    ͜ͷࠒ
    ʹ͸΋͏ग़ଗͬͯͨΜ
    ͩͶɻ
    *&͕͓΍͢Έͯ͠Δؒɺ
    ΈΜͳҰੜݒ໋
    ͕Μ͹ͬͯͨΜͩΑɻ
    'JSFGPY΍ଞͷϒϥ΢β͕
    ͕Μ͹ͬͯͩΜͩΜਓؾ͕
    ग़͖͔ͯͨΒɺ
    *&΋·ͨ
    ͕Μ͹Γ࢝ΊͨΜͩɻ
    ͜Ε͔Β΋ɺ
    ΑΓ࢖͍΍͘͢ɺ
    ΑΓศརʹͲΜͲΜਐา͍ͯ͘͠Αɻ
    ָ͠Έʹͯͯ͠Ͷʂ
    ͜͏ͯ͠ίϛϡχςΟͰ
    ։ൃΛҾ͖ܧ͛Δͷ΋
    ΦʔϓϯιʔεͳΒͰ͸ͩͶʂ
    ʮ44-
    ʢ҉߸Λ࢖ͬͨ҆શͳ௨৴ʣ
    ʯ
    ΍ʮ+BWB4DSJQUʯ͸ɺ
    ͜ ͷ ͜ Ζ ʹ
    /FUTDBQF͕࡞ͬͨΜͩΑɻ
    Πϯλʔωοτͱ͍͑͹
    ωοτεέʔϓʂ
    ͍ͬͯ͏͘Β͍ͷେਓؾ
    ͩͬͨΜͩɻ
    Έ Μ ͳ ʹ ڠ ྗͯ͠ ΋
    Β͚ͬͨͲɺ
    ࠷ॳ͸͏·
    ͍͘ ͔ ͳ ͔ ͬͨ Μ ͩ
    ʜʜ
    ੈքॳͷ XFCϒϥ΢β͸
    8PSME8JEF8FCͩΑ
    ·ͩ·ͩ४උෆ଍ͩͬ
    ͔ͨΒɺ
    *&ʹ͞Βʹࠩ
    Λͭ ͚Β ΕͪΌͬͨ
    ʜʜ
    ϘϥϯςΟΞ׆ಈͰ
    ͣͬͱࢧ͑ͯ͘ΕͨΜͩΑɻ
    ΍ͬͱ'JSFGPYͷग़൪ʂ
    ΞϝϦΧͷ৽ฉʹ޿ࠂ͕ͷͬͨΓͯ͠ɺ
    ·ΔͰ͓ࡇΓΈ͍ͨͩͬͨΑɻ
    ʮ(FDLPʯ
    ͍ͬͯ͏
    ৽͍ٕ͠ज़ͷ͓͔͛Ͱੜ
    ·ΕมΘͬͨΜͩΑʂ
    ,%&͸ɺ
    8JOEPXT΍.BDͷΑ͏ͳ؀ڥΛࣗ
    ༝ͳιϑτ΢ΣΞͰ࡞ΔϓϩδΣΫ
    τͩΑɻ
    ͦͷҰ෦ͱͯ͠8FCϒϥ΢β͕ඞཁͩͬͨ
    Μͩɻ
    ൪໨ͷϒϥ΢β-JOF.PEF#SPXTFS͸
    γϛϡϨʔλͰମݧͰ͖ΔΑ
    0QFSB͸/FUTDBQF΍*&ͱ
    ಉ͘͡
    Β͍લ͔Β͋ͬͨΜͩͶɻ
    ͜ͷ͜Ζ͸*&ͱ͓ޓ͍ʹ
    ͸͛͘͠ڝ૪ͯͨ͠ΜͩͶɻ
    ήʔϜػฒͷ%ήʔϜ͕
    ಈ͘Α͏ʹͳͬͨΜͩΑʂ
    ੈքॳͷ։ൃऀ޲͚
    ϒϥ΢βʂ
    "QQ MFͱ( P P HM Fͷ
    8FC,JUڞಉ։ൃ͕ऴྃ͠
    $ISPNF͸෼ذͨ͠#MJOL
    ΤϯδϯʹͳͬͨΜͩ
    ແྉԽ͞ΕΔલ͸ɺ
    πʔϧόʔʹ޿ࠂ͕
    ෇͍ͯͨΜͩΑɻ
    Έͳ͞Μ͸ɺීஈ࢖͍ͬͯΔ 8FC ϒϥ΢β͕Ͳ͏΍ͬͯੜ·Ε͖͔ͯͨɺͲΜͳ෩ʹਐา͖͔ͯͨ͠Λ஌͍ͬͯ·͔͢ʁɹ
    ࢁ͋Γ୩͋Γͷ 'JSFGPY ͷੜཱ͍ͪͱ͋Θͤͯɺ͍ΖΜͳϒϥ΢βͷਐาͷྺ࢙Λௐ΂ͯΈ·͠ΐ͏ʂ
    フォクすけと
    学ぼう！
    .P[JMMB+BQBO͜ͷ࡞඼͸ΫϦΤΠςΟϒɾίϞϯζදࣔඇӦརࠃࡍϥΠηϯεͷԼʹఏڙ͞Ε͍ͯ·͢ɻ
    .P[JMMBɺ
    'JSFGPYɺ
    'JSFGPYϩΰ͸ɺ
    ถࠃ.P[JMMB'PVOEBUJPOͷถࠃ͓Αͼͦͷଞͷࠃʹ͓͚Δ঎ඪ·ͨ͸ొ࿥঎ඪͰ͢ɻ
    ͦͷ΄͔هࡌ͞Ε͍ͯΔ঎඼໊͸ɺ
    ֘౰͢Δ֤ࣾͷ঎ඪ·ͨ͸ొ࿥঎ඪͰ͢ɻ
    
    ΅͘ͱ͍ͬ͠ΐʹ
    ϒϥ΢βͷྺ࢙Λษڧ
    ͯ͠ΈΑ͏ʂ
    ࢁંΓ ࢁંΓ
    ୩ંΓ ୩ંΓ
    CC BY-NC 4.0 Mozilla Japan
    https://www.mozilla.jp/blog/entry/10552/
    ΢Σϒϒϥ΢β
    ͷྺ࢙
    

    View Slide

43. ʙ
    

    View Slide

44. Chrome Opera
    Safari
    Firefox
    Internet Explorer
    ϨϯμϦϯάΤϯδϯ
    +4ΠϯλʔϓϦλ
    

    View Slide

45. Chrome Opera
    Safari
    Firefox
    Internet Explorer
    8FCLJU
    7
    ϨϯμϦϯάΤϯδϯ
    +4ΠϯλʔϓϦλ
    1SFTUP
    $BSBLBO
    8FCLJU
    +BWB4DSJQU
    $PSF
    5SJEFOU
    $IBLSB
    (FDLP
    4QJEFS
    .POLFZ
    

    View Slide

46. Chrome Opera
    Safari
    Firefox
    Internet Explorer
    8FCLJU
    7
    1SFTUP
    $BSBLBO
    8FCLJU
    +BWB4DSJQU
    $PSF
    5SJEFOU
    $IBLSB
    (FDLP
    4QJEFS
    .POLFZ
    Webkit
    

    View Slide

47. Chrome Opera
    Safari
    Firefox
    Internet Explorer
    1SFTUP
    $BSBLBO
    8FCLJU
    +BWB4DSJQU
    $PSF
    5SJEFOU
    $IBLSB
    (FDLP
    4QJEFS
    .POLFZ
    Webkit
    8FCLJU
    7
    

    View Slide

48. Chrome
    Safari
    8FCLJU
    +BWB4DSJQU
    $PSF
    Webkit
    8FCLJU
    7
    

    View Slide

49. Google
    Apple
    8FCLJU
    +BWB4DSJQU
    $PSF
    Webkit
    8FCLJU
    7
    2013೥·Ͱ͸GoogleͱApple͕
    WebkitΛڞಉͰ։ൃ
    

    View Slide

50. Chrome Opera
    Safari
    Firefox
    Internet Explorer
    8FCLJU
    7
    1SFTUP
    $BSBLBO
    8FCLJU
    +BWB4DSJQU
    $PSF
    5SJEFOU
    $IBLSB
    (FDLP
    4QJEFS
    .POLFZ
    2013೥ Chrome͕
    Webkit → Blink
    WebkitΛfork͠
    Ҏ߱ಠࣗʹ։ൃ
    

    View Slide

51. Chrome Opera
    Safari
    Firefox
    Internet Explorer
    #MJOL
    7
    1SFTUP
    $BSBLBO
    8FCLJU
    +BWB4DSJQU
    $PSF
    5SJEFOU
    $IBLSB
    (FDLP
    4QJEFS
    .POLFZ
    2013೥ Chrome͕
    Webkit → Blink
    WebkitΛfork͠
    Ҏ߱ಠࣗʹ։ൃ
    

    View Slide

52. ͜ͷগ͠લʜ
    2013/02
    

    View Slide

53. Chrome Opera
    Safari
    Firefox
    Internet Explorer
    8FCLJU
    7
    1SFTUP
    $BSBLBO
    8FCLJU
    +BWB4DSJQU
    $PSF
    5SJEFOU
    $IBLSB
    (FDLP
    4QJEFS
    .POLFZ
    0QFSBͰ
    ಠࣗϒϥ΢β։ൃΛࣙΊ
    $ISPNJVN1SPKFDUʹ
    ࢀՃ͠։ൃڠྗɻ
    0QFSB͔Β
    8FCLJU7΁
    

    View Slide

54. Chrome Opera
    Safari
    Firefox
    Internet Explorer
    #MJOL
    7
    #MJOL
    7
    8FCLJU
    +BWB4DSJQU
    $PSF
    5SJEFOU
    $IBLSB
    (FDLP
    4QJEFS
    .POLFZ
    Opera v15Ҏ߱
    ChromiumΛfolk͠
    ։ൃͨ͠΋ͷΛར༻
    (v14͸AndroidͷΈ
    ϦϦʔε͞Εͨ)
    

    View Slide

55. Chrome Opera
    #MJOL
    7
    #MJOL
    7
    

    View Slide

56. ͦͷޙ৭ʑ͋Γ
    ओͳτϐοΫε
    ݩ0QFSBͷڞಉ૑ઃऀ͕Ҏલͷ0QFSBͷϒϥ΢δ
    ϯάΛऔΓ໭ͨ͢Ίʹ$ISPNJVNΛݩʹ։ൃͨ͠
    7JWBMEJ#SPXTFSΛެ։
    .JDSPTPGU͕৽ϒϥ΢β&EHFΛެ։
    

    View Slide

57. Chrome Opera Vivaldi
    Safari
    Firefox
    Internet Explorer
    Edge
    

    View Slide

58. Chrome Opera Vivaldi
    Safari
    Firefox
    Internet Explorer
    Edge
    Based (Forked)
    Chromium
    

    View Slide

59. Chrome Opera Vivaldi
    Safari
    Firefox
    Internet Explorer
    Edge
    #MJOL
    7
    #MJOL
    7
    8FCLJU
    +BWB4DSJQU
    $PSF
    5SJEFOU
    $IBLSB
    (FDLP
    4QJEFS
    .POLFZ
    #MJOL
    7
    &EHF)5.-
    $IBLSB
    ϨϯμϦϯάΤϯδϯ
    +4ΠϯλʔϓϦλ
    

    View Slide

60. Chrome Opera Vivaldi
    Q. ͜ͷ3ͭͷ΢Σϒϒϥ΢βͷҧ͍͸ʁ
    

    View Slide

61. Chrome Opera Vivaldi
    #MJOL
    7
    #MJOL
    7
    #MJOL
    7
    

    View Slide

62. Chrome Opera Vivaldi
    #MJOL
    7
    #MJOL
    7
    #MJOL
    7
    

    View Slide

63. Chrome Opera Vivaldi
    #MJOL
    7
    #MJOL
    7
    #MJOL
    7
    ڞ௨
    ҟͳΔ
    

    View Slide

64. Chrome Opera Vivaldi
    #MJOL
    7
    #MJOL
    7
    #MJOL
    7
    ಠࣗίϯϙʔωϯτͱͯ͠
    αΠυόʔ΍
    4QFFE%JBMͳͲ
    

    View Slide

65. Chrome Opera Vivaldi
    #MJOL
    7
    #MJOL
    7
    #MJOL
    7
    ಠࣗίϯϙʔωϯτͱͯ͠
    αΠυόʔ΍
    4QFFE%JBMͳͲ
    

    View Slide

66. Chrome Opera Vivaldi
    #MJOL
    7
    #MJOL
    7
    #MJOL
    7
    αΠυόʔ
    ΫΠοΫίϚϯυ
    εςʔλεόʔ ը໘Լ෦
    
    

    View Slide

67. Chrome Opera Vivaldi
    #MJOL
    7
    #MJOL
    7
    #MJOL
    7
    αΠυόʔ
    ΫΠοΫίϚϯυ
    εςʔλεόʔ ը໘Լ෦
    
    

    View Slide

68. Chrome
    Safari
    Firefox
    Internet Explorer
    Edge
    

    View Slide

69. Chrome
    Safari
    Firefox
    Internet Explorer
    Edge
    Q. ͜ͷ5ͭͷ΢Σϒϒϥ΢βͷҧ͍͸ʁ
    

    View Slide

70. Chrome
    Safari
    Firefox
    Internet Explorer
    Edge
    #MJOL
    7
    8FCLJU
    +BWB4DSJQU
    $PSF
    5SJEFOU
    $IBLSB
    (FDLP
    4QJEFS
    .POLFZ
    &EHF)5.-
    $IBLSB
    ϨϯμϦϯάΤϯδϯ
    +4ΠϯλʔϓϦλ
    

    View Slide

71. Chrome
    Safari
    Firefox
    Internet Explorer
    Edge
    #MJOL
    7
    8FCLJU
    +BWB4DSJQU
    $PSF
    5SJEFOU
    $IBLSB
    (FDLP
    4QJEFS
    .POLFZ
    &EHF)5.-
    $IBLSB
    ରԠঢ়گ
    

    View Slide

72. Chrome
    Safari
    Firefox
    Internet Explorer
    Edge
    #MJOL
    7
    8FCLJU
    +BWB4DSJQU
    $PSF
    5SJEFOU
    $IBLSB
    (FDLP
    4QJEFS
    .POLFZ
    &EHF)5.-
    $IBLSB
    async function ରԠঢ়گ
    

    View Slide

73. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    

    View Slide

74. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    ಺෦ར༻͍ͯ͠Δ
    Τϯδϯ͕ҟͳΔ
    

    View Slide

75. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    ྆ํಉ͡$ISPNJVNΛ
    ϕʔεʹར༻͍ͯ͠Δ͕ɺ
    6*ͳͲ͕ҟͳΔ
    

    View Slide

76. Question
    • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
    • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
    • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
    • ChromeͱOpera͸Կ͕ҧ͏ʁ
    

    View Slide

77. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ࠓ೔͸͔͜͜Β
    ͜ͷͭʹ஫໨ͯ͠
    ۷ΓԼ͛ͯΈ·͢
    

    View Slide

78. ͞Βʹৄ͘͠
    ݟͯΈΑ͏
    

    View Slide

79. JavaScriptΠϯλʔϓϦλͷ໾ׂ
    • JavaScriptͷղੳɾ࣮ߦ
    &WBMVBUF
    

    View Slide

80. ϨϯμϦϯάΤϯδϯͷ໾ׂ
    • ϨϯμϦϯάΤϯδϯ͸HTML / XML Λύʔε
    • CSSΛύʔε͠ελΠϧϧʔϧΛ೺Ѳ
    • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛ഑ஔ
    • ඳըͷੜ੒
    -BZPVU
    1BSTF
    1BJOU
    

    View Slide

81. ϨϯμϦϯάΤϯδϯͷ໾ׂ
    • ϨϯμϦϯάΤϯδϯ͸HTML / XML Λύʔε
    • CSSΛύʔε͠ελΠϧϧʔϧΛ೺Ѳ
    • HTMLΛCSSϧʔϧʹج͍ͮͯදࣔΛ഑ஔ
    • ඳըͷੜ੒ʢϨΠϠʔ͝ͱʹੜ੒ͷޙɺ߹੒ʣ
    -BZPVU
    1BSTF
    1BJOU $PNQPTJUF
    -BZFST
    

    View Slide

82. JSͰΞχϝʔγϣϯͤ͞Δͱ…
    

    View Slide

83. JSͰΞχϝʔγϣϯͤ͞Δͱ…
    • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ
    • DOMπϦʔΛมߋ
    • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ
    • ϨΠΞ΢τΛੜ੒
    • ϨΠϠʔ͝ͱʹඳըΛੜ੒
    • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
    &WBMVBUF
    $BMDVSBUF
    4UZMFT
    -BZPVU BLBSFqPX
    
    1BJOU
    $PNQPTJUF-BZFST
    

    View Slide

84. Chrome DevtoolͷTimeLine
    https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
    

    View Slide

85. DEMO
    http://codepen.io/paulirish/full/nkwKs/
    http://codepen.io/paulirish/full/LsxyF/
    

    View Slide

86. ͭ·Γ
    • ҐஔͳͲ͚ͩΛಈ͔͢৔߹͸ CSS transform
    Λར༻͢Δͱ Composite Layers͚ͩͳͷͰૉ
    ૣ͘ऴྃ͢Δ
    

    View Slide

87. +4͔Β
    MFGUͳͲΛ
    มߋͨ͠৔߹
    

    View Slide

88. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    +BWB4DSJQUͷ࣮ߦ݁ՌΛ
    3FOEFSJOH&OHJOFʹ౉͢
    

    View Slide

89. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ
    

    View Slide

90. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ΍ΓऔΓΛ஥հ
    

    View Slide

91. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    σΟεϓϨΠʹ
    දࣔ͢Δ
    

    View Slide

92. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    +BWB4DSJQUͷ࣮ߦ݁ՌΛ
    3FOEFSJOH&OHJOFʹ౉͢
    

    View Slide

93. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ
    

    View Slide

94. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ΍ΓऔΓΛ஥հ
    

    View Slide

95. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    σΟεϓϨΠʹ
    දࣔ͢Δ
    

    View Slide

96. $44ͷ
    USBOTGPSNͰ
    มߋͨ͠৔߹
    

    View Slide

97. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ը໘ʹදࣔ͢ΔͨΊͷ
    ϨΠΞ΢τΛߏங͢Δ
    

    View Slide

98. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    ΍ΓऔΓΛ஥հ
    

    View Slide

99. ΢Σϒϒϥ΢βͷجຊߏ੒
    http://www.slideshare.net/quangntta/web-browser-architecture-49196378
    σΟεϓϨΠʹ
    දࣔ͢Δ
    

    View Slide

100. ΢Σϒϒϥ΢βͷجຊߏ੒
     http://www.slideshare.net/quangntta/web-browser-architecture-49196378
     ը໘ʹදࣔ͢ΔͨΊͷ
     ϨΠΞ΢τΛߏங͢Δ
     

     View Slide

101. ΢Σϒϒϥ΢βͷجຊߏ੒
     http://www.slideshare.net/quangntta/web-browser-architecture-49196378
     ΍ΓऔΓΛ஥հ
     

     View Slide

102. ΢Σϒϒϥ΢βͷجຊߏ੒
     http://www.slideshare.net/quangntta/web-browser-architecture-49196378
     σΟεϓϨΠʹ
     දࣔ͢Δ
     

     View Slide

103. ͭ·Γ
     • ҐஔͳͲ͚ͩΛಈ͔͢৔߹͸ CSS transform
     Λར༻͢Δͱ Composite Layers͚ͩͳͷͰૉ
     ૣ͘ऴྃ͢Δ
     • ͞Βʹ஗͍ΞχϝʔγϣϯΛੜΈग़͢ݪҼ͕
     ͋Δ
     

     View Slide

104. JSͰΞχϝʔγϣϯͤ͞Δͱ…
     • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ
     • DOMπϦʔΛมߋ
     • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ
     • ϨΠΞ΢τΛੜ੒
     • ϨΠϠʔ͝ͱʹඳըΛੜ੒
     • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
     &WBMVBUF
     $BMDVSBUF
     4UZMFT
     -BZPVU BLBSFqPX
     
     1BJOU
     $PNQPTJUF-BZFST
     

     View Slide

105. JSͰΞχϝʔγϣϯͤ͞Δͱ…
     • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ
     • DOMπϦʔΛมߋ
     • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ
     • ϨΠΞ΢τΛੜ੒
     • ϨΠϠʔ͝ͱʹඳըΛੜ੒
     • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
     &WBMVBUF
     $BMDVSBUF
     4UZMFT
     -BZPVU BLBSFqPX
     
     1BJOU
     $PNQPTJUF-BZFST
     ͜ͷͱ͖'PSDFE4ZODISPOPVT-BZPVUͱݺ͹ΕΔϨΠΞ΢τܭࢉॲཧ͕
     ૸Δͱ+4ͷ࣮ߦΛϒϩοΫͯ͠ϨΠΞ΢τܭࢉΛߦ͏ɻ
     ྫFMFNPGGTFU-FGUFMFNHFU$MJFOU3FDUT
     FMFNDMJFOU8JEUI
     ͜ΕΒͷ஋Λਖ਼͘͠஌Δʹ͸ݱࡏͷϨΠΞ΢τʹ͍ͭͯϨϯμϦϯάΤϯδϯ͕
     ܭࢉΛߦ͏ඞཁ͕͋ΔͷͰɺ͜ΕΒͷ஋Λ༻͍ͨ+4ΞχϝʔγϣϯΛهड़͢Δͱ
     ࣮ࡍͷϨϯμϦϯάͱ͸ผͰϨΠΞ΢τܭࢉ͕ਵ࣮࣌ߦ͞ΕΔͨΊ
     ඇৗʹ஗͘ͳͬͯ͠·͏
     

     View Slide

106. JSͰΞχϝʔγϣϯͤ͞Δͱ…
     • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ
     • DOMπϦʔΛมߋ (include Forced Synchronous Layout)
     • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ
     • ϨΠΞ΢τΛੜ੒
     • ϨΠϠʔ͝ͱʹඳըΛੜ੒
     • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
     

     View Slide

107. JSͰΞχϝʔγϣϯͤ͞Δͱ…
     • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ
     • DOMπϦʔΛมߋ (include Forced Synchronous Layout)
     w ϨΠΞ΢τΛੜ੒
     w ϨΠϠʔ͝ͱʹඳըΛੜ੒
     w ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
     w ϨϯμϦϯά݁Ռ͔Β஋Λฦ٫
     • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ
     • ϨΠΞ΢τΛੜ੒
     • ϨΠϠʔ͝ͱʹඳըΛੜ੒
     • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
     

     View Slide

108. DEMO
     https://googlesamples.github.io/web-fundamentals/
     tools/chrome-devtools/rendering-tools/forcedsync.html
     

     View Slide

109. ͜͜·Ͱ·ͱΊ
     

     View Slide

110. Question
     • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
     • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
     • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
     • ChromeͱOpera͸Կ͕ҧ͏ʁ
     

     View Slide

111. Question
     • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
     • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
     • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
     • ChromeͱOpera͸Կ͕ҧ͏ʁ
     $ISPNF 'JSFGPY *&
     0QFSB &EHFʜ
     

     View Slide

112. Chrome Opera Vivaldi
     Safari
     Firefox
     Internet Explorer
     Edge
     

     View Slide

113. Question
     • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
     • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
     • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
     • ChromeͱOpera͸Կ͕ҧ͏ʁ
     )5.-$44+4ͳͲΛ
     ཧղɺ࣮ߦɺදࣔΛߦ͏ɻ
     ·ͨͦΕΒͷͨΊʹඞཁͳ
     ௨৴ͳͲͷػೳ΋͋Δɻ
     

     View Slide

114. ΢Σϒϒϥ΢βͷجຊߏ੒
     http://www.slideshare.net/quangntta/web-browser-architecture-49196378
     

     View Slide

115. Question
     • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
     • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
     • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
     • ChromeͱOpera͸Կ͕ҧ͏ʁ
     ಺෦ར༻͍ͯ͠Δ
     Τϯδϯ͕ҟͳΔ
     

     View Slide

116. Chrome
     Safari
     Firefox
     Internet Explorer
     Edge
     #MJOL
     7
     8FCLJU
     +BWB4DSJQU
     $PSF
     5SJEFOU
     $IBLSB
     (FDLP
     4QJEFS
     .POLFZ
     &EHF)5.-
     $IBLSB
     ϨϯμϦϯάΤϯδϯ
     +4ΠϯλʔϓϦλ
     

     View Slide

117. Question
     • ΢Σϒϒϥ΢βͱݴ͑͹ʁ
     • ΢Σϒϒϥ΢β͸ԿΛ͢Δ΋ͷʁ
     • ChromeͱFirefoxԿ͕ҧ͏ͷʁ
     • ChromeͱOpera͸Կ͕ҧ͏ʁ
     ྆ํಉ͡$ISPNJVNΛ
     ϕʔεʹར༻͍ͯ͠Δ͕ɺ
     6*ͳͲ͕ҟͳΔ
     

     View Slide

118. Chrome Opera Vivaldi
     #MJOL
     7
     #MJOL
     7
     #MJOL
     7
     ڞ௨
     ҟͳΔ
     

     View Slide

119. Chrome Opera Vivaldi
     #MJOL
     7
     #MJOL
     7
     #MJOL
     7
     ಠࣗίϯϙʔωϯτͱͯ͠
     αΠυόʔ΍
     4QFFE%JBMͳͲ
     

     View Slide

120. Chrome Opera Vivaldi
     #MJOL
     7
     #MJOL
     7
     #MJOL
     7
     αΠυόʔ
     ΫΠοΫίϚϯυ
     εςʔλεόʔ ը໘Լ෦
     
     

     View Slide

121. JSͰΞχϝʔγϣϯͤ͞Δͱ…
     • JSΠϯλʔϓϦλ͕JavaScriptΛ࣮ߦ
     • DOMπϦʔΛมߋ
     • ϨϯμϦϯάΤϯδϯ͕ελΠϧΛ࠶ܭࢉ
     • ϨΠΞ΢τΛੜ੒
     • ϨΠϠʔ͝ͱʹඳըΛੜ੒
     • ϨΠϠʔΛ߹੒͠࠷ऴతͳϨϯμϦϯά݁ՌΛੜ੒
     &WBMVBUF
     $BMDVSBUF
     4UZMFT
     -BZPVU BLBSFqPX
     
     1BJOU
     $PNQPTJUF-BZFST
     

     View Slide

122. ͞Βʹৄ͘͠஌Γ͍ͨ৔߹
     • How browsers work - http://taligarsiel.com/Projects/
     howbrowserswork1.htm
     • ϒϥ΢βͷ಺෦ͰԿ͕ى͖͍ͯΔͷ͔ʹ͍ͭͯ
     • Demystifying (JavaScript) Engines - https://github.com/
     a0viedo/demystifying-js-engines
     • JavaScriptΤϯδϯͷ಺෦ߏ଄ʹ͍ͭͯཧղ͢ΔͨΊͷઆ
     ໌ɾؔ࿈࿦จͳͲ΁ͷϦϯΫू
     • ͦͷଞࢀߟURLͳͲ: http://bit.ly/pastak-shownote-20170217
     

     View Slide

123. ͓·͚
     ※͔͜͜Βઌ͸͕࣌ؒ༨͍ͬͯΕ͹஻Δ
     

     View Slide

124. ͓·͚τʔΫςʔϚू
     • Bug͔ͳʁͱࢥͬͨΒ
     • ϒϥ΢β֦ுʹ͍ͭͯ
     • ϒϥ΢βؔ࿈৘ใΩϟονΞοϓ
     • ඪ४Խͱϒϥ΢βϕϯμʔ
     •
     
     

     View Slide