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

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

Transcript

1. 'MJQQFSΛ࢖ͬͯΈͨ
   !ULPX
   

   View Slide

2. ࣗݾ঺հ
   w ݩࣄۀ։ൃ੹೚ऀ
   w ೥ΑΓϑϦʔϥϯε
   
   ೥݄ʹ๏ਓԽ
   w 3FBDU/BUJWFʹؔͯ͠͸
   ঎ۀαʔϏεؚΊɺෳ਺
   ͷϦϦʔεܦݧ͋Γ
   

   View Slide

3. '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ͷσόοΫ͕Մೳ
   

   View Slide

4. 'MJQQFS
   Ҿ༻
   IUUQTGCqJQQFSDPNEPDTGFBUVSFTSFBDUOBUJWF
   

   View Slide

5. qJQQFSͷΞʔΩςΫνϟ
   (ࢀߟ&Ҿ༻) https://itnext.io/flipper-a-react-native-revolution-4859d6acd685
   KTͷσόοά͸ࠓ·Ͱ௨ΓNFUSPͷ8FC*OTQFDUPSΛ༻͍ͭͭɺ
   ωΠςΟϒଆͱϨΠΞ΢τͷௐ੔෦෼ΛqJQQFSͰ
   ݕূ͢ΔΑ͏ͳײ͡ʹ࢖͏ͱྑͦ͞͏ɻ
   

   View Slide

6. ࢖͍ํ
   w 3FBDU/BUJWFWYͰϓϩδΣΫτΛ࡞ΔPS
   NJHSBUJPOHVJEFʹैͬͯखಈઃఆ͢Δ
   IUUQTGCqJQQFSDPNEPDTHFUUJOHTUBSUFE
   w IUUQTGCqJQQFSDPNΑΓ&MFDUSPOΞϓϦΛΠϯε
   τʔϧ
   w NFUSPͱΤϛϡϨʔλΛ্ཱͪ͛ͨঢ়ଶͰqJQQFSΛىಈ
   ͢Δ
   

   View Slide

7. W͔ΒࣗಈઃఆʹͳΔΑ͏ͳͷͰ
   ͔ΒQSPKFDUΛ࡞Δਓ͸SFMFBTFΛ଴͔ͭSDΛར༻ͨ͠
   ํ͕ྑ͍͔΋
   

   View Slide

8. ϝχϡʔΞΠίϯ
   ୺຤ͷϦϩʔυ
   σόοάϝχϡʔΛ։͘ʢJ04Ͱ͸ͳ͔ͥޮ͔ͳ͍όάʁʣ
   ୺຤ը໘ͷεΫϦʔϯγϣοτ
   ୺຤ͷը໘ऩ࿥
   
   ૢ࡞ର৅ͷ୺຤·ͨ͸؀ڥΛબ୒
   

   View Slide

9. ϝχϡʔΞΠίϯ
   ୺຤ͷઃఆ
   "OESPJE͓Αͼɺ
   J04ͷಈ࡞ඞཁཁ݅ͷνΣοΫ
   ࠨϖΠϯͷ։ด
   ӈϖΠϯͷ։ด
   
   ͷը໘
   ͷը໘
   

   View Slide

10. w ϏϧτΠϯػೳͷҰཡ
    IUUQTGCqJQQFSDPNEPDTGFBUVSFTJOEFY
    w TFUVQํ๏ʢSFBDUOBUJWFͷ৔߹ॳظઃఆʣ
    IUUQTGCqJQQFSDPNEPDTTFUVQMBZPVUQMVHJO
    ػೳ঺հ
    

    View Slide

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ࣗମͷσόοά
    

    View Slide

12. ػೳ঺հ
    • Logs : ωΠςΟϒΞϓϦɾmetroͷϩά͕ग़ྗͰ͖Δ
    

    View Slide

13. ػೳ঺հ
    • Layout Inspector: ωΠςΟϒͷviewΛฤूͰ͖Δ
    Ҿ༻IUUQTGCqJQQFSDPNEPDTGFBUVSFTMBZPVUQMVHJO
    

    View Slide

14. ػೳ঺հ
    • Navigation: DeepLinkͷҰཡΛొ࿥͠App͔ΒΞΫηεͤ͞Δ͜ͱ͕Ͱ͖Δ
    Ҿ༻IUUQTGCqJQQFSDPNEPDTGFBUVSFTOBWJHBUJPOQMVHJO
    

    View Slide

15. ػೳ঺հ
    • Network: ωΠςΟϒΞϓϦ͔Βൃੜͨ͠௨৴ͷৄࡉΛσόοάͰ͖Δ
    

    View Slide

16. ػೳ঺հ
    • Databases(Android only): ୺຤DBʹରͯ͠SQLΛ࣮ߦͰ͖Δ
    

    View Slide

17. ػೳ঺հ
    • Images(Android only): ୺຤ʹऔಘ͞Εͨը૾ͷ௨৴ৄࡉ΍Ωϟογϡঢ়ଶͷ֬ೝɾมߋ͕Ͱ͖Δ
    

    View Slide

18. ػೳ঺հ
    • Sandbox: ҰҙͷurlΛൃߦ͠dev,stg,prodΛ؆୯ʹ੾Γସ͑ͯΞϓϦΛ࣮ߦͰ͖Δ(ʁ)
    IUUQTHJUIVCDPNGBDFCPPLqJQQFSJTTVFT
    ະ׬੒ͬΆ͍ػೳ
    

    View Slide

19. ػೳ঺հ
    • Shared Preferences: ୺຤ͷઃఆ৘ใΛऔಘͰ͖Δ
    

    View Slide

20. ػೳ঺հ
    • LeakCanary(Android Only): ϝϞϦϦʔΫΛݕग़͢ΔLeakCanaryͱ࿈ܞ͢Δ
    -FBL$BOBSZʹ͍ͭͯ͸ҎԼΛࢀর
    IUUQTTRVBSFHJUIVCJPMFBLDBOBSZGVOEBNFOUBMTIPXMFBLDBOBSZXPSLTɹ
    Ҿ༻IUUQTRJJUBDPN4MPXIBOEJUFNTEEDGGBB
    

    View Slide

21. ػೳ঺հ
    • Crash Reporter: ΞϓϦ͕Ϋϥογϡͨ͠ݪҼͷϩάΛग़ྗͯ͘͠ΕΔ
    Ҿ༻IUUQTGCqJQQFSDPNEPDTGFBUVSFTDSBTISFQPSUFSQMVHJO
    

    View Slide

22. ػೳ঺հ
    • Share Flipper Data: ϩά΍ϏϡʔͷσʔλͷεφοϓγϣοτΛ࡞੒͠ڞ༗Մೳʹ͢Δ
    ͜ͷσόΠεΛબ୒ͯ͠ϩά
    ͷεφοϓγϣοτΛ֬ೝͰ͖Δ
    

    View Slide

23. ػೳ঺հ
    • React Native Support: react-devtoolsͱ౷߹ͨ͠ػೳ΍metroͷϩάΛग़ྗͯ͘͠ΕΔ
    ίϯϙʔωϯτͷϓϩύςΟଈ࣌มߋ
    GSBNFຖͷඳը࣌ؒͷՄࢹԽ΍
    SFOEFS͕τϦΨʔ͞Εͨ৚݅ͷදࣔ
    ΍஗ԆཁҼͷϥϯΩϯά
    ίϯϙʔωϯτͷ
    TVTQFOEͷ੾Γସ͑
    ίϯϙʔωϯτσʔλͷ
    ϩάग़ྗ
    &%*503Ͱɺ
    ֘౰ίʔυΛΦʔϓϯ
    

    View Slide

24. ϓϥάΠϯʹΑΔػೳ֦ு
    IUUQTXXXOQNKTDPNTFBSDI RLFZXPSETqJQQFSQMVHJOɹ
    αʔυύʔςΟͷϓϥάΠϯ͸OQNͰ΋୳ͤΔ
    QMVHJOͷࣗ࡞΋Ͱ͖Δ IUUQTGCqJQQFSDPNEPDTUVUPSJBMJOUSP
    
    

    View Slide

25. ૺ۰ͨ͠όάͳͲ
    • γϣʔτΧοτΩʔʹෆਖ਼ͳ஋΍electronͷΩʔόΠϯυΛ๦֐͢ΔΩʔʹͯ͠͠·͏ͱҰ੾
    flipper͕ىಈ͠ͳ͘ͳͬͯ͠·͏=> ~/.config/flipper/settings.jsonʹϢʔβʔઃఆ͕͋Δͷ
    Ͱɺෆਖ਼ͳγϣʔτΧοτ஋Λमਖ਼͢Δͱ࣏Γ·͢ɻ(~/.flipperʹ͸ϓϥάΠϯઃఆ͕͋Γ·
    ͕͢ɺͳͥσΟϨΫτϦ͕෼͚ΒΕ͍ͯΔͷ͔͸ෆ໌)
    • iOSͱAndroidͷσόΠεʹಉ࣌ʹ઀ଓ͢Δͱɺreact-devtools͕૿৩͢Δ(ίϯιʔϧͰܯࠂ
    ͞Ε·͢)
    • iOS simulatorͩͱσόοάϝχϡʔΛ։͘Ϙλϯ͓ΑͼγϣʔτΧοτ͕ಈ࡞͠ͳ͍
    (Android͸ಈ࡞ͨ͠)
    • Flipperσόοά༻ͷInspectorΛ։͍͍ͯΔͱ͖ʹFlipperͷ΢Οϯυ΢ͷҠಈ͕Ͱ͖ͳ͘ͳΔ
    • SQLͷΤσΟλͰ໼ҹΩʔͰΧʔιϧͷҠಈ͕Ͱ͖ͳ͍
    • Support Requestsػೳ͕ಈ͔ͳ͍(ະ׬੒ʁ)
    

    View Slide