Chrome と Android でサイトが適切に動作するようにすることだけでは、仕事は終わりではありません。Device Mode は iPhone などの他のさまざまなデバイスのシミュレートが可能ですが、エミュレーションについて他のブラウザのソリューションを確認することをおすすめします。
概要
- 特定のデバイスがない場合や、何かのスポットチェックを行う場合は、ブラウザ内でデバイスをエミュレートすることをおすすめします。
- デバイス エミュレータとシミュレータを使用すると、ワークステーションからさまざまなデバイスで開発サイトを模倣できます。
- クラウドベースのエミュレータを使用すると、さまざまなプラットフォーム間でのサイトの単体テストを自動化できます。
ブラウザ エミュレータ
ブラウザ エミュレータはサイトの応答性のテストには適していますが、API、CSS サポート、モバイル ブラウザで見られる特定の動作の違いをエミュレートしません。実際のデバイスのブラウザでサイトをテストして、すべてが想定どおりに動作することを確認します。
Firefox のレスポンシブ デザイン ビュー
Firefox のレスポンシブ デザインビューでは、特定のデバイスを考慮するのではなく、端をドラッグして、一般的な画面サイズや独自のサイズでデザインがどのように変化するかを確認できます。
Edge の F12 エミュレーション
Windows Phone をエミュレートするには、Microsoft Edge の組み込みエミュレーションを使用します。
Edge にはレガシーとの互換性がないため、IE 11 のエミュレーションを使用して、以前のバージョンの Internet Explorer でページがどのように表示されるかをシミュレートします。
デバイス エミュレータとシミュレータ
デバイス シミュレータとエミュレータは、ブラウザ環境だけでなくデバイス全体もシミュレートします。仮想キーボードを使用したフォーム入力など、OS との統合が必要な項目をテストする場合に役立ちます。
Android Emulator
Android Emulator のストック ブラウザ
現時点では、Android Emulator に Chrome をインストールする方法はありません。ただし、Android ブラウザ、Chromium Content Shell、Android 用 Firefox は使用可能です。これについては、このガイドの後半で説明します。Chromium Content Shell は、同じ Chrome レンダリング エンジンを使用しますが、ブラウザ固有の機能はありません。
Android Emulator には、Android SDK が付属しています。こちらからダウンロードしてください。次に、手順に沿って仮想デバイスをセットアップし、エミュレータを起動します。
エミュレータが起動したら、ブラウザ アイコンをクリックして古い Stock Browser for Android でサイトをテストできます。
Android 版 Chromium Content Shell
Android Emulator の Content Shell
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 でサイトをテストできます。
Firefox（Android）
Android Emulator 上の Firefox アイコン
Chromium の Content Shell と同様に、APK を取得して、Firefox をエミュレータにインストールできます。
https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/ から適切な .apk ファイルをダウンロードします。
ここから次のコマンドを使用して、開いているエミュレータまたは接続されている Android デバイスにファイルをインストールできます。
adb install <path to APK>/fennec-XX.X.XX.android-arm.apk
iOS シミュレータ
Mac OS X 用の iOS シミュレータには Xcode が付属しており、App Store からインストールできます。
作業が完了したら、Apple のドキュメントでシミュレータの操作方法を確認してください。
Modern.IE
最新の IE VM
Modern.IE 仮想マシンを使用すると、VirtualBox（または VMWare）を介してコンピュータでさまざまなバージョンの IE にアクセスできます。こちらのダウンロード ページで仮想マシンを選択します。
クラウドベースのエミュレータとシミュレータ
エミュレータを使用できず、実際のデバイスも利用できない場合は、クラウドベースのエミュレータを使用します。実際のデバイスやローカル エミュレータと比較した場合のクラウドベースのエミュレータの大きな利点は、さまざまなプラットフォームでサイトの単体テストを自動化できることです。
- 手動テストには BrowserStack（商用）が最も簡単です。オペレーティング システムを選択し、ブラウザのバージョンとデバイスタイプを選択し、参照する URL を選択すると、やり取りできるホストされた仮想マシンがスピンアップされます。また、同じ画面で複数のエミュレータを起動し、複数のデバイスでアプリの外観を同時にテストすることもできます。
- SauceLabs（商用）を使用すると、エミュレータ内で単体テストを実行できます。これは、サイト上でのフローのスクリプト作成に非常に便利です。この録画を後でさまざまなデバイスで視聴することもできます。サイトで手動テストを行うこともできます。
- Device Anywhere（商用）はエミュレータを使用しませんが、リモートで制御できる実際のデバイスを使用します。これは、特定のデバイスで問題を再現する必要があり、前のガイドに記載されているオプションではバグが確認できない場合に便利です。
- LambdaTest（商用）では、2,000 以上のブラウザとオペレーティング システムを組み合わせて、手動でクロスブラウザのテストを行うことができます。ユーザーは複雑なバグの動画を録画し、MS Teams、Slack などの統合を介して共有できます。ユーザーはテストを並行して実行することでテストを高速化できます。