このページの本文へ

PROGRAMMING Web制作が3倍速くなるChromeデベロッパーツールの使い方 ― 第1回

スマホ、レスポンシブの表示チェックが捗る時短テク

2015年04月24日 11時00分更新

手塚 亮/nanapi

  • この記事をはてなブックマークに追加
本文印刷

「スマホサイトのチェックが面倒」「JavaScriptのデバッグが大変」そんなときに便利なのが、Google Chromeの「デベロッパーツール」です。Chromeデベロッパーツールを使いこなすと、Web制作の面倒な作業を効率化できます。
この連載では、nanapiのフロントエンドエンジニアである手塚 亮さんが、コーダーやデザイナー、ディレクターの仕事の「時短」に役立つChromeデベロッパーツールの活用法を紹介します(編集部)。

※本記事は執筆時点で最新のChrome 40を使用しています。

レスポンシブの表示確認は大変

レスポンシブWebデザインのWebサイトをコーディングしているときに面倒なのが、「ウィンドウサイズごとの表示結果の確認」ですね。端末によって異なる画面サイズをいちいち調べて、ウィンドウサイズを合わせて確認していてはかなり手間がかかります。

そんなとき、Chromeデベロッパーツールの「Device Mode」が使えます。

Device Modeの起動方法

Google Chromeを起動してChromeデベロッパーツールを開きます。Chromeデベロッパーツールは、MacではCmd + Option + Iキー、WindowsではCtrl + Shift + Iキーを押すか、ページ上で右クリックして「要素の検証」で起動できます。

枠で囲われている部分がChromeデベロッパーツールになります

Device Modeを有効にします。上記画面のスマートフォンのボタンを押すか、Macなら Cmd + Shift + Mキー、WindowsではCtrl + Shift + Mキーを押すと、Device Modeが有効になります。

ピンクの枠で囲まれている部分がDevice Modeのメイン画面

このままだと画面が上下に分割されていて作業しづらいので、「Dock to main window」ボタン(上記画面の青枠部分)を押して、「Developer Tools Bar」を右側に配置しましょう。

Device Modeを使ってデバイスごとの表示結果を確認しましょう。以下のサンプルページでは、メディアクエリーで400px以下では背景が白、767px以下では背景が水色、768px以上では背景が赤色になるように設定しています。

サンプルページ

Device Modeの画面では、左上の「Device」から端末の種類を選べます。Deviceから「Apple iPhone 6 Plus」を選びます。

Device Modeの枠がiPhone 6Plusのサイズになり、幅が414pxになります。

続いて、「Device」で「Apple iPad 3 / 4」を選択してみましょう。

Device Modeの枠がiPad 3 / 4のサイズになり、幅が1024pxに設定されたため、背景が赤色になりました。上の画面の青色の枠内を見ると、無効になったメディアクエリーに打ち消し線がかかり、どのメディアクエリーが有効なのか確認できます。

Device Modeには一般的なデバイスは初期設定で登録されているので、レスポンシブWebデザインの確認が簡単にできます。また、より細かく確認したい場合は、ビューポートのサイズを直接入力したり、表示領域をドラッグしたりしても変更できます。

ユーザーエージェントの振り分けも簡単にデバッグしたい

画面サイズではなく、ユーザーエージェント(UserAgent)情報を利用してJavaScriptでデバイスごとに処理を分ける場合も、Device Modeで簡単にデバッグできます。

Device Modeを使ってJavaScriptを検証

先ほどは画面サイズ(ビューポート)だけに注目しましたが、実はDevice Modeを有効にして「Device」から端末名を選択すると、ブラウザーがWebサーバーに送信するユーザーエージェント情報も変更されています。

ページを更新して、ユーザーエージェントに応じたJavaScriptが実行されるか確認してみましょう。例として、AndroidもしくはiOSの場合にテキストが表示されるJavaScriptで検証します。

ユーザーエージェントに応じてJavaScriptが実行されました。このようにDevice Modeを使えば、簡易的なエミュレーターとして、デバイス別の処理をデバッグできます。

Device Modeでは、ウィンドウサイズとユーザーエージェントをエミュレーションするだけで、実際の機種での表示(レンダリング)をエミュレーションするものではありません。最終テストではなく、開発中の簡易的なチェックに利用しましょう。

紹介した機能まとめ

今回紹介した機能をまとめます。

Device Mode

デバイスのウィンドウサイズやユーザーエージェントを簡単にエミュレーションできる機能です。先ほどデバイスを選択したメニューの横のNetworkメニューを変更すると回線速度のエミュレーションなどもできます。Device Mode有効時にEscキーを押すと追加メニューが出てくるので、Emulationパネルを選ぶとデバイスの傾き・加速度などのエミュレーションも可能です。

デフォルトでさまざまなデバイスのウィンドウサイズやユーザーエージェント情報が登録されているので、使う前の準備が不要なのも特徴です。

また、Firefoxでも似たようなResponsive Design Viewという機能もありますが、ウィンドウサイズのエミュレーションのみとなっています。

次回は、細かい修正での手戻りを減らして作業効率を格段に向上させる機能を紹介します。

著者:手塚 亮

著者写真

2009年4月 ITベンチャーに入社。Webデザインをメインにフロントエンド・バックエンドの開発を経験。後にベトナムに駐在し、海外エンジニアの技術力とコストの安さを知り、自身のキャリアに危機感を覚え、2013年10月よりnanapiに転職。nanapiの開発やIGNITIONの立ち上げに携わる。現在は、Android開発に従事。 プライベートでは「InTHEnet」というチームを組み、Webサービスなどの制作を行う。直近では、「ハミガコ!」というアプリのプロトタイプで、Yahoo!プロトタイプコンテストで準グランプリ・UI賞を受賞をしている。

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング