キーポイント
- バッテリーステータス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のサポートを検出するのは非常に簡単です。
if (window.navigator && window.navigator.battery) { // API 受支持 } else { // 不受支持 }
このAPIを試してみたい場合は、デモがあります。さらに調査したい場合は、ここでSitePointにバッテリーステータスAPIを導入しました。
Web通知api
モバイルデバイスでは、通知の概念と、デバイスの実装通知にインストールされている多くのアプリケーションに精通しています。ウェブ上では、Webサイトはさまざまな方法でそれらを実装します。 GoogleとTwitterについて考えてみてください。どちらも通知メカニズムを持っていますが、それらを異なる方法で実装しています。
Web通知APIは、この目的のために作成されたAPIであり、開発者がユーザーに通知する方法を正常化します。通知により、ユーザーは、電子メール配信など、Webページのコンテキスト以外のイベントをユーザーに思い出させることができます。開発者は同じように通知を作成しますが、仕様ではUIがそれらを表示する方法と場所を説明していません。これは、さまざまなブラウザにさまざまなスタイルが表示されることを意味します。たとえば、モバイルデバイスでは、通知バーに表示される場合があります。
Web通知APIは、window
オブジェクトのNotification
属性を介して公開されます。通知インスタンスを作成できるようにするコンストラクターです。新しい通知を作成するには、次のコードを書くことができます。
// 打印电池是否正在充电 console.log("电池" + (navigator.battery.charging ? "" : "未") + "充电");現在、Chrome、Firefox、およびSafariはこのAPIをサポートしています。 Web通知APIをサポートするモバイルブラウザには、Firefox、Android 4.4、およびBlackBerryが含まれます。奇妙なものを見たことがありますか? Chrome MobileはこのAPIをサポートしていません!悲しいが、それは本当だ。
このAPIをサポートするブラウザは、市場の半分以上をカバーしているため、JavaScriptコードがサポートされていないメソッドを呼び出そうとしないようにするため、サポートの状況をテストする必要があります。次のコードスニペットを使用してこれを行うことができます。
このAPIに興奮していますか?とても良い! Web通知APIで始まる記事で詳細を学ぶことができます。また、ライブデモを試すこともできます。
var notification = new Notification('收到电子邮件', { body: '您收到了一封电子邮件。立即阅读!' });近接センサーapi
近接センサーAPIは、オブジェクトとWebページを実行しているデバイス間の距離を検出するために使用できるJavaScript APIです。距離は、近接センサーによって測定されます(デバイスに近接センサーがある場合)。近接センサーAPIは属性やメソッドを提供するのではなく、オブジェクト上の2つのイベントのみをトリガーします。私たちは彼らの話を聞いて操作を実行することができます。最初のイベントは、デバイスと近くのオブジェクト間の実際の距離に関する情報を提供しますが、2番目のイベント
は、近くにオブジェクトがあるかどうかのみを指定します。
このAPIをサポートする唯一のブラウザは、バージョン15から始まるFirefox(デスクトップおよびモバイル)です。残念ながら、多くのラップトップやデスクトップには近接センサーがないため、主にモバイルデバイスをターゲットにしています。 window
このAPIのサポートの検出:deviceproximity
userproximity
Vibration APIは、デバイスを振動させる方法を含む非常にシンプルなAPIです。明らかな使用の1つは、10年前にいくつかのコンソールによって導入された効果を再現できるゲームでです。ただし、これはこのAPIの唯一の可能な目的ではありません。 私が言ったように、振動APIは Internet ExplorerとSafariとは別に、このAPIはすべての主要なブラウザによってサポートされています。それでも、今こそ、次のプロジェクトに使用するのに良い時期かもしれません。実際、それがサポートされている場合、ユーザーにより良いエクスペリエンスを提供します(この機能を悪用しない限り)。以下に示すように、検出サポートは非常に簡単です
私が議論したい最後のAPIは、デバイスの方向APIです。デバイスの向きを検出することは、ナビゲーションアプリケーションからゲームまで、さまざまな状況に役立ちます。このAPIは、デバイスの物理的な向きと動きに関する情報を提供するいくつかのイベントを定義します。このAPIはW3Cワーキングドラフトです。つまり、仕様は不安定であり、将来のいくつかの変更が予想される場合があります。
APIは、次の3つのイベントを公開します: 、
または:
このAPIを使用する場合は、使用できるデモがあります。あなたがそれを学びたいなら、私たちは「HTML5でデバイスの向きを使用する」という記事を持っています。 結論 これらのAPIのユースケースは無限であり、それはすべてあなたの想像力と開発中のアプリケーションまたはウェブサイトの種類に依存します。この投稿を楽しんでいただければ幸いです。他に便利なAPIがどうなるか教えてください。 モバイルWeb javaScript API JavaScript API(アプリケーションプログラミングインターフェイス)は、異なるソフトウェアアプリケーションが相互に通信できるようにする一連のルールとプロトコルです。モバイルWebページがデバイスハードウェアやその他のソフトウェアアプリケーションと対話できるようにすることにより、モバイルWebページを強化し、機能とユーザーエクスペリエンスを向上させます。たとえば、JavaScript APIは、Webページがデバイスのカメラ、地理的位置、さらにはバッテリーステータスにアクセスできるようにすることができます。これにより、開発者が対話、エンゲージ、ユーザーフレンドリーなモバイルWebページがより多くの可能性を生み出します。 Geolocation APIは、デバイスのジオロケーションにアクセスできる強力なツールです。それを使用するには、最初にユーザーのブラウザがサポートしているかどうかを確認する必要があります。これは、 バッテリーステータスAPIホストデバイスのバッテリーステータスに関する情報を提供します。これは、デバイスのバッテリーレベルに基づいてWebページのパフォーマンスを最適化するのに非常に役立ちます。たとえば、バッテリーが低い場合、更新頻度を下げたり、特定の機能を無効にして電源を節約できます。このAPIを使用するには、バッテリーマネージャーオブジェクトに解決する約束を返す 振動APIを使用すると、ホストデバイスの振動メカニズムを制御できます。これは、ユーザーに触覚フィードバックを提供するのに非常に役立ちます。このAPIを使用するには、 周囲光センサーAPIは、デバイスの周囲光レベルに関する情報を提供します。これは、さまざまな照明条件下で読みやすさを向上させるために、Webページの明るさまたはコントラストを調整するのに役立ちます。このAPIを使用するには、新しい ネットワーク情報APIは、デバイスのネットワーク接続に関する情報を提供します。これは、ネットワークステータスに基づいてWebページのパフォーマンスを最適化するのに非常に役立ちます。たとえば、ネットワーク接続が遅い場合、画像やビデオの品質を低下させて、スムーズな読み込みを確保できます。このAPIを使用するには、ネットワークインフォメーションオブジェクトを返す デバイスの方向APIは、デバイスの物理的な向きに関する情報を提供します。これは、デバイスの動きに対応するインタラクティブなエクスペリエンスを作成するのに非常に役立ちます。このAPIを使用するには、デバイスの向きが変更されたときに発火するイベントリスナー ページの可視性APIを使用すると、Webページが表示または非表示になったときに検出できます。これは、ページの可視性に基づいてアクティビティを一時停止または再開するのに役立ちます。たとえば、ユーザーが別のタブに切り替えると、ビデオを一時停止し、戻ってきたときにビデオを再開できます。このAPIを使用するには、 フルスクリーンAPIを使用すると、フルスクリーンモードで要素を表示できます。これは、ビデオやゲームなどに没入感のある体験を提供するのに非常に役立ちます。このAPIを使用するには、任意の要素に対して Web通知APIを使用すると、ユーザーに通知を表示できます。これは、ページに焦点が合っていなくても、ユーザーに重要なイベントを思い出させるのに非常に便利です。このAPIを使用するには、最初にif ('Notification' in window) {
// API 受支持
} else {
// 不受支持
}
vibrate()
と呼ばれるメソッドのみを公開します。後者は、最も単純な形式でwindow.navigator
オブジェクトに属し、デバイスが振動するミリ秒数を指定する整数を受け入れます。 if (window.navigator && window.navigator.battery) {
// API 受支持
} else {
// 不受支持
}
このAPIの詳細については、「HTML5 Vibration APIの使用方法」という記事を読んで、デモを試すことを忘れないでください。 // 打印电池是否正在充电
console.log("电池" + (navigator.battery.charging ? "" : "未") + "充电");
デバイスの方向API
deviceorientation
ほとんどすべての主要なブラウザ(SAFARIを除く)はこのAPIをサポートしていますが、サポートは部分的であるか、矛盾があります。たとえば、執筆時点では、devicemotion
イベントをサポートするブラウザはほとんどありません。したがって、私の提案は、各イベントをテストしてサポートされているかどうかを確認することです。 compassneedscalibration
イベントの存在をテストするには、次のように書くことができます。
compassneedscalibration
deviceorientation
var notification = new Notification('收到电子邮件', {
body: '您收到了一封电子邮件。立即阅读!'
});
イベントをテストしたい場合は、次のことを記述できます。
if ('Notification' in window) {
// API 受支持
} else {
// 不受支持
}
devicemotion
if ('ondeviceproximity' in window) {
// API 受支持
} else {
// 不受支持
}
JavaScript APIとは何ですか?モバイルWebページをどのように強化しますか?
モバイルページでジオロケーションAPIを使用する方法は?
navigator.geolocation
プロパティを使用して実行できます。 true
を返す場合は、getCurrentPosition()
メソッドを使用してユーザーの現在の場所を取得できます。ユーザーの位置データにアクセスする前に、常にユーザーの許可を取得することを忘れないでください。 バッテリーステータスAPIとの使用方法は何ですか?
navigator.getBattery()
メソッドを使用できます。 モバイルWebページでVibration APIを使用する方法は?
navigator.vibrate()
メソッドを使用できます。単一の値を渡して特定の時間を振動させるか、一連の値を渡して振動を作成してモードを一時停止できます。 周囲の光センサーAPIとの使用方法は何ですか?
AmbientLightSensor
オブジェクトインスタンスを作成してから、start()
メソッドを使用して光レベルの検知を開始する必要があります。 モバイルWebページでWeb情報APIを使用する方法は?
navigator.connection
プロパティを使用できます。 デバイスの向きAPIとの使用方法は何ですか?
deviceorientation
イベントを追加できます。 モバイルWebページでページVivisibilityAPIを使用する方法は?
document.visibilityState
属性とvisibilitychange
イベントを使用できます。 フルスクリーンAPIとの使用方法は何ですか?
requestFullscreen()
メソッドを使用して、フル画面に表示することができます。 モバイルページでWeb通知APIを使用する方法は?
Notification.requestPermission()
メソッドを使用してユーザーの許可を要求する必要があります。ユーザーが許可を付与する場合は、新しい通知オブジェクトを作成して通知を表示できます。
以上が5 JavaScript APIは、モバイルWebページを強化しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript文字列置換法とFAQの詳細な説明 この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します:内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します 最も直接的な方法は、置換()メソッドを使用することです。 str = str.replace( "find"、 "置換"); この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace(/fi

このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。 驚くほど簡単です!検索をyに制限することができます

この記事シリーズは、2017年半ばに最新の情報と新鮮な例で書き直されました。 このJSONの例では、JSON形式を使用してファイルに単純な値を保存する方法について説明します。 キー価値ペア表記を使用して、あらゆる種類を保存できます

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか? Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

コードプレゼンテーションを強化する:開発者向けの10個の構文蛍光物 ウェブサイトやブログでコードスニペットを共有することは、開発者にとって一般的な慣行です。 適切な構文ハイライターを選択すると、読みやすさと視覚的な魅力を大幅に改善できます。 t

楽なWebページレイアウトのためにjQueryを活用する:8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。 この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

コアポイント これは通常、メソッドを「所有」するオブジェクトを指しますが、関数がどのように呼び出されるかに依存します。 現在のオブジェクトがない場合、これはグローバルオブジェクトを指します。 Webブラウザでは、ウィンドウで表されます。 関数を呼び出すと、これはグローバルオブジェクトを維持しますが、オブジェクトコンストラクターまたはそのメソッドを呼び出すとき、これはオブジェクトのインスタンスを指します。 call()、apply()、bind()などのメソッドを使用して、このコンテキストを変更できます。これらのメソッドは、与えられたこの値とパラメーターを使用して関数を呼び出します。 JavaScriptは優れたプログラミング言語です。数年前、この文はそうでした

この記事では、JavaScriptとJQuery Model-View-Controller(MVC)フレームワークに関する10を超えるチュートリアルの厳選された選択を紹介します。これは、新年にWeb開発スキルを向上させるのに最適です。 これらのチュートリアルは、Foundatioのさまざまなトピックをカバーしています


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

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

DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
