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
事例で見るExpoプロダクションアプリ
Search
Yu Watanabe
July 06, 2018
Technology
2
1k
事例で見るExpoプロダクションアプリ
アプリをReact Native(Expo)で作りました。
Expoでどういうコンポーネント使ってるとかそういうのを書きました。
Yu Watanabe
July 06, 2018
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
Bolt 🤝 Expo
watanabeyu
0
330
npm packageとリリースとモノレポ
watanabeyu
0
64
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
930
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1.1k
gandhの紹介です
watanabeyu
0
35
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
660
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.3k
react-native-unimodulesのススメ
watanabeyu
1
6.5k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1.1k
Other Decks in Technology
See All in Technology
認知戦の理解と、市民としての対抗策
hogehuga
0
370
実践データベース設計 ①データベース設計概論
recruitengineers
PRO
3
260
トヨタ生産方式(TPS)入門
recruitengineers
PRO
3
240
KiroでGameDay開催してみよう(準備編)
yuuuuuuu168
1
130
自社製CMSからmicroCMSへのリプレースがプロダクトグロースを加速させた話
nextbeatdev
0
140
LLMエージェント時代に適応した開発フロー
hiragram
1
410
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
ABEMAにおける 生成AI活用の現在地 / The Current Status of Generative AI at ABEMA
dekatotoro
0
660
Yahoo!ニュースにおけるソフトウェア開発
lycorptech_jp
PRO
0
370
Product Management Conference -AI時代に進化するPdM-
kojima111
0
220
ドキュメントはAIの味方!スタートアップのアジャイルを加速するADR
kawauso
3
380
R-SCoRe: Revisiting Scene Coordinate Regression for Robust Large-Scale Visual Localization
takmin
0
430
Featured
See All Featured
Code Review Best Practice
trishagee
70
19k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
820
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Code Reviewing Like a Champion
maltzj
525
40k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Building Adaptive Systems
keathley
43
2.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Music & Morning Musume
bryan
46
6.7k
Transcript
2018/07/06 ΘͨͳΏ͏ ࣄྫͰݟΔEXPOϓϩμΫγϣϯΞϓϦ
▸ ࣗݾհ ▸ Ͳ͏ͯ͠ExpoΛ͏ͷ͔ʁ ▸ ExpoͷίϛϡχςΟʹ͍ͭͯ ▸ ExpoͰݫ͍͜͠ͱ ▸ ࣄྫͰݟΔExpoϓϩμΫγϣϯΞϓϦ
▸ ਤΞϓϦ ▸ ࢠҭͯϩάڞ༗ΞϓϦ ▸ πΠολʔΫϥΠΞϯτΞϓϦ ▸ μϯεಈըSNSΞϓϦ ▸ ·ͱΊ ֓ཁ
ࣗݾհ ΘͨͳΏ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։
▸ ࣄ༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu
▸ શʹJSͷΈͰΞϓϦ͕ެ։Մೳ ▸ XcodeAndroid StudioͳͲͷ໘ͳ࡞ۀ͕ෆཁ ▸ ωΠςΟϒͷେମͷػೳΛαϙʔτ ▸ ࠷ۙͰSKStoreReviewControllerରԠ ▸
info.plistͷi18nରԠ ▸ ExpoΫϥΠΞϯτΞϓϦΛ͏͜ͱͰσόοά͕؆୯ʹ ▸ ίϛϡχςΟ͕׆ൃ ▸ ཁΛग़͢ͱऔΓೖΕͯ͘ΕΔ͜ͱ͕ଟ͍ (https://expo.canny.io) ▸ େମͷ͜ͱฉ͍ͨΒ͑ͯ͘ΕΔ (https://forums.expo.io) Ͳ͏ͯ͠EXPOΛ͏ͷ͔ʁ ڥߏங؆୯ɺมͳֶशίετແ͠ɺωΠςΟϒػೳେମ͋Δ
▸ ཁΛ͛ΔͳΒ -> https://expo.canny.io ▸ ࣭Λ͛ΔͳΒ -> https://forums.expo.io EXPOͷίϛϡχςΟʹ͍ͭͯ
▸ ωΠςΟϒͰ͕ͬͭΓॻ͘ඞཁ͕͋Δػೳ ▸ ಈըͱԻͷ߹ / ͳͲ ▸ react-native link͢ΔΑ͏ͳ༗໊Ͳ͜ΖͷϥΠϒϥϦ͕͑ͳ͍ ▸
react-native-navigation / react-native-firebase / ͳͲ ▸ react-nativeͷΞοϓσʔτʹͨ·ʹ͍͔ͭͳ͍ ▸ ͳͲͳͲ EXPOͰݫ͍͜͠ͱ ͋Δఔଥڠ͕ඞཁ αʔόରԠͰ͖Δͱ͜ΖॲཧΛಀ͕͢ͳͲͯ͠ରԠ ਖ਼ͳͱ͜Ζ༗໊Ͳ͜Ζͷղੳܥ͕ೖΕΕͳ͍ͷ͕௧͍
ࣄྫͰݟΔEXPOϓϩμΫγϣϯΞϓϦ ਤΞϓϦ
ਤΞϓϦ(1) ▸ ݱࡏҐஔ͔ΒͷઢڑΛܭଌ ▸ ܘԿkmͷԁΛϐϯΛཱͯΔ͜ͱ ͰදࣔՄೳ ▸ ཁ݅Λຬͨ͢ʹʁ ▸ ਤΛදࣔ
▸ ݱࡏҐஔΛऔಘ ▸ ਤʹϐϯΛཱͯΔ
None
ਤΞϓϦ(2) ▸ ͬͨExpo Component ▸ MapView(ਤΛදࣔ) ▸ Sentry(jsͷΫϥογϡϨϙʔςΟϯά) ▸ Admob(ࠂ)
▸ Location(Ґஔใऔಘ) ▸ Permissions(Ґஔใͷύʔϛογϣϯ) ▸ ଞͷϥΠϒϥϦ ▸ @expo/vector-icons(ΞΠίϯ) ▸ expo-analytics(ΞΫηεղੳ) ▸ ex-react-native-i18n(ଟݴޠରԠ)
ࣄྫͰݟΔEXPOϓϩμΫγϣϯΞϓϦ ࢠҭͯϩάڞ༗ΞϓϦ
ࢠҭͯϩάڞ༗ΞϓϦ(1) ▸ ࢠڙ͕৸ͨ/ى͖ͨͳͲߦಈΛه ▸ ՈͰڞ༗ ▸ URLεΩʔϚ ▸ QRίʔυಡΈऔΓ ▸
QRίʔυը૾ͷಡΈऔΓ ▸ ཁ݅Λຬͨ͢ʹʁ ▸ αʔόͱͷAPI௨৴ ▸ ΧϝϥͰQRͷಡΈऔΓ ▸ ը૾͔ΒQRͷಡΈऔΓ
None
ࢠҭͯϩάڞ༗ΞϓϦ(2) ▸ ͬͨExpo Component ▸ SecureStore(ΞΫηετʔΫϯͷอଘ) ▸ Sentry(jsͷΫϥογϡϨϙʔςΟϯά) ▸ Admob(ࠂ)
▸ BarCodeScanner(QRίʔυΛΧϝϥ͔ΒಡΈऔΓ) ▸ Permissions(Χϝϥύʔϛογϣϯ) ▸ ImagePicker(্ͷը૾දࣔ) ▸ BlurView(Ϟʔμϧ্ཱͪ͛࣌ͷόοΫάϥϯυͷ΅͔͠) ▸ KeepAwake(ܭଌதʹόοΫάϥϯυʹͳΒͳ͍Α͏ʹ)
ࢠҭͯϩάڞ༗ΞϓϦ(3) ▸ ଞͷϥΠϒϥϦ ▸ @expo/vector-icons(ΞΠίϯ) ▸ expo-analytics(ΞΫηεղੳ) ▸ ex-react-native-i18n(ଟݴޠରԠ) ▸
react-native-qrimage-decoder(QRίʔυΛը૾͔ΒಡΈऔΓ) ▸ react-native-qrcode-svg(QRίʔυͷੜ)
ࣄྫͰݟΔEXPOϓϩμΫγϣϯΞϓϦ πΠολʔΫϥΠΞϯτΞϓϦ
πΠολʔΫϥΠΞϯτΞϓϦ(1) ▸ ࣗͷΞΧϯτ͕͍͍Ͷͨ͠πΠʔ τΛݕࡧ ▸ ϚϧνΞΧϯτରԠ ▸ ը૾ಈըΛΞϓϦͰΩϟογϡ ▸ ཁ݅Λຬͨ͢ʹʁ
▸ πΠολʔAPIૢ࡞ ▸ σʔλϕʔεʹπΠʔτΛอଘ ▸ ΞϓϦʹϑΝΠϧΛอଘ
None
πΠολʔΫϥΠΞϯτΞϓϦ(2) ▸ ͬͨExpo Component ▸ Font(ΧελϜϑΥϯτͷಡΈࠐΈ) ▸ Video(ಈըͷ࠶ੜ) ▸ KeepAwake(πΠʔτμϯϩʔυ࣌ʹεϦʔϓ͠ͳ͍Α͏ʹ)
▸ Admob(ࠂ) ▸ WebBrowser(ϦϯΫΫϦοΫ࣌ʹ։͘ΞϓϦϒϥβ) ▸ StoreReview(SKStoreReviewίϯτϩʔϥͷදࣔ) ▸ FileSystem(ಈըΩϟογϡ:ະ࣮) ▸ Sentry(jsͷΫϥογϡϨϙʔςΟϯά)
πΠολʔΫϥΠΞϯτΞϓϦ(3) ▸ ଞͷϥΠϒϥϦ ▸ react-native-local-mongodb(σʔλϕʔε) ▸ react-native-simple-twitter(πΠολʔAPI) ▸ react-native-expo-image-cache(ը૾Ωϟογϡ) ▸
@expo/vector-icons(ΞΠίϯ) ▸ expo-analytics(ΞΫηεղੳ) ▸ ex-react-native-i18n(ଟݴޠରԠ)
ࣄྫͰݟΔEXPOϓϩμΫγϣϯΞϓϦ μϯεಈը SNSΞϓϦ
μϯεಈըSNSΞϓϦ(1) ▸ μϯεಈըͷSNS ▸ DJηϨΫτͷགྷΓ͍͢ۂΛબग़ ▸ ࡱӨͱಉ࣌ʹۂΛ࠶ੜ ▸ ࡱӨͨ͠ಈըʹۂΛ߹ ▸
ཁ݅Λຬͨ͢ʹʁ ▸ αʔόͱͷAPI௨৴ ▸ ۂΛʹอଘ ▸ ը͓Αͼۂ/ಈը࠶ੜ
None
μϯεಈըSNSΞϓϦ(2) ▸ ͬͨExpo Component ▸ Video(ಈըͷ࠶ੜ) ▸ KeepAwake(ը࣌ʹεϦʔϓ͠ͳ͍Α͏ʹ) ▸ Audio(ۂͷ࠶ੜ)
▸ WebBrowser(ϦϯΫΫϦοΫ࣌ʹ։͘ΞϓϦϒϥβ) ▸ StoreReview(SKStoreReviewίϯτϩʔϥͷදࣔ) ▸ FileSystem(ಈը/ۂΩϟογϡ:ະ࣮) ▸ Sentry(jsͷΫϥογϡϨϙʔςΟϯά) ▸ Permissions(Χϝϥύʔϛογϣϯ) ▸ DangerZone.Localization(localeͷऔಘ) ▸ Facebook(FacebookϩάΠϯ) ▸ ImagePIcker(ϢʔβΞΠίϯΛબࡍͷը૾બ) ▸ Camera(ը)
μϯεಈըSNSΞϓϦ(3) ▸ ଞͷϥΠϒϥϦ ▸ react-native-local-mongodb(σʔλϕʔε) ▸ react-native-simple-twitter(πΠολʔAPI) ▸ react-native-simple-instagram(ΠϯελάϥϜAPI) ▸
react-native-expo-image-cache(ը૾Ωϟογϡ) ▸ @expo/vector-icons(ΞΠίϯ) ▸ expo-analytics(ΞΫηεղੳ) ▸ ex-react-native-i18n(ଟݴޠରԠ)
μϯεಈըSNSΞϓϦ(4) αʔόͰॲཧ
ΞϓϦͷղੳͳͲӡ༻ʹ͍ͭͯ ▸ ղੳܥݱঢ়react-native link͠ͳ͍ͱ༻ෆՄ ▸ Google Analytics·ͨExpoͰαϙʔτ͍ͯ͠Δͷ͚ͩ ▸ ԿΛͲ͜·Ͱղੳ͢Δͷ͔ʁ ▸
ϚʔέςΟϯάʹϦιʔεΛׂ͘͜ͱ͕Ͱ͖Δͷ͔ʁ ▸ ͦΕΒΛߟྀ͢Δͱࣗ / ձࣾͰӡ༻͍ͯ͠ΔͷGAͰे
·ͱΊ ▸ ਤΞϓϦ ▸ TwitterΫϥΠΞϯτΞϓϦ ▸ ϥΠϑϩάܥΞϓϦ ▸ ಈըSNSΞϓϦ ▸
react-native-video ▸ react-native-audio ▸ react-native-camera ▸ react-native-app-store-review ▸ ReproΛ͍͍ͨ / firebaseΛϑϧͰ͍͍ͨ / …ͷ߹ݫ͍͠ react-native linkແ͠Ͱ࡞ΕΔ αʔόΛ͢Ε ಈըͱۂͷ߹ͳͲ͍͜͠ͱՄೳ react-native link͕ඞཁͳϥΠϒϥϦΛ ཁΛग़͢ࡍʹ۩ମతʹϦϙδτϦΛ͑Δͱ Expo Componentͱ࣮ͯͯ͘͠͠Ε͍͢ ͋Δఔଥڠ͕ඞཁ ϦιʔεΛߟྀ͠औࣺબΛ͖ͬΓ͢Δ͜ͱͰ Expoॳظ։ൃͷεϐʔυΛ֨ஈʹ͋͛ͯ͘ΕΔ
༨ஊ React Native͓ΑͼExpoϦιʔε͕গͳ͍͔Βબͨ͠ͷͰɺ ਖ਼ͳͱ͜ΖͦΕͧΕͷωΠςΟϒΤϯδχΞ͕͍ΔͳΒɺ ωΠςΟϒͰͦΕͧΕΛ࡞ͬͨํ͕ݸਓతʹྑ͍ͱࢥ͏