Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

tkow
May 27, 2020

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

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

tkow

May 27, 2020
Tweet

More Decks by tkow

Other Decks in Programming

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