レスポンシブの確認ツールなら「Responsively App」が便利！しかも無料！

こんにちは！社員Kです。

最近はコロナ自粛期間中に増えてしまった体重をどうやって落とそうかと思っているところです。
すぐに効くダイエット方法を知っている方がいましたら教えて下さい！

さて今回は、ホームページ制作の現場で必須となるレスポンシブ表示の確認ツール「Responsively App」のご紹介です。

利用方法（もちろん無料）

Responsively Appを利用するには、下記のダウンロードページを開き、
Windowsの場合は、「ResponsivelyApp-Setup-0.4.0.exe」
Macの場合は、「ResponsivelyApp-0.4.0.dmg」
のダウンロードリンクをクリックします。

https://github.com/manojVivek/responsively-app/releases

あとは、ダウンロードした実行ファイルを開くだけ。

Responsively Appで出来ること

それでは、Responsively Appで出来ることを紹介していきたいと思います。

画面は英語表記ですが、分かりやすいアイコンでツールボタンが設置されていますので、操作はとても簡単です。

PC/タブレット/スマートフォンのサイズでの表示を同時に確認

普通のブラウザを使うときと同じようにアドレスバーにURLを入力してEnterキーを押します。
すると下記のように様々なデバイスサイズでの表示を確認することができます。

ひとつのデバイス上で、スクロールすると他のデバイスも同期してスクロールされ、スムーズに確認を行うことができます。

デベロッパーツールでの検証・編集（Chromeベース）

Chromeブラウザがベースになっているため、同じようにデベロッパーツールを使用することができます。

一括でスクリーンショットを保存

画面の右上にあるツールボタンからカメラのアイコンをクリックすると、すべてのデバイスサイズのスクリーンショットを一括で保存することができます。

一般的なデバイスサイズ以外にも任意のサイズを追加可能

デフォルトでは下記のデバイスが表示された状態になっています。

• iPhone 6/7/8 Plus (414 * 736px)
• iPhone X (375 * 812px)
• iPad (768 * 1024px)
• LapTop (1280 * 950px)

もちろん、上記以外のサイズを追加することも可能です。

手順は、画面の右側にあるデバイスのアイコンをクリックして「CUSTOMIZE」をクリック。
あらかじめ様々なデバイスが登録されているので追加したいデバイスをドラッグ＆ドロップするだけの簡単な操作で追加が可能です。

しかし、最終的な確認は実機で

上記の簡単な操作で、レスポンシブ表示の確認ができる「Responsively App」ですが、実務の上では最終的な確認は実機で行う必要があります。

AndroidやiOSなどそれぞれの独自の仕様で実際には動作が異なる場合があるためです。

あくまで開発中の効率化を目的に使用する必要があります。

いかがでしたでしょうか？
レスポンシブ確認の作業が捗るとても便利なツール「Responsively App」の紹介でした。

みなさんのお役に立ちましたら幸いです。