HTML5振動APIの使用方法

モバイルデバイスの人気により、より多くのユーザーが携帯電話やタブレットを介してWebページにアクセスするようになりました。 2013年12月の時点で、5つのWebページの訪問に1つはモバイルデバイスからのものでした。ウェブサイトまたはアプリがモバイルデバイスに適応できる場合、この比率は高くなる可能性があります。マルチデバイス開発は課題に直面していますが、デスクトップコンピューターが達成できない可能性ももたらします。たとえば、振動メカニズムは、新しいメッセージや呼び出しを思い出させる単純な触覚フィードバックデバイスです。騒々しい環境や静かな環境で特に役立ちます（音は干渉を引き起こす可能性があります）。アプリが振動機能を使用できる場合、それは素晴らしいことではないでしょうか？

• ウォーキングルートの指示：左折し、2回振動します。
• イベントが発生した場合、または誰かに近づいている場合、電話は特定の方法で振動します。
• 振動ベースのモールスコードを使用して秘密のメッセージを送信できます！
• ゲームは、ミサイルに衝突したり襲われたりすると、振動することでゲームエクスペリエンスを向上させることができます。

HTML5 Vibration APIを使用すると、これを行うことができます！

振動は必要ですか？

電話を振動させることができるからといって、それをする必要があるという意味ではありません。振動はバッテリーをひどく排出する可能性があるため、バッテリーが低い場合、またはゲームが現在のタブで実行されていない場合は、無効にすることをお勧めします。アプリケーションに応じて、ユーザーオプションを提供して、振動条件を有効、無効化、または構成できるようにすることをお勧めします。

ブラウザのサポートと検出

このAPIは比較的新しいものであり、現在、FirefoxおよびChromeサポートの最新バージョンに限定されています。以前のバージョンでは、それぞれMOZとWebKitプレフィックスが必要です。また、振動メカニズムを備えたデバイスを使用する必要があります。APIはブラウザで使用できる場合がありますが、振動メカニズムがなければ、それが機能するかどうかはわかりません。次のチェックを使用して、振動サポートを検出します

<code class="language-javascript">if ("vibrate" in navigator) {
    // 支持振动 API
}</code>

プレフィックスバージョンを確認して使用するには、次のコードを使用できます。

振動の基本

<code class="language-javascript">// 启用振动支持
navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;

if (navigator.vibrate) {
    // 支持振动 API
}</code>

基本的な振動は、ミリ秒をnavigator.vibrateに渡すことで設定できます。

または、ミリ秒で指定された振動パラメーターと遅延パラメーターを含む配列を渡すことができます。たとえば、500ミリ秒間振動し、300ミリ秒待ってから、再び100ミリ秒間振動します。

<code class="language-javascript">// 振动一秒钟
navigator.vibrate(1000);</code>

インデックスを使用した項の項は、振動時間を定義します（アレイはゼロから始まるため、1つ目と3番目の項はそれぞれ0と2です）。奇数インデックスを持つ配列アイテムは、遅延時間を定義します。振動は非ブロッキングです。振動を止めるために、ゼロをnavigator.vibrateに渡すことができます。この概念は、ゲームで役立ちます。たとえば、ユーザーが車をクラッシュさせると、navigator.vibrate（10000）を設定します。ただし、衝突効果が10秒以内に終了する場合は、navigator.vibrate（0）を設定して振動を終了します。

振動デモ

<code class="language-javascript">// 振动一秒钟
navigator.vibrate([500, 300, 100]);</code>

デバイスでAPIをテストするには...振動APIデモを表示...すべてのHTML、CSS、およびJavaScriptソースコードを表示します。フォームパラメーターは、[開始]をクリックするときにnavigator.vibrateに渡される配列を構築します。 [停止]ボタンがクリックされると、navigator.vibrate（0）があります。振動APIを好きなだけ使用してください。興味深い用途がある場合はお知らせください。

html5振動API faq

HTML5振動APIとは何ですか？

HTML5 Vibration APIは、開発者がデバイスの振動ハードウェアをプログラム的にアクセスできる強力なツールです（存在する場合）。これは、通知の受信やボタンの押しなど、さまざまなイベントに基づいてユーザーに触覚フィードバックを提供するために使用できます。最終決定がオペレーティングシステムとユーザーの設定に委ねられるため、APIは振動が発生することを保証しないことに注意する必要があります。

私のWebアプリケーションでVibration APIを使用する方法は？

振動APIを使用するには、navigator.vibrate（）メソッドを呼び出す必要があります。この方法は、単一の整数または整数の配列を受け入れます。単一の整数は、振動のミリ秒数を表します。整数の配列は、振動と一時停止モードを表します。たとえば、navigator.vibrate（200）はデバイスを200ミリ秒間振動させ、navigator.vibrate（[200、100、200]）はデバイスを200ミリ秒間振動させ、100ミリ秒間一時停止し、200ミリ秒間再び振動する。

すべてのデバイスで振動APIを使用できますか？

振動APIは、主に振動ハードウェアが組み込まれたモバイルデバイスで使用されています。ただし、APIは任意のデバイスで呼び出すことができます。デバイスが振動をサポートしていない場合、navigator.vibrate（）への呼び出しは単純に無視されます。

デバイスが振動APIをサポートするかどうかを確認する方法は？

ナビゲーターオブジェクトの振動プロパティを使用して、デバイスがVibration APIをサポートするかどうかを確認できます。このプロパティが存在する場合、デバイスはAPIをサポートします。これを行う方法は次のとおりです。 振動が終わる前に振動を止めることはできますか？

はい、パラメーター0または空の配列を使用してnavigator.vibrate（）メソッドを呼び出すことで、終了する前に振動を停止できます。たとえば、navigator.vibrate（0）またはnavigator.vibrate（[]）。

すべてのブラウザは振動APIをサポートしていますか？

Chrome、Firefox、Operaを含むほとんどの最新のブラウザーは、Vibration APIをサポートしています。ただし、Internet Explorerはそれをサポートしておらず、Safariにはサポートが限られています。

ワーカースレッドコンテキストで振動APIを使用できますか？

いいえ、振動APIは、ワーカースレッドのコンテキストでは使用できません。メインブラウザのコンテキストでのみ使用できます。

振動APIの使用に制限はありますか？

はい、振動APIを使用することにはいくつかの制限があります。たとえば、一部のブラウザーでは、APIは、乱用や迷惑な使用を防ぐために、クリックやタッチなどのユーザーアクションに応答してのみ使用できます。

振動の強度を指定できますか？

いいえ、振動APIでは、振動の強度を指定することはできません。強度は、デバイスのハードウェアとオペレーティングシステムによって制御されます。

振動APIを使用して複雑な振動モードを作成できますか？

はい、navigator.vibrate（）メソッドに整数の配列を渡すことにより、振動APIを使用して複雑な振動パターンを作成できます。配列内の各整数は、振動または一時停止の期間を表します。たとえば、navigator.vibrate（[200、100、200、100、200]）は、3つの振動で構成されるパターンを作成します。それぞれが続く200ミリ秒、それぞれ100ミリ秒続く2つのポーズで区切られます。

以上がHTML5振動APIの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。