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
950
事例で見るExpoプロダクションアプリ
アプリをReact Native(Expo)で作りました。
Expoでどういうコンポーネント使ってるとかそういうのを書きました。
Yu Watanabe
July 06, 2018
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
npm packageとリリースとモノレポ
watanabeyu
0
41
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
730
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1k
gandhの紹介です
watanabeyu
0
26
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
590
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.2k
react-native-unimodulesのススメ
watanabeyu
1
6.3k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1k
React Native Expoで行うアプリの簡単最速運用
watanabeyu
0
300
Other Decks in Technology
See All in Technology
dev 補講: プロダクトセキュリティ / Product security overview
wa6sn
0
1.1k
OCI Data Integration技術情報 / ocidi_technical_jp
oracle4engineer
PRO
1
2.6k
国土交通省 データコンペ参加者向け勉強会
takehikohashimoto
0
360
State of Open Source Web Mapping Libraries
dayjournal
0
200
「 SharePoint 難しい」ってよく聞くけど、そんなに言うなら8歳の息子に試してもらった
taichinakamura
2
780
形式手法の 10 メートル手前 #kernelvm / Kernel VM Study Hokuriku Part 7
ytaka23
5
710
利きプロセススケジューラ
sat
PRO
4
2.6k
Autify Company Deck
autifyhq
1
39k
Windows Autopilot Deployment by OSD Guy
tamaiyutaro
0
290
製造現場のデジタル化における課題とPLC Data to Cloudによる新しいアプローチ
hamadakoji
0
180
データ活用促進のためのデータ分析基盤の進化
takumakouno
2
130
Shift-from-React-to-Vue
calm1205
4
1.6k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Building Your Own Lightsaber
phodgson
102
6.1k
Docker and Python
trallard
40
3.1k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Documentation Writing (for coders)
carmenintech
65
4.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
390
Faster Mobile Websites
deanohume
305
30k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
4 Signs Your Business is Dying
shpigford
180
21k
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Ϧιʔε͕গͳ͍͔Βબͨ͠ͷͰɺ ਖ਼ͳͱ͜ΖͦΕͧΕͷωΠςΟϒΤϯδχΞ͕͍ΔͳΒɺ ωΠςΟϒͰͦΕͧΕΛ࡞ͬͨํ͕ݸਓతʹྑ͍ͱࢥ͏