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
250
React Native ことはじめ
nitaking
0
250
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
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Music & Morning Musume
bryan
46
6.8k
Producing Creativity
orderedlist
PRO
347
40k
Code Reviewing Like a Champion
maltzj
526
40k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Unsuck your backbone
ammeep
671
58k
Automating Front-end Workflow
addyosmani
1371
200k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
33
2.3k
Making Projects Easy
brettharned
120
6.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.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!