Flipperを使ってみた rntb in Japan 2020/05/27

20200527 React Native Tech Blogの発表内容
Flipperに関する話

Transcript

1. 'MJQQFSΛ࢖ͬͯΈͨ
   !ULPX
2. ࣗݾ঺հ w ݩࣄۀ։ൃ੹೚ऀ
   w ೥ΑΓϑϦʔϥϯε
   
   ೥݄ʹ๏ਓԽ
   w 3FBDU
   /BUJWFʹؔͯ͠͸
   ঎ۀαʔϏεؚΊɺෳ਺
   ͷϦϦʔεܦݧ͋Γ
3. 'MJQQFSͱ͸ 'BDFCPPL͕࡞ͬͨJ04
   "OESPJEͷͨΊͷσόοάπʔϧʢݩʑ͸"OESPJEͷ σόοΨʔΛJ04ʹ֦ு͖ͯͨ͠΋ͷͰલʑ͔Β࢖ΘΕ͍͕ͯͨɺ3FBDU
   /BUJWFʹ૊Έࠐ·Εͨͷ͸࠷ۙ TUBCMF
   SFMFBTF͸ ʣ
   w 1MVHJOܗࣜͰ֦ுػೳΛऔΓࠐΊΔ طʹෳ਺ͷطଘͷ3FBDU
   /BUJWFͷσ όοάπʔϧ͕1MVHJOʹରԠ͍ͯ͠Δ
   w 3FBDU
   /BUJWFʹ͓͍ͯ͸ωΠςΟϒͷϏϡʔϨΠΞ΢τͷίϯτϩʔϧ΍ /BUJWFͱ+4ͷ-PHͷ౷߹ϑΟϧλϦϯά͕༰қʹͳͬͨ
   w ୺຤ͷεΫγϣ΍NPWJF͕औΕΔ
   w σόοάঢ়گͷεφοϓγϣοτΛFYQPSU͠ɺଞͷ։ൃऀͱڞ༗Մೳ
   w )FSNFTͷσόοΫ͕Մೳ
4. 'MJQQFS Ҿ༻ IUUQTGCqJQQFSDPNEPDTGFBUVSFTSFBDUOBUJWF
5. qJQQFSͷΞʔΩςΫνϟ (ࢀߟ&Ҿ༻) https://itnext.io/flipper-a-react-native-revolution-4859d6acd685 KTͷσόοά͸ࠓ·Ͱ௨ΓNFUSPͷ8FC*OTQFDUPSΛ༻͍ͭͭɺ
   ωΠςΟϒଆͱϨΠΞ΢τͷௐ੔෦෼ΛqJQQFS
   Ͱ
   ݕূ͢ΔΑ͏ͳײ͡ʹ࢖͏ͱྑͦ͞͏ɻ
6. ࢖͍ํ w 3FBDU
   /BUJWF
   WYͰϓϩδΣΫτΛ࡞Δ
   PS
   NJHSBUJPO
   HVJEFʹैͬͯखಈઃఆ͢Δ
   IUUQTGCqJQQFSDPNEPDTHFUUJOHTUBSUFE
   w IUUQTGCqJQQFSDPN
   ΑΓ&MFDUSPOΞϓϦΛΠϯε τʔϧ
   w NFUSPͱΤϛϡϨʔλΛ্ཱͪ͛ͨঢ়ଶͰqJQQFSΛىಈ ͢Δ
7. W͔ΒࣗಈઃఆʹͳΔΑ͏ͳͷͰ
   ͔ΒQSPKFDUΛ࡞Δਓ͸SFMFBTFΛ଴͔ͭSDΛར༻ͨ͠
   ํ͕ྑ͍͔΋
8. ϝχϡʔΞΠίϯ ୺຤ͷϦϩʔυ σόοάϝχϡʔΛ։͘ʢJ04Ͱ͸ͳ͔ͥޮ͔ͳ͍όάʁʣ ୺຤ը໘ͷεΫϦʔϯγϣοτ ୺຤ͷը໘ऩ࿥     ૢ࡞ର৅ͷ୺຤·ͨ͸؀ڥΛબ୒
9. ϝχϡʔΞΠίϯ ୺຤ͷઃఆ "OESPJE͓Αͼɺ
   J04ͷಈ࡞ඞཁཁ݅ͷνΣοΫ ࠨϖΠϯͷ։ด ӈϖΠϯͷ։ด     ͷը໘ ͷը໘
10. w
    ϏϧτΠϯػೳͷҰཡ
    IUUQTGCqJQQFSDPNEPDTGFBUVSFTJOEFY
    
    w TFUVQํ๏ʢSFBDU
    OBUJWFͷ৔߹ॳظઃఆʣ
    IUUQTGCqJQQFSDPNEPDTTFUVQMBZPVUQMVHJO
    
    ػೳ঺հ
11. ػೳ঺հ • 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ࣗମͷσόοά
12. ػೳ঺հ • Logs : ωΠςΟϒΞϓϦɾmetroͷϩά͕ग़ྗͰ͖Δ
13. ػೳ঺հ • Layout Inspector: ωΠςΟϒͷviewΛฤूͰ͖Δ Ҿ༻
    IUUQTGCqJQQFSDPNEPDTGFBUVSFTMBZPVUQMVHJO
    
14. ػೳ঺հ • Navigation: DeepLinkͷҰཡΛొ࿥͠App͔ΒΞΫηεͤ͞Δ͜ͱ͕Ͱ͖Δ Ҿ༻
    IUUQTGCqJQQFSDPNEPDTGFBUVSFTOBWJHBUJPOQMVHJO
15. ػೳ঺հ • Network: ωΠςΟϒΞϓϦ͔Βൃੜͨ͠௨৴ͷৄࡉΛσόοάͰ͖Δ
16. ػೳ঺հ • Databases(Android only): ୺຤DBʹରͯ͠SQLΛ࣮ߦͰ͖Δ
17. ػೳ঺հ • Images(Android only): ୺຤ʹऔಘ͞Εͨը૾ͷ௨৴ৄࡉ΍Ωϟογϡঢ়ଶͷ֬ೝɾมߋ͕Ͱ͖Δ
18. ػೳ঺հ • Sandbox: ҰҙͷurlΛൃߦ͠dev,stg,prodΛ؆୯ʹ੾Γସ͑ͯΞϓϦΛ࣮ߦͰ͖Δ(ʁ) IUUQTHJUIVCDPNGBDFCPPLqJQQFSJTTVFT
    ະ׬੒ͬΆ͍ػೳ
19. ػೳ঺հ • Shared Preferences: ୺຤ͷઃఆ৘ใΛऔಘͰ͖Δ
20. ػೳ঺հ • LeakCanary(Android Only): ϝϞϦϦʔΫΛݕग़͢ΔLeakCanaryͱ࿈ܞ͢Δ -FBL$BOBSZʹ͍ͭͯ͸ҎԼΛࢀর
    IUUQTTRVBSFHJUIVCJPMFBLDBOBSZGVOEBNFOUBMTIPXMFBLDBOBSZXPSLTɹ Ҿ༻
    IUUQTRJJUBDPN4MPXIBOEJUFNTEEDGGBB
21. ػೳ঺հ • Crash Reporter: ΞϓϦ͕Ϋϥογϡͨ͠ݪҼͷϩάΛग़ྗͯ͘͠ΕΔ Ҿ༻
    IUUQTGCqJQQFSDPNEPDTGFBUVSFTDSBTISFQPSUFSQMVHJO
22. ػೳ঺հ • Share Flipper Data: ϩά΍ϏϡʔͷσʔλͷεφοϓγϣοτΛ࡞੒͠ڞ༗Մೳʹ͢Δ ͜ͷσόΠεΛબ୒ͯ͠ϩά
    ͷεφοϓγϣοτΛ֬ೝͰ͖Δ
23. ػೳ঺հ • React Native Support: react-devtoolsͱ౷߹ͨ͠ػೳ΍metroͷϩάΛग़ྗͯ͘͠ΕΔ ίϯϙʔωϯτͷϓϩύςΟଈ࣌มߋ GSBNFຖͷඳը࣌ؒͷՄࢹԽ΍
    SFOEFS͕τϦΨʔ͞Εͨ৚݅ͷදࣔ
    ΍஗ԆཁҼͷϥϯΩϯά ίϯϙʔωϯτͷ
    TVTQFOEͷ੾Γସ͑ ίϯϙʔωϯτσʔλͷ
    ϩάग़ྗ &%*503Ͱɺ
    ֘౰ίʔυΛΦʔϓϯ
24. ϓϥάΠϯʹΑΔػೳ֦ு IUUQTXXXOQNKTDPNTFBSDI RLFZXPSETqJQQFSQMVHJOɹ
    αʔυύʔςΟͷϓϥάΠϯ͸OQNͰ΋୳ͤΔ
    QMVHJOͷࣗ࡞΋Ͱ͖Δ IUUQTGCqJQQFSDPNEPDTUVUPSJBMJOUSP
25. ૺ۰ͨ͠όάͳͲ • γϣʔτΧοτΩʔʹෆਖ਼ͳ஋΍electronͷΩʔόΠϯυΛ๦֐͢ΔΩʔʹͯ͠͠·͏ͱҰ੾ flipper͕ىಈ͠ͳ͘ͳͬͯ͠·͏=> ~/.config/flipper/settings.jsonʹϢʔβʔઃఆ͕͋Δͷ Ͱɺෆਖ਼ͳγϣʔτΧοτ஋Λमਖ਼͢Δͱ࣏Γ·͢ɻ(~/.flipperʹ͸ϓϥάΠϯઃఆ͕͋Γ· ͕͢ɺͳͥσΟϨΫτϦ͕෼͚ΒΕ͍ͯΔͷ͔͸ෆ໌) • iOSͱAndroidͷσόΠεʹಉ࣌ʹ઀ଓ͢Δͱɺreact-devtools͕૿৩͢Δ(ίϯιʔϧͰܯࠂ ͞Ε·͢) • iOS simulatorͩͱσόοάϝχϡʔΛ։͘Ϙλϯ͓ΑͼγϣʔτΧοτ͕ಈ࡞͠ͳ͍ (Android͸ಈ࡞ͨ͠) • Flipperσόοά༻ͷInspectorΛ։͍͍ͯΔͱ͖ʹFlipperͷ΢Οϯυ΢ͷҠಈ͕Ͱ͖ͳ͘ͳΔ • SQLͷΤσΟλͰ໼ҹΩʔͰΧʔιϧͷҠಈ͕Ͱ͖ͳ͍ • Support Requestsػೳ͕ಈ͔ͳ͍(ະ׬੒ʁ)