5 JavaScript APIは、モバイルWebページを強化します

キーポイント

• バッテリーステータスAPI：デバイスのバッテリーレベルまたはステータス情報を提供し、バッテリーレベルが低いときに変更をより頻繁に節約し、データの損失を防ぎます。
• Web通知API：開発者がユーザーに通知する方法を正規化し、Webページのコンテキストの外でアラート（電子メール配信など）を発行できるようにします。ただし、異なるブラウザのディスプレイスタイルは異なる場合があります。
• 近接センサーAPI：オブジェクトとWebページを実行しているデバイスとの間の距離を検出します。現在はFirefoxでのみサポートされています。
• 振動API：デバイスを振動させ、ゲーム内の特定の効果をシミュレートするために使用できます。デバイスの方向APIは、デバイスの方向を検出します。これは、ナビゲーションアプリケーションとゲームを助長します。
「モバイルマーケットが成長している」や「モバイルデバイス（スマートフォンやタブレットなど）を介してネットワークにアクセスするユーザーなどのステートメントは、デスクトップやラップトップを介してネットワークにアクセスするものを超えています」は、もはや印象的ではありません。

今日、私たちは（少なくとも）ウェブ用に何かを開発するときにモバイル市場が重要であることを認識しています。

長年にわたり、ネイティブアプリケーションとWebアプリケーションに関する議論や意見は大きく異なり、どちらが優れているかは議論の余地があります。あなたの視点に関係なく、ネイティブモバイルアプリケーションが過去にWebページにアクセスできないハードウェアコンポーネントにアクセスできたことは事実です。しかし、このギャップは今日でも有効ですか？ Webテクノロジーは、開発者として、HTML、CSS、およびJavaScriptのみを使用してエンコードできるように十分に開発されていますか？

この記事では、Webページがモバイルデバイスのハードウェアコンポーネントにアクセスするか、モバイルデバイス上のWebアプリケーションの機能を強化できるJavaScript APIを紹介します。

バッテリーステータスapi

バッテリーステータスAPIは、システムのバッテリーレベルまたはステータスに関する情報を提供します。このAPIを使用すると、バッテリーが充電されているかどうか、バッテリーが完全に排出されるまでの期間、または現在の容量のみを知ることができます。これらの詳細は、オブジェクトに属する4つのプロパティからアクセスできます。このAPIは、上記のプロパティが変更されたときにトリガーできるイベントも定義します。

このAPIは、たとえば、あなた（またはユーザー）がバスでWebアプリケーションを使用するのに苦労し、行った変更を保存するのを忘れている場合に役立ちます。突然、スマートフォンが消えてしまい、多くの時間とすべての作業を無駄にすることでイライラします。このAPIを使用すると、現在のバッテリー電源を検出し、バッテリーの電源が低いか不十分なときにデータの損失を防ぐために、より頻繁に変更を節約できるページを開発できます。 window.navigator.battery この記事の執筆時点では、バッテリーステータスAPIはFirefoxによってのみサポートされていますが、以下に示すように、このAPIのサポートを検出するのは非常に簡単です。

このAPIを使用する簡単な例は次のとおりです。

<code class="language-javascript">if (window.navigator && window.navigator.battery) {
   // API 受支持
} else {
   // 不受支持
}</code>

このAPIを試してみたい場合は、デモがあります。さらに調査したい場合は、ここでSitePointにバッテリーステータスAPIを導入しました。

Web通知api

モバイルデバイスでは、通知の概念と​​、デバイスの実装通知にインストールされている多くのアプリケーションに精通しています。ウェブ上では、Webサイトはさまざまな方法でそれらを実装します。 GoogleとTwitterについて考えてみてください。どちらも通知メカニズムを持っていますが、それらを異なる方法で実装しています。

Web通知APIは、この目的のために作成されたAPIであり、開発者がユーザーに通知する方法を正常化します。通知により、ユーザーは、電子メール配信など、Webページのコンテキスト以外のイベントをユーザーに思い出させることができます。開発者は同じように通知を作成しますが、仕様ではUIがそれらを表示する方法と場所を説明していません。これは、さまざまなブラウザにさまざまなスタイルが表示されることを意味します。たとえば、モバイルデバイスでは、通知バーに表示される場合があります。

Web通知APIは、windowオブジェクトのNotification属性を介して公開されます。通知インスタンスを作成できるようにするコンストラクターです。新しい通知を作成するには、次のコードを書くことができます。

<code class="language-javascript">// 打印电池是否正在充电
console.log("电池" + (navigator.battery.charging ? "" : "未") + "充电");</code>

現在、Chrome、Firefox、およびSafariはこのAPIをサポートしています。 Web通知APIをサポートするモバイルブラウザには、Firefox、Android 4.4、およびBlackBerryが含まれます。奇妙なものを見たことがありますか？ Chrome MobileはこのAPIをサポートしていません！悲しいが、それは本当だ。

このAPIをサポートするブラウザは、市場の半分以上をカバーしているため、JavaScriptコードがサポートされていないメソッドを呼び出そうとしないようにするため、サポートの状況をテストする必要があります。次のコードスニペットを使用してこれを行うことができます。

このAPIに興奮していますか？とても良い！ Web通知APIで始まる記事で詳細を学ぶことができます。また、ライブデモを試すこともできます。

<code class="language-javascript">var notification = new Notification('收到电子邮件', {
  body: '您收到了一封电子邮件。立即阅读！'
});</code>

近接センサーapi

近接センサーAPIは、オブジェクトとWebページを実行しているデバイス間の距離を検出するために使用できるJavaScript APIです。距離は、近接センサーによって測定されます（デバイスに近接センサーがある場合）。近接センサーAPIは属性やメソッドを提供するのではなく、オブジェクト上の2つのイベントのみをトリガーします。私たちは彼らの話を聞いて操作を実行することができます。最初のイベントは、デバイスと近くのオブジェクト間の実際の距離に関する情報を提供しますが、2番目のイベント

は、近くにオブジェクトがあるかどうかのみを指定します。

このAPIをサポートする唯一のブラウザは、バージョン15から始まるFirefox（デスクトップおよびモバイル）です。残念ながら、多くのラップトップやデスクトップには近接センサーがないため、主にモバイルデバイスをターゲットにしています。 window このAPIのサポートの検出：deviceproximity userproximity

使用の簡単な例は次のとおりです

振動api

<code class="language-javascript">if ('Notification' in window) {
  // API 受支持
} else {
  // 不受支持
}</code>

Vibration APIは、デバイスを振動させる方法を含む非常にシンプルなAPIです。明らかな使用の1つは、10年前にいくつかのコンソールによって導入された効果を再現できるゲームでです。ただし、これはこのAPIの唯一の可能な目的ではありません。

私が言ったように、振動APIはvibrate()と呼ばれるメソッドのみを公開します。後者は、最も単純な形式でwindow.navigatorオブジェクトに属し、デバイスが振動するミリ秒数を指定する整数を受け入れます。

Internet ExplorerとSafariとは別に、このAPIはすべての主要なブラウザによってサポートされています。それでも、今こそ、次のプロジェクトに使用するのに良い時期かもしれません。実際、それがサポートされている場合、ユーザーにより良いエクスペリエンスを提供します（この機能を悪用しない限り）。以下に示すように、検出サポートは非​​常に簡単です

APIを使用する非常に簡単な方法の非常に簡単な使用法は次のとおりです。

<code class="language-javascript">if (window.navigator && window.navigator.battery) {
   // API 受支持
} else {
   // 不受支持
}</code>

このAPIの詳細については、「HTML5 Vibration APIの使用方法」という記事を読んで、デモを試すことを忘れないでください。

<code class="language-javascript">// 打印电池是否正在充电
console.log("电池" + (navigator.battery.charging ? "" : "未") + "充电");</code>

デバイスの方向API

私が議論したい最後のAPIは、デバイスの方向APIです。デバイスの向きを検出することは、ナビゲーションアプリケーションからゲームまで、さまざまな状況に役立ちます。このAPIは、デバイスの物理的な向きと動きに関する情報を提供するいくつかのイベントを定義します。このAPIはW3Cワーキングドラフトです。つまり、仕様は不安定であり、将来のいくつかの変更が予想される場合があります。 APIは、次の3つのイベントを公開します：

、

、

。最初のイベントは、加速度計がデバイスの方向の変化を検出するとトリガーされます。デバイスが加速または減速するたびに、2番目のイベントがトリガーされます。最後のイベントは、ユーザーエージェントがコンパスを較正する必要があると判断したときにトリガーされます。

deviceorientationほとんどすべての主要なブラウザ（SAFARIを除く）はこのAPIをサポートしていますが、サポートは部分的であるか、矛盾があります。たとえば、執筆時点では、devicemotionイベントをサポートするブラウザはほとんどありません。したがって、私の提案は、各イベントをテストしてサポートされているかどうかを確認することです。 compassneedscalibrationイベントの存在をテストするには、次のように書くことができます。

または：compassneedscalibration deviceorientation

たとえば、

<code class="language-javascript">var notification = new Notification('收到电子邮件', {
  body: '您收到了一封电子邮件。立即阅读！'
});</code>

イベントをテストしたい場合は、次のことを記述できます。

このAPIを使用する場合は、使用できるデモがあります。あなたがそれを学びたいなら、私たちは「HTML5でデバイスの向きを使用する」という記事を持っています。

<code class="language-javascript">if ('Notification' in window) {
  // API 受支持
} else {
  // 不受支持
}</code>

結論devicemotion

この記事では、モバイル訪問者のWebページを強化できるAPIをいくつか紹介します。

<code class="language-javascript">if ('ondeviceproximity' in window) {
   // API 受支持
} else {
   // 不受支持
}</code>

これらのAPIのユースケースは無限であり、それはすべてあなたの想像力と開発中のアプリケーションまたはウェブサイトの種類に依存します。この投稿を楽しんでいただければ幸いです。他に便利なAPIがどうなるか教えてください。

モバイルWeb javaScript API

に関するよくある質問

JavaScript APIとは何ですか？モバイルWebページをどのように強化しますか？

JavaScript API（アプリケーションプログラミングインターフェイス）は、異なるソフトウェアアプリケーションが相互に通信できるようにする一連のルールとプロトコルです。モバイルWebページがデバイスハードウェアやその他のソフトウェアアプリケーションと対話できるようにすることにより、モバイルWebページを強化し、機能とユーザーエクスペリエンスを向上させます。たとえば、JavaScript APIは、Webページがデバイスのカメラ、地理的位置、さらにはバッテリーステータスにアクセスできるようにすることができます。これにより、開発者が対話、エンゲージ、ユーザーフレンドリーなモバイルWebページがより多くの可能性を生み出します。

モバイルページでジオロ​​ケーションAPIを使用する方法は？

Geolocation APIは、デバイスのジオロケーションにアクセスできる強力なツールです。それを使用するには、最初にユーザーのブラウザがサポートしているかどうかを確認する必要があります。これは、navigator.geolocationプロパティを使用して実行できます。 trueを返す場合は、getCurrentPosition()メソッドを使用してユーザーの現在の場所を取得できます。ユーザーの位置データにアクセスする前に、常にユーザーの許可を取得することを忘れないでください。

バッテリーステータスAPIとの使用方法は何ですか？

バッテリーステータスAPIホストデバイスのバッテリーステータスに関する情報を提供します。これは、デバイスのバッテリーレベルに基づいてWebページのパフォーマンスを最適化するのに非常に役立ちます。たとえば、バッテリーが低い場合、更新頻度を下げたり、特定の機能を無効にして電源を節約できます。このAPIを使用するには、バッテリーマネージャーオブジェクトに解決する約束を返すnavigator.getBattery()メソッドを使用できます。

モバイルWebページでVibration APIを使用する方法は？

振動APIを使用すると、ホストデバイスの振動メカニズムを制御できます。これは、ユーザーに触覚フィードバックを提供するのに非常に役立ちます。このAPIを使用するには、navigator.vibrate()メソッドを使用できます。単一の値を渡して特定の時間を振動させるか、一連の値を渡して振動を作成してモードを一時停止できます。

周囲の光センサーAPIとの使用方法は何ですか？

周囲光センサーAPIは、デバイスの周囲光レベルに関する情報を提供します。これは、さまざまな照明条件下で読みやすさを向上させるために、Webページの明るさまたはコントラストを調整するのに役立ちます。このAPIを使用するには、新しいAmbientLightSensorオブジェクトインスタンスを作成してから、start()メソッドを使用して光レベルの検知を開始する必要があります。

モバイルWebページでWeb情報APIを使用する方法は？

ネットワーク情報APIは、デバイスのネットワーク接続に関する情報を提供します。これは、ネットワークステータスに基づいてWebページのパフォーマンスを最適化するのに非常に役立ちます。たとえば、ネットワーク接続が遅い場合、画像やビデオの品質を低下させて、スムーズな読み込みを確保できます。このAPIを使用するには、ネットワークインフォメーションオブジェクトを返すnavigator.connectionプロパティを使用できます。

デバイスの向きAPIとの使用方法は何ですか？

デバイスの方向APIは、デバイスの物理的な向きに関する情報を提供します。これは、デバイスの動きに対応するインタラクティブなエクスペリエンスを作成するのに非常に役立ちます。このAPIを使用するには、デバイスの向きが変更されたときに発火するイベントリスナーdeviceorientationイベントを追加できます。

モバイルWebページでページVivisibilityAPIを使用する方法は？

ページの可視性APIを使用すると、Webページが表示または非表示になったときに検出できます。これは、ページの可視性に基づいてアクティビティを一時停止または再開するのに役立ちます。たとえば、ユーザーが別のタブに切り替えると、ビデオを一時停止し、戻ってきたときにビデオを再開できます。このAPIを使用するには、document.visibilityState属性とvisibilitychangeイベントを使用できます。

フルスクリーンAPIとの使用方法は何ですか？

フルスクリーンAPIを使用すると、フルスクリーンモードで要素を表示できます。これは、ビデオやゲームなどに没入感のある体験を提供するのに非常に役立ちます。このAPIを使用するには、任意の要素に対してrequestFullscreen()メソッドを使用して、フル画面に表示することができます。

モバイルページでWeb通知APIを使用する方法は？

Web通知APIを使用すると、ユーザーに通知を表示できます。これは、ページに焦点が合っていなくても、ユーザーに重要なイベントを思い出させるのに非常に便利です。このAPIを使用するには、最初にNotification.requestPermission()メソッドを使用してユーザーの許可を要求する必要があります。ユーザーが許可を付与する場合は、新しい通知オブジェクトを作成して通知を表示できます。

以上が5 JavaScript APIは、モバイルWebページを強化しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。