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
460
フロントエンドエンジニアの友人と“型”で話がすれ違った原因 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
130
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
290
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
990
More Approvers for Greater OSS and Japan Community
tkikuc
1
110
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
0
230
ProxyによるWindow間RPC機構の構築
syumai
1
260
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
120
AIでLINEスタンプを作ってみた
eycjur
1
220
Namespace and Its Future
tagomoris
6
680
AIエージェント開発、DevOps and LLMOps
ymd65536
1
370
パスタの技術
yusukebe
1
550
Laravel Boost 超入門
fire_arlo
2
170
Featured
See All Featured
How to Ace a Technical Interview
jacobian
279
23k
Scaling GitHub
holman
463
140k
GraphQLとの向き合い方2022年版
quramy
49
14k
BBQ
matthewcrist
89
9.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Done Done
chrislema
185
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Code Review Best Practice
trishagee
70
19k
Making Projects Easy
brettharned
117
6.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
11
1.1k
Producing Creativity
orderedlist
PRO
347
40k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6.1k
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
ありがとうございました 🙌