Google Chromeの新しい"Device Mode"

近くリリースされるChromeでGoogleは，DevToolsをアップグレードして，効率的なデバイスディスプレイのエミュレーション，メディアクエリインスペクション，ネットワークエミュレーションツールなどが利用可能な，新しい"Device Mode"を追加した。これらのツールを使うことによって，開発するWebページが利用現場で直面する，さまざまなデバイス状況のエミュレーションが可能になる。

既存のバージョンのChromeでも，エミュレーションメニューをオープンしてデバイスを選択すれば，iPhone5やGoogle Nexus 5といったデバイスのエミュレーションは可能である。しかしながら，既存のツールは機能的な制限がある上に，見付けにくい場所に配置されている。新しいDevice Modeでは，すべての環境でWebページが正常に表示されることを確認できるような，改良されたエミュレーションツールのセットが用意されている。現在はChrome Canaryチャネルから，メインのChrome ブラウザに導入予定の機能を備えた，早期プレビュー版が入手可能だ。

Device Modeを有効にするアイコンが，Inspectionアイコンの横に新たに設けられた。目に付きやすい位置にあるのは，今日のWeb開発におけるデバイスエミュレーションの重要性を反映したものだ。

Device Modeを有効にすれば，DevToolsウィンドウに戻らなくても，FirefoxのResponsive Design Viewのように，ブラウザウィンドウ内からデバイスプリセットを切り替えられるようになる。スクリーンのサイズだけでなく画素密度を指定することもできるので，いわゆる"Retina"ディスプレイのエミュレーションを，非Retinaディスプレイ上で行うことも可能だ。プリセットリストには41のデバイスに加えて，ノートブック専用のプリセットも含まれている。

デバイス画面のエミュレーションは問題の一部を解決するに過ぎない。Googleはさらなる解決策を用意している。ユーザは常に高速ネットワーク上にいるとは限らない。そこでDevice Modeには新たに，高速からオフラインまで，すべてのネットワーク速度をエミュレートする機能が導入された。このモードでは，Chromeがネットワークの速度をスローダウンして，コンテキストのレンダリングなどユーザエクスペリエンスの状態を確認することができる。

デバイスエミュレーションツールと合わせてGoogleは，メディアクエリインスペクタを導入した。これはWebページの開発者が，CSS内にさまざまな方法で定義したブレークポイントでページの見栄えを確認したり，それをスイッチしたりすることが簡単にできるツールだ。ブレークポイントを右クリックすれば，メディアクエリで定義したCSSコードの行に移動することができる。

(画像をクリックして拡大)

開発者が求めるのは，あくまでも"完結した機能"である。つまり，デバイスディスプレイのプロファイルの模倣ではなく，エミュレート対象のデバイスで実際に使用しているレンダリングエンジンを使うことが，彼らの希望なのだ。

ブラウザ市場の他の部分に目を向けると，FirefoxやMicrosoftのInternet Explorerなどもレゾリューションスイッチを備えて，任意のスクリーンサイズに対応している。今回導入される新しいDevToolsは，今年の夏のGoogle I/Oで紹介されたものだ。開発者向けのブログには，これらのツールの一般的背景が説明されている。