このスライドは令和元年5 月18日に東京で開催された Inside Frontend #3で発表した資料に簡単な説明を追加したものです。
フィーチャーフォンからデスクトップまですべてのデバイスで動くマインスイーパークローン(proxx.app)を作った経緯と開発の過程を発表しました。
なにか質問があればTwitterで@kosamriまでどうぞ。
スライドのライセンスはCC BY-NC-SA 2.0です。資料等でレファレンスとして使われる際は教えてくれると(本人が)喜びます😊
͜ͷεϥΠυྩݩ5 ݄18ʹ౦ژͰ։࠵͞Εͨ Inside Frontend #3Ͱൃදͨ͠ࢿྉʹ؆୯ͳઆ໌ΛՃͨ͠ͷͰ͢ɻ ͳʹ͔࣭͕͋ΕTwitterͰ@kosamri·ͰͲ͏ͧɻ
View Slide
͜Μʹͪʂ͜͞·ΓͰ͢ɻ Chrome ͷweb developer ecosystem νʔϜͰಇ͍͍ͯ·͢ɻ
ࠓջ͔͍͠ΨϥέʔͷΛ͠ʹ͖·ͨ͠ɻΨϥέʔͱ͍ͬͯੲͷέʔλΠͰͳͯ͘ɺࠓɺੈք֤ࠃͰ࣮ࡍʹചΒΕ͍ͯΔʮεϚʔτϑΟʔνϟʔϑΥϯʯͷͰ͢ɻ
࠷ۙKaiOSͱ͍͏Σϒٕज़ϕʔεͰ࡞ΒΕͨOSΛࡌ͍ͨ͠ΘΏΔʮΨϥέʔʯ͕ੈք֤ࠃͰൃച͞Ε͍ͯ·͢ɻϒϥβͪΐͬͱݹ͍όʔγϣϯͰ͕͢Ϟμϯͳͷ͕ࡌ͞Ε͓ͯΓɺAppετΞࡌ͍ͯ͠·͋͢ɻ
ͪͳΈʹcounterpoint researchࠓޙ3ؒͰ3ԯ7ઍສͷεϚʔτϑΟʔνϟʔϑΥϯ͕ൃച͞ΕΔͱ༧͍ͯ͠·͢ɻ
ιϑτΣΞ·͘͞͠εϚʔτϑΥϯͷΑ͏Ͱ͕͢ɺϋʔυΣΞͬͺΓΨϥέʔͱಉ͡Ͱ͢ɻ
͜ͷεϚʔτϑΟʔνϟʔϑΥϯͰΣϒϒϥδϯάΛ͢ΔͱͲ͏ݟ͑ΔͰ͠ΐ͏͔ʁ
Inside Frontend ͷαΠτଟminimum width͕240pxΑΓେ͖͍ͷ͔ɺϩΰ͕ը໘͔ΒᷓΕ͍ͯ·͢ɻ
SquooshڈࢲͷνʔϜͰ࡞ͬͨΞϓϦͰɺʮҰ൪ྑ͘Ͱ͖ͨΣϒΞϓϦΛʯࢦͯ͠৭ʑͳσόΠεͰςετΛ͠ɺϩʔσΟϯάվળ͠·͕ͨ͠ɺqvgaͷεΫϦʔϯαΠζߟ͍͑ͯͳ͔ͬͨͷͰɺCSS่Ε͕͓͖͍ͯ·͢ɻ
εϚʔτϑΟʔνϟʔϑΥϯͰϒϥδϯά͢Δͱ͍ʹ͍͘ΣαΠτ͔ΓͰ͕͢ɺ͖ͪΜͱ͑ΔαΠτ͋Γ·͢ʂTwitter͕ྑ͍ྫͰɺmobile.twitter.comͰ͑Δػೳͯ͢εϚʔτϑΟʔνϟʔϑΥϯͰ͑·͢ɻ
KaiOSʹಛԽͨ͠ΞϓϦΛ࡞Εྑ͍ͱࢥ͏͔͠Ε·ͤΜ͕ɺΠϯυͳͲͰܞଳΩϟϦΞ͕AppετΞΛѲ͍ͬͯͯɺ͔ͭಠࣗͷಈըECαʔϏεΛ͓࣋ͬͯΓɺڝ߹͢ΔαʔϏεͩͱAppετΞʹΕͳ͍Մೳੑ͕͋Γ·͢ɻͱ͍͏͜ͱɺҰ෦ͷαʔϏεɾϏδωεͰࠓޙΣϒαΠτͱͯ͠ఏڙ͢Δ͜ͱ͕ॏཁʹͳΔ͔͠Ε·ͤΜɻ
ͱ͜ΖͰઌఔChrome ͷweb developer ecosystem νʔϜͰಇ͍͍ͯΔͱݴ͍·͕ͨ͠ɺͦͷதͰʮ࣮ࡍʹΣϒΞϓϦΛ࡞ͬͯΈΔʯαϒνʔϜʹॴଐ͍ͯ͠·͢ɻ
͜ͷνʔϜͰͷ࠷ॳͷϓϩδΣΫτڈ࡞ͬͨSquooshͱ͍͏ΞϓϦͰ͢ɻWasmΛͬͯϒϥβͰը૾ѹॖϑΥʔϚοτมΛߦ͍·͢ɻ
νʔϜͰ࣍ͷϓϩδΣΫτΛߟ͑ͨ࣌ʹʮήʔϜ࡞Ζ͏Αʂʯͱ͍͏ʹͳΓ·ͨ͠ɻ
৭ʑͳਓʹʮwebͬͯԿ͕ಘҙͰ͔͢ʁʯͱฉ͘ͱ͍͍ͨͯʮυΩϡϝϯτʯͱ͍͏͕͑ฦͬͯ͘ΔͷͰਅٯͷ՝ʹτϥΠͯ͠Έ͔ͨͬͨͷͱɺήʔϜΛ࡞Δ͜ͱͰΣϒαΠτͰྑ͘໘͢Δ՝ࢼͤΔͱࢥ͔ͬͨΒͰ͢ɻ
ྫ͑Ϣʔβʔ͔Βinput͕͍ͬͺ͍དྷͨΒͲ͏ͬͯॲཧ͢Ε͍͍ͩΖ͏…ͱ͔
ΣϒαΠτͰΞχϝʔγϣϯΛΰϦΰϦಈ͔͢͜ͱͬͯग़དྷΔ͔ͳ…ͱ͔Ͱ͢ɻ
ߋʹεϚʔτϑΟʔνϟʔϑΥϯ͕ࠓޙདྷΔ(͔)ͱ͍͏্͕͕͍ͬͯͨͷͰɺσεΫτοϓ͔ΒϑΟʔνϟʔϑΥϯ·Ͱͯ͢ͷσόΠεʹରԠ͢Δ͜ͱʹ͠·ͨ͠ɻ
࡞ͬͨΞϓϦPROXXͱ͍͏ΞχϝʔγϣϯΛଟ༻ͨ͠ϚΠϯεΠʔύʔͷΫϩʔϯͰ͢ɻཕͷΘΓʹʮӉͰϒϥοΫϗʔϧΛආ͚Δʯͱ͍͏ήʔϜઃఆʹ͍ͯ͠·͢ɻ
Ͱɺ࣮ࢪʹͲ͏ͬͯ࡞ͬͨݟ͍͖ͯ·͠ΐ͏ɻ
νʔϜͷεϖοΫͱͯ͜͠Μͳײ͡Ͱ͢ɻΞΫηγϏϦςΟͱϑΟʔνϟʔϑΥϯ୲ɺWebGL୲ɺϕʔεͷΣϒΞϓϦ୲ͱ͍ͬͨͬ͘͟Γׂͨ͠୲Λ͠·ͨ͠ɻ
·ͨɺϓϩδΣΫτΛߦ͏ʹ͋ͨͬͯϝϯόʔͰԿΛେࣄʹ͢Δͷ͔Λ֬ೝ͠·ͨ͠ɻ
ϕʔεͷߏΛݟ͍͖ͯ·͢ɻ
ίʔυϕʔεͬ͘͟Γͱ͜Μͳײ͡ͰผΕ͍ͯ·͢ɻήʔϜϩδοΫήʔϜͷαΠζϒϥοΫϗʔϧͷҐஔܭࢉͳͲUIϨΠϠʔͱશʹͯ͋͠Γɺ͜ͷήʔϜϩδοΫʹStateαʔϏεͱ͍͏؆୯ͳϥούʔΛט·ͤͯUIͱ࿈ܞ͍ͤͯ͞·͢ɻޙ΄Ͳ৮Ε·͕͢ඳըॲཧͷͱ͜Ζ͚ͯ͋Γ·͢ɻ
͜ΕΒΛશ෦ϝΠϯεϨουͰӡ༻ͯ͠ྑ͍ͷͰ͕͢ɺ͡Ί͔ΒΞχϝʔγϣϯΛΰϦΰϦಈ͔͍ͨ͠ͱߟ͍͑ͯͯɺશ෦ϝΠϯεϨουͰಈ͔͢ͷਏ͍ͱߟ͑ͯ…
ήʔϜϩδοΫͱstateαʔϏεWebWorkerΘ͚·ͨ͠ɻ
Web WorkerJavaScriptΛϒϥβͷϝΠϯεϨουͱผͷεϨουͰಈ͔͢͜ͱ͕Ͱ͖ΔΈͰɺpost messageΛͬͯεϨουؒͷΓऔΓΛ͠·͕͢ɺਖ਼͍ʹ͍͘Ͱ͢ɻ
ϥοΩʔͳ͜ͱʹνʔϜϝϯόʔͷSurma͕Comlinkͱ͍͏post message ΛநԽͨ͠ϥΠϒϥϦΛ࡞͍ͬͯΔͷͰ࠾༻͠·ͨ͠ɻWeb Worker͕͍͍ײ͡ʹ͔ͭ͑ͯ࠷ߴͰ͢ɻ
ͥͻͬͯΈ͍ͯͩ͘͞ɻ
UIʹ͍ͭͯPreactͰ࡞͍ͬͯ·͢ɻνʔϜͰͬͨܦݧ͕͋ͬͨͷͱɺτʔλϧͷαΠζ͕ଞʹൺͯখ͍͔͞ΒͰ͢ɻ
͍ΘΏΔdivʹશ෦render()ͯ͠ɺbodyʹappend͢Δͱ͍͏γϯάϧϖʔδΞϓϦέʔγϣϯߏͰ͕͢ɺͦͷ··ΫϥΠΞϯτʹૹΔͷͰͳ͘ɺϏϧυ͢Δͱ͖ʹPuppeteerΛͬͯpre-renderΛߦ͍ͬͯ·͢ɻ
Puppeteerheadless chromeΛεΫϦϓτͰಈ͔͢ϥΠϒϥϦͰ͢ɻPuppeteerͰΞΫηεͯ͠ϨϯμϦϯά͞ΕͨHTMLͷ݁ՌΛindex.htmlʹॻ͖ࠐΜͰ͍·͢ɻ
͓ͦΒ͘ύϑΥʔϚϯε໘ͰҰ൪ޮՌ͕͋ͬͨͷΞϓϦͰඳըॲཧΛͨ͜͠ͱͰ͢ɻ
࠷ॳTableʹϘλϯΛฒͯɺGPUΛ͏CSSΞχϝʔγϣϯͰ࣮͠Α͏ͱߟ͍͑ͯͨͷͰ͕͢…
͕ͯ͢1ϨΠϠʔʹ͋ΔͱɺϘλϯͻͱͭΛผͷ৭ʹม͑Δ͚ͩͰtableશମ͕paint͞ΕΔͱ͍͏Chromeͷόάʹૺ۰͠·ͨ͠
͜͏͍ͬͨ߹ͷղܾࡦͱͯ͠ϨΠϠʔΛ͚Δͱ͍͏ॲཧ͕͋Γ·͢ɻ
ϒϥβͷϨϯμϦϯάCompositͱ͍ΞΠσΞΛ࠾༻͓ͯ͠Γɺޙʑಈ͍ͨΓopacity͕มΘͬͨΓ͢ΔཁૉϨΠϠʔʹผ͚͓ͯ͘ͱϨϯμϦϯά͕ૣ͘ͳΓ·͢ɻ
DevToolsͰLayerύωϧͰͲͷཁૉ͕ϨΠϠʔʹผΕ͍ͯΔ͔֬ೝ͢Δ͜ͱ͕Ͱ͖·͢ɻ
ϨΠϠʔʹ͚ΕPaintͷόάճආͰ͖ΔͷͰ͕͢ɺࠓճϘλϯͻͱͭͻͱͭʹϨΠϠʔΛ͚ͭΔͱϨΠϠʔ͕૿͑͗ͯ͢ٯʹϝϞϦͷํͰʹͳΔͷͰɺ͜ͷํ๏ݟૹΓ·ͨ͠ɻ
ϒϥβʹඳըΛ͓·͔͔ͤͨͬͨ͠ͷͰ͕͢ɺύϑΥʔϚϯε໘Ͱ͜͠ͱ͕Θ͔ͬͨ͋ͷͰɺࣗͨͪͰCanvasʹඳը͢Δ͜ͱʹ͠·ͨ͠ɻ
࣮ࡍόοΫάϥϯυͷCanvasͱάϦουͷCanvasͱ͍͏2ͭͷCanvasΛॏͶ͍ͯ·͢ɻ(͜Εࠓޙ1ͭʹϚʔδ͢Δ༧ఆͰ͢)
͜ΕΒΛrequestAanimationFrameΛͬͯΞχϝʔγϣϯ͍ͤͯ͞·͢ɻ
requestAnimationFrameϒϥβ͕֤ϑϨʔϜΛߋ৽͢ΔλΠϛϯάͰcall backͰͨ͠εΫϦϓτΛ࣮ߦͯ͘͠ΕΔAPIͰ͢ɻΞχϝʔγϣϯͷ߹࠶ىతʹͰݺͼग़͢͜ͱͰຖϑϨʔϜ͝ͱʹඳըίϚϯυΛ࣮ߦ͠·͢ɻ
͜ͷลʹ͍ͭͯͬͱΓ͍ͨਓɺϒϥβͲ͏ͬͯಈ͍͍ͯΔͷ͔ௐͨهࣄΛॻ͍ͨͷͰͥͻࢀߟʹ͍ͯͩ͘͠͞ɻ
ඳըͰͦͷଞʹ͍͔ͭ͘ରࡦΛ͠·ͨ͠ɻ
όοΫάϥϯυͷΞχϝʔγϣϯݩʑϘέͨσβΠϯͩͬͨͷͰ1/5ͷαΠζͰ࡞͠Ҿ͖ͷͯ͠(ͦΕͰશવOK)͍·͢ɻ֤ηϧͷΞχϝʔγϣϯεϓϥΠτΛ࡞͓ͯ͠ΓɺΫϥΠΞϯταΠυͰੜͨ͠ͷΛindexed DBʹอଘ͍ͯ͠·͢ɻʢը૾Ұαʔόʔ͔ΒૹΓ·ͤΜʣ
ΞΫηγϏϦςΟʹ͍ͭͯؤுͬͯରԠ͠·ͨ͠ɻ
ϏδϡΞϧ͚ͩߟ͑ΕɺCanvasͰήʔϜΛ࡞Δ͜ͱग़དྷΔͷͰ͕͢ɺ͜ΕͩͱεΫϦʔϯϦʔμʔରԠ͕େมͰ͢ɻ
ͦͷͨΊɺ࣮tableͱbuttonͷHTMLཁૉϨΠϠʔΛಁ໌ͰॏͶ͍ͯ·͢ɻ
HTMLཁૉΛͤΔ͜ͱͰɺཁૉʹϑΥʔΧεͨ͠Γ֤Ϙλϯʹevent listnersΛ͚ͭͨΓ͢Δ͜ͱ͕Ͱ͖ͯศརͰ͢ɻ
ϒϥβHTMLͷཁૉʹͨ͘͞ΜͷΞΫηγϏϦςΟػೳ͕ೖ͍ͬͯΔͷͰͦͷԸܙʹ༬͔͍ͬͯ·͢ɻ
εΫϦʔϯϦʔμʔͰΞΫηε͢Δͱ”hidden”ͷ෦͚͕ͩࢲୡͷίʔυͰ͚ͭͨlabelͰɺͦͷଞͷҐஔใશ෦ϒϥβ͕ఏڙͯ͘͠Ε·ͨ͠ɻ
TableཁૉΛ͍ͬͯΔͷͰrole=gridΛઃఆ͢Δ͜ͱͰࠓfocusͷ͋ΔηϧͷҐஔΛಡΈ্͛ͯ͘ΕΔΑ͏ʹͳΓ·͢ɻ
…ຊrole=gridΛೖΕΔ͚ͩͰରԠͯ͘͠ΕΔͣͳͷͰ͕͢ɺϒϥβ͕͏·͘ೝࣝͯ͘͠Εͳ͔ͬͨͷͰrole=rowͱrole=gridcellarrtibuteʹॻ͖ࠐΜͰ͍·͢ɻ
ήʔϜͷάϦουʹroving tabindexͱ͍͏ख๏Λ࠾༻͠·ͨ͠ɻ
Ϙλϯ͕ͨ͘͞ΜฒΜͰ͍ΔͷͰɺͦͷ··ͩͱΩʔϘʔυૢ࡞Ͱͯ͢ͷϘλϯʹϑΥʔΧε͔ͯ͠ΒͰͳ͍ͱάϦου֎ͷϘλϯϦϯΫʹ౸ୡͰ͖·ͤΜɻ
ͦ͜ͰάϦουͷதͰϑΥʔΧεͰ͖ΔϘλϯ(tablindex=0)Ұ͚ͭͩͰͦͷଞϑΥʔΧεͰ͖ͳ͍Α͏ʹͯ͠ҹΩʔͰૢ࡞ͨ࣌͠ʹ0ͱ-1ͷҐஔΛͣΒ͍ͯ͠·͢ɻ
͜͏͢Δ͜ͱͰTabΛҰճԡͤϑΥʔΧεΛάϦου֎ʹग़͢͜ͱ͕ग़དྷΔΑ͏ʹͳΓ·͢ɻ
ϑΥʔΧεϦϯάʹ͍ͭͯʮϚεૢ࡞ͷਓʹݟͤͨ͘ͳ͍ɺͰΩʔϘʔυૢ࡞ͷਓʹग़͍ͨ͠ʯͱ͍͏෦ͷ࣮ʹɺfocus-visibleͷpolyfilΛ͍ͬͯ·͢ɻ
ΞΫηγϏϦςΟʹ͍ͭͯweb.devʹνϡʔτϦΞϧ͕͋ΔͷͰݟͯΈ͍ͯͩ͘͞ɻ
ϓϩδΣΫτͰσεΫτοϓͱKaiOSͰςετ͓ͯ͠Γ͏·͘ಈ͍͍ͯͨͷͰ͕͢ϩʔεϖοΫͳAndroidεϚϗͰಈ͔ͳ͍ͱ͍͏ࣄଶʹ໘͠·ͨ͠ɻ
ͦͦϑΟʔνϟʔϑΥϯඇྗͳϋʔυΣΞͰಈ͔͢ϐΫηϧͷ͕ݶΒΕ͍ͯΔͷͰ͋Δఔಈ͖·͢ɻ͜Ε͕εϚʔτϑΥϯʹͳΔͱɺͪΐͬͱྑ͍ϋʔυͰಈ͔͢ϐΫηϧ͕ഒʹͳΓɺΪϒΞοϓͯ͠͠·͍·͢ɻ
ݩʑΞΫηγϏϦςΟͰprefers reduced motionରԠͷͨΊΞχϝʔγϣϯແ͠ͷόʔδϣϯ࡞Δඞཁ͕͋ͬͨͷͰɺͦΕΛͬͯඇྗͳσόΠεʹ࠷ॳ͔ΒΞχϝʔγϣϯແ͠Ͱग़͢Α͏ʹ͠·ͨ͠ɻhighp fragment shader͕͑Δ͔Ͱஅ͍ͯ͠·͢ɻ
Inputʹ͍ͭͯσόΠεʹΑ༷ͬͯʑͳͷʹରԠ͍ͯ͠·͢ɻ
ʮΫϦοΫͯ͠ηϧΛ։͚ΔʯͱʮηϧʹϑϥάΛཱͯΔʯͱ͍͏2ͭͷίΞૢ࡞ΛσόΠεʹΑͬͯ৭ʑͳํ๏Ͱఏڙ͍ͯ͠·͢ɻ
ͨͩ͠ύϑΥʔϚϯεΛߟ͑ͨ࣌ʹݟૹͬͨUX༗Γ·͢ɻPinch Zoomϒϥβඪ४ͷεΫϩʔϧΛ࠾༻͢ΔͨΊʹݟૹΓ(εΫϩʔϧʹ͘Ԡ͢Δ͜ͱΛ༏ઌ)ɺμϒϧλοϓͨͱ͑γϯάϧλοϓͰμϒϧλοϓ͔Ͳ͏͔ͷ֬ೝͷͨΊʹͨͳ͍͚ͯ͘ͳ͍ͷͰݟૹΓ·ͨ͠ɻ
͞ΒʹɺϑΟʔνϟʔϑΥϯͰ͜ΕΒͷૢ࡞͕͑ͳ͍ͷͰ…
ࣈΩʔʹΞΫγϣϯΛׂΓͯΔ͜ͱͰରԠ͠·ͨ͠ɻ ͦͷଞʹϑΟʔνϟʔϑΥϯ͚ͷσβΠϯΛ͍͔ͭ͘ఏڙ͍ͯ͠·͢ɻ
Ϛε͋ΔͷͰ͕͢ɺը໘͕খ͘͞ήʔϜதʹͲͷηϧ͕ࠓબ͞Ε͍ͯΔͷ͔ݟͮΒ͍ͷͰɺখ͍͞ը໘ͷ߹ϑΥʔΧεΛݟ͑ΔΑ͏ʹ͍ͯ͠·͢ɻΞΫηγϏϦςΟͰΩʔϘʔυૢ࡞ରԠͰ࡞ͬͨΛqvgaαΠζͷը໘ʹσϑΥϧτͰग़͢Α͏ʹͳ͍ͬͯ·͢ɻ
աڈͷΨϥέʔαΠτΛࢀߟʹͯ͠ɺΩʔૢ࡞ͷΨΠυදࣔͤ͞·ͨ͠ɻ
Ϣʔβʔ͕සൟʹ͏ػೳʹ͍ͭͯγϣʔτΧοτΛ͚͍ͭͯ·͢ɻ(ʮμΠΞϩάΛด͡ΔʯͳͲ)
͜ͷγϣʔτΧοτ͕ແ͍ͱɺ͍μΠΞϩάΛಡΜͰ͍Δ࣌ʹɺด͡Δʹʮͣʔͬͱ্·ͰεΫϩʔϧ͔ͯ͠ΒॳΊͯ✗ϘλϯΛΫϦοΫͰ͖Δɻʯͱ͍ͬͨΠέ͍ͯͳ͍UXʹͳͬͯ͠·͍·͢ɻ
PWAͳͷͰServiceWorkerΛ͔ͭͬͯΦϑϥΠϯΞΫηεʹରԠ͍ͯ͠·͢ɻ
Ξοϓσʔτ͕͋ͬͨ࣌ʹʮϦϩʔυ͍ͯͩ͘͠͞ʯͱ͍ΞφϯεΛग़͢͜ͱ͕ଟ͍Ͱ͕͢ɺࠓճήʔϜͳͷͰɺͰ͖Δ͚ͩϢʔβʔͷʮήʔϜΛ͍ͨ͠ʯॠؒΛःΒͳ͍Α͏ʹ…
ελʔτϘλϯͷதʹΞοϓσʔτͷϩδοΫΛຒΊࠐΈ·ͨ͠ɻ
ελʔτͨ࣌͠ʹ৽͍͠όʔδϣϯ͕͋Εऔ͖ͬͯͯΠϯετʔϧ͠ɺྃͨ͠ΒήʔϜը໘ͷදࣔΛ͠·͢ɻͭ·ΓɺϢʔβʔ͕͜ͷήʔϜը໘ʹߦ͖ண͘ͱ͖ʹ͢Ͱʹ৽͍͠όʔγϣϯ͕දࣔ͞ΕΔΈͰ͢ɻ
ϩʔσΟϯάʹ͍ͭͯ݁ߏ৻ॏʹରԠ͠·ͨ͠ɻ
·ͣ࠷ॳʹૹΒΕΔindex.html20kbɺ͜ΕҰ൪࠷ॳʹϢʔβʔ͕͢Δͷશ෦͕ೖ͍ͬͯ·͢ɻ
ͭ·Γ͜ͷը໘…
…͍ɺΞχϝʔγϣϯlazy load͢ΔͷͰ͜ͷը໘Ͱ͢ɻ ΣϒϑΥϯτΛ͍ͬͯ·͕͢ɺ͍ͬͯΔΞϧϑΝϕοτ͚ͩαϒηοτͯ͠ɺΠϯϥΠϯͰindex.htmlʹຒΊࠐΜͩΓ͍ͯ͠·͢ɻ
ͦͷଞඞཁʹͳΔίʔυͯ͢ޙ͔Β͚ͯૹΓ·͢ɻ
ࠓճRollupΛ࠾༻͠·ͨ͠ɻ
ͱ͍͏ͷɺComlink͕ڞ௨dependencyͱͯ͋͠ΔͷͰ͕͢…
webpackͩͱಉ͡ίʔυͳͷʹ2ͭͷchunkͱͯ͠ѻΘΕͯ͠·͍·͢ɻ
͋ͱ, webpackνʔϜͰ͍·͍ͪ௫Ίͳͯ͘ɺӡ༻͕ਏ͔ͬͨܦݧ͕͋ΔͷͰࠓճύε͠·ͨ͠ɻ
RollupͰ࠷ॳ͔Β1ͭͷchunkͱͯ͠ѻͬͯ͘ΕΔͷͰσʔλͷݮ͕Ͱ͖Δͷͱɺ
ϓϥάΠϯͷγεςϜ͕Θ͔Γ͘͢ɺϓϩδΣΫτʹ߹ͬͨߏʹͳΔΑ͏ʹࣗ৴ΛͬͯΧελϚΠζ͕Ͱ͖·ͨ͠ɻ
ͪͳΈʹworkerͰJSϞδϡʔϧ͕·ͩ͑ͳ͍ͷͰɺRollupͷΞτϓοτʹ͋ΘͤͨAMDϩʔμʔͷΑ͏ͳͷΛ͍ͬͯ·͢ɻ͜ΕϓϥάΠϯͱͯ͠࡞Γ·ͨ͠ɻ
πʔϧ͚ͩͰͯ͢ղܾͰ͖ΔͰͳ͘ɺ݁ߏ৻ॏʹϩʔσΟϯάվળʹऔΓΈ·ͨ͠ɻ
ྑ͚Ε͜ͷϓϧϦΫΛݟͯΈ͍ͯͩ͘͞ɻ
ྫ͑ήʔϜͷ্ʹ͋ΔτοϓόʔͰ͕͢ɺ
λΠϚʔͳͲϞϦϞϦͷػೳ͕ೖ͍ͬͯΔͷʹɺτοϓϖʔδͰͦ͏͍ͬͨػೳҰඞཁͳ͍ͨͩͷϩΰόφʔͰ͢ɻ
ͦ͜Ͱશ෦Γͷίϯϙʔωϯτͱόφʔ͚ͩͷγϯϓϧίϯϙʔωϯτʹ͚ͯɺ࠷ॳʹૹΔϑΝΠϧαΠζͷݮΛ͠·ͨ͠ɻ
ͪͳΈʹϓϧϦΫΛૹΔ͝ͱʹTravisͰαΠζϨϙʔτͷεΫϦϓτΛಈ͔ͯ͠ɺϑΝΠϧ໊αΠζมߋͷ֬ೝΛߦ͍ͬͯ·͢ɻ
࠷ޙʹɺࠓճͷܦݧͯ͠ษڧʹͳͬͨ͜ͱҎ্ͷ3Ͱ͢ɻϓϩδΣΫτͰԿΛ༏ઌ͢Δͷ͔ܾΊͨ͜ͱͰɺσβΠϯͷΞΠσΞ(μϒϧλοϓͱ͔)͕ग़ͯͲͪΒ͕ྑ͍͔ݴ͍߹͏͜ͱͳ͙͘͢ʹҙࢥܾఆ͕Ͱ͖·ͨ͠ɻ·ͨweb workerແ͠ͰεϖοΫͳϩʔΤϯυσόΠεͰಈ͘ήʔϜΛͭ͘Δ͜ͱ͔ͬͨ͠ͱײ͍ͯ͡·͢ɻ
ͨͩྑ͘πΠολʔͰʮ͜ΜͳΞϓϦ͕࡞ΕΔͷϒϥβϕϯμʔʹॴଐ͍ͯ͠ΔνʔϜ͚ͩͩʯͱݴΘΕΔͷͰ͕͢ɺผʹͳʹ͔ಛผͳ͜ͱΛ͍ͯ͠ΔΘ͚ͰϒϥβΤϯδχΞ͕ಛผͳຐ๏Λ͔͚ͯ͘ΕͨΘ͚Ͱ͋Γ·ͤΜɻ
ڧ͍ͯݴ͏ͳΒɺνʔϜͷҙࣝͱͯ͠ʮΤϯδχΞ͕࡞Γ͍͢ɾσβΠϯ͕දݱ͍͢͠ʯΑΓʮϢʔβʔ͕͍͍͢ʯΛѹతʹ༏ઌͯ͠ҙࢥܾఆΛ͍ͯ͠·͢ɻ ͦ͏͍͏ҙࣝΛࣗવͱ࣋ͯΔจԽ͕͋Δͷ͋͋Γ͕͍ͨͰ͢ɻ
ͱ͍ͬͯࣄۀձࣾͷϓϩμΫτӡӦͱҧ͏͜ͱଟ͍ͷͰɺࠓޙ࣮ࡍʹϓϩμΫτνʔϜ͕໘͢ΔͰ͋Ζ͏՝(ྫ͑ࠂͱ͔)ʹτϥΠͯ͠Έ͍ͨͱࢥ͍ͬͯ·͢ɻ
࡞ͬͨήʔϜproxx.appͰ༡Ϳ͜ͱ͕Ͱ͖·͢ɻ ίʔυશ෦githubʹ্͍͛ͯΔͷͰɺͥͻࢀߟʹͯ͠Έ͍ͯͩ͘͞ɻ
͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ