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.2k
あの震えるインタラクションを実装したい
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
160
React Native ことはじめ
nitaking
0
190
2021-06-24 最近のビルドツール調べてみた
nitaking
0
93
Fishのススメ
nitaking
0
53
Blitz.jsの紹介
nitaking
1
910
Expo WEB × Next.js は実用できるのか?
nitaking
3
980
react-hooks-loggerつくった話
nitaking
0
440
アプリリリースまでのつらみあれこれ
nitaking
0
520
React非同期ライブラリを知る
nitaking
0
160
Featured
See All Featured
For a Future-Friendly Web
brad_frost
174
9.3k
Teambox: Starting and Learning
jrom
131
8.7k
Infographics Made Easy
chrislema
239
18k
From Idea to $5000 a Month in 5 Months
shpigford
379
46k
Speed Design
sergeychernyshev
22
430
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
Visualization
eitanlees
142
15k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Embracing the Ebb and Flow
colly
83
4.4k
What the flash - Photography Introduction
edds
67
11k
Six Lessons from altMBA
skipperchong
26
3.4k
Optimizing for Happiness
mojombo
375
69k
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!