こんにちは、OneStepです。
みなさんもご存知の通り、ブラウザ「GoogleChrome」にメジャーバージョンアップが入りました。
最新版はVer.32となります。
GoogleChromeはデベロッパーツールという開発者向けのツールが使いやすいと定評があり、私たちWebに関わる人もよく使用しているブラウザです。
今回、そのデベロッパーツールの中で大きな仕様変更がありました。
その変更内容はスマートフォンサイトの確認方法です。
GoogleChromeでは兼ねてからスマートフォンで見た場合の表示をできる方法がありましたが、今回の仕様変更で細かいところまで入り込まないと分からないようになってしまいました。
Webサイトを制作する人でも大きな話題となっているので、一度ここでVer.32で確認する方法をお伝えしたいと思います。
GoogleChrome Ver.32でスマホサイトの表示を確認する方法
順を追って説明していきます。
1.GoogleChromeを表示している状態で「Ctrl+Shift+I」を押します。
これでデベロッパーツールが立ち上がります。
この画面で、右上にある歯車マークをクリックします。
2.するとデベロッパーツールの設定の画面が出てきます。
その画面の左メニュー「Overrides」をクリックするとひとつだけチェックボックスが出てくるので、これにチェックを入れます。
3.設定画面はこれで終了で、右上の「×」ボタンで閉じます。
その後、最初の画面に戻るので、今度は右上の「>三」といった感じの形をしたボタンをクリックします。
4.すると下から新しいメニューのようなものがせり出してきます。
このメニューの「Emulation」タブをクリックします。
5.今度は左メニューにある内容を順番に設定していきます。
・まずはデバイス。
・スクリーン。
重要なのはDevice Pixel ratioとResolutionです。選択したデバイスに対応する正しい値を入れてください。
※Device Pixel ratioについては今後の支援で記載していきます。
・ユーザーエージェント
・センサー関係（必要な場合に応じて）
以上でGoogleGhrome Ver.32でのスマートフォン向けエミュレーションの方法は終わりです。
ちなみにエミュレーションできると、
←このようなマウスカーソルになります。
今後のアップデートの方向性を調べたいときは
ちなみに今後のGoogleChromeのアップデートの方向性を探りたい場合、GoogleChromeには開発版である「GoogleChrome Canary」があります。
GoogleChrome Canaryのインストールはこちらから
こちらをインストールしてみると開発版のGoogleChromeを実際に触ることができ、安定板のGoogleChromeではまだ公開されていないような機能のものを使うことができるようになります。
※ただしあくまでも開発版であるため、翌日突如起動しなくなる、ということもありえます。またバグなど潜在的な問題も潜んでいる可能性もゼロではないため、重要な作業は行わないように注意しましょう。