Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
あの震えるインタラクションを実装したい
Search
nitaking
July 03, 2019
1
1.3k
あの震えるインタラクションを実装したい
2019-07-03 LT reactjs-lt
keyword: haptic, expo-haptics, react-native-unimodules, react-native, expo
nitaking
July 03, 2019
Tweet
Share
More Decks by nitaking
See All by nitaking
人は30分でLT資料を作って発表できるのか
nitaking
0
170
React Native ことはじめ
nitaking
0
190
2021-06-24 最近のビルドツール調べてみた
nitaking
0
97
Fishのススメ
nitaking
0
53
Blitz.jsの紹介
nitaking
1
930
Expo WEB × Next.js は実用できるのか?
nitaking
3
990
react-hooks-loggerつくった話
nitaking
0
450
アプリリリースまでのつらみあれこれ
nitaking
0
530
React非同期ライブラリを知る
nitaking
0
160
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5k
RailsConf 2023
tenderlove
29
880
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Thoughts on Productivity
jonyablonski
67
4.3k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
For a Future-Friendly Web
brad_frost
175
9.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Designing Experiences People Love
moore
138
23k
The Cost Of JavaScript in 2023
addyosmani
45
6.6k
Done Done
chrislema
181
16k
The Cult of Friendly URLs
andyhume
78
6k
Transcript
͋ͷ͑ΔΠϯλϥΫγϣϯΛ࣮͍ͨ͠ 2019-07-03 React LTձ twitter: @nitaking_ github: nitaking
About ɾSatoshi Nitawaki ɾຊञ͖ΤϯδχΞ ɾReact Native, Node, TSͳͲ ɾ࠷ۙOSS࡞ͬͯΈͨΓ
None
͕มߋ͞ΕΔͨͼʹ খ͞ͳόΠϒ͕ൃੜ͢Δ ʢiOSͩͱTwitter͍͍ͶϘλϯԡͨ͠ͱ͖ͷ͑Ͱ͢ʣ
͜Εͳʹʁ
Haptic (Haptic Feedback) - ৮֮ϑΟʔυόοΫ
Haptic (Haptic Feedback) iOS 10(iPhone7)͔ΒOSʹAPIඋ iPhoneৗతʹϙίϙί → iPhone 7 -
8ͷϗʔϜϘλϯHapticѻ͍͔ͳ Androidͨ·ʹ͔͠ϙίϙίಈ͔ͳ͍ → AndroidϢʔβʔʹׂͱ৽
Haptic (Haptic Feedback) ex) ɾtogglͷೖྗ࣌ؒมߋ ɾinstagramͷετʔϦʔ ϑΟϧλʔมߋ ɾϦετը໘ͷεϫΠϓμϯͯ͠ߋ৽ͨ͠ͱ͖ʢiosʣ ɾRNͷRefreshControlͷonRefresh࣌ʹios͑ͯͨͣ ɾappstoreͷΠϯετʔϧྃɺࣦഊʢiosʣ
ɹɾجຊతʹiOSͷΤίγεςϜ͑·ͬͯ͘ΔΠϝʔδ
React NativeͰ࣮ͯ͠Έ͍ͨ
࣮ 1. RNͷඪ४Vibration • όΠϒ࣌ؒͨ͘͠Βߦ͚Δ͔ͱࢥͬͨΒͦΜͳ͜ͱ ͳ͍ • msecηοτˠʮϒʔʔϯʯ • ͜Εઈର͕ͪ͏
࣮ 2. expo-haptic • ໊લ͔Βͯ͠ຊ໋ • Expo APIͷͻͱͭ • ͪΖΜexpoΞϓϦ͔Β͙͢ʹ༻Ͱ͖Δ
• ଞʹHapticܥϥΠϒϥϦଘࡏ͠ͳ͔ͬͨ
࣮ 2. expo-haptic • Haptic.selectionAsync() • Haptic.notificationAsync(NotificationFeedback) • success •
warning • error • Haptic.impactAsync(ImpactFeedback) • light • medium • heavy • Asyncදهͷͳ͍method͋Γ·͕͢DeprecatedͰ͢
ૉͷRNͰ͑ΔΜ͚ͩͬʁ
react-native-unimodules
react-native-unimodules • expo APIΛૉͷRNͰ༻Մೳʹ͢ΔڥΛఏڙ • ಋೖͷྲྀΕ 1. npm install react-native-unimodules
2. ΞϓϦͷ֤ػೳͷPermissionઃఆ ɾɾɾunimoduleΛinstallͯ͠͏
ಋೖ • https://github.com/unimodules/react-native-unimodules • Android • android/settings.gradle มߋ • android/app/build.gradle
มߋ • minSdkVersion ɿ16 → 21 • MainApplication.java มߋ • AndroidManifest.xml ʹ permissionՃ • ʹDiff༻ҙ͞ΕͯΔͷͰ ಋೖΘ͔Γ͍͢
ಋೖ • https://github.com/unimodules/react-native-unimodules • iOS • Podfile มߋ • AppDelegate.h
มߋ • AppDelegate.m มߋ • Info.plist ʹpermissionՃ
react-native-unimodules • react-native-unimodulesͷpod install࣌ • ↓defaultͰ20ݸۙ͘unimodule͕install͞ΕͪΌ͏ ΞϓϦαΠζΛҙࣝ͢ΔͳΒݸผʹignoreࢦఆΛͨ͠΄͏͕͍͍ɻʢެࣜࢀরʣ
Expo-haptics • ૉͷRNʹexpo-hapticsೖΕͯΈͨ • Ի͕ͳ͍ͱ·ͬͨ͘ΘΒͳ͍ͷͰɹ ޙ΄ͲπΠολʔʹΞοϓ͠·͢ʂ
ଞͷunimoduleͬͯͲΜͳͷ͕͋Δʁ
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/
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͋Δ
• expo-face-detector • إೝࣝ • Ṗਫ਼ • ඍসΈͱΕΔ • Λ։͍͍ͯΔ
• ਖ਼໘OK,ԣ͖ࣸਅNG ͷόϦσʔγϣϯ ʹ͑Δʁ ྫ͑
expoૉRNʹ ؔͷͳ͍ͩͱࢥ͍ͬͯͨ
expoͷ༏लͳunimodules ࣮ૉͷRNͰ͑Δ
Enjoy RN dev!