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
240
React Native ことはじめ
nitaking
0
240
2021-06-24 最近のビルドツール調べてみた
nitaking
0
140
Fishのススメ
nitaking
0
72
Blitz.jsの紹介
nitaking
1
1k
Expo WEB × Next.js は実用できるのか?
nitaking
3
1k
react-hooks-loggerつくった話
nitaking
0
510
アプリリリースまでのつらみあれこれ
nitaking
0
660
React非同期ライブラリを知る
nitaking
0
170
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
525
40k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Fireside Chat
paigeccino
39
3.6k
Typedesign – Prime Four
hannesfritz
42
2.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Practical Orchestrator
shlominoach
190
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
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!