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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers.

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

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

Avatar for Yu Watanabe

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͸ॳظ։ൃͷεϐʔυΛ֨ஈʹ͋͛ͯ͘ΕΔ