検索

近接APIの導入

Feb 21, 2025 pm 12:23 PM

Introducing the Proximity API

コアポイント

  • close-range api近接センサーを使用して、デバイスとオブジェクト間の距離を測定し、距離情報を提供します。このAPIはセンサーAPIの一部ではなく、スタンドアロンAPIです。
  • このAPIは、携帯電話が耳に近いときに画面を自動的にオフにする機能など、広く使用されており、オブジェクト(手など)がデバイスの近くにあるときに音楽プレーヤーを一時停止します。
  • Close-range APIは、2つのイベントを定義します。
  • デバイスと近くのオブジェクト間の距離に関する情報を提供します。これらのイベントは聞いて応答することができます。 deviceproximity userproximity現在、近距離APIのサポートは低く、Firefox(デスクトップとモバイル、バージョン15以降)のみですが、W3C候補の推奨基準を満たしています。
  • モバイルデバイスは人生の不可欠な部分になりました。それらを適度に使用することで、バス情報のクエリ、最寄りの地下鉄駅やイタリアンレストランを見つけるなど、多くの毎日のタスクを完了するのに役立ちます。

モバイルデバイスは、Web開発者向けに新しい世界を開設しました。モバイルデバイスのニーズを満たすために、それらのために特別に設計された一連のAPIが生まれました。

過去数か月で、Web通知APIやWeb Speech APIなど、いくつかのAPIを紹介しました。この記事では、シンプルだが実用的なAPI:Close-Range APIを紹介します。

はじめに

Close-Range APIは、近距離センサーで測定されたデバイスとオブジェクト間の距離に関する情報を提供するイベントを定義します。このAPIはもともとセンサーAPIの一部であり、後にスタンドアロンAPIに分割されました。 2013年10月1日にW3C候補の推奨基準を満たしているため、近距離APIの仕様は安定していると見なされます。

スマートフォンを使用している場合、このAPIの機能を体験している必要があります。

たとえば、最後の電話のプロセスについて考えてください。スマートフォンのロックを解除し、ダイヤルする番号を入力し、[呼び出し]ボタンをクリックします。完了したら、携帯電話を耳に近づけてから、魔法が起こり、画面がオフになります。

多くのスマートフォンには、バッテリー電源を節約するためのこの機能があります。これは、近距離APIを搭載しています。モバイルデバイスを耳に近づけると、近接センサーがスマートフォンで聴くイベントをトリガーし、画面をオフにします。

Web上に他の興味深いユースケースがあります。運転中にWebサービスを使用して音楽を聴いてから、再生を一時停止する必要がありましたか?

プレーヤーを手動で一時停止するのはどれほど面倒ですか?答えは「非常に厄介!」でなければなりません。このAPIを使用すると、Web開発者は、オブジェクト(この場合)がデバイスの近くにある場合、プレーヤーが一時停止する機能を追加できるようになりました。

近距離APIとそのユースケースがわかったので、それが公開するイベントを掘り下げることができます。

event

Close-Range APIは2つのイベントを定義します。これは、オブジェクトの近接性に応じて聞いて応答できます。最初のイベントはdeviceproximityです。これは、ホストデバイスと近くのオブジェクト間の距離に関する情報を提供します。 2番目のイベントはuserproximityです。これは、デバイスが近くのオブジェクトを検出するかどうかを指定します。どちらのイベントもwindowオブジェクトで発射されるため、それらに耳を傾けるには、ハンドラーを添付する必要があります。

以下は、イベントハンドラーを添付する方法の例です。 deviceproximity

追加のハンドラーは、必要な情報を含む最初のパラメーターとしてオブジェクトを受信します。イベントで渡されたオブジェクトは、
window.addEventListener('deviceproximity', function(event) {
   console.log('An object is ' + event.value + ' centimeters far away');
});

deviceproximityの3つのプロパティを提供します。 valueは、デバイスとオブジェクト間の距離(センチメートル)を示す数字です。 minおよびmaxプロパティは、センサーが検出できる最小距離と最大距離(センチメートル単位)を記述しています。イベントで渡されたvalueオブジェクトは、min属性を公開します。これは、オブジェクトがデバイスに十分に近い(真)かどうか(偽)かどうかを指定するブール値です。この場合、「十分に近い」とは、オブジェクトが特定のデバイスの検出可能な範囲内にあることを意味します。 max userproximitynearブラウザー互換性現在、近距離APIのサポートは非​​常に低いです。それをサポートする唯一のブラウザは、Firefox(バージョン15から始まるデスクトップバージョンとモバイルバージョン)です。これは、W3C候補の推奨基準を満たしていることを考えると驚くべきことですが、そうです。

このAPIはFirefoxでのみ実装されているため、サポートをテストする方法を知ることが重要です。これは、他のAPIを扱うときに遭遇した可能性のあるよく知られている方法を使用して行うことができます。この方法は次のとおりです 上記のように、

イベントのサポートをテストできます。この時点で、近距離APIとは何か、それがどのようなイベントを公開するかを知っています。私たちの旅を完了するために、私たちはそれが実際にどのように機能するかを見るためにシンプルなデモを開発します。

(デモや結論セクションなどの後続のコンテンツは、スペースの制限により、読書と理解のために元のテキストを参照することをお勧めします。元のテキストを簡素化し、書き直しました。コア情報と写真。)
if ('ondeviceproximity' in window) {
   // API supported. Don't get too close, I can feel you
} else {
   // API not supported
}

以上が近接APIの導入の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScript in Action:実際の例とプロジェクトJavaScript in Action:実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb:コア機能とユースケースJavaScriptとWeb:コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解:実装の詳細JavaScriptエンジンの理解:実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript:学習曲線と使いやすさPython vs. JavaScript:学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript:コミュニティ、ライブラリ、リソースPython vs. JavaScript:コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ:すべてがどのように機能するかC/CからJavaScriptへ:すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン:実装の比較JavaScriptエンジン:実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて:現実世界のJavaScriptブラウザを超えて:現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません