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
250
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
4k
Kotlin で AWS Lambda 動かしてみた Server-Side Kotlin Meetup vol.9 @Kaito-Dogi
kaito_dogi
1
420
フロントエンドエンジニアの友人と“型”で話がすれ違った原因 YUMEMI.grow合同LT会in横浜 @Kaito-Dogi
kaito_dogi
1
650
ウォッチフェイス作ってみた shibuya.apk #41 @Kaito-Dogi
kaito_dogi
0
1.3k
Other Decks in Programming
See All in Programming
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
Kanzawa.rbのLT大会を支える技術の裏側を変更する Ruby on Rails + Litestream 編
muryoimpl
0
220
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
Domain-Driven Transformation
hschwentner
2
1.9k
チームリードになって変わったこと
isaka1022
0
190
SwiftUIで単方向アーキテクチャを導入して得られた成果
takuyaosawa
0
260
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
Unity Android XR入門
sakutama_11
0
140
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.3k
CI改善もDatadogとともに
taumu
0
110
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
Visualization
eitanlees
146
15k
Typedesign – Prime Four
hannesfritz
40
2.5k
Raft: Consensus for Rubyists
vanstee
137
6.8k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
GraphQLとの向き合い方2022年版
quramy
44
13k
The World Runs on Bad Software
bkeepers
PRO
67
11k
BBQ
matthewcrist
86
9.5k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
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
ありがとうございました 🙌