$30 off During Our Annual Pro Sale. View Details »

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

nitaking
July 03, 2019
830

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

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

nitaking

July 03, 2019
Tweet

Transcript

  1. ͋ͷ਒͑ΔΠϯλϥΫγϣϯΛ࣮૷͍ͨ͠ 2019-07-03 React LTձ twitter: @nitaking_ github: nitaking

  2. About ɾSatoshi Nitawaki ɾ೔ຊञ޷͖ΤϯδχΞ ɾReact Native, Node, TSͳͲ ɾ࠷ۙ͸OSS࡞ͬͯΈͨΓ

  3. None
  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!