レスポンシブ表示を確認する場面が増えたので個人的に主要ブラウザと考えている、Safari・GoogleChrome・Firefoxで確認する方法を紹介します。

デフォルト機能で確認はできますが、拡張機能を使用した方が使い勝手が良い時もあったので、併せて拡張機能の紹介もしていきます。

Safari

Safariは比較的手早く表示確認ができます。

Safari起動後、上部メニューバーの開発➡︎レスポンシブ・デザイン・モードにするを選択します。
もしくは⌃ control+⌘ command+Rでも大丈夫です。

すると下記のようにiPhoneやiPadなどの表示が確認できます。

結構直感的に確認できるので簡単に操作方法を説明します。

注釈でも説明していますが、アイコンを選択すると、それぞれのデバイスでの表示を確認できます。
アイコンを再度クリックするとデバイスの向きを変更できます。

右上のリストメニューを選択するとブラウザの変更が行えます。
前まではIEなども選択できましたが、現在はMicrosoftEdgeになっています。Windows用ブラウザも選べるところに優しさを感じます。

確認してみましたが、Safariにはレスポンシブ表示用の機能拡張も用意されていないようで、デフォルトの機能で確認するのみのようです。

比較的操作方法が簡単なのがSafariの良いところではありますが、確認できるデバイスがApple製品のみなのが少しデメリットですね。

GoogleChrome

GoogleChromeの場合は操作ステップが多いです。

GoogleChrome起動後、下記のいずれかの方法でデベロッパーツールを起動します。

デベロッパーツール起動

下記のようにデベロッパーツールが表示されます。
左側アイコン を選択すると、レスポンシブモードに切り替わります。
また、そのままだと視認性が悪いので右側の拡大しているメニューボタン「⋮」を選択し、DockSideの項目よりツールの表示場所を変更します。

レスポンシブモードはツールを左右どちらかに表示させると視認性が良いと思います。

下記にGoogleChromeレスポンシブモードで使用できる機能を簡単に説明します。

検証するデバイスを選択

上部メニュー➡︎ドロップダウンリストメニューより検証するデバイスを選択できます。

特定のデバイスを指定したり、「Responsive」を選ぶことでサイスを変更することができます。

検証するデバイスを追加

上部メニュー➡︎ドロップダウンリストメニュー➡︎Edit...を選択するとデフォルトで表示されている主要デバイス以外のデバイスを追加できます。

追加できるデバイスの種類は豊富です。

指定サイズデバイスを追加

検証デバイス追加画面の「Add custom device...」を選択すると、自分で指定したサイズのデバイスを追加できます。

デバイスサイズを変更（検証デバイスResponsiveを選択している時のみ）

検証デバイス「Responsive」を選択しているときは、上部メニューよりデバイスサイズを素早く変更できます。

数字を指定するだけでなく、上部バーより規定サイズを選んで素早くサイズを変更できるのも便利です。

デバイスの向きを変更

上部メニューのアイコン をクリックすると、表示しているデバイスの向きを変更できます。

デバイスタイプを変更（検証デバイスResponsiveを選択している時のみ）

検証デバイス「Responsive」を選択しているときに、上部メニューボタン「⋮」を選択し「Add device type」を選択すると、上部メニューにデバイスタイプ変更メニューが表示され、スクリーンタッチ式かそうではないデバイスなどの変更ができます。

メディアクエリを表示

上部メニューボタン「⋮」を選択し「Show media queries」を選択するとCSSで指定しているメディアクエリを色分けして表示できます。

それぞれの色の意味は下記のようになっています。

メディアクエリを指定しているCSS内コードを表示

メディアクエリバーを右クリック➡︎Reveal in Source Codeより、該当するメディアクエリを指定しているCSS内のコードを表示することができます。

コードを探す手間が省けるのでとても便利な機能です。

該当するメディアクエリのサイズへ検証デバイスサイズを変更（検証デバイスResponsiveを選択している時のみ）

メディアクエリバーをクリックすると、指定されているメディアクエリのサイズへ検証デバイスのサイズを変更できます。

定規を表示

上部メニューボタン「⋮」を選択し「Show rulers」を選択すると定規が表示されます。

正確なサイズが確認できるので結構便利です。

デバイスのフレームを表示

上部メニューボタン「⋮」を選択し「Show device frame」を選択すると、デバイスのフレームが表示されます。

動作検証の際にイメージが湧きやすいですね。

スクリーンショットを撮影

上部メニューボタン「⋮」を選択し「Capture screenshot」を選択とスクリーンショットを撮影できます。

GoogleChromeについては以上です。GoogleChromeの機能の豊富さに驚きます。操作ステップは多いですが無料とは思えないほどの機能かと思います。

今回説明した内容よりもっと深掘りして検証する機能が用意されていますので、詳細な情報はGoogleサイトを確認してみてください。

参照サイトTools for Web Developers

素早く表示できる拡張機能「mobile browser emulator」

既に説明した通り、GoogleChromeにはデフォルトでレスポンシブ動作を検証する機能は、十分揃っていますが表示させるまでのステップが少し多く、唯一の難点と言えるのかなと考えています。

「mobile browser emulator」だと少ないクリックでレスポンシブ表示を確認できるので素早く確認したいときには便利です。

拡張機能mobile browser emulator

操作はとても簡単でインストールしたら、上部メニューより追加されたボタンを選択し、4種類のサイズから選ぶだけです。

拡張機能が更新されていなく、対応しているデバイスも少ないのでしっかりと検証するには不足感はありますが、手早く表示させることはできるので紹介しました。

Firefox

GoogleChrome程ではないですが、Firefoxでもレスポンシブ表示を確認する機能が豊富に用意されています。

Firefoxの場合は下記の方法でレスポンシブモードに変更できます。

Firefoxでは開発ツールを起動しなくても直接レスポンシブモードに変更できます。ショートカットを使用すればより素早くレスポンシブ表示を確認できます。

開発ツール右上のメニューボタン「⋯」を選択すると表示位置を変更できます。
GoogleChromeと同様に開発ツールは左右どちらかに表示させた方が使いやすいと思います。

GoogleChromeと重複する箇所はありますが、下記にFirefoxのレスポンシブデザインモードで使用できる機能を簡単に説明します。

検証するデバイスを選択

上部メニュー➡︎ドロップダウンリストより検証するデバイスを選択できます。

検証するデバイスを追加

上部メニュー➡︎ドロップダウンリスト➡︎リストを編集...を選択すると、検証するデバイスを追加できます。

主要のデバイスは網羅されています。

指定サイズデバイスを追加

検証デバイス追加画面の「カスタム端末を追加...」を選択すると、指定サイズのデバイスを追加できます。

デバイスサイズを変更

上部メニュー➡︎テキストボックスへ数字を入力すると検証しているデバイスサイズを素早く変更できます。

デバイスの向きを変更

上部メニューのアイコンをクリックすると表示しているデバイスの向きを変更できます。

タッチイベント・マウスイベントの切り替え

上部メニューのアイコンをクリックするとタッチイベント⇆マウスイベントの切り替えができます。

スクリーンショットを撮影

上部メニューのアイコンをクリックすると、スクリーンショットが撮影できます。

Firefoxについては以上となります。GoogleChromeほど多機能ではないですが、操作性は優れているように感じます。

より詳細な情報を知りたい場合は下記公式サイトをご確認ください。

参照サイトレスポンシブデザインモード

色々なデバイスの表示確認ができるブラウザ「BLISK」

番外編としてWeb開発に特化したブラウザ「BLISK」では、レスポンシブ表示の検証がとても簡単に行えるようになっています。

このブラウザは有料です。無料でも使用することはできますが、一回30分までと制限があります。30分を過ぎたら12時間後に再度使用可能になります。

ダウンロードサイトBLISK

詳しい説明は割愛しますが、Web開発に特化しているだけあって、検証などといった作業がとても捗るブラウザです。

対応しているデバイスは豊富にあり、左側から1クリックで変更できます。（フレーム付き）また、レスポンシブ画面とPC画面を同時に検証できるといったことも可能です。

値段は日本円で約月1000円ほど（記事公開時）です。年間契約すると少し安くなります。
ブラウザへ支払うには、少々値が張るのでWeb開発をガシガシ行わない限りは、手は出しづらいかなと思います。

レスポンシブ表示を確認できるサイト

最後にブラウザではなく、レスポンシブ表示を確認できるサイトを簡単に紹介します。

ブラウザのように細かな確認はできませんが、ブックマークなどに登録しておけばかなり手軽にレスポンシブ表示確認ができますね。

レスポンシブ表示確認サイトResponsinator

レスポンシブ表示確認サイトDemonstrating Responsive Design

レスポンシブ表示確認サイトレスポンシブWebデザインチェックツール

以上となります。
それぞれのブラウザに特徴がありますが、機能的に言うとGoogleChromeが圧倒しているように感じます。それぞれの用途でブラウザを使い分けたり、サイトを利用しても良いかもしれませんね。

Webページを開発していたり、ブラウザごとに使用用途が違う場合は重宝します。

Safari

Safariの場合はデフォルトの機能で行えるのでとても簡単です。
下記の手順でSafariの設定を変更します。

Mac・Windowsの場所は下図になります。

メニュー内の「開発」➡︎「ページをこのアプリケーションで開く」へ進み、表示させたいブラウザを選択します。

Mac・Windowsの場所は下図になります。

デフォルト機能で簡単に他のブラウザへ移動できるので手軽に試せます。

GoogleChrome・Firefox（拡張機能Open With使用）

GoogleChrome・Firefoxの場合は拡張機能をインストールする必要があります。
両方ともに導入方法は同じなので画面はGoogleChromeを使用していきますのでよろしくお願いします。

下記よりそれぞれの拡張機能をインストールします。

GoogleChrome拡張機能Open With

Firefox拡張機能Open With

Open Withの設定を行う

OpenWithはインストール後スクリプトを実行して設定を行う必要があります。
スクリプトと言っても難しい作業ではないので順を追って説明します。

インストールしたOpenWithを起動し、「Open Withオプション...」を開きます。

下図の画面が表示され、手順も記載されています。

Macの手順は下記のようになります。

Windowsの手順は下記のようになります。

それではMac・Windowsそれぞれの設定方法をお伝えします。

Mac

Macの設定方法

MacにはPythonがデフォルトで入っているのでOpenWithオプション画面のリンクよりファイルをダウンロードしたら、そのままターミナルを起動して実行権限を付与します。
ターミナルがよくわからない場合は下記記事で基本情報をまとめていますので御一読ください。

関連記事Macターミナルの覚えておきたい基本情報・ショートカット・コマンドまとめ

続きを読む...

忘れやすいのでターミナルの基本情報をまとめたいと思います。 普通にMacを使用していたらあまり使う機会はないかもしれませんが、ターミナルでのみ出来る機能もありますので覚えておくとよいかと思います。環境はbashになります。 ターミナルとは CUI(Character User Interface)を...

権限付与コマンドについては下記記事で詳細を説明していますので興味があれば御覧ください。

関連記事Macターミナルコマンド「chmod」の使い方

続きを読む...

ここではターミナルコマンドchmod(change mode)の使い方を説明します。 ターミナルの基本的な情報を確認したい場合は下のページを御覧ください。 chmodはパーミッションの設定を変更するコマンドです。 パーミッションとは「ファイルやディレクトリに対してユーザーやグループが持つ権限」もしく...

下記コマンドを実行します。

OpenWithファイルへ実行権限付与

chmod u+x open_with_mac.py

実行権限を付与したら、下記コマンドでOpenWithファイルを実行します。

OpenWithファイルを実行

./open_with_mac.py install

　上記のコマンドはダウンロードしたファイルと同じ場所にいないと効かないので御注意ください。

実行したら、OpenWithオプション画面の「インストールのテスト」を選択して正常に起動しているか確認を行います。

うまくいかない場合はファイルを移動していないか、正常にファイルが実行できているかを確認して、再度上記手順をやり直してみましょう。

正常起動を確認できたら、「ブラウザを探す」を選択すると現在インストールされているブラウザを検知して自動で登録されます。

GoogleChrome、MicrosoftEdge、Firefox、Safari、Opera等は「ブラウザを探す」で検知して登録してくれます。(使用しているブラウザは「隠す」にしています。)
後はOpenWithのロゴをクリックすればとても簡単に他のブラウザで現在ページを開くことが可能です。

下記に「ブラウザを探す」で自動登録されないブラウザを手動で登録する方法をお伝えします。

ブラウザを手動で登録（Mac）

自動登録されないブラウザは対応していないわけではなく、手動で登録すれば同じく簡単に使用することができます。
下記に方法をお伝えします。

OpenWithオプション画面の「ブラウザを追加」を選択します。

すると「ブラウザを追加」画面が起動するので、登録したいブラウザ名、アイコンとブラウザアプリがあるパスを入力します。

因みにアプリを右クリック➡︎⌥ optionを押すと簡単にパスをコピーできます。

関連記事Macでファイルフルパスを簡単にコピーする方法

続きを読む...

El Capitanからファイルのフルパスをコピーするのがさらに簡単にできるようになりました。 今まではタイトルバーのアイコンをドラッグ＆ドロップすることでコピーが可能でしたが、El Capitanからは右クリックから簡単にフルパスがコピーできます。 Finderでフルパスコピー 方法は至極簡単です...

一度登録してしまえば簡単に使用できるようになります。

py open_with_windows.py install

以上になります。作業内容によってはとても便利な機能だと思います。