Android でも Haptics 入門 potatotips #84 @Kaito-Dogi

2023/09/26 開催の potatotips #84 にて、『Android でも Haptics 入門』 というテーマで発表しました。

Transcript

1. Android でも Haptics ⼊⾨ potatotips #84 @Kaito-Dogi
2. 自己紹介 @Kaito_Dogi @Kaito-Dogi • どぎー • 株式会社ゆめみ • Android エンジニア • カンボジア⾏ってきました󰏩
3. “Haptics” 聞いたことありますか？
5. “振動”
6. 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
7. 視覚、聴覚、そして “触覚”
8. Android でどう実装するか
9. Android での実装⽅法 引⽤：https://youtu.be/00jRoEFnpk8?si=AVNTj6BDWhllJibp HapticFeedback Constants ❏ Haptics の意味‧ ジェスチャーを重視 ❏ UI イベントへの応答 ❏ View が必要 ❏ Haptics の強さを重視 ❏ View なしで使える ❏ カスタムパターンを 定義できる VibrationEffect
10. 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
11. 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 押す‧離すのペアで 物理的なボタンを模倣
12. 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 に定義されている
13. VibrationEffect 1. createPredefined ◦ 事前定義されたパターンを使⽤する 2. createWaveform ◦ カスタムパターンを定義する 3. startComposition ◦ 事前定義されたパターンを合成して、よりリッチな カスタムパターンを定義する
14. 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
15. 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
16. 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
17. Android でどう取り⼊れるか
18. Material Design における原則 引⽤：https://m2.material.io/design/platform-guidance/android-haptics.html#usage 1. システムパターンに従う ◦ カスタムパターンは必要最低限 2. 全体的なユーザー体験を考える ◦ そのインタラクション‧コンテクスト‧環境に合うパターンを選ぶ ◦ 単独でも、オーディオ‧ビジュアルと組み合わせて使⽤してもよい 3. Haptics はシンプルな情報を伝えるもの 4. ユーザーを驚かせない ◦ 不快な触覚を避ける ◦ パターンを予測どおりに使⽤する
19. OS‧デバイスの制限を受ける 🚨
20. サンプルコード
21. 参考 ❏ 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
22. ありがとうございました 🙌