react-native-unimodulesのススメ

by Yu Watanabe

Slide 1

Slide 1 text

2019/09/03 Θͨͳ΂Ώ͏ REACT-NATIVE-UNIMODULESͷεεϝ

Slide 2

Slide 2 text

▸ ͸͡Ίʹ ▸ ࣗݾ঺հ ▸ લఏ৚݅ͱͯ͠ͷExpoʹ͍ͭͯ ▸ react-native-unimodulesʹ͍ͭͯ ▸ react-native-unimodules͕αϙʔτ͍ͯ͠ΔAPI ▸ ͜ͷػೳ͸Ͳ͏΍ͬͯ࡞Δʁ ▸ Ͳ͏͍͏ਓʹΦεεϝΛ͍͔ͨ͠ʁ ▸ ·ͱΊ ֓ཁ

Slide 3

Slide 3 text

͸͡Ίʹ react-native-camera࢖ͬͯ·͔͢ʁ (Χϝϥίϯϙʔωϯτ) react-native-sensors࢖ͬͯ·͔͢ʁ (Ճ଎౓ͱ͔δϟΠϩͱ͔ͷηϯαʔ) react-native-permissions࢖ͬͯ·͔͢ʁ (ΧϝϥͳͲͷݖݶऔಘ) react-native-location࢖ͬͯ·͔͢ʁ (Ґஔ৘ใऔಘ) react-native-video࢖ͬͯ·͔͢ʁ (ϏσΦίϯϙʔωϯτ) react-native-audio࢖ͬͯ·͔͢ʁ (Ի࠶ੜίϯϙʔωϯτ) react-native-unimodulesʹશ෦ೖ͍ͬͯ·͢ react-native-unimodules࢖͍·͠ΐ͏ react-native-sqlite-storage࢖ͬͯ·͔͢ʁ (SQLiteΛѻ͏ύοέʔδ)

Slide 4

Slide 4 text

ࣗݾ঺հ(1) Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։ ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu ٕज़ॻయ ϓογϡ௨஌αʔόຊ

Slide 5

Slide 5 text

ࣗݾ঺հ(2) ▸ https://www.gandh.jp ▸ 4໊(ΤϯδχΞ͸2ਓʹͳͬͨ)Ͱฏۉ೥ྸ30൒͹ͷձࣾ ▸ ετϦʔτΧϧνϟʔ × ITͳαʔϏεΛӡӦ ▸ ࠷ۙফͨ͠ࣄۀ -> Weddy Weddy ▸ μϯαʔ޲͚ͷϓϥοτϑΥʔϜܥSNSΞϓϦ ▸ ͪ͜ΒͰνϣΠεͨ͠གྷΓ΍͍͢ۂͰགྷͬͯಈըΛΞοϓ ▸ ࠓ࡞͍ͬͯΔࣄۀ ▸ μϯεͷΦϯϥΠϯϨοεϯΞϓϦ ▸ react-native + ﬁrebase + TypeScript + NextJS

Slide 6

Slide 6 text

REACT-NATIVE-UNIMODULESͷεεϝ લఏ৚݅ͱͯ͠ͷExpoʹ͍ͭͯ

Slide 7

Slide 7 text

લఏ৚݅ͱͯ͠ͷEXPOʹ͍ͭͯ(1) ʙEXPOͷಛ௃ʙ ▸ Xcode΍Android Studio͕ෆཁ ▸ JavaScriptͷΈͰReact NativeΞϓϦ͕࡞੒Մೳ ▸ ศརͳωΠςΟϒAPIΛExpo SDKͱͯ͠แׅͯ͠ϝϯςφϯε ▸ ΫϥΠΞϯτΞϓϦΛ࢖͏͜ͱͰ؆୯ʹ࣮ػ֬ೝ ▸ OTAͳͲศརͳػೳ΋౥ࡌ

Slide 8

Slide 8 text

લఏ৚݅ͱͯ͠ͷEXPOʹ͍ͭͯ(2) ʙEXPOͷσϝϦοτʙ ▸ ωΠςΟϒػೳ͕͞ΘΕͳ͍ ▸ VideoϓϨΠϠʔΛΧελϚΠζ͍ͨ͠ ▸ Bluetoothʹؔ͢ΔΞϓϦΛ࡞Γ͍ͨ ▸ Repro΍AdjustͳͲ֎෦SDKΛಋೖͰ͖ͳ͍ ▸ ﬁrebaseͷϑϧػೳʹରԠ͍ͯ͠ͳ͍ͳͲͳͲ ▸ όϯυϧαΠζ͕େ͖͘ͳΓ͕ͪ ▸ react-nativeͷόʔδϣϯ௥ै͕ͪΐͬͱ஗͘ͳΓ͕ͪ ϝϦοτ΋σϝϦοτ΋͋Γ ࡞Γ͍ͨΞϓϦʹΑͬͯExpoΛ࢖͏͔Ͳ͏͔Λ൑அ Ejectͯ͠ExpoKitͰӡ༻͢Δ͜ͱͰ͜ΕΒ΋ଟগղܾʁ

Slide 9

Slide 9 text

લఏ৚݅ͱͯ͠ͷEXPOʹ͍ͭͯ(3) ʙEXPOKITʹ͍ͭͯʙ ▸ Eject(Detach)Λͯ͠ExpoKitͱͯ͠ӡ༻͢Δͱʁ ▸ ωΠςΟϒػೳΛ৮Δ͜ͱ͕Մೳ ▸ podΛ͍͡ΔͳͲͯ͠όϯυϧαΠζ͸ଟগԼ͛ΕΔͳͲͳͲ ▸ όϯυϧαΠζΛେ෯ʹখ͘͢͞Δ͜ͱ͸ݫ͍͠ ▸ react-nativeͷόʔδϣϯ͸Expo SDKͷ·· ▸ ಺෦తʹෳࡶͰ͋ΔͷͰɺॊೈʹมߋ͢Δ͜ͱ͕ݫ͍͠ ▸ ӡ༻ίετ͕ߴ͍ͷͰExpoKitͰ͋Δඞཁ΋ͳ͍ͷͰ͸ͳ͍͔ʁ ϞϊϦγοΫͳͨΊʹ৭ʑͱ੍໿͕ग़ͯ͠·͏ Ϟδϡʔϧʹ෼཭ͯ͠औͬͨΓ෇͚ͨΓͰ͖ΔΑ͏ʹ͠Α͏ -> react-native-unimodulesͷొ৔ ࢀߟɿIUUQTCMPHFYQPJPFYQPLJUFDCG

Slide 10

Slide 10 text

REACT-NATIVE-UNIMODULESͷεεϝ react-native-unimodulesʹ͍ͭͯ

Slide 11

Slide 11 text

REACT-NATIVE-UNIMODULESʹ͍ͭͯ(1) ▸ ExpoνʔϜ͕։ൃ͍ͯ͠ΔExpoͷ࠷௿ݶͷίΞ෦෼ ▸ react-native-unimodulesΛ࢖༻ͨ͠workﬂow͸Bare workﬂowͱݴ͏ ▸ react-native-unimodulesΛ௨ͯ͠ɺExpoͷAPI͕࢖༻Մೳʹ ▸ expo-cameraͳͲ෼཭͍ͯ͠ΔύοέʔδΛΠϯϙʔτͯ͠࢖༻ ▸ ύοέʔδ͕෼཭͞Ε͍ͯΔͷͰݸʑͰόʔδϣϯΞοϓ͕ߦΘΕΔ ▸ ૉͷreact-nativeͱಉ༷ʹXcode΍Android StudioΛ࢖͏ https://tech.kitchhike.com/entry/react-native-expo-session-01

Slide 12

Slide 12 text

REACT-NATIVE-UNIMODULESʹ͍ͭͯ(2) ʙEXPOKITͱԿ͕ҧ͏ͷ͔ʁʙ ▸ Expo SDKʹґଘ͠ͳ͍ͷͰreact-nativeͷόʔδϣϯΛࣗ༝ʹมߋՄೳ ▸ ඞཁͳύοέʔδͷΈΛΠϯετʔϧͯ͠࢖༻Մೳ ▸ ૉͷreact-nativeϓϩδΣΫτʹ΋ޙ͔Β؆୯ʹಋೖՄೳ ▸ OTAΞοϓσʔτͳͲҰ෦࢖༻Ͱ͖ͳ͍API͋Γ(ޙεϥΠυʹهड़) https://tech.kitchhike.com/entry/react-native-expo-session-01 expo init —template bare-minimumͰ؆୯ʹ࢖͑Δ

Slide 13

Slide 13 text

REACT-NATIVE-UNIMODULESʹ͍ͭͯ(3) ʙେ͖ͳಛ௃ʙ ▸ v0.5.0͔ΒExpoΫϥΠΞϯτͰ΋࣮ߦ͕Մೳʹ ▸ ݟͨ໨ͷ֬ೝ΍શମΛݟΔͷ͕ͱͯ΋؆୯ʹ ▸ ͨͩ͠ɺExpo SDKʹؚ·Ε͍ͯͳ͍ωΠςΟϒػೳ͸࢖͑ͳ͍ ▸ ﬁrebaseͷϑϧػೳ / Repro / Adjust / ͳͲͳͲ ▸ JavaScript͚ͩΛExpoΫϥΠΞϯτͰ࣮ߦͯ͘͠ΕΔ .expo.jsͳͲʹมߋ͢Δ͜ͱͰผಡΈࠐΈՄೳ ৄ͍͠ྫ -> https://www.youtube.com/watch?v=FlZFsMnYuWg

Slide 14

Slide 14 text

REACT-NATIVE-UNIMODULESʹ͍ͭͯ(4) ʙ௨ৗϏϧυͰͷ࣮ߦʙ

Slide 15

Slide 15 text

REACT-NATIVE-UNIMODULESʹ͍ͭͯ(5) ʙผϑΝΠϧΛ࡞੒ʙ

Slide 16

Slide 16 text

REACT-NATIVE-UNIMODULESʹ͍ͭͯ(6) ʙEXPO CLIENTͰͷ࣮ߦʙ

Slide 17

Slide 17 text

REACT-NATIVE-UNIMODULESͷεεϝ react-native-unimodules͕αϙʔτ͍ͯ͠ΔAPI

Slide 18

Slide 18 text

REACT-NATIVE-UNIMODULES͕αϙʔτ͍ͯ͠ΔAPI(1) ʙରԠࡁΈAPIʙ ▸ https://docs.expo.io/versions/v34.0.0/bare/unimodules-full-list/ ▸ ExpoͰ࢖༻Ͱ͖ΔAPI͓Αͼίϯϙʔωϯτ͕΄΅΄΅࢖༻Մೳ ▸ Expo͕؅ཧ͍ͯ͠ΔͷͰߋ৽΋ৗʹߦΘΕ͍ͯΔ ▸ طଘͷύοέʔδΛforkͯ͠؅ཧͯ͠Δ৔߹΋͋Δ(ΧϝϥͳͲ) Accelerometer   Admob   Amplitude   AppAuth   Asset   Audio   AV   BarCodeScanner   Barometer   Brightness   BlurView   Calendar   Camera   Constants   Contacts   Crypto  DeviceMotion   DocumentPicker   Facebook   FaceDetector   FileSystem   Font   GLView   GoogleSignIn   Gyroscope   Haptics   ImageManipulator   ImagePicker   IntentLauncher   KeepAwake   LinearGradient   LocalAuthentication   Localization   Location   Magnetometer   MailComposer   MediaLibrary   Pedometer   Permissions   Print   Random   SecureStore   Segment   Sharing   SMS   SQLite   Video   VideoThumbnails   WebBrowser InAppPurchases react-native-unimodulesͷΈ InAppPurchases͕࢖༻Մೳ

Slide 19

Slide 19 text

REACT-NATIVE-UNIMODULES͕αϙʔτ͍ͯ͠ΔAPI(2) ʙඇରԠAPIʙ AR AppLoading AuthSession BackgroundFetch ErrorRecovery Linking Notiﬁcations ScreenOrientation SplashScreen StoreReview TaskManager Updates ▸ ॱ൪͸ܾ·͍ͬͯͳ͍͕ͦΕͧΕରԠ༧ఆ ▸ ࢖͑ͳ͍ػೳ͸ଞͷnpmΛಡΈࠐΉͳͲͰରॲ Updates(OTAΞοϓσʔτ)ͷରԠ׬ྃޙʹ v1.0.0ͱͯ͠ਖ਼ࣜʹϦϦʔε༧ఆ

Slide 20

Slide 20 text

REACT-NATIVE-UNIMODULESͷεεϝ ͜ͷػೳ͸Ͳ͏΍ͬͯ࡞Δʁ

Slide 21

Slide 21 text

͜ͷػೳ͸Ͳ͏΍ͬͯ࡞Δʁ(1) ʙΞϓϦ಺WEBϒϥ΢βʙ ▸ ϦϯΫΛ։͍ͨࡍʹWebViewΛදࣔ ▸ ϖʔδཤྺͳͲෳࡶͳػೳ͕ඞཁ ▸ ։ൃ͢Δίετ͕͔ͳΓߴ͍ ΞϓϦ಺Webϒϥ΢β ▸ npmύοέʔδΛ࢖༻ ▸ ྆ରԠͰཁ݅Λຬͨ͢ύοέʔδ͕ͳ͍ ▸ iOS/AndroidͰ2ͭύοέʔδ͕ඞཁ ▸ ύοέʔδ؅ཧίετ͕ߴ͍ expo-web-browserͰ؆୯࣮૷

Slide 22

Slide 22 text

͜ͷػೳ͸Ͳ͏΍ͬͯ࡞Δʁ(2) ʙΞϓϦ಺WEBϒϥ΢βʙ ΞϓϦ಺Webϒϥ΢β

Slide 23

Slide 23 text

͜ͷػೳ͸Ͳ͏΍ͬͯ࡞Δʁ(3) ʙΠϝʔδϐοΧʔʙ ը૾Λબ୒ͯ͠Ϋϩοϓ

Slide 24

Slide 24 text

REACT-NATIVE-UNIMODULESͷεεϝ Ͳ͏͍͏ਓʹΦεεϝΛ͍͔ͨ͠ʁ

Slide 25

Slide 25 text

Ͳ͏͍͏ਓʹΦεεϝΛ͍͔ͨ͠ʁ ▸ ExpoΛ࢖͍ͬͯΔ͕ɺͲ͏ͯ͠΋EjectΛ͠ͳ͍ͱ͍͚ͳ͘ͳͬͨਓ ▸ Χϝϥػೳ͚ͩվ଄͍ͨ͠৔߹ ▸ Repro΍AdjustͳͲΛೖΕͳ͍ͱ͍͚ͳ͍৔߹ ▸ ૉͷreact-nativeΛ࢖͍ͬͯΔਓ ▸ ߋ৽͞Εͳ͍ύοέʔδ΋͋ͬͯ؅ཧ͕େม ▸ InAppPurchaseΛ࢖͍͍ͨ৔߹ ▸ ͍͖ͳΓExpoԽ͡Όͳͯ͘ஈ֊తʹߦ͍͖͍ͬͯͨ৔߹ ͱΓ͋͑ͣศརͳAPI/ίϯϙʔωϯτ܈ͩͱࢥͬͯ࢖ͬͯ΄͍͠

Slide 26

Slide 26 text

·ͱΊ ▸ react-native-unimodules͸ExpoͷAPI/ίϯϙʔωϯτΛ  ૉͷreact-nativeͰ΋࢖͑ΔΑ͏ʹ͢ΔͨΊͷ΋ͷ ▸ ExpoKitͱҧͬͯ͋ͱ͔Βಋೖ͢Δͷ΋؆୯ ▸ Expo͕ύοέʔδ෼ׂΛͯ͠؅ཧ͍ͯ͠ΔͷͰؾ࣋ͪతʹ҆৺ ▸ কདྷతʹ͸OTAΞοϓσʔτͳͲ΋ରԠ ▸ ExpoࣗମίϛϡχςΟ͕׆ൃͳͷͰunimodulesରԠ΋׆ൃ ▸ ·ͣ͸ศརͳAPI/ίϯϙʔωϯτ܈ͱࢥͬͯ࢖͏΂͖

Slide 27

Slide 27 text

͓ΘΓ