他のブラウザーをエミュレートしてテストする
Web サイトがすべてのユーザーに対して機能することを確認するには、他のブラウザーやデバイスで Web サイトをテストします。 すべてのユーザーが、開発時に使用したブラウザーとデバイスを使用しているわけではありません。 Microsoft Edge DevTools のデバイス エミュレーション ツールを使用するだけでなく、他のブラウザーによって提供されるエミュレーション用のソリューションをチェックすることをお勧めします。
概要
さまざまな条件で Web サイトをテストするために実行できるテストには、いくつかの異なるレベルがあります。
ブラウザー エミュレーターを 使用すると、タッチ イベント エミュレーションを使用して、ブラウザーが送信する User-Agent 文字列をオーバーライドすることで、さまざまな画面サイズと解像度で Web サイトの外観と動作をすばやくテストできます。 開発しているブラウザーからブラウザー エミュレーターを使用します。 以下の 「ブラウザー エミュレーター」を参照してください。
デバイス エミュレーターとシミュレーター を使用すると、開発用コンピューターから他のデバイスを実行し、これらの他のデバイスを使用しているかのように Web サイトをテストできます。 以下 の「デバイス エミュレーターとシミュレーター」を参照してください。
クラウドベースのエミュレーター を使用すると、さまざまなプラットフォームで Web サイトの自動テストを実行できます。 以下 の「クラウドベースのエミュレーターとシミュレーター」を参照してください。
ブラウザー エミュレーター
ブラウザー エミュレーターは、Web サイトの外観と動作をさまざまな画面サイズと解像度でテストしたり、タッチ イベントが有効になっている場合や、User-Agent 文字列が別のブラウザーの User-Agent 文字列に設定されている場合に最適です。
開発しているブラウザーからブラウザー エミュレーターを使用します。 たとえば、Microsoft Edge では、DevTools の デバイス エミュレーション ツールを使用して、さまざまなデバイスでの Web サイトの外観と動作の近似値を取得できます。 Microsoft Edge DevTools で デバイス エミュレーション ツールを使用する方法の詳細については、「 モバイル デバイスのエミュレート (デバイス エミュレーション)」を参照してください。
ブラウザー エミュレーターは、Web API サポートまたは CSS サポートの違いをエミュレートしません。 たとえば、Microsoft Edge の デバイス エミュレーション ツールでは、サイトで使用されている可能性があるさまざまな Web API または CSS 機能が Firefox または Safari でどのようにサポートされているかをエミュレートしません。 すべてが期待どおりに動作することを確認するには、実際のデバイスで実行されているブラウザーでサイトをテストします。
他のブラウザーで Web サイトをテストするために使用できるブラウザー エミュレーターを次に示します。
デバイス エミュレーターとシミュレーター
デバイス シミュレーターとエミュレーターは、ブラウザー環境をシミュレートするのではなく、デバイス全体をシミュレートします。 各シミュレーターは、モバイル デバイス キーボードを使用したフォーム入力など、特定のオペレーティング システムとの統合を必要とする側面をテストするのに役立ちます。
デバイス エミュレーターとシミュレーターを開発用コンピューターにインストールして、別のデバイスを使用するエクスペリエンスをシミュレートしながら、開発しているのと同じコンピューターで Web サイトをテストし続けることができます。
Android エミュレーター
現時点では、Android エミュレーターに Microsoft Edge をインストールする方法はありません。 ただし、この記事の後半で説明する Android ブラウザー、Chromium コンテンツ シェル、および Firefox for Android を使用できます。 Chromium Content Shell は、Microsoft Edge と同じChromiumレンダリング エンジンを実行しますが、ブラウザー固有の機能はありません。
Android エミュレーターを使用するには:
Android Studio をダウンロードして、Android SDK の一部としてパッケージ化された Android エミュレーターをダウンロード します。
「仮想デバイスの作成と管理」の手順に従って 、仮想デバイスを設定します。
「Android エミュレーターでアプリを実行する」の手順に従ってエミュレーターを起動します。
エミュレーターが起動したら、[ ブラウザー ] アイコンを選択し、Android 用の古い Stock Browser で Web サイトをテストします。
Android でのコンテンツ シェルのChromium
Android 用の Chromium Content Shell をインストールするには、エミュレーターを実行したままにして、次のコマンドを実行します。
git clone https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/*.sh
./chromium-android-installer/install-chromeandroid.sh
これで、Chromium Content Shell を使用して Web サイトをテストできます。
Android 上の Firefox
Chromiumコンテンツシェルと同様に、APK を入手して Firefox をエミュレーターにインストールできます。
開いているエミュレーターまたは接続されている Android デバイスにファイルをインストールするには、次のコマンドを実行します。
adb install <path_to_APK>/fennec-XX.X.XX.android-arm.apk
iOS シミュレーター
Mac OS X 用の iOS シミュレーターには、App Storeからインストールする Xcode が付属しています。
完了したら、 Apple Developer ドキュメントを使用してシミュレーターを操作する方法について説明します。
iOS シミュレーターを使用するたびに Xcode を開かないようにするには、iOS シミュレーターを開き、ドックで iOS シミュレーター アイコンを右クリックし、[ Dock に保持] を選択します。 これで、必要なときにいつでもアイコンをクリックできます。
仮想マシン
他のオペレーティング システムで Web サイトをテストするには、開発デバイスで仮想マシンを実行します。 たとえば、 Hyper-V は、さまざまなバージョンの Windows と Linux を実行できる仮想化ツールです。 詳細については、「Windows 10での Hyper-V の概要」を参照してください。
その他の仮想マシンについては、「MDN でテストを実行するための戦略」の「仮想マシン」を参照してください。
クラウドベースのエミュレーターとシミュレーター
クラウドベースのエミュレーターとシミュレーターは、開発用コンピューターに何もインストールせずに、さまざまなデバイスやブラウザーで Web サイトをテストするための商用ソリューションです。 実際のデバイスにアクセスできない場合や、ローカル エミュレーターを使用できない場合に便利です。 クラウドベースのソリューションは、さまざまなプラットフォーム間でテストを自動化する場合にも役立ちます。
MDN でテストを実行するための戦略のエミュレーターに関するページを参照してください。
関連項目
レスポンシブ デザイン:
- レスポンシブ デザイン モード - Firefox。
- デバイス モードでモバイル デバイスをシミュレート する - Chrome。
- レスポンシブ デザイン モード - Safari。
Android
- Android Studio
- 仮想デバイスの作成と管理 - 仮想 デバイスを設定します。
- Android エミュレーターでアプリを実行する - エミュレーター を起動します。
- お使いの言語でダウンロードする Firefox ブラウザーを選択します。 Firefox Android Beta - 正しい.apk ファイルをダウンロードします。
林檎：
MDN:
- MDN でテストを実行するための戦略。
注:
このページの一部は、 Google によって 作成および共有され、 クリエイティブ・コモンズ属性 4.0 国際ライセンスに記載されている条件に従って使用される作業に基づく変更です。 元のページは ここに あり、メギン・カーニーとポール・バカウスによって作成されています。
