事例で見るExpoプロダクションアプリ

アプリをReact Native(Expo)で作りました。
Expoでどういうコンポーネント使ってるとかそういうのを書きました。

Transcript

1. 2018/07/06 Θͨͳ΂Ώ͏ ࣄྫͰݟΔEXPOϓϩμΫγϣϯΞϓϦ
2. ▸ ࣗݾ঺հ ▸ Ͳ͏ͯ͠ExpoΛ࢖͏ͷ͔ʁ ▸ ExpoͷίϛϡχςΟʹ͍ͭͯ ▸ ExpoͰݫ͍͜͠ͱ ▸ ࣄྫͰݟΔExpoϓϩμΫγϣϯΞϓϦ ▸ ஍ਤΞϓϦ ▸ ࢠҭͯϩάڞ༗ΞϓϦ ▸ πΠολʔΫϥΠΞϯτΞϓϦ ▸ μϯεಈըSNSΞϓϦ ▸ ·ͱΊ ֓ཁ
3. ࣗݾ঺հ Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։ ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu
4. ▸ ׬શʹJSͷΈͰΞϓϦ͕ެ։Մೳ ▸ Xcode΍Android StudioͳͲͷ໘౗ͳ࡞ۀ͕ෆཁ ▸ ωΠςΟϒͷେମͷػೳΛαϙʔτ ▸ ࠷ۙͰ͸SKStoreReviewController΋ରԠ ▸ info.plistͷi18n΋ରԠ ▸ ExpoΫϥΠΞϯτΞϓϦΛ࢖͏͜ͱͰσόοά͕؆୯ʹ ▸ ίϛϡχςΟ͕׆ൃ ▸ ཁ๬Λग़͢ͱऔΓೖΕͯ͘ΕΔ͜ͱ͕ଟ͍ (https://expo.canny.io) ▸ େମͷ͜ͱ͸ฉ͍ͨΒ౴͑ͯ͘ΕΔ (https://forums.expo.io) Ͳ͏ͯ͠EXPOΛ࢖͏ͷ͔ʁ ؀ڥߏங΋؆୯ɺมͳֶशίετ΋ແ͠ɺωΠςΟϒػೳ΋େମ͋Δ
5. ▸ ཁ๬Λ౤͛ΔͳΒ͹ -> https://expo.canny.io ▸ ࣭໰Λ౤͛ΔͳΒ͹ -> https://forums.expo.io EXPOͷίϛϡχςΟʹ͍ͭͯ
6. ▸ ωΠςΟϒͰ͕ͬͭΓॻ͘ඞཁ͕͋Δػೳ ▸ ಈըͱԻ੠ͷ߹੒ / ͳͲ ▸ react-native link͢ΔΑ͏ͳ༗໊Ͳ͜ΖͷϥΠϒϥϦ͕࢖͑ͳ͍ ▸ react-native-navigation / react-native-firebase / ͳͲ ▸ react-nativeͷΞοϓσʔτʹͨ·ʹ௥͍͔ͭͳ͍ ▸ ͳͲͳͲ EXPOͰݫ͍͜͠ͱ ͋Δఔ౓͸ଥڠ͕ඞཁ αʔόରԠͰ͖Δͱ͜Ζ͸ॲཧΛಀ͕͢ͳͲͯ͠ରԠ ਖ਼௚ͳͱ͜Ζ༗໊Ͳ͜Ζͷղੳܥ͕ೖΕΕͳ͍ͷ͕௧͍
7. ࣄྫͰݟΔEXPOϓϩμΫγϣϯΞϓϦ ஍ਤΞϓϦ
8. ஍ਤΞϓϦ(1) ▸ ݱࡏҐஔ͔Βͷ௚ઢڑ཭Λܭଌ ▸ ൒ܘԿkmͷԁΛϐϯΛཱͯΔ͜ͱ ͰදࣔՄೳ ▸ ཁ݅Λຬͨ͢ʹ͸ʁ ▸ ஍ਤΛදࣔ ▸ ݱࡏҐஔΛऔಘ ▸ ஍ਤʹϐϯΛཱͯΔ
10. ஍ਤΞϓϦ(2) ▸ ࢖ͬͨExpo Component ▸ MapView(஍ਤΛදࣔ) ▸ Sentry(jsͷΫϥογϡϨϙʔςΟϯά) ▸ Admob(޿ࠂ) ▸ Location(Ґஔ৘ใऔಘ) ▸ Permissions(Ґஔ৘ใͷύʔϛογϣϯ) ▸ ଞͷϥΠϒϥϦ ▸ @expo/vector-icons(ΞΠίϯ) ▸ expo-analytics(ΞΫηεղੳ) ▸ ex-react-native-i18n(ଟݴޠରԠ)
11. ࣄྫͰݟΔEXPOϓϩμΫγϣϯΞϓϦ ࢠҭͯϩάڞ༗ΞϓϦ
12. ࢠҭͯϩάڞ༗ΞϓϦ(1) ▸ ࢠڙ͕৸ͨ/ى͖ͨͳͲߦಈΛه࿥ ▸ Ո଒Ͱڞ༗ ▸ URLεΩʔϚ ▸ QRίʔυಡΈऔΓ ▸ QRίʔυը૾ͷಡΈऔΓ ▸ ཁ݅Λຬͨ͢ʹ͸ʁ ▸ αʔόͱͷAPI௨৴ ▸ ΧϝϥͰQRͷಡΈऔΓ ▸ ը૾͔ΒQRͷಡΈऔΓ
14. ࢠҭͯϩάڞ༗ΞϓϦ(2) ▸ ࢖ͬͨExpo Component ▸ SecureStore(ΞΫηετʔΫϯͷอଘ) ▸ Sentry(jsͷΫϥογϡϨϙʔςΟϯά) ▸ Admob(޿ࠂ) ▸ BarCodeScanner(QRίʔυΛΧϝϥ͔ΒಡΈऔΓ) ▸ Permissions(Χϝϥύʔϛογϣϯ) ▸ ImagePicker(୺຤্ͷը૾දࣔ) ▸ BlurView(Ϟʔμϧ্ཱͪ͛࣌ͷόοΫάϥ΢ϯυͷ΅͔͠) ▸ KeepAwake(ܭଌதʹόοΫάϥ΢ϯυʹͳΒͳ͍Α͏ʹ)
15. ࢠҭͯϩάڞ༗ΞϓϦ(3) ▸ ଞͷϥΠϒϥϦ ▸ @expo/vector-icons(ΞΠίϯ) ▸ expo-analytics(ΞΫηεղੳ) ▸ ex-react-native-i18n(ଟݴޠରԠ) ▸ react-native-qrimage-decoder(QRίʔυΛը૾͔ΒಡΈऔΓ) ▸ react-native-qrcode-svg(QRίʔυͷੜ੒)
16. ࣄྫͰݟΔEXPOϓϩμΫγϣϯΞϓϦ πΠολʔΫϥΠΞϯτΞϓϦ
17. πΠολʔΫϥΠΞϯτΞϓϦ(1) ▸ ࣗ෼ͷΞΧ΢ϯτ͕͍͍Ͷͨ͠πΠʔ τΛݕࡧ ▸ ϚϧνΞΧ΢ϯτରԠ ▸ ը૾΍ಈըΛΞϓϦ಺ͰΩϟογϡ ▸ ཁ݅Λຬͨ͢ʹ͸ʁ ▸ πΠολʔAPIૢ࡞ ▸ σʔλϕʔεʹπΠʔτΛอଘ ▸ ΞϓϦ಺ʹϑΝΠϧΛอଘ
19. πΠολʔΫϥΠΞϯτΞϓϦ(2) ▸ ࢖ͬͨExpo Component ▸ Font(ΧελϜϑΥϯτͷಡΈࠐΈ) ▸ Video(ಈըͷ࠶ੜ) ▸ KeepAwake(πΠʔτμ΢ϯϩʔυ࣌ʹεϦʔϓ͠ͳ͍Α͏ʹ) ▸ Admob(޿ࠂ) ▸ WebBrowser(ϦϯΫΫϦοΫ࣌ʹ։͘ΞϓϦ಺ϒϥ΢β) ▸ StoreReview(SKStoreReviewίϯτϩʔϥͷදࣔ) ▸ FileSystem(ಈըΩϟογϡ:ະ࣮૷) ▸ Sentry(jsͷΫϥογϡϨϙʔςΟϯά)
20. πΠολʔΫϥΠΞϯτΞϓϦ(3) ▸ ଞͷϥΠϒϥϦ ▸ react-native-local-mongodb(σʔλϕʔε) ▸ react-native-simple-twitter(πΠολʔAPI) ▸ react-native-expo-image-cache(ը૾Ωϟογϡ) ▸ @expo/vector-icons(ΞΠίϯ) ▸ expo-analytics(ΞΫηεղੳ) ▸ ex-react-native-i18n(ଟݴޠରԠ)
21. ࣄྫͰݟΔEXPOϓϩμΫγϣϯΞϓϦ μϯεಈը SNSΞϓϦ
22. μϯεಈըSNSΞϓϦ(1) ▸ μϯεಈըͷSNS ▸ DJηϨΫτͷགྷΓ΍͍͢ۂΛબग़ ▸ ࡱӨͱಉ࣌ʹۂΛ࠶ੜ ▸ ࡱӨͨ͠ಈըʹۂΛ߹੒ ▸ ཁ݅Λຬͨ͢ʹ͸ʁ ▸ αʔόͱͷAPI௨৴ ▸ ۂΛ୺຤಺ʹอଘ ▸ ࿥ը͓Αͼۂ/ಈը࠶ੜ
24. μϯεಈըSNSΞϓϦ(2) ▸ ࢖ͬͨExpo Component ▸ Video(ಈըͷ࠶ੜ) ▸ KeepAwake(࿥ը࣌ʹεϦʔϓ͠ͳ͍Α͏ʹ) ▸ Audio(ۂͷ࠶ੜ) ▸ WebBrowser(ϦϯΫΫϦοΫ࣌ʹ։͘ΞϓϦ಺ϒϥ΢β) ▸ StoreReview(SKStoreReviewίϯτϩʔϥͷදࣔ) ▸ FileSystem(ಈը/ۂΩϟογϡ:ະ࣮૷) ▸ Sentry(jsͷΫϥογϡϨϙʔςΟϯά) ▸ Permissions(Χϝϥύʔϛογϣϯ) ▸ DangerZone.Localization(localeͷऔಘ) ▸ Facebook(FacebookϩάΠϯ) ▸ ImagePIcker(ϢʔβΞΠίϯΛબ୒ࡍͷը૾બ୒) ▸ Camera(࿥ը)
25. μϯεಈը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(ଟݴޠରԠ)
26. μϯεಈըSNSΞϓϦ(4) αʔόͰॲཧ
27. ΞϓϦͷղੳͳͲӡ༻ʹ͍ͭͯ ▸ ղੳܥ͸ݱঢ়react-native link͠ͳ͍ͱ࢖༻ෆՄ ▸ Google Analytics·ͨ͸ExpoͰαϙʔτ͍ͯ͠Δ΋ͷ͚ͩ ▸ ԿΛͲ͜·Ͱղੳ͢Δͷ͔ʁ ▸ ϚʔέςΟϯάʹϦιʔεΛׂ͘͜ͱ͕Ͱ͖Δͷ͔ʁ ▸ ͦΕΒΛߟྀ͢Δͱࣗ෼ / ձࣾͰӡ༻͍ͯ͠Δ΋ͷ͸GAͰे෼
28. ·ͱΊ ▸ ஍ਤΞϓϦ ▸ 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͸ॳظ։ൃͷεϐʔυΛ֨ஈʹ͋͛ͯ͘ΕΔ
29. ༨ஊ React Native͓ΑͼExpo͸Ϧιʔε͕গͳ͍͔Βબ୒ͨ͠ͷͰɺ ਖ਼௚ͳͱ͜ΖͦΕͧΕͷωΠςΟϒΤϯδχΞ͕͍ΔͳΒ͹ɺ ωΠςΟϒͰͦΕͧΕΛ࡞ͬͨํ͕ݸਓతʹ͸ྑ͍ͱࢥ͏