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.4k
あの震えるインタラクションを実装したい
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
210
React Native ことはじめ
nitaking
0
220
2021-06-24 最近のビルドツール調べてみた
nitaking
0
120
Fishのススメ
nitaking
0
68
Blitz.jsの紹介
nitaking
1
990
Expo WEB × Next.js は実用できるのか?
nitaking
3
1k
react-hooks-loggerつくった話
nitaking
0
490
アプリリリースまでのつらみあれこれ
nitaking
0
620
React非同期ライブラリを知る
nitaking
0
170
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
2.9k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
GraphQLとの向き合い方2022年版
quramy
46
14k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2k
Making the Leap to Tech Lead
cromwellryan
133
9.2k
Faster Mobile Websites
deanohume
306
31k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.4k
How to Think Like a Performance Engineer
csswizardry
23
1.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
580
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
A Tale of Four Properties
chriscoyier
158
23k
The Invisible Side of Design
smashingmag
299
50k
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!