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
290
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
750
開発環境の切り分け方のベストプラクティスが分からない -andfactory20190917-
tkow
0
220
teratail_study
tkow
0
380
react-beginner
tkow
0
740
tkow-Angular2入門者の会発表資料
tkow
1
14k
Other Decks in Programming
See All in Programming
QA x AIエコシステム段階構築作戦
osu
0
220
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
270
No Install CMS戦略 〜 5年先を見据えたフロントエンド開発を考える / no_install_cms
rdlabo
0
380
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
760
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
310
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
480
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
2
1.3k
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
0
210
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.2k
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
120
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
290
GPUを計算資源として使おう!
primenumber
1
290
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Producing Creativity
orderedlist
PRO
346
40k
A Tale of Four Properties
chriscoyier
160
23k
Agile that works and the tools we love
rasmusluckow
329
21k
Being A Developer After 40
akosma
90
590k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Code Reviewing Like a Champion
maltzj
524
40k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
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ػೳ͕ಈ͔ͳ͍(ະʁ)