Chrome と Android でサイトがうまく実行できることを確認したら作業完了というわけではありません。Device Mode では iPhone などの他のさまざまな端末をシミュレートできますが、他のブラウザ ソリューションでエミュレーションを行ってみることをおすすめします。
概要
- 特定の端末がない場合、またはなんらかのスポット チェックを行いたい場合は、ブラウザ内で端末をエミュレートするのが最適です。
- 端末エミュレータとシミュレータを使用すると、ワークステーションからさまざまな端末上の開発サイトを再現できます。
- クラウドベースのエミュレータを使用すると、さまざまなプラットフォームにおけるサイトのユニットテストを自動化できます。
ブラウザ エミュレータ
ブラウザ エミュレータは、サイトがレスポンシブであるかをテストするのに最適ですが、モバイル ブラウザの API、CSS サポート、および特定の動作の相違はエミュレートされません。実際のデバイスでブラウザを実行してサイトをテストし、すべてが想定どおりに動作することを確認してください。
Firefox のレスポンシブ デザイン ビュー
Firefox のレスポンシブ デザイン ビューを使用すると、特定のデバイスを対象に考えるのではなく、縁をドラッグして一般的な画面サイズや独自のサイズでデザインがどのように変わるかを調べることができます。
Edge の F12 エミュレーション
Windows Phone をエミュレートするには、Microsoft Edge の組み込みエミュレーションを使用します。
Edge にはレガシー互換性がないため、古いバージョンの Internet Explorer でページがどのように表示されるかをシミュレートするには、IE 11 のエミュレーションを使用します。
デバイス エミュレータとシミュレータ
端末エミュレータとシミュレータは、ブラウザ環境だけではなく、端末全体をシミュレートします。仮想キーボードを使用したフォーム入力など、OS との統合が必要な機能をテストするのに役立ちます。
Android Emulator
Android Emulator の Stock Browser
現時点では、Android エミュレータに Chrome をインストールする方法はありません。ただし、Android ブラウザ、Chromium Content Shell、およびこのガイドで後述する Android 版 Firefox を使用できます。Chromium Content Shell では、同じ Chrome レンダリング エンジンを使用しますが、ブラウザ固有機能は一切付属していません。
Android エミュレータには Android SDK が付属していますが、こちらからダウンロードする必要があります。手順に沿って仮想デバイスを設定し、エミュレータを起動します。
エミュレータが起動したら、ブラウザ アイコンをクリックします。これで Android 版の古い Stock Browser でサイトをテストできます。
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 でサイトをテストできます。
Android 版 Firefox
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 シミュレータは、App Store からインストールできる Xcode に含まれています。
インストールしたら、Apple のドキュメントでシミュレータの操作方法を確認してください。
Modern.IE
モダン IE VM
Modern.IE 仮想マシンを使用すると、VirtualBox（または VMWare）を使用してコンピュータでさまざまなバージョンの IE にアクセスできます。こちらのダウンロード ページで仮想マシンを選択します。
クラウドベースのエミュレータとシミュレータ
エミュレータを使用できず、実際のデバイスにもアクセスできない場合は、クラウドベースのエミュレータが次善の策となります。クラウドベースのエミュレータが実際の端末とローカル エミュレータよりも優れている点は、さまざまなプラットフォームにおけるサイトのユニットテストを自動化できることです。
- 手動テストに最も簡単に使用できるのは BrowserStack（商用）です。オペレーティング システム、ブラウザ バージョンとデバイスの種類、ブラウジングする URL を選択すると、ホストされている操作可能な仮想マシンが起動します。複数のエミュレータを同じ画面で起動して、同時に複数の端末でアプリのルック アンド フィールをテストすることもできます。
- SauceLabs（商用）を使用すると、エミュレータの内部でユニットテストを実行できます。これは、サイト全体のフローのスクリプトを作成するのに非常に便利で、録画した実行時の動画を後でさまざまな端末上で視聴できます。サイトの手動テストを実行することもできます。
- Device Anywhere（商用）ではエミュレータは使用されませんが、リモートで制御できる実際のデバイスが使用されます。これは、特定の端末で問題を再現する必要があり、これまでのガイドのオプションではバグが見つからない場合に非常に便利です。
- LambdaTest（商用）を使用すると、2,000 を超えるブラウザとオペレーティング システムの組み合わせで手動のクロスブラウザ テストを実施できます。ユーザーは複雑なバグの動画を録画し、MS Teams、Slack などの統合を介して共有できるようになります。テストを並行して実行することで、テストを高速化できます。