Vibration APIとは

Vibration API（navigator.vibrate()）はブラウザ標準で、ウェブページがスマートフォンやタブレットに組み込まれた物理的な振動モーターをトリガーできます。ミリ秒単位の単一の継続時間、または振動/一時停止の継続時間が交互に並ぶ配列（振動パターンと呼ばれます）を受け入れます。このAPIはほとんどのAndroidブラウザでサポートされていますが、iOSはプラットフォームの制限によりウェブページへの振動を公開していません。

振動パターンは配列として説明され、奇数インデックスの値は振動継続時間を表し、偶数インデックスの値は一時停止継続時間を表します。例えば、[200, 100, 200]は200 ms振動、100 ms一時停止、200 ms振動を意味します。navigator.vibrate(0)またはnavigator.vibrate([])を呼び出すと、進行中の振動がすぐにキャンセルされます。

ツールの説明

このツールを使用すると、デバイスがVibration APIをサポートしているかどうかをテストし、ブラウザで直接振動パターンを試すことができます。設定可能な継続時間で単一のパルスをトリガーしたり、完全にカスタムのカンマ区切りパターンを入力したり、SOS、心拍、ダブル/トリプルパルスなどの組み込みプリセットから選択したりできます。イベントログはすべての振動試行をタイムスタンプと使用された正確なパターンで記録するため、異なるデバイスとブラウザ間で結果を比較できます。

例

パターン入力 動作
300 300 msの単一パルス
200,100,200 200 ms振動 → 100 ms一時停止 → 200 ms振動
150,100,150,100,150 100 msの間隔を持つ3つの短いパルス
0 進行中の振動をキャンセル

機能

  • デバイスとブラウザがVibration APIをサポートしているかどうかを検出し、読み込み時にステータスを表示
  • スライダーを使用して単一パルスの継続時間を10 msから5000 msに調整可能
  • カスタムパターン入力は振動と一時停止継続時間のカンマ区切りシーケンスを受け入れ
  • 6つの既製プリセット：Short Pulse、Long Pulse、Double Pulse、Triple Pulse、SOS Pattern、Heartbeat
  • すべてのトリガーされたパターンとそれがブラウザに受け入れられたか拒否されたかを示すタイムスタンプ付きイベントログ

ユースケース

  • モバイルウェブ開発：Vibration APIで実装されたハプティックフィードバックが機能をリリースする前にターゲットデバイスで実際に動作することを確認します。
  • QAデバイステスト：ネイティブアプリをインストールせずに、新しく受け取ったまたは修理されたスマートフォンの振動モーターが動作することをすばやく確認します。
  • パターンプロトタイピング：カスタム振動シーケンス（通知アラート、ゲームフィードバック、アクセシビリティキュー）をブラウザでライブテストして反復処理します。

仕組み

このツールは、提供した値でnavigator.vibrate(pattern)を呼び出します。ブラウザは呼び出しが受け入れられた場合はtrueを返し、拒否された場合はfalseを返します。例えば、ドキュメントがフォーカスされていないか、デバイスがAPIをサポートしていない場合です。両方の結果がイベントログに記録されます。すべての処理はデバイス上で完全に行われ、データはサーバーに送信されません。

制限事項

  • iOS（Safari、iOS上のChrome）：Appleはios上でnavigator.vibrate()を公開していないため、APIはiPhoneとiPadで常にサポートされていないと報告されます。
  • デスクトップブラウザ：デスクトップコンピューターには通常振動モーターがないため、APIが利用可能な場合でも物理的な効果はありません。
  • バックグラウンドタブ：ページがフォアグラウンドにない場合、一部のブラウザは振動呼び出しを静かに拒否します。
  • 最大継続時間：個々の振動セグメントはブラウザによって制限されます（一般的に約10秒）。非常に大きな値は静かに切り詰められる可能性があります。