Microsoft Edgeでスマートフォンサイトをチェックする：Tech TIPS

Webサイトのスマートフォン表示の確認は結構面倒な作業だ。しかしMicrosoft Edgeの「開発者ツール」でエミュレートすれば、スマートフォンサイトでの見栄えや挙動を簡単に確認できる。

[小林章彦，デジタルアドバンテージ]

連載目次

対象：Microsoft Edge

　スマートフォンが主流になってきたことで、Webサイトの閲覧もPC経由よりも、スマートフォン経由の方が多いというところも増えてきているようだ。そのため、多くのWebサイトが、画面の狭いスマートフォンに対応した専用のビュー（表示）を備えている。

　PC用とスマートフォン用のビューを別々に用意すると、どうしてもWebサイトの開発や修正において、両方での確認作業が必要になる。ただ、タブレットやスマートフォンにはさまざまな機種や解像度があることから、見栄えを実機でテストするのは面倒な作業となる。

　こんなときは、Google Chromeの「デベロッパーツール（開発者ツール）」を利用し、PC上でスマートフォンサイトを確認するのが一般的になっている（Google Chrome完全ガイド「Google Chromeブラウザでスマートフォンサイトをチェックする」参照のこと）。

　しかし普段からGoogle Chromeを利用していない場合は、Google Chromeをインストールする必要がある。そこで、Windows 10の標準Webブラウザである「Microsoft Edge（以下、Edge）」の「開発者ツール」を使って、スマートフォン用のビューを確認する方法を紹介しよう。

開発者ツールでスマートフォンのWebブラウザをエミュレートする

　Edgeでスマートフォンでの表示を確認するには、対象のWebページを表示してから、右上の［…（メニュー）］ボタンをクリックし、［開発者ツール］をクリックする（Windows 10 October 2018 Updateでは、［その他のツール］−［開発者ツール］）。または、単に［F12］キーを押してもよい。

　［開発者ツール］ペインが現れたら、［ブラウザ］ペインが見やすいように、その位置を変えるとよい。開発者ツール内の右上にあるツールバーの［固定解除］アイコンや［下に固定］アイコンをクリックすると、開発者ツールが別ウィンドウになったり、下側に固定されたりする。

Edgeで開発者ツールを起動する（1）
［…（メニュー）］ボタンをクリックし、［開発者ツール］をクリックする。

▼

Edgeで開発者ツールを起動する（2）
左側に［開発者ツール］ペインが表示される。開発者ツールのツールバーにある［下に固定］アイコンをクリックすると、［開発者ツール］ペインが下側に移動する。別ウィンドウにすることも可能だ。

▼

Edgeで開発者ツールを起動する（3）
［開発者ツール］ペインを下側に固定すると、このように上側に［ブラウザ］ペイン、下側に［開発者ツール］ペインが表示される。

　続いて表示モードをスマートフォンに変える。それには［その他のツール］−［エミュレーション］を選択し、「デバイス」のプルダウンリストでエミュレートしたいデバイスを選択する。例えば、ここで「iPhone 7 Plus」を選択すると、ディスプレイの解像度やユーザーエージェントの文字列などが、iPhone 7 Plusのものに設定される。なお、Windows 10 April 2018 UpdateのEdgeでプリセットされているデバイスは下表の通り。

デバイス名
Microsoft Lummia 650
Microsoft Lummia 950
Microsoft Lummia 950XL
Surface Book
Surface Pro 4
iPhone 7
iPhone 7 Plus
iPad Mini
iPad
Nexus 5
Nexus 5X
Nexus 6P
Windows 10 April 2018 UpdateのEdgeでプリセットされているデバイス

表示モードをスマートフォンに変更する（1）
開発者ツールのツールバーにある［その他のツール］−［エミュレーション］を選択する。

▼

表示モードをスマートフォンに変更する（2）
「デバイス」でエミュレーションしたデバイスを選択すると、［ブラウザ］ペインがそのデバイスによる表示モードに変わる。ここでは、「iPhone 7 Plus」を選択してみた。

「カスタム」で任意のスマートフォンをエミュレートする

　Google Chromeのデベロッパーツールと比較すると、Edgeがエミュレートできるデバイスの種類が少ないが、「カスタム」を選択して自分で設定すれば、任意のスマートフォンのエミュレーションも可能だ。例えば、Xperia XZ2ならば、以下の値を「カスタム」で設定すればよい。

デバイス	カスタム
解像度	2160×1080
ブラウザープロファイル	Windows Phone
ユーザーエージェント文字列	カスタム
カスタム文字列	下表参照のこと
Xperia XZ2のカスタム設定

Webブラウザ	ユーザーエージェント
Google Chrome	Mozilla/5.0 (Linux; Android 8.0.0; SOV37 Build/51.1.C.0.374) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.137 Mobile Safari/537.36
WebView	Mozilla/5.0 (Linux; Android 8.0.0; SOV37 Build/51.1.C.0.374; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/64.0.3282.137 Mobile Safari/537.36
Xperia XZ2のユーザーエージェント

Xperia XZ2をエミュレートした
デバイスで「カスタム」を選択し、上記の設定を入力して、Xperia XZ2をエミュレートしてみた。

位置情報もシミュレーション可能

　地図サイトなどの動作を確認するような場合、位置情報（GPS）も必要になるだろう。Edgeの開発者ツールでは、「位置情報」の「GPSのシミュレーション」を「有効」にすれば、経度と緯度を指定できる。例えば、新宿駅ならば緯度「35.690921」、経度「139.70025799999996」に設定すればよい。

位置情報もエミュレート可能
GPSのシミュレートで「有効」を選択し、新宿駅の緯度、経度を入力した。Webページを読み込み直すと、［ブラウザ］ペインの地図アプリが新宿駅中心に変わる。

　これでブラウザペインの内容がスマートフォン用に切り替わる。表示デバイスやモードを切り替えたときには、必ずWebページをロードし直すこと。

「Tech TIPS」