Chromeでスマホで開いた時と同じように表示する方法(エミュレータ)

PCで開発したアプリがスマホで表示したらどのように表示されるのか気になることが多々あります。毎回スマホにデプロイして表示確認を行うことは大変です。PCでスマホのように表示する設定にすれば常にスマホの表示で開発を進めることができる様になるので、今回はChromeの機能と拡張機能を組み合わせてスマホの様に表示させる方法(エミュレータ)を紹介します。

始めにユーザーエージェントを操作できるUser-Agent Switcher for Chromeという拡張機能をインストールします。ユーザーエージェントとはどのOSのどのブラウザでアプリを開いたかという情報のことで、Windows 8のChromeで開いているといった情報のことを指し、コードの書き方によっては、PCで開いたか？スマホで開いたなら、大きめのスマホか、タブレットか？といった情報で挙動が変えるものがあるので、スマホ用に開発していたとして、アプリの動作確認の際にユーザーエージェントをPCで開いていたら、想定している操作がまったく確認できないということがあります。

始めにGoogle Chromeを開いて、新しいタブを開きます。

新しいタブを開いたら、左上にあるAppsをクリックし

ストアを開きます。

Chromeウェブストアが表示されたら、左上の検索フォームにUser-Agent Switcher for Chromeと入力して検索、結果が表示されたら拡張機能のところにあるUser-Agent Switcher for Chromeの+無料をクリックしてインストールします。

インストールできたら、右上のアドレスバー横にアイコンが追加されています。この拡張機能を使ってユーザーエージェントを変更してみます。まずは追加されたアカウントをクリックしてみると、

ブラウザ(ChromeやInternet Explorer)やスマホ用のOS(iOSやAndroid)が表示されます。今回はAndroidのスマホのChromeの表示の確認だとして、

Androidをクリックして、

Android 4.1を選びます。選択終了後にアイコンにANDのマークが表示されます。これでユーザーエージェントの変更ができました。次は画面の表示サイズを見ていきましょう。