Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Yu Watanabe

July 06, 2018
Tweet

More Decks by Yu Watanabe

Other Decks in Technology

Transcript

  1. ▸ ࣗݾ঺հ ▸ Ͳ͏ͯ͠ExpoΛ࢖͏ͷ͔ʁ ▸ ExpoͷίϛϡχςΟʹ͍ͭͯ ▸ ExpoͰݫ͍͜͠ͱ ▸ ࣄྫͰݟΔExpoϓϩμΫγϣϯΞϓϦ

    ▸ ஍ਤΞϓϦ ▸ ࢠҭͯϩάڞ༗ΞϓϦ ▸ πΠολʔΫϥΠΞϯτΞϓϦ ▸ μϯεಈըSNSΞϓϦ ▸ ·ͱΊ ֓ཁ
  2. ࣗݾ঺հ Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։

    ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu
  3. ▸ ׬શʹJSͷΈͰΞϓϦ͕ެ։Մೳ ▸ Xcode΍Android StudioͳͲͷ໘౗ͳ࡞ۀ͕ෆཁ ▸ ωΠςΟϒͷେମͷػೳΛαϙʔτ ▸ ࠷ۙͰ͸SKStoreReviewController΋ରԠ ▸

    info.plistͷi18n΋ରԠ ▸ ExpoΫϥΠΞϯτΞϓϦΛ࢖͏͜ͱͰσόοά͕؆୯ʹ ▸ ίϛϡχςΟ͕׆ൃ ▸ ཁ๬Λग़͢ͱऔΓೖΕͯ͘ΕΔ͜ͱ͕ଟ͍ (https://expo.canny.io) ▸ େମͷ͜ͱ͸ฉ͍ͨΒ౴͑ͯ͘ΕΔ (https://forums.expo.io) Ͳ͏ͯ͠EXPOΛ࢖͏ͷ͔ʁ ؀ڥߏங΋؆୯ɺมͳֶशίετ΋ແ͠ɺωΠςΟϒػೳ΋େମ͋Δ
  4. ▸ ωΠςΟϒͰ͕ͬͭΓॻ͘ඞཁ͕͋Δػೳ ▸ ಈըͱԻ੠ͷ߹੒ / ͳͲ ▸ react-native link͢ΔΑ͏ͳ༗໊Ͳ͜ΖͷϥΠϒϥϦ͕࢖͑ͳ͍ ▸

    react-native-navigation / react-native-firebase / ͳͲ ▸ react-nativeͷΞοϓσʔτʹͨ·ʹ௥͍͔ͭͳ͍ ▸ ͳͲͳͲ EXPOͰݫ͍͜͠ͱ ͋Δఔ౓͸ଥڠ͕ඞཁ αʔόରԠͰ͖Δͱ͜Ζ͸ॲཧΛಀ͕͢ͳͲͯ͠ରԠ ਖ਼௚ͳͱ͜Ζ༗໊Ͳ͜Ζͷղੳܥ͕ೖΕΕͳ͍ͷ͕௧͍
  5. ஍ਤΞϓϦ(2) ▸ ࢖ͬͨExpo Component ▸ MapView(஍ਤΛදࣔ) ▸ Sentry(jsͷΫϥογϡϨϙʔςΟϯά) ▸ Admob(޿ࠂ)

    ▸ Location(Ґஔ৘ใऔಘ) ▸ Permissions(Ґஔ৘ใͷύʔϛογϣϯ) ▸ ଞͷϥΠϒϥϦ ▸ @expo/vector-icons(ΞΠίϯ) ▸ expo-analytics(ΞΫηεղੳ) ▸ ex-react-native-i18n(ଟݴޠରԠ)
  6. ࢠҭͯϩάڞ༗ΞϓϦ(1) ▸ ࢠڙ͕৸ͨ/ى͖ͨͳͲߦಈΛه࿥ ▸ Ո଒Ͱڞ༗ ▸ URLεΩʔϚ ▸ QRίʔυಡΈऔΓ ▸

    QRίʔυը૾ͷಡΈऔΓ ▸ ཁ݅Λຬͨ͢ʹ͸ʁ ▸ αʔόͱͷAPI௨৴ ▸ ΧϝϥͰQRͷಡΈऔΓ ▸ ը૾͔ΒQRͷಡΈऔΓ
  7. ࢠҭͯϩάڞ༗ΞϓϦ(2) ▸ ࢖ͬͨExpo Component ▸ SecureStore(ΞΫηετʔΫϯͷอଘ) ▸ Sentry(jsͷΫϥογϡϨϙʔςΟϯά) ▸ Admob(޿ࠂ)

    ▸ BarCodeScanner(QRίʔυΛΧϝϥ͔ΒಡΈऔΓ) ▸ Permissions(Χϝϥύʔϛογϣϯ) ▸ ImagePicker(୺຤্ͷը૾දࣔ) ▸ BlurView(Ϟʔμϧ্ཱͪ͛࣌ͷόοΫάϥ΢ϯυͷ΅͔͠) ▸ KeepAwake(ܭଌதʹόοΫάϥ΢ϯυʹͳΒͳ͍Α͏ʹ)
  8. ࢠҭͯϩάڞ༗ΞϓϦ(3) ▸ ଞͷϥΠϒϥϦ ▸ @expo/vector-icons(ΞΠίϯ) ▸ expo-analytics(ΞΫηεղੳ) ▸ ex-react-native-i18n(ଟݴޠରԠ) ▸

    react-native-qrimage-decoder(QRίʔυΛը૾͔ΒಡΈऔΓ) ▸ react-native-qrcode-svg(QRίʔυͷੜ੒)
  9. πΠολʔΫϥΠΞϯτΞϓϦ(2) ▸ ࢖ͬͨExpo Component ▸ Font(ΧελϜϑΥϯτͷಡΈࠐΈ) ▸ Video(ಈըͷ࠶ੜ) ▸ KeepAwake(πΠʔτμ΢ϯϩʔυ࣌ʹεϦʔϓ͠ͳ͍Α͏ʹ)

    ▸ Admob(޿ࠂ) ▸ WebBrowser(ϦϯΫΫϦοΫ࣌ʹ։͘ΞϓϦ಺ϒϥ΢β) ▸ StoreReview(SKStoreReviewίϯτϩʔϥͷදࣔ) ▸ FileSystem(ಈըΩϟογϡ:ະ࣮૷) ▸ Sentry(jsͷΫϥογϡϨϙʔςΟϯά)
  10. μϯεಈըSNSΞϓϦ(1) ▸ μϯεಈըͷSNS ▸ DJηϨΫτͷགྷΓ΍͍͢ۂΛબग़ ▸ ࡱӨͱಉ࣌ʹۂΛ࠶ੜ ▸ ࡱӨͨ͠ಈըʹۂΛ߹੒ ▸

    ཁ݅Λຬͨ͢ʹ͸ʁ ▸ αʔόͱͷAPI௨৴ ▸ ۂΛ୺຤಺ʹอଘ ▸ ࿥ը͓Αͼۂ/ಈը࠶ੜ
  11. μϯεಈըSNSΞϓϦ(2) ▸ ࢖ͬͨExpo Component ▸ Video(ಈըͷ࠶ੜ) ▸ KeepAwake(࿥ը࣌ʹεϦʔϓ͠ͳ͍Α͏ʹ) ▸ Audio(ۂͷ࠶ੜ)

    ▸ WebBrowser(ϦϯΫΫϦοΫ࣌ʹ։͘ΞϓϦ಺ϒϥ΢β) ▸ StoreReview(SKStoreReviewίϯτϩʔϥͷදࣔ) ▸ FileSystem(ಈը/ۂΩϟογϡ:ະ࣮૷) ▸ Sentry(jsͷΫϥογϡϨϙʔςΟϯά) ▸ Permissions(Χϝϥύʔϛογϣϯ) ▸ DangerZone.Localization(localeͷऔಘ) ▸ Facebook(FacebookϩάΠϯ) ▸ ImagePIcker(ϢʔβΞΠίϯΛબ୒ࡍͷը૾બ୒) ▸ Camera(࿥ը)
  12. μϯεಈը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(ଟݴޠରԠ)
  13. ΞϓϦͷղੳͳͲӡ༻ʹ͍ͭͯ ▸ ղੳܥ͸ݱঢ়react-native link͠ͳ͍ͱ࢖༻ෆՄ ▸ Google Analytics·ͨ͸ExpoͰαϙʔτ͍ͯ͠Δ΋ͷ͚ͩ ▸ ԿΛͲ͜·Ͱղੳ͢Δͷ͔ʁ ▸

    ϚʔέςΟϯάʹϦιʔεΛׂ͘͜ͱ͕Ͱ͖Δͷ͔ʁ ▸ ͦΕΒΛߟྀ͢Δͱࣗ෼ / ձࣾͰӡ༻͍ͯ͠Δ΋ͷ͸GAͰे෼
  14. ·ͱΊ ▸ ஍ਤΞϓϦ ▸ 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͸ॳظ։ൃͷεϐʔυΛ֨ஈʹ͋͛ͯ͘ΕΔ