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
EMこそClaude Codeでコード調査しよう
shibayu36
0
280
Go言語はstack overflowの夢を見るか?
logica0419
0
500
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
190
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
340
モテるデスク環境
mozumasu
3
250
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
200
iOSでSVG画像を扱う
kishikawakatsumi
0
140
Google Opalで使える37のライブラリ
mickey_kubo
2
120
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
660
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
220
NixOS + Kubernetesで構築する自宅サーバーのすべて
ichi_h3
0
1.1k
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.4k
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
How STYLIGHT went responsive
nonsquared
100
5.8k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Fireside Chat
paigeccino
40
3.7k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Typedesign – Prime Four
hannesfritz
42
2.8k
Designing for Performance
lara
610
69k
Being A Developer After 40
akosma
91
590k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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
ありがとうございました 🙌