Microsoft Edge を使用して Web 用に開発する

[アーティクル]
04/04/2023

Microsoft Edge DevTools、Microsoft Edge 拡張機能、プログレッシブ Web Apps、WebDriver オートメーション、WebView2 などを使用して、Microsoft Edge で Web 用に開発します。

Microsoft Edge DevTools

Microsoft Edge ブラウザーには、Microsoft Edge DevTools と呼ばれる組み込みの Web 開発ツールが付属しています。 DevTools は、ブラウザーでレンダリングされた Web ページの横に表示される一連の Web 開発ツールです。 DevTools は、Web ページと Web アプリを検査およびデバッグするための強力な方法を提供します。 DevTools 環境内でソースファイルを編集したり、Web サイトプロジェクトを作成したりすることもできます。

DevTools では、次の操作を実行できます。

ビジュアルインターフェイスを使用してライブツールを使用して、Web ページ内の要素のスタイルを検査、調整、変更します。ブラウザーに格納されているコンテンツの場所を調べて、、.js.cssおよびファイル形式など.html、Web ページを.png構築します。
さまざまなデバイスで Web ページがどのように動作するかをエミュレートし、モバイル環境をシミュレートし、さまざまなネットワーク条件を満たします。ネットワークトラフィックを検査し、問題の場所を確認します。
ブレークポイントのデバッグとライブコンソールを使用して JavaScript をデバッグします。 Web アプリに関するメモリの問題とレンダリングの問題を見つけます。
製品のアクセシビリティ、パフォーマンス、互換性、およびセキュリティの問題を見つけ、DevTools を使用して見つかったアクセシビリティの問題を解決します。
開発環境を使用して、DevTools の変更をファイルシステムと Web から同期します。

DevTools の概要に関するページを参照してください。

Microsoft Edge 拡張機能

ブラウザーの機能を追加または変更するための Microsoft Edge 用の拡張機能を作成します。拡張機能は、対象ユーザーにとって重要な特殊な機能を提供するために、ブラウザーエクスペリエンスを向上させます。

特定の Web ブラウザーまたは特定の Web ページの機能の改善に基づくアイデアや製品がある場合は、Microsoft Edge 拡張機能を作成できます。コンパニオンエクスペリエンスの例としては、広告ブロッカーやパスワードマネージャーなどがあります。

Microsoft Edge 拡張機能は、通常の Web アプリと同様に構成されており、通常は次のものが含まれます。

基本的なプラットフォーム情報を含むアプリマニフェスト JSON ファイル。
ブラウザー拡張機能の動作を定義する JavaScript ファイル。
ユーザーインターフェイスを定義する HTML ファイルと CSS ファイル。

「Microsoft Edge 拡張機能の概要」を参照してください。

プログレッシブ Web Apps

プログレッシブ Web Appsは、オープン Web テクノロジを使用して、クロスプラットフォームの相互運用性を提供します。サポートプラットフォーム上のネイティブアプリと同様に動作し、他のブラウザーの通常の Web サイトと同様に動作します。

プログレッシブ Web Appsは、最高の Web アプリとコンパイル済みアプリを組み合わせて、デバイス用にカスタマイズされたアプリのようなエクスペリエンスをユーザーに提供します。プログレッシブ Web アプリは、他のブラウザーの通常の Web サイトと同様に機能しながら、サポートプラットフォーム上のインストールされたネイティブアプリのように機能するように段階的に強化された Web サイトです。

プログレッシブ Web Appsは、Android 用、iOS 用、デスクトップオペレーティングシステムごとに個別のコードベースなど、プラットフォームごとに特定のコードベースを必要とするコンパイル済みアプリよりもはるかに低いクロスプラットフォーム開発コストを持ちます。

「プログレッシブ Web Apps (PWA) の概要」を参照してください。