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
Android でも Haptics 入門 potatotips #84 @Kaito-Dogi
Search
Kaito-Dogi
September 26, 2023
Programming
0
280
Android でも Haptics 入門 potatotips #84 @Kaito-Dogi
2023/09/26 開催の potatotips #84 にて、『Android でも Haptics 入門』 というテーマで発表しました。
Kaito-Dogi
September 26, 2023
Tweet
Share
More Decks by Kaito-Dogi
See All by Kaito-Dogi
Expo Router は Expo 導入の決め手となるか フロントエンドカンファレンス沖縄2023 @Kaito-Dogi
kaito_dogi
3
4.1k
Kotlin で AWS Lambda 動かしてみた Server-Side Kotlin Meetup vol.9 @Kaito-Dogi
kaito_dogi
1
470
フロントエンドエンジニアの友人と“型”で話がすれ違った原因 YUMEMI.grow合同LT会in横浜 @Kaito-Dogi
kaito_dogi
1
660
ウォッチフェイス作ってみた shibuya.apk #41 @Kaito-Dogi
kaito_dogi
0
1.4k
Other Decks in Programming
See All in Programming
testingを眺める
matumoto
1
140
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
780
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
3.4k
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
300
AI Agents: How Do They Work and How to Build Them @ Shift 2025
slobodan
0
110
Design Foundational Data Engineering Observability
sucitw
3
210
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
350
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
Namespace and Its Future
tagomoris
6
710
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.9k
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Rails Girls Zürich Keynote
gr2m
95
14k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
530
Documentation Writing (for coders)
carmenintech
74
5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Balancing Empowerment & Direction
lara
3
620
Large-scale JavaScript Application Architecture
addyosmani
513
110k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Code Review Best Practice
trishagee
71
19k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Transcript
Android でも Haptics ⼊⾨ potatotips #84 @Kaito-Dogi
自己紹介 @Kaito_Dogi @Kaito-Dogi • どぎー • 株式会社ゆめみ • Android エンジニア
• カンボジア⾏ってきました
“Haptics” 聞いたことありますか?
None
“振動”
Haptics とは ❏ Haptics is everything you feel through the
sense of touch. > 触覚を通して感じるものすべて ❏ Android apps can give users a richer experience with subtlety and depth. > 繊細さと奥⾏きのあるリッチなユーザー体験 引⽤:https://developer.android.com/develop/ui/views/haptics
視覚、聴覚、そして “触覚”
Android でどう実装するか
Android での実装⽅法 引⽤:https://youtu.be/00jRoEFnpk8?si=AVNTj6BDWhllJibp HapticFeedback Constants ❏ Haptics の意味‧ ジェスチャーを重視 ❏
UI イベントへの応答 ❏ View が必要 ❏ Haptics の強さを重視 ❏ View なしで使える ❏ カスタムパターンを 定義できる VibrationEffect
class HapticTouchListener : View.OnTouchListener { override fun onTouch(view: View, event:
MotionEvent) : Boolean { when (event.actionMasked) { MotionEvent.ACTION_DOWN -> view.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY) MotionEvent.ACTION_UP -> view.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY_RELEASE) } return true } } HapticFeedbackConstants 引⽤:https://developer.android.com/develop/ui/views/haptics/haptic-feedback
class HapticTouchListener : View.OnTouchListener { override fun onTouch(view: View, event:
MotionEvent) : Boolean { when (event.actionMasked) { MotionEvent.ACTION_DOWN -> view.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY) MotionEvent.ACTION_UP -> view.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY_RELEASE) } return true } } HapticFeedbackConstants 引⽤:https://developer.android.com/develop/ui/views/haptics/haptic-feedback 押す‧離すのペアで 物理的なボタンを模倣
class HapticTouchListener : View.OnTouchListener { override fun onTouch(view: View, event:
MotionEvent) : Boolean { when (event.actionMasked) { MotionEvent.ACTION_DOWN -> view.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY) MotionEvent.ACTION_UP -> view.performHapticFeedback(HapticFeedbackConstants.VIRTUAL_KEY_RELEASE) } return true } } HapticFeedbackConstants 引⽤:https://developer.android.com/develop/ui/views/haptics/haptic-feedback View に定義されている
VibrationEffect 1. createPredefined ◦ 事前定義されたパターンを使⽤する 2. createWaveform ◦ カスタムパターンを定義する 3.
startComposition ◦ 事前定義されたパターンを合成して、よりリッチな カスタムパターンを定義する
val vibrator = context.getSystemService(Vibrator::class.java) vibrator.vibrate(VibrationEffect.createPredefined(VibrationEffect.EFFECT_CLICK)) VibrationEffect#createPredefined 引⽤:https://developer.android.com/develop/ui/views/haptics/haptic-feedback
val vibrator = context.getSystemService(Vibrator::class.java) val timings: LongArray = longArrayOf(50, 50,
100, 50, 50) val amplitudes: IntArray = intArrayOf(64, 128, 255, 128, 64) val repeatIndex = -1 vibrator.vibrate( VibrationEffect.createWaveform(timings, amplitudes, repeatIndex), ) VibrationEffect#createWaveform 引⽤:https://developer.android.com/develop/ui/views/haptics/custom-haptic-effects
val vibrator = context.getSystemService(Vibrator::class.java) val scale = 0.8f val delayMs
= 100 vibrator.vibrate( VibrationEffect.startComposition().addPrimitive( VibrationEffect.Composition.PRIMITIVE_SLOW_RISE, ).addPrimitive( VibrationEffect.Composition.PRIMITIVE_CLICK, scale, delayMs, ).compose(), ) VibrationEffect#startComposition 引⽤:https://developer.android.com/develop/ui/views/haptics/custom-haptic-effects
Android でどう取り⼊れるか
Material Design における原則 引⽤:https://m2.material.io/design/platform-guidance/android-haptics.html#usage 1. システムパターンに従う ◦ カスタムパターンは必要最低限 2. 全体的なユーザー体験を考える
◦ そのインタラクション‧コンテクスト‧環境に合うパターンを選ぶ ◦ 単独でも、オーディオ‧ビジュアルと組み合わせて使⽤してもよい 3. Haptics はシンプルな情報を伝えるもの 4. ユーザーを驚かせない ◦ 不快な触覚を避ける ◦ パターンを予測どおりに使⽤する
OS‧デバイスの制限を受ける 🚨
サンプルコード
参考 ❏ Implement haptics on Android https://developer.android.com/develop/ui/views/haptics ❏ Advanced Haptics:
The when, what, and how of new haptic APIs (Android Dev Summit '19) https://youtu.be/00jRoEFnpk8?si=AVNTj6BDWhllJibp ❏ Add haptic feedback to events https://developer.android.com/develop/ui/views/haptics/haptic-feedback ❏ Create custom haptic effects https://developer.android.com/develop/ui/views/haptics/custom-haptic-effects ❏ Android haptics https://m2.material.io/design/platform-guidance/android-haptics.html ❏ UX foundation for haptic framework https://source.android.com/docs/core/interaction/haptics/haptics-ux-foundation ❏ Haptic Samples https://github.com/android/platform-samples/tree/main/samples/user-interface/haptics ❏ android / platform / frameworks / base / refs/heads/main / . / core / java / android / os / VibrationEffect.java https://android.googlesource.com/platform/frameworks/base/+/refs/heads/master/core/java/android/os/Vibration Effect.java ❏ CoreHaptics⼊⾨ by Satsuki Hashiba https://fortee.jp/iosdc-japan-2023/proposal/b630fa79-2c28-41ec-a6b2-6954b62f1858
ありがとうございました 🙌