Have questions about images on the web? Tweet your questions to @ChromiumDev with #AskChrome and we'll answer the top questions in our next #AskChrome episode on YouTube.

他のブラウザのエミュレートとテスト

Chrome と Android でサイトがうまく実行できることを確認したら作業完了というわけではありません。 Device Mode では iPhone などの他のさまざまな端末をシミュレートできますが、他のブラウザ ソリューションでエミュレーションを行ってみることをおすすめします。

TL;DR

  • 特定の端末がない場合、または何らかのスポット チェックを行いたい場合は、ブラウザ内で端末をエミュレートするのが最適です。
  • 端末エミュレータとシミュレータを使用すると、ワークステーションからさまざまな端末での開発サイトの動きを模倣できます。
  • クラウドベースのエミュレータを使用すると、さまざまなプラットフォームにおけるサイトのユニットテストを自動化できます。

ブラウザ エミュレータ

ブラウザ エミュレータは、サイトがレスポンシブであるかをテストするのに最適ですが、モバイル ブラウザの API、CSS サポート、および特定の動作の相違はエミュレートされません。 実際の端末でブラウザを実行してサイトをテストし、すべてが想定どおりに動作することを確認してください。

Firefox のレスポンシブ デザイン ビュー

Firefox のレスポンシブ デザイン ビューを使用すると、特定の端末を対象に考えるのではなく、縁をドラッグして一般的な画面サイズや独自のサイズでデザインがどのように変わるかを調べることができます。

Edge の F12 エミュレーション

Windows Phone をエミュレートするには、Microsoft Edge の 組み込みエミュレーションを使用します。

Edge にはレガシー互換性がないため、古いバージョンの Internet Explorer でページがどのように表示されるかをシミュレートするには、IE 11 のエミュレーション を使用します。

端末エミュレータとシミュレータ

端末エミュレータとシミュレータは、ブラウザ環境だけではなく、端末全体をシミュレートします。 仮想キーボードを使用したフォーム入力など、OS との統合が必要な機能をテストするのに役立ちます。

Android エミュレータ

Android エミュレータの Stock Browser
Android エミュレータの 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 エミュレータの Content Shell
Android エミュレータの 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 エミュレータ上の Firefox アイコン
Android エミュレータ上の 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 のドキュメントでシミュレータの操作方法を確認してください。

注: iOS シミュレータを使用するたびに Xcode を開かなくても済むようにするには、Xcode を開いてからドックで iOS シミュレータのアイコンを右クリックし、[Keep in Dock] を選択します。 これで、必要なときにこのアイコンをクリックするだけで済みます。

Modern.IE

Modern IE VM
Modern IE VM

Modern.IE 仮想マシンを使用すると、VirtualBox(または VMWare)を使用してコンピュータでさまざまなバージョンの IE にアクセスできます。 このダウンロード ページで仮想マシンを選択します。

クラウドベースのエミュレータとシミュレータ

エミュレータを使用できず、実際の端末も使用できない場合は、クラウドベースのエミュレータが次善の策となります。 クラウドベースのエミュレータが実際の端末とローカル エミュレータよりも優れている点は、さまざまなプラットフォームにおけるサイトのユニットテストを自動化できることです。

  • BrowserStack(商用)は、手動テストに最も簡単に使用できます。 オペレーティング システム、ブラウザ バージョンと端末タイプ、およびブラウジングする URL を選択すると、ホストされている操作可能な仮想マシンが起動します。 複数のエミュレータを同じ画面で起動して、同時に複数の端末でアプリのルック アンド フィールをテストすることもできます。
  • SauceLabs(商用) を使用すると、エミュレータの内部でユニットテストを実行できます。これは、サイト全体のフローのスクリプトを作成するのに非常に便利で、録画した実行時の動画を後でさまざまな端末上で視聴できます。 サイトの手動テストを実行することもできます。
  • Device Anywhere(商用)ではエミュレータは使用されませんが、リモートで制御できる実際の端末が使用されます。 これは、特定の端末で問題を再現する必要があり、これまでのガイドのオプションではバグが見つからない場合に非常に便利です。

フィードバック

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.