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
280
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
740
開発環境の切り分け方のベストプラクティスが分からない -andfactory20190917-
tkow
0
210
teratail_study
tkow
0
370
react-beginner
tkow
0
730
tkow-Angular2入門者の会発表資料
tkow
1
14k
Other Decks in Programming
See All in Programming
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.4k
F#で自在につくる静的ブログサイト - 関数型まつり2025
pizzacat83
1
310
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
690
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
童醫院敏捷轉型的實踐經驗
cclai999
0
190
生成AIで日々のエラー調査を進めたい
yuyaabo
0
650
Team operations that are not burdened by SRE
kazatohiei
1
210
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
160
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
knih
11
2k
Team topologies and the microservice architecture: a synergistic relationship
cer
PRO
0
1k
つよそうにふるまい、つよい成果を出すのなら、つよいのかもしれない
irof
1
300
GoのGenericsによるslice操作との付き合い方
syumai
3
690
Featured
See All Featured
Faster Mobile Websites
deanohume
307
31k
Thoughts on Productivity
jonyablonski
69
4.7k
Building Adaptive Systems
keathley
43
2.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Fireside Chat
paigeccino
37
3.5k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Unsuck your backbone
ammeep
671
58k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Bash Introduction
62gerente
614
210k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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ػೳ͕ಈ͔ͳ͍(ະʁ)