Slide 1

Slide 1 text

஌͓͖͍ͬͯͨϒϥ΢β ʹ͍ͭͯͷجૅೖ໳ Pasta-K [email protected] at Supporterz Kyoto

Slide 2

Slide 2 text

@pastakɹ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

΢Σϒϒϥ΢β ʹ͍ͭͯ

Slide 8

Slide 8 text

΢Σϒϒϥ΢βͱ͸ʁ ΢Σϒϒϥ΢βʢΠϯλʔωοτϒϥ΢βɺ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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge

Slide 16

Slide 16 text

Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge

Slide 17

Slide 17 text

Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge Chromium

Slide 18

Slide 18 text

Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge Chromium

Slide 19

Slide 19 text

Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge Chromium Webkit

Slide 20

Slide 20 text

Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

.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/

Slide 42

Slide 42 text

.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/ ΢Σϒϒϥ΢β ͷྺ࢙

Slide 43

Slide 43 text

ʙ

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

͜ͷগ͠લʜ 2013/02

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Chrome Opera #MJOL 7 #MJOL 7

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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ΠϯλʔϓϦλ

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Chrome Opera Vivaldi #MJOL 7 #MJOL 7 #MJOL 7

Slide 62

Slide 62 text

Chrome Opera Vivaldi #MJOL 7 #MJOL 7 #MJOL 7

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

Chrome Safari Firefox Internet Explorer Edge

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

͞Βʹৄ͘͠ ݟͯΈΑ͏

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

$44ͷ USBOTGPSNͰ มߋͨ͠৔߹

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

͜͜·Ͱ·ͱΊ

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

Chrome Opera Vivaldi Safari Firefox Internet Explorer Edge

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

͞Βʹৄ͘͠஌Γ͍ͨ৔߹ • 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

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

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