Chromeデベロッパーツールでスマホ/タブレットのブラウザ表示をエミュレーションする
Chromeデベロッパーツールでスマホ/タブレットのブラウザ表示をエミュレーションする
概要
・ウェブ制作をする際に、結構厄介なのが、色々なOS、色々なブラウザ、色々なデバイスでの表示が正常かどうか、を確認する事です。
・本投稿では、ブラウザ；Chromeのデベロッパーツールを利用し、代表的なスマートフォン、タブレットについてのウェブ表示を、エミュレータで確認する方法を記載しました。
・なお、最も確実なのは、実機で確認すること。次に確実なのは、各OSが提供している正規のシミュレータ、開発キットを利用することだと思いますが、本投稿で紹介する方法は気軽に確認できるのでとても便利だと思います。
前提
・MacにインストールしたChromeで説明しています。
・2014.10.6時点の状態で記載しました。
使用手順1;Chrome デベロッパーツール起動
・ブラウザ右上の「Google Chromeの設定」アイコンからツール、デベロッパーツールを選択します。※ショートカット；「Command」「Option」「i」(Mac版Chrome)
・ブラウザ下部にコンソールが出てきます。通常はHTMLソース等が表示されると思います。
使用手順2;Emulation表示に切り替え、デバイスを選択します
・「Show Drawer」ボタンを押し、「Emulation」タブに切り替えます。
・「Device」を選択し、「Select model」から表示したいデバイスを選びます。
・代表的な機種は結構網羅されています。
・ここでは「Google Nexus 7」を選択した場合の表示を掲載しました。
・デバイスを横向きにした時の表示も確認できます。
・横と縦が反転した際の表示例です。
使用手順3;元の表示に戻します
・「Reset」ボタンを押すと元の表示に戻ります。
最後に
・本当に簡単にスマホやタブレットの表示が確認できるので便利です。
・このデベロッパーツール、色々な機能があって、HTMLのソース確認や、CSS記述などには本当にお世話になっています。画面下ではなく独立したウィンドウで表示することも可能なようです。
・お疲れ様でした
参考資料
・Google Chromeのサイトに、Emulationの説明があります(英語)→Device Mode & Mobile Emulation – Google Chrome
筆者の課題
・現状(2014.10.6現在)、筆者は、以下のデバイスを所有しており、代表的なブラウザに関しては実機確認できる状況にある。
Mac実機(Mac OS 10.9.5) Safari、Firefox、Chrome
Windows7(Mac Bootcamp利用) Internet Exploler 11、Firefox、Chrome
iPad mini(初代、iOS8.0.2) Safari、Chrome
・また、iOSに関しては、Apple提供のiOSシミュレータをインストールしています→制作したWebの表示をiOSシミュレータで確認する #iOS
・従いまして、今後の課題としては以下を考えています。結構手順を要するので別途設定してみたいと思っています。
Andoroid；正規のSDKで提供されるエミュレータをインストールすること。
Windows；modern.IEをインストールし、仮想マシンを使用すること。※Internet Explolerの最新版以外のエミュレーションが出来るようです。
他のOS(UNIX/Linux/その他)については、今後の課題としますが、当面は着手予定はありません。
