🐙

iOS Safariでデバイスを振動させる裏ワザ

2024/12/24に公開

この記事はCommune Advent Calendar 2024シリーズ2 11日目の記事です。

Vibration API

https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API
WebブラウザにはVibrationAPIというAPIがあったりなかったりします。

これは名前の通り、APIによってモバイル端末などのvibrationを制御する機能のことです。

使い方はとっても簡単

navigator.vibrate(200);

これだけで200msデバイスが振動します。
こんなに単純なAPIなのに、Safariでは待てど暮せど一向にサポートされる気配がない。

それもそのはず、SafariのエンジンであるWebKitの開発チームは、Vibration APIについてoppose(反対)の立場を示しています。

「なんで?!こんなのネイティブAPIにもあるし、簡単に実装できるでしょ!」
そう思われる方も少なくないと思います。

では、なぜVibration APIはSafariでサポートされないのでしょう。

https://webkit.org/standards-positions/
WebKitの公式サイトでは、 Standards Positionとして、
Vibration APIについて以下の懸念を示しています。

https://github.com/WebKit/standards-positions/issues/267#issuecomment-1767541211

バッテリーの問題や、ユースケースの問題等色々語られていますが、Appleがそもそもサポートしない方針としたことが影響として強そうです。

内部事情はわかりませんが、Appleがそう言うならばSafariにVibration APIが搭載されるのは絶望的かと思われていました。

そんなSafariになにやら変化が...

前述の通り、SafariではVibration APIがサポートされる予定は特にないのですが、
iOS18からSafariにとある変更が加えられました。

https://developer.apple.com/documentation/safari-release-notes/safari-18-release-notes#Forms

Added haptic feedback for <input type=checkbox switch> on iOS. (125474921)
iOSの<input type=checkbox switch>に触覚フィードバックが追加されました!

<input type=checkbox switch>とは、トグルスイッチのUIを提供するもので、それに触覚フィードバック、つまりクリック時に軽くデバイスが振動するというものです。

これだけ聞くと、「なんだそれだけか。」と思うかもしれませんが、この触覚フィードバックは
スクリプトからクリックイベントを発火することでも発動させることができます

つまり...

(iOS Safariで表示してみてください)
こんな感じで、スクリプト制御で自由にvibrationを起こすことができます。

流石に何処かのタイミングで修正されそうな気がしますが、修正されなければかなりやれることが増えますね。

コミューン株式会社

Discussion