Chromeデベロッパーツールでモバイルをエミュレートする

Chromeに標準搭載されているデベロッパーツールには、モバイルをエミュレートする機能が豊富に備わっています。デバイス、ユーザーエージェント、画面解像度の指定ができるだけでなく、タッチスクリーンのエミュレートも可能です。

デスクトップPC上で、モバイルのシミュレートやエミュレートができるツールはたくさんありますが、Chromeのモバイルエミュレーション機能は本当に便利です。
スマートフォンサイト制作のデバッグでは大いに役立ち、私はもっぱらこの機能を使ってデバッグしています。

【コンテンツ】

  1. エミュレーション機能を有効にする
  2. デバイスをエミュレートする
  3. 画面解像度を指定しエミュレートする
  4. ユーザーエージェントを指定しエミュレートする
  5. タッチスクリーンを有効にする

【記事執筆時の環境】
Windows 7 Professional 32bit SP1
Google Chrome 33

エミュレーション機能を有効にする

モバイルエミュレーション機能を使うには、以下のようにします。

まず、[ツール]-[デベロッパーツール]でデベロッパーツールを開きます。
ちなみに、Windowsならショートカットキーの[Ctrl + Shift + I]、あるいは[F12]でも開けます。

Chromeデベロッパーツール画面

なお、デベロッパーツールの表示位置ですが、Webページの下に縦に表示させることもできますし、別のウィンドウで開くこともできます。
横長ディスプレイでは、横に並べて表示させるのが私はやりやすいのでこのようにしています。
縦に表示したい場合は、下図のアイコンを長押しすると切り替えることができます。

デベロッパーツール表示位置変更アイコン

次に、右上の歯車の形をしたアイコンをクリックして、Settingパネルを表示します。

Generalペインの、[Appearance]のところにある、[Show 'Emulation' view in console drawer]にチェックを入れます。

エミュレーション機能の有効化

デベロッパーツールに戻ったら、ESCキーを押すとConsole Drawerが表示されますので、[Emulation]タブをクリックします。

エミュレーションパネル

デバイスをエミュレートする

プリセットされているデバイスを、ドロップダウンリストから選択します。
リストの中に、ターゲットとするデバイスがあるなら、この方法が最も簡単です。

ここでは、「Apple iPhone5」を選択してみます。

選択したら、[Emulate]ボタンをクリックします。
エミュレーションモードに変わり、
Screen/User Agent/Sensorsすべてのペインが有効になりチェックがつきます。

デバイスエミュレート画面

表示をリフレッシュすると、iPhone5の画面解像度でページが表示されます。
上の図ではYahooのモバイルページが表示されています。

モバイルデバイスのエミュレートでは、マウスカーソルは半透明の円になります。
マウスでタップやフリック動作もできますが、ピンチイン・ピンチアウトの操作は、Shiftキーを押しながら上または下方向にドラッグします。

ピンチ操作のエミュレート

画面解像度を指定しエミュレートする

レスポンシブWebデザインでは、画面解像度によりレイアウトが変わるので、画面解像度を指定してエミュレートします。

Screenペインをクリックします。

[Emulate screen]にチェックを入れます。

[Resolution]の値を変えると、画面解像度が変わります。
スマホ画面を縦長(Portrait mode)から横長(Landscape mode)にしたい時などは、widthとheightの間にあるボタンをクリックすると値がスワップします。

スクリーンのエミュレート

ユーザーエージェントを指定しエミュレートする

ユーザーエージェントで判別し、PC用とモバイル用を切り替えているサイトもありますので、その場合はユーザーエージェントを指定してエミュレートします。

User Agentペインをクリックします。

[Spoof user agent]にチェックを入れます。

ドロップダウンリストから、ユーザーエージェントを選択します。

ユーザーエージェントの指定

この場合は、Screenペインが有効になっていませんので、モバイルページを表示していても画像解像度は表示しているウィンドウの大きさになっています。

タッチスクリーンを有効にする

Sensorsペインをクリックします。

[Emulate touch screen]にチェックを入れます。

これで、マウスカーソルが半透明の円に変わりタッチスクリーンが有効になります。

タッチスクリーンの有効化

なお、Sensorsペインでのパネルには、html5の位置情報機能(Geolocation)や、デバイスの傾きに関する設定項目があります。

これらもエミュレートできますので、詳細は下記ページを参照してください。
https://developers.google.com/chrome-developer-tools/docs/mobile-emulation?hl=ja

スポンサーリンク

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ