FrontendTutorialEN → JA
0.4
azukiazusa ·
iOS Safari で触覚フィードバックを実現する WebHaptics
要約
iOS SafariはWeb標準のHaptics API(`navigator.vibrate()`)をサポートしていないため、Webアプリケーションで触覚フィードバックを直接利用することはできません。本記事ではこの課題に対し、筆者が開発した「WebHaptics」というカスタムライブラリのアプローチを紹介しています。これはWebView内でJavaScriptからネイティブコード(Swift)へメッセージを送り、iOSの`UIImpactFeedbackGenerator`などの触覚フィードバックAPIを呼び出すことで、Webページ上での触覚表現を可能にするものです。これにより、WebアプリでもiOSネイティブアプリのようなリッチなユーザー体験を提供できるようになります。
📌
Key Points
- •iOS Safariは標準のWeb Haptics API(`navigator.vibrate()`)をサポートしていない。
- •カスタムライブラリ「WebHaptics」は、WebView内でJavaScriptからネイティブの触覚フィードバック機能を呼び出すことで、この制限を回避する。
- •`WKUserScript`と`webkit.messageHandlers`を利用し、ネイティブ側で`UIImpactFeedbackGenerator`や`UINotificationFeedbackGenerator`を実行する仕組み。
- •この方法はWebコンテンツをネイティブアプリのWebViewでラップする必要がある。
Why it matters
これにより、iOS Safari環境でもWebアプリケーションがネイティブアプリと同様の触覚フィードバックを提供できるようになり、ユーザー体験の向上が期待されます。
関連エンティティ
WebHapticsiOS SafariWeb Haptics APInavigator.vibrate()WebKitWKUserScriptwebkit.messageHandlersUIImpactFeedbackGeneratorUINotificationFeedbackGeneratorSwiftJavaScript