「エミュレートとメディアクエリ検証」Chrome DevTools Tips集 #1

今回はGoogle Chrome の DevTools でできることについてTipsをまとめたいと思います。数ある Chorome DevTools の中でもエミュレート機能とメディアクエリのブレークポイントを表示する機能について解説していきます。この記事を読むことで、モバイル端末の検証をより楽に行うことができます。

Mobile Simulation

Toggle Device Toolbar（画像のアイコン） をクリックすると、モバイル ビューポートをシミュレーションできる UI を開くことができます。この機能は、多くのエンジニアが知っていると思います。

今回は、少しマニアックな機能紹介として、エミュレート機能とメディアクエリの確認機能を紹介します。

エミュレート機能

エミュレートは Sensors タブから設定することができます。エミュレート（emulate）とは「まねる」という意味でPCのChromeからモバイルのタッチパネルや位置情報の情報を任意で操作することができます。Chrome DevTools では以下の4つの項目を設定することができます。

Sensersタブの表示の方法と合わせて解説していきます。

Sensors タブの表示

Chrome DevTools の Sensors タブは メニュー（三点ドット）> More tools > Sensors から表示できます。

Elements や Console などのメインのタブが並んでいる上部のタブではなく、現在、 Console 、 What's New 、 Issues が並んでいる下部のタブに表示されます。

Location（位置情報）

ブラウザがアプリケーションに提供する位置情報やタイムゾーン、言語をエミュレートします。位置情報をエミュレートすることで、位置情報によるアプリケーションの挙動の確認などを効率的に行うことができます。

ドロップダウン内のプリセットから、予め用意されている位置情報を使用するか、手動で設定するかを選択できます。

また、一番下のLocation unavailable を選択することで、位置情報が取得できなかった状態をエミュレートできます。

プリセットの登録は、manageボタンから設定できます。よく使用する位置情報があれば、登録しておくと良いでしょう。

Orientation（傾き）

ブラウザがアプリケーションに提供するデバイスの傾き（回転）をエミュレートします。

Custom orientationを選択することで、右に表示されている3Dモデルをドラッグすることで、値を入力することができます。

また、ドロップダウン内のプリセットから選択することもできます。

Touch（タッチパネル）

PCブラウザとスマートフォンのブラウザでは、タッチスクリーンの有無によって挙動や、操作感に差が出てきてしまいます。特に、JavaScriptでイベントを操作する場合には、デバイスによって使用できるイベントに差が出てきてしまいます。

そこで、Touchのドロップダウンを Force enabled に設定することで、タッチスクリーンのエミュレートを有効にできます。

タッチスクリーンのエミュレートを有効にすると、マウスカーソルが黒い丸に変わり、画面のスクロールをマウスのドラッグで行えるようになります。また、Shiftキーを押しながら上下にドラッグすることでピンチイン・ピンチアウトといった挙動を擬似的に表現することもできます。

Emulate Idle Detector state

ユーザーのアクティブ状態を検知する Idle Detection API の受け取る状態をエミュレートします。

ドロップダウンから「ユーザーがアクティブかどうか」と「スクリーンがロックされているかどうか」を設定できます。

※Idle Detection API は Google Chrome ではフラグを有効にしないと使用できません。

コチラの記事に詳細が書かれています。

メディアクエリの確認機能

次に紹介したいのが、メディアクエリの確認機能です。コチラを使用することで、画面上部（画像赤枠）にそのWebサイトで設定されているメディアクエリのブレークポイントを表示することができます。

↑動画のように、ブレークポイントをクリックするだけで、ブラウザの幅を変えてくれます。これによって、表示の確認のためにいちいちブラウザサイズをドラッグ&ドロップで変えるという手間をなくすことができます。

ブレークポイントの表示方法【Show media queriesをクリック】

右上のメニューボタンを押して、出てきたメニューから "Show media queries" をクリックすると、ブレークポイントを表示することができます。

ブレークポイントの視認

青・緑・橙と、3つの色のバーがありますが、これらはそれぞれブレークポイントとする値を指定する際のプロパティと指定方法によって色が決定されます。

色と指定の例は、次のようになっています。

色	指定例
青	@media (max-width: 481px)
緑	@media (min-width: 482px) and (max-width: 760px)
橙	@media (min-width: 761px)

また、バーを右クリックすると、そのメディアクエリが書かれたCSSの行に飛ぶことができます。

まとめ

今回は、Chorome DevTools で Mobile Simulation をする機能として、エミュレート機能とメディアクエリの確認機能を紹介しました。

近年のWebは複数端末で見られることが前提となっており、「モバイルファースト」という言葉も浸透しております。今回紹介した機能を使用することで、複数端末の検証がしやすくなると思います。軽視されがちですが、デバックスキルもエンジニアにとって必要なスキルになってきます。日々、情報のアップデートをしていきましょう。

参考文献

JavaScriptのデバッグ | 最終回　DevToolsを使いこなす 2

Chrome DevTools の Sensors タブを使ってみよう

---