ブログや Web サイトを構築している人であれば、スマートフォン用サイトの構築に頭を悩ませる経験をお持ちですよね？？スマートフォン用の表示サイトに対するウエイトが大きくなってきていますし、パソコンよりもスマホでインタネットを使うことが多いと思います。
しかし実際にブログや Web サイトを作成するのはパソコン・・・
なので別途モバイル用のレイアウトをチェックする必要がありますが、できれば作成しながらチャックできれば二度手間にならずにすみますそこで活用できるのはスマートフォンからの表示を確認するシミュレーター
【PC 版Chromeのモバイルエミュレーター】になります。
ページコンテンツ
Chrome の Developer Tools を使ってモバイルページを表示する
今回紹介する内容は、パソコン版の Chrome を利用してモバイルページをシミュレートする方法です。普段他のブラウザを利用している方は、こちらからインストールしてください。
Web サイトやブログなど、普段から HTML や CSS の編集をしている人であれば、Chrome に内臓されている Dveloper Tools は欠かせないツールです。
この Developer Tools を使えば、JavaScript により出力された HTML 等も含め、ソースコードとして閲覧することができます。そして、そのソース上で選択した要素に適用されている CSS 情報を確認することもできます。また、直接ソースをいじって画面表示まで確認できるとても便利なツールです。
Developer Tools を起動する
Chrome から解析を行いたいページを開きます。そして画面上を右クリックして「検証(I)」を選択します。すると次のように画面右側にツールが立ち上がります。
ショートカットキー Ctrl + Shift + i または F12 でも同様に立ち上がります。
デフォルトの設定ではブラウザのウィンドウ内に収まっているため、解像度の小さいモニターで閲覧するには見づらいです。そこで、画面右上にあるメニュー「」を選択し、Dock side の項目から一番左にあるアイコンを選択してください。するとツールの部分が別ウィンドウで表示されるようになります。
モバイルシミュレーターを起動する
Developer Tools を立ち上げたら、ツールの左上にスマートフォンのアイコンをクリックしてください。２つ並んでいるアイコンの右側です。
ツール上の表示は特に変わりませんが、最初に開いた Web ページの表示エリアが、ご覧のように縦長の枠で表示されます。この状態が、スマートフォンで開いた場合の画面サイズになります。
ただしこの段階では、あくまでも表示枠のサイズが変更されただけです。
ユーザーエージェントを変更する
Web ページ側にモバイル端末からアクセスしているかのように認識させるためには、ユーザーエージェント情報をシミュレートしてあげます。
表示枠が切り替わった画面上部にある [Responsive ▼] をクリックすれば、シミュレートするデバイス機器を選択できます。
選択できるデバイス機器には、iPhone や各種 Android 機器があります。残念ながら XPERIA はリスト上へありませんが、あまり機種情報にこだわる必要はありません。デバイス情報を変えても、画面を描画するエンジンは PC 版 Chrome のものです。あくまでも、ユーザーエージェントと表示ウィンドウサイズのみを装っているに過ぎません。
ユーザーエージェントとは、どのブラウザを使って画面を表示しているかを知らせるための情報です。例えば iPhone からアクセスした場合、ユーザーエージェントは iPhone の Safari を使ってアクセスしていることが、サーバーへ送信されます。
ユーザーエージェント情報をサイトに通知
デバイスを選択したら、画面を再読み込みしてください。変更したユーザーエージェント情報が送られるので、サイトによっては表示レイアウトがモバイル用に変更されることがあります。
例えばこの画像のように iPhone を選択して再読込みすると、Web サイト側はスマートフォンからのアクセスだと認識して画面を再描画します。
これでモバイルサイトのレイアウトを確認できるようになります。
なお、シミュレーターで表示している最中は、マウスポインターがグレーの丸い状態に変わります。タップされる領域の目安として活用できるので、リンク項目間が近すぎて誤タップを招く箇所を特定することも可能です。
モバイルエミュレーターのツールバー
モバイルエミュレーター上部にあるツールバーとメニューについて簡単に説明しておきましょう。
表示されている設定項目は、次のようなものです。
- デバイスの種類（レスポンシブも選択可能）
- 現在の画面解像度
- スケール（画面はエミュレーターの枠に合うよう拡大縮小可能）
- 縦画面・横画面の切り替え（デバイスにレスポンシブ以外を選んだ場合）
縦に並んだ三点メニューではほかの選択肢が選べます。
- デバイスの枠の表示（対応するスマホやタブレットの実機画像）
- ピクセル定規
- デバイスのピクセル比率（例：仮想Retinaディスプレイなら比率は2.0）
- デバイスの種類（スマートフォン、タブレットといったカテゴリ）
- ネットワーク制限（帯域を制限し、低速接続時の動作確認が可能）
- 最後の項目はデバイスの枠も含めたスクリーンショットの撮影
一時的なソースコード修正が便利
このツールを利用すれば、HTML や CSS のソースをダイレクトに修正して、描画の確認を行うこともできます。
画面内のソースコードを一時的に修正して確認するための機能であるため、変更した内容を保存することはできません。それでもちょっとした修正であれば、ファイルをアップロードしなくても変更結果を予め画面から確認できるメリットがあります。
他にも多くの機能を有しているので、使い慣れると Web サイトを構築する上では欠かせないツールになります。モバイル用のシミュレーターとしてだけでなく、名前の通り Web 開発者用ツールとして活用いただければと思います。
実機のリモートデバッグ機能
最後に、ChromeではAndroidの実機とUSB経由でリモートデバッグができます。デベロッパーツールの縦三点メニューからMore tools＞Remote devicesを選択します。Discover USB devicesにチェックが入っていることを確認したら、指示に従ってスマホないしタブレット実機を接続します。
Chromeではポートフォワーディング（特定ポート宛パケットの転送）が設定できるので、デバイスでローカルサーバー上のWebアドレスを開けます。Chromeのプレビュー欄は実機画面と同期して表示され、実機からでもChromeからでも操作できます。
オフラインモードでプログレッシブWebアプリ（PWA）のテストができるApplicationタブまで含めて、デベロッパーツールのすべての機能が使えます。注意することは、実際のWebアプリではHTTPSが必要ですが、ChromeではHTTP接続でローカルホストのPWAが実行できることです。
以上、PC 版 Chrome をモバイル表示用シミュレーターとして使う方法のご紹介でした。
コメントを残す