Slide 1

Slide 1 text

'MJQQFSΛ࢖ͬͯΈͨ !ULPX

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

'MJQQFS Ҿ༻ IUUQTGCqJQQFSDPNEPDTGFBUVSFTSFBDUOBUJWF

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

ػೳ঺հ • 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ࣗମͷσόοά

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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