Web標準でつくるガラケーサイト

by Mariko Kosaka

Slide 1

Slide 1 text

͜ͷεϥΠυ͸ྩ࿨ݩ೥5 ݄18೔ʹ౦ژͰ։࠵͞Εͨ Inside Frontend #3Ͱൃදͨ͠ࢿྉʹ ؆୯ͳઆ໌Λ௥Ճͨ͠΋ͷͰ͢ɻ    ͳʹ͔࣭໰͕͋Ε͹TwitterͰ@kosamri·ͰͲ͏ͧɻ

Slide 2

Slide 2 text

͜Μʹͪ͸ʂ͜͞·ΓͰ͢ɻ  Chrome ͷweb developer ecosystem νʔϜͰಇ͍͍ͯ·͢ɻ

Slide 3

Slide 3 text

ࠓ೔͸ջ͔͍͠Ψϥέʔͷ࿩Λ͠ʹ͖·ͨ͠ɻ Ψϥέʔͱ͍ͬͯ΋ੲͷέʔλΠͰ͸ͳͯ͘ɺࠓɺੈք֤ࠃͰ࣮ࡍʹചΒΕ͍ͯΔʮε ϚʔτϑΟʔνϟʔϑΥϯʯͷ࿩Ͱ͢ɻ

Slide 4

Slide 4 text

࠷ۙKaiOSͱ͍͏΢Σϒٕज़ϕʔεͰ࡞ΒΕͨOSΛ౥ࡌ͍ͨ͠ΘΏΔʮΨϥέʔʯ͕ੈք ֤ࠃͰൃച͞Ε͍ͯ·͢ɻ ϒϥ΢β΋ͪΐͬͱݹ͍όʔγϣϯͰ͕͢Ϟμϯͳ΋ͷ͕౥ࡌ͞Ε͓ͯΓɺAppετΞ΋ ౥ࡌ͍ͯ͠·͋͢ɻ

Slide 5

Slide 5 text

ͪͳΈʹcounterpoint research͸ࠓޙ3೥ؒͰ3ԯ7ઍສ୆ͷεϚʔτϑΟʔνϟʔϑΥϯ͕ ൃച͞ΕΔͱ༧૝͍ͯ͠·͢ɻ

Slide 6

Slide 6 text

ιϑτ΢ΣΞ͸·͘͞͠εϚʔτϑΥϯͷΑ͏Ͱ͕͢ɺϋʔυ΢ΣΞ͸΍ͬͺΓΨϥέʔ ͱಉ͡Ͱ͢ɻ

Slide 7

Slide 7 text

͜ͷεϚʔτϑΟʔνϟʔϑΥϯͰ΢Σϒϒϥ΢δϯάΛ͢ΔͱͲ͏ݟ͑ΔͰ͠ΐ͏͔ʁ

Slide 8

Slide 8 text

Inside Frontend ͷαΠτ͸ଟ෼minimum width͕240pxΑΓେ͖͍ͷ͔ɺϩΰ͕ը໘͔Β ᷓΕ͍ͯ·͢ɻ

Slide 9

Slide 9 text

Squoosh͸ڈ೥ࢲͷνʔϜͰ࡞ͬͨΞϓϦͰɺʮҰ൪ྑ͘Ͱ͖ͨ΢ΣϒΞϓϦΛʯ໨ࢦ͠ ͯ৭ʑͳσόΠεͰςετΛ͠ɺϩʔσΟϯάվળ΋͠·͕ͨ͠ɺqvgaͷεΫϦʔϯαΠ ζ͸ߟ͍͑ͯͳ͔ͬͨͷͰɺCSS่Ε͕͓͖͍ͯ·͢ɻ

Slide 10

Slide 10 text

εϚʔτϑΟʔνϟʔϑΥϯͰϒϥ΢δϯά͢Δͱ࢖͍ʹ͍͘΢ΣαΠτ͹͔ΓͰ͕͢ɺ ͖ͪΜͱ࢖͑ΔαΠτ΋͋Γ·͢ʂ Twitter͕ྑ͍ྫͰɺmobile.twitter.comͰ࢖͑Δػೳ͸͢΂ͯεϚʔτϑΟʔνϟʔϑΥϯ Ͱ΋࢖͑·͢ɻ

Slide 11

Slide 11 text

KaiOSʹಛԽͨ͠ΞϓϦΛ࡞Ε͹ྑ͍ͱࢥ͏͔΋͠Ε·ͤΜ͕ɺΠϯυͳͲͰ͸ܞଳΩϟ ϦΞ͕AppετΞΛѲ͍ͬͯͯɺ͔ͭಠࣗͷಈը΍ECαʔϏεΛ͓࣋ͬͯΓɺڝ߹͢Δ αʔϏεͩͱAppετΞʹ৐Εͳ͍Մೳੑ͕͋Γ·͢ɻͱ͍͏͜ͱ͸ɺҰ෦ͷαʔϏεɾ ϏδωεͰ͸ࠓޙ΢ΣϒαΠτͱͯ͠ఏڙ͢Δ͜ͱ͕ॏཁʹͳΔ͔΋͠Ε·ͤΜɻ

Slide 12

Slide 12 text

ͱ͜ΖͰઌఔChrome ͷweb developer ecosystem νʔϜͰಇ͍͍ͯΔͱݴ͍·͕ͨ͠ɺ ͦͷதͰ΋ʮ࣮ࡍʹ΢ΣϒΞϓϦΛ࡞ͬͯΈΔʯαϒνʔϜʹॴଐ͍ͯ͠·͢ɻ

Slide 13

Slide 13 text

͜ͷνʔϜͰͷ࠷ॳͷϓϩδΣΫτ͸ڈ೥࡞ͬͨSquooshͱ͍͏ΞϓϦͰ͢ɻWasmΛ ࢖ͬͯϒϥ΢β಺Ͱը૾ѹॖ΍ϑΥʔϚοτม׵Λߦ͍·͢ɻ

Slide 14

Slide 14 text

νʔϜͰ࣍ͷϓϩδΣΫτΛߟ͑ͨ࣌ʹʮήʔϜ࡞Ζ͏Αʂʯͱ͍͏࿩ʹͳΓ·ͨ͠ɻ

Slide 15

Slide 15 text

৭ʑͳਓʹʮwebͬͯԿ͕ಘҙͰ͔͢ʁʯͱฉ͘ͱ͍͍ͨͯʮυΩϡϝϯτʯͱ͍͏౴͑ ͕ฦͬͯ͘ΔͷͰਅٯͷ՝୊ʹτϥΠͯ͠Έ͔ͨͬͨͷͱɺήʔϜΛ࡞Δ͜ͱͰ΢Σϒα ΠτͰྑ͘௚໘͢Δ՝୊΋ࢼͤΔͱࢥ͔ͬͨΒͰ͢ɻ

Slide 16

Slide 16 text

ྫ͑͹Ϣʔβʔ͔Βinput͕͍ͬͺ͍དྷͨΒͲ͏΍ͬͯॲཧ͢Ε͹͍͍ͩΖ͏…ͱ͔

Slide 17

Slide 17 text

΢ΣϒαΠτͰΞχϝʔγϣϯΛΰϦΰϦಈ͔͢͜ͱͬͯग़དྷΔ͔ͳ…ͱ͔Ͱ͢ɻ

Slide 18

Slide 18 text

ߋʹεϚʔτϑΟʔνϟʔϑΥϯ͕ࠓޙདྷΔ(͔΋)ͱ͍͏࿩্͕͕͍ͬͯͨͷͰɺσεΫ τοϓ͔ΒϑΟʔνϟʔϑΥϯ·Ͱ͢΂ͯͷσόΠεʹରԠ͢Δ͜ͱʹ͠·ͨ͠ɻ

Slide 19

Slide 19 text

࡞ͬͨΞϓϦ͸PROXXͱ͍͏ΞχϝʔγϣϯΛଟ༻ͨ͠ϚΠϯεΠʔύʔͷΫϩʔϯͰ ͢ɻ஍ཕͷ୅ΘΓʹʮӉ஦ͰϒϥοΫϗʔϧΛආ͚Δʯͱ͍͏ήʔϜઃఆʹ͍ͯ͠·͢ɻ

Slide 20

Slide 20 text

Ͱ͸ɺ࣮ࢪʹͲ͏΍ͬͯ࡞ͬͨݟ͍͖ͯ·͠ΐ͏ɻ

Slide 21

Slide 21 text

νʔϜͷεϖοΫͱͯ͠͸͜Μͳײ͡Ͱ͢ɻ ΞΫηγϏϦςΟͱϑΟʔνϟʔϑΥϯ୲౰ɺWebGL୲౰ɺϕʔεͷ΢ΣϒΞϓϦ୲౰ͱ ͍ͬͨͬ͘͟Γͨ͠໾ׂ෼୲Λ͠·ͨ͠ɻ

Slide 22

Slide 22 text

·ͨɺϓϩδΣΫτΛߦ͏ʹ͋ͨͬͯϝϯόʔͰԿΛେࣄʹ͢Δͷ͔Λ֬ೝ͠·ͨ͠ɻ

Slide 23

Slide 23 text

ϕʔεͷߏ੒Λݟ͍͖ͯ·͢ɻ

Slide 24

Slide 24 text

ίʔυϕʔε͸ͬ͘͟Γͱ͜Μͳײ͡ͰผΕ͍ͯ·͢ɻήʔϜϩδοΫ͸ήʔϜͷαΠζ ΍ϒϥοΫϗʔϧͷҐஔܭࢉͳͲUIϨΠϠʔͱ͸׬શʹ෼཭ͯ͋͠Γɺ͜ͷήʔϜϩδο ΫʹStateαʔϏεͱ͍͏؆୯ͳϥούʔΛט·ͤͯUIͱ࿈ܞ͍ͤͯ͞·͢ɻޙ΄Ͳ৮Ε· ͕͢ඳըॲཧͷͱ͜Ζ΋෼͚ͯ͋Γ·͢ɻ

Slide 25

Slide 25 text

͜ΕΒΛશ෦ϝΠϯεϨουͰӡ༻ͯ͠΋ྑ͍ͷͰ͕͢ɺ͸͡Ί͔ΒΞχϝʔγϣϯΛΰ ϦΰϦಈ͔͍ͨ͠ͱߟ͍͑ͯͯɺશ෦ϝΠϯεϨουͰಈ͔͢ͷ͸ਏ͍ͱߟ͑ͯ…

Slide 26

Slide 26 text

ήʔϜϩδοΫͱstateαʔϏε͸WebWorker΁Θ͚·ͨ͠ɻ

Slide 27

Slide 27 text

Web Worker͸JavaScriptΛϒϥ΢βͷϝΠϯεϨουͱ͸ผͷεϨουͰಈ͔͢͜ͱ͕Ͱ ͖Δ࢓૊ΈͰɺpost messageΛ࢖ͬͯεϨουؒͷ΍ΓऔΓΛ͠·͕͢ɺਖ਼௚࢖͍ʹ͍͘ Ͱ͢ɻ

Slide 28

Slide 28 text

ϥοΩʔͳ͜ͱʹνʔϜϝϯόʔͷSurma͕Comlinkͱ͍͏post message Λந৅Խͨ͠ϥ ΠϒϥϦΛ࡞͍ͬͯΔͷͰ࠾༻͠·ͨ͠ɻWeb Worker͕͍͍ײ͡ʹ͔ͭ͑ͯ࠷ߴͰ͢ɻ

Slide 29

Slide 29 text

ͥͻ࢖ͬͯΈ͍ͯͩ͘͞ɻ

Slide 30

Slide 30 text

UIʹ͍ͭͯ͸PreactͰ࡞͍ͬͯ·͢ɻνʔϜͰ࢖ͬͨܦݧ͕͋ͬͨͷͱɺτʔλϧͷαΠ ζ͕ଞʹൺ΂ͯখ͍͔͞ΒͰ͢ɻ

Slide 31

Slide 31 text

͍ΘΏΔdivʹશ෦render()ͯ͠ɺbodyʹappend͢Δͱ͍͏γϯάϧϖʔδΞϓϦέʔ γϣϯߏ੒Ͱ͕͢ɺͦͷ··ΫϥΠΞϯτʹૹΔͷͰ͸ͳ͘ɺϏϧυ͢Δͱ͖ʹ PuppeteerΛ࢖ͬͯpre-renderΛߦ͍ͬͯ·͢ɻ

Slide 32

Slide 32 text

Puppeteer͸headless chromeΛεΫϦϓτͰಈ͔͢ϥΠϒϥϦͰ͢ɻ PuppeteerͰΞΫηεͯ͠ϨϯμϦϯά͞ΕͨHTMLͷ݁ՌΛindex.htmlʹॻ͖ࠐΜͰ͍· ͢ɻ

Slide 33

Slide 33 text

͓ͦΒ͘ύϑΥʔϚϯε໘ͰҰ൪ޮՌ͕͋ͬͨͷ͸ΞϓϦͰඳըॲཧΛͨ͜͠ͱͰ͢ɻ

Slide 34

Slide 34 text

࠷ॳ͸TableʹϘλϯΛฒ΂ͯɺGPUΛ࢖͏CSSΞχϝʔγϣϯͰ࣮૷͠Α͏ͱߟ͍͑ͯͨ ͷͰ͕͢…  

Slide 35

Slide 35 text

͢΂͕ͯ1ϨΠϠʔʹ͋ΔͱɺϘλϯͻͱͭΛผͷ৭ʹม͑Δ͚ͩͰtableશମ͕paint͞Ε Δͱ͍͏Chromeͷόάʹૺ۰͠·ͨ͠

Slide 36

Slide 36 text

͜͏͍ͬͨ৔߹ͷղܾࡦͱͯ͠͸ϨΠϠʔΛ෼͚Δͱ͍͏ॲཧ͕͋Γ·͢ɻ

Slide 37

Slide 37 text

ϒϥ΢βͷϨϯμϦϯά͸Compositͱ͍ΞΠσΞΛ࠾༻͓ͯ͠Γɺޙʑಈ͍ͨΓopacity ͕มΘͬͨΓ͢Δཁૉ͸ϨΠϠʔʹผ͚͓ͯ͘ͱϨϯμϦϯά͕ૣ͘ͳΓ·͢ɻ

Slide 38

Slide 38 text

DevToolsͰ΋LayerύωϧͰͲͷཁૉ͕ϨΠϠʔʹผΕ͍ͯΔ͔֬ೝ͢Δ͜ͱ͕Ͱ͖·͢ɻ

Slide 39

Slide 39 text

ϨΠϠʔʹ෼͚Ε͹Paintͷόά͸ճආͰ͖ΔͷͰ͕͢ɺࠓճ͸ϘλϯͻͱͭͻͱͭʹϨΠ ϠʔΛ͚ͭΔͱϨΠϠʔ͕૿͑͗ͯ͢ٯʹϝϞϦͷํͰ໰୊ʹͳΔͷͰɺ͜ͷํ๏͸ݟૹ Γ·ͨ͠ɻ

Slide 40

Slide 40 text

ϒϥ΢βʹඳըΛ͓·͔͔ͤͨͬͨ͠ͷͰ͕͢ɺύϑΥʔϚϯε໘Ͱ೉͜͠ͱ͕Θ͔ͬͨ ͋ͷͰɺࣗ෼ͨͪͰCanvasʹඳը͢Δ͜ͱʹ͠·ͨ͠ɻ

Slide 41

Slide 41 text

࣮ࡍ͸όοΫάϥ΢ϯυͷCanvasͱάϦουͷCanvasͱ͍͏2ͭͷCanvasΛॏͶ͍ͯ· ͢ɻ(͜Ε͸ࠓޙ1ͭʹϚʔδ͢Δ༧ఆͰ͢)

Slide 42

Slide 42 text

͜ΕΒΛrequestAanimationFrameΛ࢖ͬͯΞχϝʔγϣϯ͍ͤͯ͞·͢ɻ

Slide 43

Slide 43 text

requestAnimationFrame͸ϒϥ΢β͕֤ϑϨʔϜΛߋ৽͢ΔλΠϛϯάͰcall backͰ౉͠ ͨεΫϦϓτΛ࣮ߦͯ͘͠ΕΔAPIͰ͢ɻ Ξχϝʔγϣϯͷ৔߹͸࠶ىతʹͰݺͼग़͢͜ͱͰຖϑϨʔϜ͝ͱʹඳըίϚϯυΛ࣮ߦ ͠·͢ɻ

Slide 44

Slide 44 text

͜ͷลʹ͍ͭͯ΋ͬͱ஌Γ͍ͨਓ͸ɺϒϥ΢β͸Ͳ͏΍ͬͯಈ͍͍ͯΔͷ͔ௐ΂ͨهࣄΛ ॻ͍ͨͷͰͥͻࢀߟʹ͍ͯͩ͘͠͞ɻ

Slide 45

Slide 45 text

ඳըͰ͸ͦͷଞʹ΋͍͔ͭ͘ରࡦΛ͠·ͨ͠ɻ

Slide 46

Slide 46 text

όοΫάϥ΢ϯυͷΞχϝʔγϣϯ͸ݩʑϘέͨσβΠϯͩͬͨͷͰ1/5ͷαΠζͰ࡞੒͠ Ҿ͖ͷ͹ͯ͠(ͦΕͰ΋શવOK)͍·͢ɻ ֤ηϧͷΞχϝʔγϣϯ͸εϓϥΠτΛ࡞੒͓ͯ͠ΓɺΫϥΠΞϯταΠυͰੜ੒ͨ͠΋ ͷΛindexed DBʹอଘ͍ͯ͠·͢ɻʢը૾͸Ұ੾αʔόʔ͔ΒૹΓ·ͤΜʣ

Slide 47

Slide 47 text

ΞΫηγϏϦςΟʹ͍ͭͯ΋ؤுͬͯରԠ͠·ͨ͠ɻ

Slide 48

Slide 48 text

ϏδϡΞϧ͚ͩߟ͑Ε͹ɺCanvasͰήʔϜΛ࡞Δ͜ͱ͸ग़དྷΔͷͰ͕͢ɺ͜ΕͩͱεΫ ϦʔϯϦʔμʔରԠ౳͕େมͰ͢ɻ

Slide 49

Slide 49 text

ͦͷͨΊɺ࣮͸tableͱbuttonͷHTMLཁૉϨΠϠʔΛಁ໌ͰॏͶ͍ͯ·͢ɻ

Slide 50

Slide 50 text

HTMLཁૉΛ৐ͤΔ͜ͱͰɺཁૉʹϑΥʔΧεͨ͠Γ֤Ϙλϯʹevent listnersΛ͚ͭͨΓ ͢Δ͜ͱ͕Ͱ͖ͯศརͰ͢ɻ

Slide 51

Slide 51 text

ϒϥ΢β͸HTMLͷཁૉʹͨ͘͞ΜͷΞΫηγϏϦςΟػೳ͕ೖ͍ͬͯΔͷͰͦͷԸܙʹ ༬͔͍ͬͯ·͢ɻ

Slide 52

Slide 52 text

εΫϦʔϯϦʔμʔͰΞΫηε͢Δͱ”hidden”ͷ෦෼͚͕ͩࢲୡͷίʔυͰ͚ͭͨlabel ͰɺͦͷଞͷҐஔ৘ใ౳͸શ෦ϒϥ΢β͕ఏڙͯ͘͠Ε·ͨ͠ɻ

Slide 53

Slide 53 text

TableཁૉΛ࢖͍ͬͯΔͷͰrole=gridΛઃఆ͢Δ͜ͱͰࠓfocusͷ͋ΔηϧͷҐஔΛಡΈ্ ͛ͯ͘ΕΔΑ͏ʹͳΓ·͢ɻ

Slide 54

Slide 54 text

…ຊ౰͸role=gridΛೖΕΔ͚ͩͰରԠͯ͘͠ΕΔ͸ͣͳͷͰ͕͢ɺϒϥ΢β͕͏·͘ೝࣝ ͯ͘͠Εͳ͔ͬͨͷͰrole=rowͱrole=gridcell΋arrtibuteʹॻ͖ࠐΜͰ͍·͢ɻ

Slide 55

Slide 55 text

ήʔϜͷάϦουʹ͸roving tabindexͱ͍͏ख๏Λ࠾༻͠·ͨ͠ɻ

Slide 56

Slide 56 text

Ϙλϯ͕ͨ͘͞ΜฒΜͰ͍ΔͷͰɺͦͷ··ͩͱΩʔϘʔυૢ࡞Ͱ͢΂ͯͷϘλϯʹ ϑΥʔΧε͔ͯ͠ΒͰͳ͍ͱάϦου֎ͷϘλϯ΍ϦϯΫʹ౸ୡͰ͖·ͤΜɻ

Slide 57

Slide 57 text

ͦ͜ͰάϦουͷதͰϑΥʔΧεͰ͖ΔϘλϯ(tablindex=0)͸Ұ͚ͭͩͰͦͷଞ͸ϑΥʔ ΧεͰ͖ͳ͍Α͏ʹͯ͠໼ҹΩʔͰૢ࡞ͨ࣌͠ʹ0ͱ-1ͷҐஔΛͣΒ͍ͯ͠·͢ɻ

Slide 58

Slide 58 text

͜͏͢Δ͜ͱͰTabΛҰճԡͤ͹ϑΥʔΧεΛάϦου֎ʹग़͢͜ͱ͕ग़དྷΔΑ͏ʹͳΓ ·͢ɻ

Slide 59

Slide 59 text

ϑΥʔΧεϦϯάʹ͍ͭͯ͸ʮϚ΢εૢ࡞ͷਓʹ͸ݟͤͨ͘ͳ͍ɺͰ΋ΩʔϘʔυૢ࡞ͷ ਓʹ͸ग़͍ͨ͠ʯͱ͍͏෦෼ͷ࣮૷ʹɺfocus-visibleͷpolyfilΛ࢖͍ͬͯ·͢ɻ

Slide 60

Slide 60 text

ΞΫηγϏϦςΟʹ͍ͭͯ͸web.devʹνϡʔτϦΞϧ͕͋ΔͷͰݟͯΈ͍ͯͩ͘͞ɻ

Slide 61

Slide 61 text

ϓϩδΣΫτ൒͹Ͱ͸σεΫτοϓͱKaiOSͰςετ͓ͯ͠Γ͏·͘ಈ͍͍ͯͨͷͰ͕͢ ϩʔεϖοΫͳAndroidεϚϗͰ͸ಈ͔ͳ͍ͱ͍͏ࣄଶʹ௚໘͠·ͨ͠ɻ

Slide 62

Slide 62 text

ͦ΋ͦ΋ϑΟʔνϟʔϑΥϯ͸ඇྗͳϋʔυ΢ΣΞͰ΋ಈ͔͢ϐΫηϧͷ਺͕ݶΒΕ͍ͯ ΔͷͰ͋Δఔ౓ಈ͖·͢ɻ ͜Ε͕εϚʔτϑΥϯʹͳΔͱɺͪΐͬͱྑ͍ϋʔυͰ΋ಈ͔͢ϐΫηϧ਺͕਺ഒʹͳ ΓɺΪϒΞοϓͯ͠͠·͍·͢ɻ

Slide 63

Slide 63 text

ݩʑΞΫηγϏϦςΟͰprefers reduced motionରԠͷͨΊΞχϝʔγϣϯແ͠ͷόʔ δϣϯ΋࡞Δඞཁ͕͋ͬͨͷͰɺͦΕΛ࢖ͬͯඇྗͳσόΠεʹ͸࠷ॳ͔ΒΞχϝʔγϣ ϯແ͠Ͱग़͢Α͏ʹ͠·ͨ͠ɻhighp fragment shader͕࢖͑Δ͔Ͱ൑அ͍ͯ͠·͢ɻ

Slide 64

Slide 64 text

Inputʹ͍ͭͯ΋σόΠεʹΑ༷ͬͯʑͳ΋ͷʹରԠ͍ͯ͠·͢ɻ

Slide 65

Slide 65 text

ʮΫϦοΫͯ͠ηϧΛ։͚ΔʯͱʮηϧʹϑϥάΛཱͯΔʯͱ͍͏2ͭͷίΞૢ࡞ΛσόΠ εʹΑͬͯ৭ʑͳํ๏Ͱఏڙ͍ͯ͠·͢ɻ

Slide 66

Slide 66 text

ͨͩ͠ύϑΥʔϚϯεΛߟ͑ͨ࣌ʹݟૹͬͨUX΋༗Γ·͢ɻPinch Zoom͸ϒϥ΢βඪ४ ͷεΫϩʔϧΛ࠾༻͢ΔͨΊʹݟૹΓ(εΫϩʔϧʹ଎͘൓Ԡ͢Δ͜ͱΛ༏ઌ)ɺμϒϧλο ϓ͸ͨͱ͑γϯάϧλοϓͰ΋μϒϧλοϓ͔Ͳ͏͔ͷ֬ೝͷͨΊʹ଴ͨͳͯ͘͸͍͚ͳ ͍ͷͰݟૹΓ·ͨ͠ɻ

Slide 67

Slide 67 text

͞ΒʹɺϑΟʔνϟʔϑΥϯͰ͸͜ΕΒͷૢ࡞͕࢖͑ͳ͍ͷͰ…

Slide 68

Slide 68 text

਺ࣈΩʔʹΞΫγϣϯΛׂΓ౰ͯΔ͜ͱͰରԠ͠·ͨ͠ɻ  ͦͷଞʹ΋ϑΟʔνϟʔϑΥϯ޲͚ͷσβΠϯΛ͍͔ͭ͘ఏڙ͍ͯ͠·͢ɻ

Slide 69

Slide 69 text

Ϛ΢ε΋͋ΔͷͰ͕͢ɺը໘͕খ͘͞ήʔϜதʹͲͷηϧ͕ࠓબ୒͞Ε͍ͯΔͷ͔ݟͮΒ ͍ͷͰɺখ͍͞ը໘ͷ৔߹͸ϑΥʔΧεΛݟ͑ΔΑ͏ʹ͍ͯ͠·͢ɻΞΫηγϏϦςΟͰ ΩʔϘʔυૢ࡞ରԠͰ࡞ͬͨ෺ΛqvgaαΠζͷը໘ʹ͸σϑΥϧτͰग़͢Α͏ʹͳ͍ͬͯ ·͢ɻ

Slide 70

Slide 70 text

աڈͷΨϥέʔαΠτΛࢀߟʹͯ͠ɺΩʔૢ࡞ͷΨΠυ΋දࣔͤ͞·ͨ͠ɻ

Slide 71

Slide 71 text

Ϣʔβʔ͕සൟʹ࢖͏ػೳʹ͍ͭͯ͸γϣʔτΧοτΛ͚͍ͭͯ·͢ɻ(ʮμΠΞϩάΛด ͡ΔʯͳͲ)

Slide 72

Slide 72 text

͜ͷγϣʔτΧοτ͕ແ͍ͱɺ௕͍μΠΞϩάΛಡΜͰ͍Δ࣌ʹɺด͡Δʹ͸ʮͣʔͬͱ ্·ͰεΫϩʔϧ͔ͯ͠ΒॳΊͯ✗ϘλϯΛΫϦοΫͰ͖Δɻʯͱ͍ͬͨΠέ͍ͯͳ͍UX ʹͳͬͯ͠·͍·͢ɻ

Slide 73

Slide 73 text

PWAͳͷͰServiceWorkerΛ͔ͭͬͯΦϑϥΠϯΞΫηεʹରԠ͍ͯ͠·͢ɻ

Slide 74

Slide 74 text

Ξοϓσʔτ͕͋ͬͨ࣌ʹʮϦϩʔυ͍ͯͩ͘͠͞ʯͱ͍Ξφ΢ϯεΛग़͢͜ͱ͕ଟ͍Ͱ ͕͢ɺࠓճ͸ήʔϜͳͷͰɺͰ͖Δ͚ͩϢʔβʔͷʮήʔϜΛ͍ͨ͠ʯॠؒΛःΒͳ͍Α ͏ʹ…

Slide 75

Slide 75 text

ελʔτϘλϯͷதʹΞοϓσʔτͷϩδοΫΛຒΊࠐΈ·ͨ͠ɻ

Slide 76

Slide 76 text

ελʔτͨ࣌͠ʹ৽͍͠όʔδϣϯ͕͋Ε͹औ͖ͬͯͯΠϯετʔϧ͠ɺ׬ྃͨ͠Β௚઀ ήʔϜը໘ͷදࣔΛ͠·͢ɻͭ·ΓɺϢʔβʔ͕͜ͷήʔϜը໘ʹߦ͖ண͘ͱ͖ʹ͸͢Ͱ ʹ৽͍͠όʔγϣϯ͕දࣔ͞ΕΔ࢓૊ΈͰ͢ɻ

Slide 77

Slide 77 text

ϩʔσΟϯάʹ͍ͭͯ͸݁ߏ৻ॏʹରԠ͠·ͨ͠ɻ

Slide 78

Slide 78 text

·ͣ࠷ॳʹૹΒΕΔindex.html͸20kbɺ͜Ε͸Ұ൪࠷ॳʹϢʔβʔ͕઀͢Δ΋ͷશ෦͕ ೖ͍ͬͯ·͢ɻ

Slide 79

Slide 79 text

ͭ·Γ͜ͷը໘…

Slide 80

Slide 80 text

…͍΍ɺΞχϝʔγϣϯ͸lazy load͢ΔͷͰ͜ͷը໘Ͱ͢ɻ  ΢ΣϒϑΥϯτΛ࢖͍ͬͯ·͕͢ɺ࢖͍ͬͯΔΞϧϑΝϕοτ͚ͩαϒηοτͯ͠ɺΠϯ ϥΠϯͰindex.htmlʹຒΊࠐΜͩΓ͍ͯ͠·͢ɻ

Slide 81

Slide 81 text

ͦͷଞඞཁʹͳΔίʔυ͸͢΂ͯޙ͔Β෼͚ͯૹΓ·͢ɻ

Slide 82

Slide 82 text

ࠓճ͸RollupΛ࠾༻͠·ͨ͠ɻ

Slide 83

Slide 83 text

ͱ͍͏ͷ΋ɺComlink͕ڞ௨dependencyͱͯ͋͠ΔͷͰ͕͢…

Slide 84

Slide 84 text

webpackͩͱಉ͡ίʔυͳͷʹ2ͭͷchunkͱͯ͠ѻΘΕͯ͠·͍·͢ɻ

Slide 85

Slide 85 text

͋ͱ, webpack͸νʔϜͰ΋͍·͍ͪ௫Ίͳͯ͘ɺӡ༻͕ਏ͔ͬͨܦݧ͕͋ΔͷͰࠓճ͸ ύε͠·ͨ͠ɻ

Slide 86

Slide 86 text

RollupͰ͸࠷ॳ͔Β1ͭͷchunkͱͯ͠ѻͬͯ͘ΕΔͷͰσʔλͷ࡟ݮ͕Ͱ͖Δͷͱɺ

Slide 87

Slide 87 text

ϓϥάΠϯͷγεςϜ͕Θ͔Γ΍͘͢ɺϓϩδΣΫτʹ߹ͬͨߏ੒ʹͳΔΑ͏ʹࣗ৴Λ ΋ͬͯΧελϚΠζ͕Ͱ͖·ͨ͠ɻ

Slide 88

Slide 88 text

ͪͳΈʹworkerͰ͸JSϞδϡʔϧ͕·ͩ࢖͑ͳ͍ͷͰɺRollupͷΞ΢τϓοτʹ͋Θͤͨ AMDϩʔμʔͷΑ͏ͳ΋ͷΛ࢖͍ͬͯ·͢ɻ͜Ε΋ϓϥάΠϯͱͯ͠࡞Γ·ͨ͠ɻ

Slide 89

Slide 89 text

πʔϧ͚ͩͰ͢΂ͯղܾͰ͖Δ෺Ͱ΋ͳ͘ɺ݁ߏ৻ॏʹϩʔσΟϯάվળʹ͸औΓ૊Έ· ͨ͠ɻ

Slide 90

Slide 90 text

ྑ͚Ε͹͜ͷϓϧϦΫΛݟͯΈ͍ͯͩ͘͞ɻ

Slide 91

Slide 91 text

ྫ͑͹ήʔϜͷ্ʹ͋ΔτοϓόʔͰ͕͢ɺ

Slide 92

Slide 92 text

λΠϚʔͳͲϞϦϞϦͷػೳ͕ೖ͍ͬͯΔͷʹɺτοϓϖʔδͰ͸ͦ͏͍ͬͨػೳ͸Ұ੾ ඞཁͳ͍ͨͩͷϩΰόφʔͰ͢ɻ

Slide 93

Slide 93 text

ͦ͜Ͱશ෦੝Γͷίϯϙʔωϯτͱόφʔ͚ͩͷγϯϓϧίϯϙʔωϯτʹ෼͚ͯɺ࠷ॳ ʹૹΔϑΝΠϧαΠζͷ࡟ݮΛ͠·ͨ͠ɻ

Slide 94

Slide 94 text

ͪͳΈʹϓϧϦΫΛૹΔ͝ͱʹTravisͰαΠζϨϙʔτͷεΫϦϓτΛಈ͔ͯ͠ɺϑΝΠϧ ໊΍αΠζมߋͷ֬ೝΛߦ͍ͬͯ·͢ɻ

Slide 95

Slide 95 text

࠷ޙʹɺࠓճͷܦݧͯ͠ษڧʹͳͬͨ͜ͱ͸Ҏ্ͷ3఺Ͱ͢ɻϓϩδΣΫτͰԿΛ༏ઌ͢Δ ͷ͔ܾΊͨ͜ͱͰɺσβΠϯͷΞΠσΞ(μϒϧλοϓͱ͔)͕ग़ͯ΋ͲͪΒ͕ྑ͍͔ݴ͍߹ ͏͜ͱͳ͙͘͢ʹҙࢥܾఆ͕Ͱ͖·ͨ͠ɻ·ͨweb workerແ͠Ͱ͸௿εϖοΫͳϩʔΤϯ υσόΠεͰಈ͘ήʔϜΛͭ͘Δ͜ͱ͸೉͔ͬͨ͠ͱײ͍ͯ͡·͢ɻ

Slide 96

Slide 96 text

ͨͩྑ͘πΠολʔͰʮ͜ΜͳΞϓϦ͕࡞ΕΔͷ͸ϒϥ΢βϕϯμʔʹॴଐ͍ͯ͠Δνʔ Ϝ͚ͩͩʯͱݴΘΕΔͷͰ͕͢ɺผʹͳʹ͔ಛผͳ͜ͱΛ͍ͯ͠ΔΘ͚Ͱ΋ϒϥ΢βΤϯ δχΞ͕ಛผͳຐ๏Λ͔͚ͯ͘ΕͨΘ͚Ͱ΋͋Γ·ͤΜɻ

Slide 97

Slide 97 text

ڧ͍ͯݴ͏ͳΒɺνʔϜͷҙࣝͱͯ͠ʮΤϯδχΞ͕࡞Γ΍͍͢ɾσβΠϯ͕දݱ͠΍͢ ͍ʯΑΓ΋ʮϢʔβʔ͕࢖͍΍͍͢ʯΛѹ౗తʹ༏ઌͯ͠ҙࢥܾఆΛ͍ͯ͠·͢ɻ  ͦ͏͍͏ҙࣝΛࣗવͱ࣋ͯΔจԽ͕͋Δͷ͸͋͋Γ͕͍ͨͰ͢ɻ

Slide 98

Slide 98 text

ͱ͍ͬͯ΋ࣄۀձࣾͷϓϩμΫτӡӦͱ͸ҧ͏͜ͱ΋ଟ͍ͷͰɺࠓޙ΋࣮ࡍʹϓϩμΫτ νʔϜ͕௚໘͢ΔͰ͋Ζ͏՝୊(ྫ͑͹޿ࠂͱ͔)ʹτϥΠͯ͠Έ͍ͨͱࢥ͍ͬͯ·͢ɻ

Slide 99

Slide 99 text

࡞ͬͨήʔϜ͸proxx.appͰ༡Ϳ͜ͱ͕Ͱ͖·͢ɻ  ίʔυ͸શ෦githubʹ্͍͛ͯΔͷͰɺͥͻࢀߟʹͯ͠Έ͍ͯͩ͘͞ɻ

Slide 100

Slide 100 text

͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ