iOSハプティクステスター
ブラウザから直接iOS Safariのハプティックフィードバック（シングル、確認、エラーパターン）をテストします。Androidおよび他の対応デバイスではnavigator.vibrate()にフォールバックします。
入力
デバイスサポート
ハプティックサポートを確認中...
仕組み
iOS Safariでは、隠しチェックボックススイッチ（Safari 17.4で導入）を使用してハプティックフィードバックを生成します。Androidおよびそれをサポートするその他のデバイスでは、標準のnavigator.vibrate() APIがフォールバックとして使用されます。
互換性に関する注記
プログラムによるiOSハプティクスはiOS 17.4～26.4で機能します。Appleはios 26.5で基盤となる動作をパッチしたため、JavaScriptからハプティクスをトリガーすることは最新のiOSバージョンでは機能しなくなる可能性があります。
出力
Readme
ハプティックフィードバックとは？
ハプティックフィードバックは触覚応答です。デバイスが操作を確認したり注意を引いたりするために生成する小さな振動またはタップです。スマートフォンでは、小さなモーター（iPhoneの場合、Appleの「Taptic Engine」）によって生成され、短く正確にタイミングが設定されたパルスを作成します。長いブザー音のような振動とは異なり、最新のハプティクスはクリアで微妙であり、アラームではなく物理的なクリックのように感じるように設計されています。
ネイティブiOSアプリでは、開発者はUIFeedbackGenerator APIを使用して、軽いタップ、「成功」ダブルタップ、「エラー」トリプルタップなど、異なるハプティックパターンを再生します。長い間、iOS SafariのWebプラットフォームには同等の機能がありませんでした。navigator.vibrate()はiPhoneで単に無視されていました。ios-hapticsライブラリは、<input type="checkbox" switch>要素（Safari 17.4で導入）の副作用を利用しています。そのスイッチを切り替えるとシステムハプティックエンジンがトリガーされ、JavaScriptからWebページで短いハプティックパターンを再生できるようになります。
ツール説明
iOS Haptics Testerを使用すると、ブラウザから直接ハプティックフィードバックパターンをトリガーして、デバイスとOSバージョンがそれらをサポートしているかどうかを確認できます。ios-hapticsライブラリが提供する3つのパターン（シングルタップ、「確認」（2つの急速なタップ）、「エラー」（3つの急速なタップ））を公開し、Androidおよび他のデバイス用のフォールバックとして標準navigator.vibrate() APIを呼び出すボタンも含まれています。
例
| アクション | iPhone（iOS 17.4～26.4）での予想される感覚 | Androidでの予想される感覚 |
|---|---|---|
| シングルハプティック | 1つの短くクリアなタップ | 1つの短い振動（約200 ms） |
| 確認（2つの急速なハプティック） | 2つの連続した素早いタップ | 2つの短い振動 |
| エラー（3つの急速なハプティック） | 3つの連続した素早いタップ | 3つの短い振動 |
navigator.vibrate()をテスト |
ほとんどのiOSバージョンでは何もなし | 約200 msの振動 |
機能
- シングル、確認、エラーハプティックパターン用のワンタップボタン
- 現在のデバイスでのハプティックサポートの自動検出
- 標準
navigator.vibrate()Web API用の組み込みフォールバックテスト - トリガーされたすべてのパターンのタイムスタンプ付きライブイベントログ
- iOSバージョンの互換性を説明する明確なステータスバナー
ユースケース
ios-hapticsを自分のサイトまたはPWAに統合する前に、実際のiPhoneでハプティックフィードバックが機能することを確認するWeb開発者- 異なるデバイス、OSバージョン、ブラウザで同じパターンがどのように感じるかをチェックするQAエンジニア
- iOS形式の「Taptic」フィードバックと長いAndroid
navigator.vibrate()パルスの違いを体験したい好奇心旺盛なユーザー
動作原理
iOS Safariでは、ツールは動的に非表示の<input type="checkbox" switch>を作成し、それを切り替えてからDOMから削除します。そのネイティブスイッチを切り替える行為がTaptic Engineをトリガーします。これを直接行うパブリックWeb APIはありません。「確認」および「エラー」パターンは、単に切り替えを2回または3回急速に繰り返します。
iOSスイッチトリックをサポートしないデバイスでは、ライブラリはnavigator.vibrate()にフォールバックします。これはAndroidブラウザで広くサポートされています。このツールの「navigator.vibrate()をテスト」ボタンはそのAPIを直接呼び出すため、2つのメカニズムを比較できます。
オプション説明
- シングルハプティック — 1つの短いタップを再生します。トグルや成功したフォームフィールドなど、小さな操作を確認するのに最適です。
- 確認（2つの急速なハプティック） — 2つの素早いタップを再生します。「保存」、「送信」、またはその他の肯定的な確認に最適です。
- エラー（3つの急速なハプティック） — 3つの素早いタップを再生します。検証エラーまたは破壊的な失敗を通知するために使用します。
navigator.vibrate()をテスト — 200 msの期間でWeb Vibration APIを呼び出します。非iOSデバイスサポートを確認し、iOSパターンとの感覚を比較するのに役立ちます。- ログをクリア — イベントログからすべてのエントリを削除します。
制限事項
- プログラムによるiOSハプティクスはiOS 17.4～26.4でのみ機能します。Appleは iOS 26.5で基盤となる動作をパッチしたため、JavaScriptからこれらのパターンを呼び出しても、最新のiOSバージョンではTaptic Engineはトリガーされなくなります。実際の
<input type="checkbox" switch>との直接的なユーザー操作は引き続き機能します。 - iOS Safariはほぼすべてのバージョンで
navigator.vibrate()を無視するため、フォールバックボタンはiPhoneで無音に見えます。 - デスクトップブラウザはハプティックフィードバックを生成できません。ボタンは実行されますが、何も感じません。
- 一部のAndroidブラウザでは、
navigator.vibrate()が起動する前に、ページがフォアグラウンドにあり、ユーザージェスチャーが必要です。 - ハプティックフィードバックは、デバイスのシステム設定でも無効にされる可能性があります（例：iOS上の設定→サウンドとハプティクス→システムハプティクス）。
ヒント
- シミュレーターまたはエミュレーターではなく、実際のデバイスでテストしてください。仮想デバイスにはTaptic Engineがありません。
- iPhoneで何も起こらない場合は、設定でシステムハプティクスが有効になっていることを確認し、古いiOSバージョンでサイレントモードがそれらを抑制していないことを確認してください。
- 確認パターンは控えめに使用してください。急速なハプティクスを過度に使用すると、すぐに煩わしくなります。
- ハプティクスと視覚的フィードバックを組み合わせてください。ハプティクスだけではユーザーに状態を伝えるのに十分なことはめったにありません。
FAQ
iPhoneで何も感じないのはなぜですか？ iOS 26.5以降を使用している可能性があります。Appleはこのライブラリで使用されている手法をパッチしました。iOS 17.4～26.4を実行しているデバイスを試すか、設定でシステムハプティクスが有効になっていることを確認してください。
navigator.vibrate()がiPhoneで機能しないのはなぜですか？
AppleはiOS SafariでWeb Vibration APIを実装したことがありません。現在、Webページからのみ、iOSで振動をトリガーする標準ベースの方法はありません。
本番環境で使用しても安全ですか？ ライブラリは小さく副作用がありませんが、特定のHTML要素の癖に依存しているため、将来のiOSアップデートで破損する可能性があります。iOS 26.5で既に破損しています。ハプティックフィードバックは常にプログレッシブエンハンスメントとして扱い、要件として扱わないでください。
PWAまたは「ホーム画面に追加」アプリ内で機能しますか？ はい、サポートされているiOSバージョンでは、同じ手法がSafariと同じようにインストールされたWebアプリで機能します。