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
320
npm packageとリリースとモノレポ
watanabeyu
0
64
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
920
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1.1k
gandhの紹介です
watanabeyu
0
35
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
650
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
AI関数が早くなったので試してみよう
kumakura
0
120
Oracle Cloud Infrastructure:2025年7月度サービス・アップデート
oracle4engineer
PRO
1
120
【CEDEC2025】現場を理解して実現!ゲーム開発を効率化するWebサービスの開発と、利用促進のための継続的な改善
cygames
PRO
0
720
Agent Development Kitで始める生成 AI エージェント実践開発
danishi
0
120
専門分化が進む分業下でもユーザーが本当に欲しかったものを追求するプロダクトマネジメント/Focus on real user needs despite deep specialization and division of labor
moriyuya
0
1k
Segment Anything Modelの最新動向:SAM2とその発展系
tenten0727
0
400
AIに目を奪われすぎて、周りの困っている人間が見えなくなっていませんか?
cap120
1
430
LLMで構造化出力の成功率をグンと上げる方法
keisuketakiguchi
0
420
Lambda management with ecspresso and Terraform
ijin
2
140
【新卒研修資料】数理最適化 / Mathematical Optimization
brainpadpr
25
11k
家族の思い出を形にする 〜 1秒動画の生成を支えるインフラアーキテクチャ
ojima_h
1
420
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
1
730
Featured
See All Featured
Site-Speed That Sticks
csswizardry
10
750
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
540
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
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Ϧιʔε͕গͳ͍͔Βબͨ͠ͷͰɺ ਖ਼ͳͱ͜ΖͦΕͧΕͷωΠςΟϒΤϯδχΞ͕͍ΔͳΒɺ ωΠςΟϒͰͦΕͧΕΛ࡞ͬͨํ͕ݸਓతʹྑ͍ͱࢥ͏