Web Haptics APIを語りたい

Transcript

1. Web Haptics APIを語りたい Web UI 実装勉強会 #4 2026/09/16
2. お断り⚠️ 今日お話する内容は2026年9月現在、まだブラウザではまともに動かすことができません 今後仕様が変わる可能性がありますのでご注意下さい
3. 自己紹介 Infixer(インフィクサー) フロントエンドエンジニア HTMLとCSSが大好きなマークアップおじさんです。 X（Twitter） GitHub Blog Bluesky Cosense
4. いきなりDEMO！
5. 振動するかどうか Androidの方 「タップ」→「完了」→「エラー」を押す。 振動の長さを変え、同じパターンをもう一度押す。 ノッチのスライダーをなぞる。 iOSの方 スイッチ本体と「お気に入り」を直接タップする。 振動を感じない方 エラーログを私宛にあとで教えてください！ OSの設定で触覚フィードバックがオフになっていないか確認！
6. そもそもHaptics（ハプティクス）とは？ ⼒・振動・動きなどを与えることで、ユーザーが「実際にモノに触れているよう な感触」を得ることが出来る、⽪膚感覚フィードバック技術 ハプティクス- wikipedia https://pur.store.sony.jp/ps5/lineup/ps5_controller/ https://hokusai.anotherstory.world/experience/#ex03
7. スマートフォンでのハプティクス iOS、AndroidともにOSの機能として提供されている 触覚フィードバックの提供 ハプティクス設計の原則
8. Web Haptics API
9. Web Haptics APIとは Webアプリケーションをネイティブのハプティクス機能に接続する、セマン ティックなクロスプラットフォームインターフェース https://github.com/WICG/web-haptics 現時点ではDraftの段階 Chromeが最近Intent to Prototypeになった `navigator.vibrate()`で触覚フィードバックがそもそもあるが、モバイル端末 に特化していて幅広いデバイスにはサポートが不足している そもそもChromeしか動かないし。。
10. Web Haptics APIの提案内容（CSS） 提案としてCSSの`@haptics`で使える想定 1 /* カートに追加するときに振動させる */ 2 .add-to-cart:active { 3 scale: 0.95; 4 @haptic align 0.8; 5 }
11. Web Haptics APIの提案内容（JavaScript） 提案として`navigator.playHaptics()`で使える想定 1 // navigator.playHapticsでCSSのように振動のエフェクトと フィードバック時間を設定 2 navigator.playHaptics(effect, intensity);
12. Web Haptics API
13. ライブラリ：web-hapticsの実装 https://haptics.lochie.me/ Androidは今回のデモとほぼ同じ作り iOSは違う（参照） inputのcheckbox switchをdisplay:noneで隠して requestAnimationFrame()でクリックを連打して擬似的に再現している かなりの荒業
14. 4つのエフェクト Web Haptics APIでは4つのエフェクトが提案されている hint edge tick align
15. hint 操作のきっかけを伝える 操作できることを、そっと知らせる 何らかのアクションが続く可能性がある 入力欄にフォーカスしたときなど
16. edge 境界に達したことを伝える エラーや、スクロールの限界値に達したとき などに強い信号として伝える フォームなどでボタンを押してエラーを通知 するときなど
17. tick 明確な変化を伝える リストをスクロールしたり、スイッチを切替 えたときなど TODOリストのチェック状態など
18. align オブジェクトが特定の位置に合わさったとき に伝える DnDなどでドラッグしてスナップするなど
19. ハプティクスの可能性
20. 振動するではなく操作を助けるのか 触覚で、位置や操作の変化を伝えられる 特に視覚障害者などには、有効な場合がある ただし音声に比べると身体への負担はある 手を動かす、振動の意味を判断することへの負荷、振動による心理的負担 https://www.nature.com/articles/s41598-025-21720-0
21. https://a11y-chiba.com/2026/ https://ontenna.jp/
22. 「触っても分かる」Webへ アクセシビリティの観点から言うとアクセスできる選択肢が増える しかし、従来のアクセス方法とバッティングすると使いづらいものになる 振動の強さではなく意味とタイミングを設計して触って分かるWebが作れること に期待できる ！！（かも？）
23. 参照 Web Haptics API: https://github.com/WICG/web-haptics 触覚フィードバックの提供: https://developer.apple.com/jp/design/human-interface-guidelines/playinghaptics ハプティクス設計の原則: https://developer.android.com/develop/ui/views/haptics/haptics-principles?hl=ja Web Haptics: https://haptics.lochie.me/ Enhancing grasping ability with vibrational guidance for individuals who are blind or partially sighted: https://www.nature.com/articles/s41598-025-21720-0 Ontenna: https://ontenna.jp/