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
雑に思考を整理する技術と効能
konifar
60
29k
今、知っておきたい! 生成AIエージェントの世界
elith
3
360
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
1
100
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
ゆるい個人開発のススメ
kuroppe1819
10
990
Hanami and htmx
bkuhlmann
0
210
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
790
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
370
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
930
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
200
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
0
220
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
200
Featured
See All Featured
Navigating Team Friction
lara
178
13k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
It's Worth the Effort
3n
180
27k
Practical Orchestrator
shlominoach
182
9.7k
How to name files
jennybc
65
93k
Infographics Made Easy
chrislema
238
18k
Product Roadmaps are Hard
iamctodd
44
9.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Teambox: Starting and Learning
jrom
128
8.4k
Building Your Own Lightsaber
phodgson
99
5.7k
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ػೳ͕ಈ͔ͳ͍(ະʁ)