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
940
事例で見る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
38
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
720
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.2k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1k
React Native Expoで行うアプリの簡単最速運用
watanabeyu
0
300
Other Decks in Technology
See All in Technology
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
pandasはPolarsに性能面で追いつき追い越せるのか
vaaaaanquish
4
4.5k
30万人が利用するチャットをFirebase Realtime DatabaseからActionCableへ移行する方法
ryosk7
5
330
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
460
物価高なラスベガスでの過ごし方
zakky
0
370
新卒1年目が挑む!生成AI × マルチエージェントで実現する次世代オンボーディング / operation-ai-onboarding
cyberagentdevelopers
PRO
1
160
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.6k
生成AIと知識グラフの相互利用に基づく文書解析
koujikozaki
1
140
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
21
3.4k
いまならこう作りたい AWSコンテナ[本格]入門ハンズオン 〜2024年版 ハンズオンの構想〜
horsewin
9
2.1k
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
170
Autify Company Deck
autifyhq
1
39k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
95
5.2k
Facilitating Awesome Meetings
lara
49
6k
Being A Developer After 40
akosma
86
590k
Designing for Performance
lara
604
68k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
370
Building Adaptive Systems
keathley
38
2.2k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
A designer walks into a library…
pauljervisheath
202
24k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
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Ϧιʔε͕গͳ͍͔Βબͨ͠ͷͰɺ ਖ਼ͳͱ͜ΖͦΕͧΕͷωΠςΟϒΤϯδχΞ͕͍ΔͳΒɺ ωΠςΟϒͰͦΕͧΕΛ࡞ͬͨํ͕ݸਓతʹྑ͍ͱࢥ͏