Slide 1

Slide 1 text

2018/07/06 Θͨͳ΂Ώ͏ ࣄྫͰݟΔEXPOϓϩμΫγϣϯΞϓϦ

Slide 2

Slide 2 text

▸ ࣗݾ঺հ ▸ Ͳ͏ͯ͠ExpoΛ࢖͏ͷ͔ʁ ▸ ExpoͷίϛϡχςΟʹ͍ͭͯ ▸ ExpoͰݫ͍͜͠ͱ ▸ ࣄྫͰݟΔExpoϓϩμΫγϣϯΞϓϦ ▸ ஍ਤΞϓϦ ▸ ࢠҭͯϩάڞ༗ΞϓϦ ▸ πΠολʔΫϥΠΞϯτΞϓϦ ▸ μϯεಈըSNSΞϓϦ ▸ ·ͱΊ ֓ཁ

Slide 3

Slide 3 text

ࣗݾ঺հ Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։ ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu

Slide 4

Slide 4 text

▸ ׬શʹJSͷΈͰΞϓϦ͕ެ։Մೳ ▸ Xcode΍Android StudioͳͲͷ໘౗ͳ࡞ۀ͕ෆཁ ▸ ωΠςΟϒͷେମͷػೳΛαϙʔτ ▸ ࠷ۙͰ͸SKStoreReviewController΋ରԠ ▸ info.plistͷi18n΋ରԠ ▸ ExpoΫϥΠΞϯτΞϓϦΛ࢖͏͜ͱͰσόοά͕؆୯ʹ ▸ ίϛϡχςΟ͕׆ൃ ▸ ཁ๬Λग़͢ͱऔΓೖΕͯ͘ΕΔ͜ͱ͕ଟ͍ (https://expo.canny.io) ▸ େମͷ͜ͱ͸ฉ͍ͨΒ౴͑ͯ͘ΕΔ (https://forums.expo.io) Ͳ͏ͯ͠EXPOΛ࢖͏ͷ͔ʁ ؀ڥߏங΋؆୯ɺมͳֶशίετ΋ແ͠ɺωΠςΟϒػೳ΋େମ͋Δ

Slide 5

Slide 5 text

▸ ཁ๬Λ౤͛ΔͳΒ͹ -> https://expo.canny.io ▸ ࣭໰Λ౤͛ΔͳΒ͹ -> https://forums.expo.io EXPOͷίϛϡχςΟʹ͍ͭͯ

Slide 6

Slide 6 text

▸ ωΠςΟϒͰ͕ͬͭΓॻ͘ඞཁ͕͋Δػೳ ▸ ಈըͱԻ੠ͷ߹੒ / ͳͲ ▸ react-native link͢ΔΑ͏ͳ༗໊Ͳ͜ΖͷϥΠϒϥϦ͕࢖͑ͳ͍ ▸ react-native-navigation / react-native-firebase / ͳͲ ▸ react-nativeͷΞοϓσʔτʹͨ·ʹ௥͍͔ͭͳ͍ ▸ ͳͲͳͲ EXPOͰݫ͍͜͠ͱ ͋Δఔ౓͸ଥڠ͕ඞཁ αʔόରԠͰ͖Δͱ͜Ζ͸ॲཧΛಀ͕͢ͳͲͯ͠ରԠ ਖ਼௚ͳͱ͜Ζ༗໊Ͳ͜Ζͷղੳܥ͕ೖΕΕͳ͍ͷ͕௧͍

Slide 7

Slide 7 text

ࣄྫͰݟΔEXPOϓϩμΫγϣϯΞϓϦ ஍ਤΞϓϦ

Slide 8

Slide 8 text

஍ਤΞϓϦ(1) ▸ ݱࡏҐஔ͔Βͷ௚ઢڑ཭Λܭଌ ▸ ൒ܘԿkmͷԁΛϐϯΛཱͯΔ͜ͱ ͰදࣔՄೳ ▸ ཁ݅Λຬͨ͢ʹ͸ʁ ▸ ஍ਤΛදࣔ ▸ ݱࡏҐஔΛऔಘ ▸ ஍ਤʹϐϯΛཱͯΔ

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

஍ਤΞϓϦ(2) ▸ ࢖ͬͨExpo Component ▸ MapView(஍ਤΛදࣔ) ▸ Sentry(jsͷΫϥογϡϨϙʔςΟϯά) ▸ Admob(޿ࠂ) ▸ Location(Ґஔ৘ใऔಘ) ▸ Permissions(Ґஔ৘ใͷύʔϛογϣϯ) ▸ ଞͷϥΠϒϥϦ ▸ @expo/vector-icons(ΞΠίϯ) ▸ expo-analytics(ΞΫηεղੳ) ▸ ex-react-native-i18n(ଟݴޠରԠ)

Slide 11

Slide 11 text

ࣄྫͰݟΔEXPOϓϩμΫγϣϯΞϓϦ ࢠҭͯϩάڞ༗ΞϓϦ

Slide 12

Slide 12 text

ࢠҭͯϩάڞ༗ΞϓϦ(1) ▸ ࢠڙ͕৸ͨ/ى͖ͨͳͲߦಈΛه࿥ ▸ Ո଒Ͱڞ༗ ▸ URLεΩʔϚ ▸ QRίʔυಡΈऔΓ ▸ QRίʔυը૾ͷಡΈऔΓ ▸ ཁ݅Λຬͨ͢ʹ͸ʁ ▸ αʔόͱͷAPI௨৴ ▸ ΧϝϥͰQRͷಡΈऔΓ ▸ ը૾͔ΒQRͷಡΈऔΓ

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

ࢠҭͯϩάڞ༗ΞϓϦ(2) ▸ ࢖ͬͨExpo Component ▸ SecureStore(ΞΫηετʔΫϯͷอଘ) ▸ Sentry(jsͷΫϥογϡϨϙʔςΟϯά) ▸ Admob(޿ࠂ) ▸ BarCodeScanner(QRίʔυΛΧϝϥ͔ΒಡΈऔΓ) ▸ Permissions(Χϝϥύʔϛογϣϯ) ▸ ImagePicker(୺຤্ͷը૾දࣔ) ▸ BlurView(Ϟʔμϧ্ཱͪ͛࣌ͷόοΫάϥ΢ϯυͷ΅͔͠) ▸ KeepAwake(ܭଌதʹόοΫάϥ΢ϯυʹͳΒͳ͍Α͏ʹ)

Slide 15

Slide 15 text

ࢠҭͯϩάڞ༗ΞϓϦ(3) ▸ ଞͷϥΠϒϥϦ ▸ @expo/vector-icons(ΞΠίϯ) ▸ expo-analytics(ΞΫηεղੳ) ▸ ex-react-native-i18n(ଟݴޠରԠ) ▸ react-native-qrimage-decoder(QRίʔυΛը૾͔ΒಡΈऔΓ) ▸ react-native-qrcode-svg(QRίʔυͷੜ੒)

Slide 16

Slide 16 text

ࣄྫͰݟΔEXPOϓϩμΫγϣϯΞϓϦ πΠολʔΫϥΠΞϯτΞϓϦ

Slide 17

Slide 17 text

πΠολʔΫϥΠΞϯτΞϓϦ(1) ▸ ࣗ෼ͷΞΧ΢ϯτ͕͍͍Ͷͨ͠πΠʔ τΛݕࡧ ▸ ϚϧνΞΧ΢ϯτରԠ ▸ ը૾΍ಈըΛΞϓϦ಺ͰΩϟογϡ ▸ ཁ݅Λຬͨ͢ʹ͸ʁ ▸ πΠολʔAPIૢ࡞ ▸ σʔλϕʔεʹπΠʔτΛอଘ ▸ ΞϓϦ಺ʹϑΝΠϧΛอଘ

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

πΠολʔΫϥΠΞϯτΞϓϦ(2) ▸ ࢖ͬͨExpo Component ▸ Font(ΧελϜϑΥϯτͷಡΈࠐΈ) ▸ Video(ಈըͷ࠶ੜ) ▸ KeepAwake(πΠʔτμ΢ϯϩʔυ࣌ʹεϦʔϓ͠ͳ͍Α͏ʹ) ▸ Admob(޿ࠂ) ▸ WebBrowser(ϦϯΫΫϦοΫ࣌ʹ։͘ΞϓϦ಺ϒϥ΢β) ▸ StoreReview(SKStoreReviewίϯτϩʔϥͷදࣔ) ▸ FileSystem(ಈըΩϟογϡ:ະ࣮૷) ▸ Sentry(jsͷΫϥογϡϨϙʔςΟϯά)

Slide 20

Slide 20 text

πΠολʔΫϥΠΞϯτΞϓϦ(3) ▸ ଞͷϥΠϒϥϦ ▸ react-native-local-mongodb(σʔλϕʔε) ▸ react-native-simple-twitter(πΠολʔAPI) ▸ react-native-expo-image-cache(ը૾Ωϟογϡ) ▸ @expo/vector-icons(ΞΠίϯ) ▸ expo-analytics(ΞΫηεղੳ) ▸ ex-react-native-i18n(ଟݴޠରԠ)

Slide 21

Slide 21 text

ࣄྫͰݟΔEXPOϓϩμΫγϣϯΞϓϦ μϯεಈը SNSΞϓϦ

Slide 22

Slide 22 text

μϯεಈըSNSΞϓϦ(1) ▸ μϯεಈըͷSNS ▸ DJηϨΫτͷགྷΓ΍͍͢ۂΛબग़ ▸ ࡱӨͱಉ࣌ʹۂΛ࠶ੜ ▸ ࡱӨͨ͠ಈըʹۂΛ߹੒ ▸ ཁ݅Λຬͨ͢ʹ͸ʁ ▸ αʔόͱͷAPI௨৴ ▸ ۂΛ୺຤಺ʹอଘ ▸ ࿥ը͓Αͼۂ/ಈը࠶ੜ

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

μϯεಈըSNSΞϓϦ(2) ▸ ࢖ͬͨExpo Component ▸ Video(ಈըͷ࠶ੜ) ▸ KeepAwake(࿥ը࣌ʹεϦʔϓ͠ͳ͍Α͏ʹ) ▸ Audio(ۂͷ࠶ੜ) ▸ WebBrowser(ϦϯΫΫϦοΫ࣌ʹ։͘ΞϓϦ಺ϒϥ΢β) ▸ StoreReview(SKStoreReviewίϯτϩʔϥͷදࣔ) ▸ FileSystem(ಈը/ۂΩϟογϡ:ະ࣮૷) ▸ Sentry(jsͷΫϥογϡϨϙʔςΟϯά) ▸ Permissions(Χϝϥύʔϛογϣϯ) ▸ DangerZone.Localization(localeͷऔಘ) ▸ Facebook(FacebookϩάΠϯ) ▸ ImagePIcker(ϢʔβΞΠίϯΛબ୒ࡍͷը૾બ୒) ▸ Camera(࿥ը)

Slide 25

Slide 25 text

μϯεಈը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(ଟݴޠରԠ)

Slide 26

Slide 26 text

μϯεಈըSNSΞϓϦ(4) αʔόͰॲཧ

Slide 27

Slide 27 text

ΞϓϦͷղੳͳͲӡ༻ʹ͍ͭͯ ▸ ղੳܥ͸ݱঢ়react-native link͠ͳ͍ͱ࢖༻ෆՄ ▸ Google Analytics·ͨ͸ExpoͰαϙʔτ͍ͯ͠Δ΋ͷ͚ͩ ▸ ԿΛͲ͜·Ͱղੳ͢Δͷ͔ʁ ▸ ϚʔέςΟϯάʹϦιʔεΛׂ͘͜ͱ͕Ͱ͖Δͷ͔ʁ ▸ ͦΕΒΛߟྀ͢Δͱࣗ෼ / ձࣾͰӡ༻͍ͯ͠Δ΋ͷ͸GAͰे෼

Slide 28

Slide 28 text

·ͱΊ ▸ ஍ਤΞϓϦ ▸ 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͸ॳظ։ൃͷεϐʔυΛ֨ஈʹ͋͛ͯ͘ΕΔ

Slide 29

Slide 29 text

༨ஊ React Native͓ΑͼExpo͸Ϧιʔε͕গͳ͍͔Βબ୒ͨ͠ͷͰɺ ਖ਼௚ͳͱ͜ΖͦΕͧΕͷωΠςΟϒΤϯδχΞ͕͍ΔͳΒ͹ɺ ωΠςΟϒͰͦΕͧΕΛ࡞ͬͨํ͕ݸਓతʹ͸ྑ͍ͱࢥ͏