20200527 React Native Tech Blogの発表内容 Flipperに関する話
'MJQQFSΛͬͯΈͨ!ULPX
View Slide
ࣗݾհw ݩࣄۀ։ൃऀw ΑΓϑϦʔϥϯε݄ʹ๏ਓԽw 3FBDU/BUJWFʹؔͯ͠ۀαʔϏεؚΊɺෳͷϦϦʔεܦݧ͋Γ
'MJQQFSͱ'BDFCPPL͕࡞ͬͨJ04 "OESPJEͷͨΊͷσόοάπʔϧʢݩʑ"OESPJEͷσόοΨʔΛJ04ʹ֦ு͖ͯͨ͠ͷͰલʑ͔ΒΘΕ͍͕ͯͨɺ3FBDU/BUJWFʹΈࠐ·Εͨͷ࠷ۙ TUBCMFSFMFBTFʣw 1MVHJOܗࣜͰ֦ுػೳΛऔΓࠐΊΔ طʹෳͷطଘͷ3FBDU/BUJWFͷσόοάπʔϧ͕1MVHJOʹରԠ͍ͯ͠Δw 3FBDU/BUJWFʹ͓͍ͯωΠςΟϒͷϏϡʔϨΠΞτͷίϯτϩʔϧ/BUJWFͱ+4ͷ-PHͷ౷߹ϑΟϧλϦϯά͕༰қʹͳͬͨw ͷεΫγϣNPWJF͕औΕΔw σόοάঢ়گͷεφοϓγϣοτΛFYQPSU͠ɺଞͷ։ൃऀͱڞ༗Մೳw )FSNFTͷσόοΫ͕Մೳ
'MJQQFSҾ༻IUUQTGCqJQQFSDPNEPDTGFBUVSFTSFBDUOBUJWF
qJQQFSͷΞʔΩςΫνϟ(ࢀߟ&Ҿ༻) https://itnext.io/flipper-a-react-native-revolution-4859d6acd685KTͷσόοάࠓ·Ͱ௨ΓNFUSPͷ8FC*OTQFDUPSΛ༻͍ͭͭɺωΠςΟϒଆͱϨΠΞτͷௐ෦ΛqJQQFSͰݕূ͢ΔΑ͏ͳײ͡ʹ͏ͱྑͦ͞͏ɻ
͍ํw 3FBDU/BUJWFWYͰϓϩδΣΫτΛ࡞ΔPSNJHSBUJPOHVJEFʹैͬͯखಈઃఆ͢ΔIUUQTGCqJQQFSDPNEPDTHFUUJOHTUBSUFEw IUUQTGCqJQQFSDPNΑΓ&MFDUSPOΞϓϦΛΠϯετʔϧw NFUSPͱΤϛϡϨʔλΛ্ཱͪ͛ͨঢ়ଶͰqJQQFSΛىಈ͢Δ
W͔ΒࣗಈઃఆʹͳΔΑ͏ͳͷͰ͔ΒQSPKFDUΛ࡞ΔਓSFMFBTFΛ͔ͭSDΛར༻ͨ͠ํ͕ྑ͍͔
ϝχϡʔΞΠίϯͷϦϩʔυσόοάϝχϡʔΛ։͘ʢJ04Ͱͳ͔ͥޮ͔ͳ͍όάʁʣը໘ͷεΫϦʔϯγϣοτͷը໘ऩ ૢ࡞ରͷ·ͨڥΛબ
ϝχϡʔΞΠίϯͷઃఆ"OESPJE͓ΑͼɺJ04ͷಈ࡞ඞཁཁ݅ͷνΣοΫࠨϖΠϯͷ։ดӈϖΠϯͷ։ด ͷը໘ͷը໘
w ϏϧτΠϯػೳͷҰཡIUUQTGCqJQQFSDPNEPDTGFBUVSFTJOEFYw TFUVQํ๏ʢSFBDUOBUJWFͷ߹ॳظઃఆʣIUUQTGCqJQQFSDPNEPDTTFUVQMBZPVUQMVHJOػೳհ
ػೳհ• Logs : ωΠςΟϒΞϓϦɾmetroͷϩά͕ग़ྗͰ͖Δ• Layout Inspector: ωΠςΟϒͷviewΛฤूͰ͖Δ• Navigation: DeepLinkͷҰཡΛొ͠App͔ΒΞΫηεͤ͞Δ͜ͱ͕Ͱ͖Δ• Network: ωΠςΟϒΞϓϦ͔Βൃੜͨ͠௨৴ͷৄࡉΛσόοάͰ͖Δ• Databases(Android only): DBʹରͯ͠SQLΛ࣮ߦͰ͖Δ• Images(Android only): ʹऔಘ͞Εͨը૾ͷ௨৴ৄࡉΩϟογϡঢ়ଶͷ֬ೝɾมߋ͕Ͱ͖Δ• Sandbox: ҰҙͷurlΛൃߦ͠dev,stg,prodΛ؆୯ʹΓସ͑ͯΞϓϦΛ࣮ߦͰ͖Δ(ʁ)ß• Shared Preferences: ͷઃఆใΛऔಘͰ͖Δ• LeakCanary(Android Only): ϝϞϦϦʔΫΛݕग़͢ΔLeakCanaryͱ࿈ܞ͢Δ• Crash Reporter: ΞϓϦ͕Ϋϥογϡͨ͠ݪҼͷϩάΛग़ྗͯ͘͠ΕΔ• Share Flipper Data: ϩάϏϡʔͷσʔλͷεφοϓγϣοτΛ࡞͠ڞ༗Մೳʹ͢Δ• React Native Support: react-devtoolsͱ౷߹ͨ͠ػೳmetroͷϩάΛग़ྗͯ͘͠ΕΔ• ElectronଂͷinspectorʹΑΔFlipperࣗମͷσόοά
ػೳհ• Logs : ωΠςΟϒΞϓϦɾmetroͷϩά͕ग़ྗͰ͖Δ
ػೳհ• Layout Inspector: ωΠςΟϒͷviewΛฤूͰ͖ΔҾ༻IUUQTGCqJQQFSDPNEPDTGFBUVSFTMBZPVUQMVHJO
ػೳհ• Navigation: DeepLinkͷҰཡΛొ͠App͔ΒΞΫηεͤ͞Δ͜ͱ͕Ͱ͖ΔҾ༻IUUQTGCqJQQFSDPNEPDTGFBUVSFTOBWJHBUJPOQMVHJO
ػೳհ• Network: ωΠςΟϒΞϓϦ͔Βൃੜͨ͠௨৴ͷৄࡉΛσόοάͰ͖Δ
ػೳհ• Databases(Android only): DBʹରͯ͠SQLΛ࣮ߦͰ͖Δ
ػೳհ• Images(Android only): ʹऔಘ͞Εͨը૾ͷ௨৴ৄࡉΩϟογϡঢ়ଶͷ֬ೝɾมߋ͕Ͱ͖Δ
ػೳհ• Sandbox: ҰҙͷurlΛൃߦ͠dev,stg,prodΛ؆୯ʹΓସ͑ͯΞϓϦΛ࣮ߦͰ͖Δ(ʁ)IUUQTHJUIVCDPNGBDFCPPLqJQQFSJTTVFTະͬΆ͍ػೳ
ػೳհ• Shared Preferences: ͷઃఆใΛऔಘͰ͖Δ
ػೳհ• LeakCanary(Android Only): ϝϞϦϦʔΫΛݕग़͢ΔLeakCanaryͱ࿈ܞ͢Δ-FBL$BOBSZʹ͍ͭͯҎԼΛࢀরIUUQTTRVBSFHJUIVCJPMFBLDBOBSZGVOEBNFOUBMTIPXMFBLDBOBSZXPSLTɹҾ༻IUUQTRJJUBDPN4MPXIBOEJUFNTEEDGGBB
ػೳհ• Crash Reporter: ΞϓϦ͕Ϋϥογϡͨ͠ݪҼͷϩάΛग़ྗͯ͘͠ΕΔҾ༻IUUQTGCqJQQFSDPNEPDTGFBUVSFTDSBTISFQPSUFSQMVHJO
ػೳհ• Share Flipper Data: ϩάϏϡʔͷσʔλͷεφοϓγϣοτΛ࡞͠ڞ༗Մೳʹ͢Δ͜ͷσόΠεΛબͯ͠ϩάͷεφοϓγϣοτΛ֬ೝͰ͖Δ
ػೳհ• React Native Support: react-devtoolsͱ౷߹ͨ͠ػೳmetroͷϩάΛग़ྗͯ͘͠ΕΔίϯϙʔωϯτͷϓϩύςΟଈ࣌มߋGSBNFຖͷඳը࣌ؒͷՄࢹԽSFOEFS͕τϦΨʔ͞Εͨ݅ͷදࣔԆཁҼͷϥϯΩϯάίϯϙʔωϯτͷTVTQFOEͷΓସ͑ίϯϙʔωϯτσʔλͷϩάग़ྗ&%*503Ͱɺ֘ίʔυΛΦʔϓϯ
ϓϥάΠϯʹΑΔػೳ֦ுIUUQTXXXOQNKTDPNTFBSDI RLFZXPSETqJQQFSQMVHJOɹαʔυύʔςΟͷϓϥάΠϯOQNͰ୳ͤΔQMVHJOͷࣗ࡞Ͱ͖Δ IUUQTGCqJQQFSDPNEPDTUVUPSJBMJOUSP
ૺ۰ͨ͠όάͳͲ• γϣʔτΧοτΩʔʹෆਖ਼ͳelectronͷΩʔόΠϯυΛ͢ΔΩʔʹͯ͠͠·͏ͱҰflipper͕ىಈ͠ͳ͘ͳͬͯ͠·͏=> ~/.config/flipper/settings.jsonʹϢʔβʔઃఆ͕͋ΔͷͰɺෆਖ਼ͳγϣʔτΧοτΛमਖ਼͢Δͱ࣏Γ·͢ɻ(~/.flipperʹϓϥάΠϯઃఆ͕͋Γ·͕͢ɺͳͥσΟϨΫτϦ͕͚ΒΕ͍ͯΔͷ͔ෆ໌)• iOSͱAndroidͷσόΠεʹಉ࣌ʹଓ͢Δͱɺreact-devtools͕૿৩͢Δ(ίϯιʔϧͰܯࠂ͞Ε·͢)• iOS simulatorͩͱσόοάϝχϡʔΛ։͘Ϙλϯ͓ΑͼγϣʔτΧοτ͕ಈ࡞͠ͳ͍(Androidಈ࡞ͨ͠)• Flipperσόοά༻ͷInspectorΛ։͍͍ͯΔͱ͖ʹFlipperͷΟϯυͷҠಈ͕Ͱ͖ͳ͘ͳΔ• SQLͷΤσΟλͰҹΩʔͰΧʔιϧͷҠಈ͕Ͱ͖ͳ͍• Support Requestsػೳ͕ಈ͔ͳ͍(ະʁ)