連載
» 2018年10月15日 05時00分 公開

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

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

[小林章彦,デジタルアドバンテージ]
「Tech TIPS」のインデックス

連載目次

対象: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で開発者ツールを起動する(1)
[…(メニュー)]ボタンをクリックし、[開発者ツール]をクリックする。
Edgeで開発者ツールを起動する(2) Edgeで開発者ツールを起動する(2)
左側に[開発者ツール]ペインが表示される。開発者ツールのツールバーにある[下に固定]アイコンをクリックすると、[開発者ツール]ペインが下側に移動する。別ウィンドウにすることも可能だ。
Edgeで開発者ツールを起動する(3) 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) 表示モードをスマートフォンに変更する(1)
開発者ツールのツールバーにある[その他のツール]−[エミュレーション]を選択する。
表示モードをスマートフォンに変更する(2) 表示モードをスマートフォンに変更する(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のユーザーエージェント

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

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

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

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

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

「Tech TIPS」のインデックス

Tech TIPS

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。