事例で見る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ͷԁΛϐϯΛཱͯΔ͜ͱ ͰදࣔՄೳ ▸ ཁ݅Λຬͨ͢ʹ͸ʁ ▸ ஍ਤΛදࣔ

   ▸ ݱࡏҐஔΛऔಘ ▸ ஍ਤʹϐϯΛཱͯΔ
9. None

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ͷಡΈऔΓ
13. None

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ૢ࡞ ▸ σʔλϕʔεʹπΠʔτΛอଘ ▸ ΞϓϦ಺ʹϑΝΠϧΛอଘ
18. None

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௨৴ ▸ ۂΛ୺຤಺ʹอଘ ▸ ࿥ը͓Αͼۂ/ಈը࠶ੜ
23. None

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͸Ϧιʔε͕গͳ͍͔Βબ୒ͨ͠ͷͰɺ ਖ਼௚ͳͱ͜ΖͦΕͧΕͷωΠςΟϒΤϯδχΞ͕͍ΔͳΒ͹ɺ ωΠςΟϒͰͦΕͧΕΛ࡞ͬͨํ͕ݸਓతʹ͸ྑ͍ͱࢥ͏