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
310
npm packageとリリースとモノレポ
watanabeyu
0
63
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
910
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1.1k
gandhの紹介です
watanabeyu
0
33
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
640
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.2k
react-native-unimodulesのススメ
watanabeyu
1
6.5k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1.1k
Other Decks in Technology
See All in Technology
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
200
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
1
250
Delta airlines Customer®️ USA Contact Numbers: Complete 2025 Support Guide
deltahelp
0
820
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
140
インフラ寄りSREの生存戦略
sansantech
PRO
5
1.7k
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
270
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
150
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
230
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
140
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
54
20k
IPA&AWSダブル全冠が明かす、人生を変えた勉強法のすべて
iwamot
PRO
2
180
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
2
7.3k
Featured
See All Featured
Site-Speed That Sticks
csswizardry
10
690
Automating Front-end Workflow
addyosmani
1370
200k
A Modern Web Designer's Workflow
chriscoyier
695
190k
A Tale of Four Properties
chriscoyier
160
23k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
310
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
How GitHub (no longer) Works
holman
314
140k
Scaling GitHub
holman
460
140k
Music & Morning Musume
bryan
46
6.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
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Ϧιʔε͕গͳ͍͔Βબͨ͠ͷͰɺ ਖ਼ͳͱ͜ΖͦΕͧΕͷωΠςΟϒΤϯδχΞ͕͍ΔͳΒɺ ωΠςΟϒͰͦΕͧΕΛ࡞ͬͨํ͕ݸਓతʹྑ͍ͱࢥ͏