あの震えるインタラクションを実装したい

2019-07-03 LT reactjs-lt
keyword: haptic, expo-haptics, react-native-unimodules, react-native, expo

Transcript

1. ͋ͷ਒͑ΔΠϯλϥΫγϣϯΛ࣮૷͍ͨ͠ 2019-07-03 React LTձ twitter: @nitaking_ github: nitaking
2. About ɾSatoshi Nitawaki ɾ೔ຊञ޷͖ΤϯδχΞ ɾReact Native, Node, TSͳͲ ɾ࠷ۙ͸OSS࡞ͬͯΈͨΓ
4. ෼͕มߋ͞ΕΔͨͼʹ খ͞ͳόΠϒ͕ൃੜ͢Δ ʢiOSͩͱTwitter͍͍ͶϘλϯԡͨ͠ͱ͖ͷ਒͑Ͱ͢ʣ
5. ͜Εͳʹʁ
6. Haptic (Haptic Feedback) - ৮֮ϑΟʔυόοΫ
7. Haptic (Haptic Feedback) iOS 10(iPhone7)͔ΒOSʹAPI૷උ iPhone͸೔ৗతʹϙίϙί → iPhone 7 - 8ͷϗʔϜϘλϯ΋Hapticѻ͍͔ͳ Android͸ͨ·ʹ͔͠ϙίϙίಈ͔ͳ͍ → AndroidϢʔβʔʹ͸ׂͱ৽઱
8. Haptic (Haptic Feedback) ex) ɾtogglͷೖྗ࣌ؒมߋ ɾinstagramͷετʔϦʔ ϑΟϧλʔมߋ ɾϦετը໘ͷεϫΠϓμ΢ϯͯ͠ߋ৽ͨ͠ͱ͖ʢiosʣ ɾRNͷRefreshControlͷonRefresh࣌ʹios͸਒͑ͯͨ͸ͣ ɾappstoreͷΠϯετʔϧ׬ྃɺࣦഊʢiosʣ ɹɾجຊతʹiOSͷΤίγεςϜ಺͸਒͑·ͬͯ͘ΔΠϝʔδ
9. React NativeͰ࣮૷ͯ͠Έ͍ͨ
10. ࣮૷ 1. RNͷඪ४Vibration • όΠϒ࣌ؒ୹ͨ͘͠Βߦ͚Δ͔ͱࢥͬͨΒͦΜͳ͜ͱ ͸ͳ͍ • ਺msecηοτˠʮϒʔʔϯʯ • ͜Ε͸ઈର͕ͪ͏
11. ࣮૷ 2. expo-haptic • ໊લ͔Βͯ͠ຊ໋ • Expo APIͷͻͱͭ • ΋ͪΖΜexpoΞϓϦ͔Β͸͙͢ʹ࢖༻Ͱ͖Δ • ଞʹHapticܥϥΠϒϥϦ͸ଘࡏ͠ͳ͔ͬͨ
12. ࣮૷ 2. expo-haptic • Haptic.selectionAsync() • Haptic.notificationAsync(NotificationFeedback) • success • warning • error • Haptic.impactAsync(ImpactFeedback) • light • medium • heavy • Asyncදهͷͳ͍method΋͋Γ·͕͢DeprecatedͰ͢
13. ૉͷRNͰ࢖͑ΔΜ͚ͩͬʁ
14. react-native-unimodules
15. react-native-unimodules • expo APIΛૉͷRNͰ΋࢖༻Մೳʹ͢Δ؀ڥΛఏڙ • ಋೖͷྲྀΕ 1. npm install react-native-unimodules 2. ΞϓϦͷ֤ػೳ΁ͷPermissionઃఆ
 
 ɾɾɾunimoduleΛinstallͯ͠࢖͏
16. ಋೖ • https://github.com/unimodules/react-native-unimodules • Android • android/settings.gradle มߋ • android/app/build.gradle มߋ • minSdkVersion ɿ16 → 21 • MainApplication.java มߋ • AndroidManifest.xml ʹ
 permission௥Ճ • ਌੾ʹDiff΋༻ҙ͞ΕͯΔͷͰ
 ಋೖ͸Θ͔Γ΍͍͢
17. ಋೖ • https://github.com/unimodules/react-native-unimodules • iOS • Podfile มߋ • AppDelegate.h มߋ • AppDelegate.m มߋ • Info.plist ʹpermission௥Ճ
18. react-native-unimodules • react-native-unimodulesͷpod install࣌ • ↓defaultͰ20ݸۙ͘unimodule͕install͞ΕͪΌ͏
 ΞϓϦαΠζΛҙࣝ͢ΔͳΒݸผʹignoreࢦఆΛͨ͠΄͏͕͍͍ɻʢެࣜࢀরʣ
19. Expo-haptics • ૉͷRNʹexpo-hapticsೖΕͯΈͨ • Ի੠͕ͳ͍ͱ·ͬͨ͘఻ΘΒͳ͍ͷͰɹ
 ޙ΄ͲπΠολʔʹΞοϓ͠·͢ʂ
20. ଞͷunimoduleͬͯͲΜͳͷ͕͋Δʁ
21. unimodules • expo-ads-admob • expo-ads-facebook • expo-analytics-amplitude • expo-analytics-segment • expo-app-auth • expo-app-loader-provider • expo-asset • expo-av • expo-background-fetch • expo-barcode-scanner • expo-blur • expo-brightness • expo-calendar • expo-camera • expo-constants • expo-contacts-flutter-plugin • expo-contacts • expo-crypto • expo-document-picker • expo-face-detector • expo-facebook • expo-file-system • expo-flutter-adapter • expo-font • expo-gl-cpp • expo-gl • expo-google-sign-in • expo-haptics • expo-image-manipulator • expo-image-picker • expo-in-app-purchases • expo-intent-launcher • expo-keep-awake • expo-linear-gradient • expo-local-authentication • expo-localization • expo-location • expo-mail-composer • expo-media-library • expo-module-scripts • expo-module-template • expo-payments-stripe • expo-permissions-flutter-plugin • expo-permissions • expo-print • expo-processing • expo-random • expo-secure-store • expo-sensors-flutter-plugin • …ʴ10ݸ͘Β͍ https://docs.expo.io/versions/latest/bare/unimodules-full-list/
22. Expo APIs • expo-ads-admob • expo-ads-facebook • expo-analytics-amplitude • expo-analytics-segment • expo-app-auth • expo-app-loader-provider • expo-asset • expo-av • expo-background-fetch • expo-barcode-scanner • expo-blur • expo-brightness • expo-calendar • expo-camera • expo-constants • expo-contacts-flutter-plugin • expo-contacts • expo-crypto • expo-document-picker • expo-face-detector • expo-facebook • expo-file-system • expo-flutter-adapter • expo-font • expo-gl-cpp • expo-gl • expo-google-sign-in • expo-haptics • expo-image-manipulator • expo-image-picker • expo-in-app-purchases • expo-intent-launcher • expo-keep-awake • expo-linear-gradient • expo-local-authentication • expo-localization • expo-location • expo-mail-composer • expo-media-library • expo-module-scripts • expo-module-template • expo-payments-stripe • expo-permissions-flutter-plugin • expo-permissions • expo-print • expo-processing • expo-random • expo-secure-store • expo-sensors-flutter-plugin • …ʴ10ݸ͘Β͍ ଟ͗͢ Flutter pluginͱ͔͋Δ ༏लͳunimodule͋Δ
23. • expo-face-detector • إೝࣝ • Ṗਫ਼౓ • ඍসΈ཰ͱΕΔ • ໨Λ։͍͍ͯΔ཰΋ • ਖ਼໘OK,ԣ޲͖ࣸਅNG
 ͷόϦσʔγϣϯ
 ʹ࢖͑Δʁ ྫ͑͹
24. expo͸ૉRNʹ ؔ܎ͷͳ͍࿩ͩͱࢥ͍ͬͯͨ
25. expoͷ༏लͳunimodules͸ ࣮͸ૉͷRNͰ΋࢖͑Δ
26. Enjoy RN dev!