Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flipperを使ってみた rntb in Japan 2020/05/27
Search
tkow
May 27, 2020
Programming
1
220
Flipperを使ってみた rntb in Japan 2020/05/27
20200527 React Native Tech Blogの発表内容
Flipperに関する話
tkow
May 27, 2020
Tweet
Share
More Decks by tkow
See All by tkow
React NativeでCross Platform対応を頑張る話
tkow
1
590
開発環境の切り分け方のベストプラクティスが分からない -andfactory20190917-
tkow
0
190
teratail_study
tkow
0
340
react-beginner
tkow
0
680
tkow-Angular2入門者の会発表資料
tkow
1
13k
Other Decks in Programming
See All in Programming
Hanami and htmx
bkuhlmann
0
210
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
510
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
820
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
230
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
740
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
310
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
180
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
950
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
260
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
32
12k
Statistics for Hackers
jakevdp
789
220k
Debugging Ruby Performance
tmm1
70
11k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
Thoughts on Productivity
jonyablonski
58
3.8k
In The Pink: A Labor of Love
frogandcode
138
21k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
A Tale of Four Properties
chriscoyier
151
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
42k
Transcript
'MJQQFSΛͬͯΈͨ !ULPX
ࣗݾհ 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-4859d6acd685 KTͷσόοάࠓ·Ͱ௨ΓNFUSPͷ8FC*OTQFDUPSΛ༻͍ͭͭɺ ωΠςΟϒଆͱϨΠΞτͷௐ෦ΛqJQQFSͰ ݕূ͢ΔΑ͏ͳײ͡ʹ͏ͱྑͦ͞͏ɻ
͍ํ w 3FBDU/BUJWFWYͰϓϩδΣΫτΛ࡞ΔPS NJHSBUJPOHVJEFʹैͬͯखಈઃఆ͢Δ IUUQTGCqJQQFSDPNEPDTHFUUJOHTUBSUFE w IUUQTGCqJQQFSDPNΑΓ&MFDUSPOΞϓϦΛΠϯε τʔϧ w NFUSPͱΤϛϡϨʔλΛ্ཱͪ͛ͨঢ়ଶͰqJQQFSΛىಈ
͢Δ
W͔ΒࣗಈઃఆʹͳΔΑ͏ͳͷͰ ͔ΒQSPKFDUΛ࡞ΔਓSFMFBTFΛ͔ͭSDΛར༻ͨ͠ ํ͕ྑ͍͔
ϝχϡʔΞΠίϯ ͷϦϩʔυ σόοάϝχϡʔΛ։͘ʢJ04Ͱͳ͔ͥޮ͔ͳ͍όάʁʣ ը໘ͷεΫϦʔϯγϣοτ ͷը໘ऩ ૢ࡞ରͷ·ͨڥΛબ
ϝχϡʔΞΠίϯ ͷઃఆ "OESPJE͓Αͼɺ J04ͷಈ࡞ඞཁཁ݅ͷνΣοΫ ࠨϖΠϯͷ։ด ӈϖΠϯͷ։ด
ͷը໘ ͷը໘
w ϏϧτΠϯػೳͷҰཡ IUUQTGCqJQQFSDPNEPDTGFBUVSFTJOEFY w 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ػೳ͕ಈ͔ͳ͍(ະʁ)