レスポンシブの確認がこれで快適に！複数のスクリーンサイズで同時に確認できる無料ツール -Responsively App
Post on:2020年6月24日
sponsors
レスポンシブの確認ツールやサービスをいろいろ紹介してきましたが、ついに本命とも言える無料ツールの登場です！
Windows, macOS, Linux対応で、しかもオープンソース、快適にレスポンシブの確認ができるResponsively Appを紹介します。5つのデバイスを同時にすれば、制作時間は5倍速くなります。
無料とは思えないほど高性能で、すべてのWeb制作者にお勧めです！
Responsively App
Responsively App -GitHub
Responsively Appの特徴
Responsively Appは、レスポンシブのWeb制作に役立つElectronで構築されたブラウザです。
- ユーザーインタラクションは、すべてのデバイス間でミラーリングされます。
- すべてのニーズに合わせてカスタマイズ可能なプレビューのレイアウト。
- プレビュー中のすべてのデバイス用の要素インスペクタ。
- 30種類以上のデバイスに加えて、カスタムサイズも可能。
- すべてのデバイスは、1クリックでスクリーンショット可能。
- ホットリロードのサポート。
- GNU Affero General Public License v3.0で、商用プロジェクトでも無料で利用できます。
Responsively Appの実際の動作をご覧ください。
すべてのデバイスでインタラクションがミラーリングされます。
ミラーリング
すべてのデバイスで、インスペクタを使用できます。
インスペクタ
スクリーンショットもすべてのデバイスで可能です。
スクリーンショット
Responsively Appのダウンロード
ダウンロードは、下記ページから。
Windows用の.exe、macOS用の.dmgが揃っています。.zipファイルをダウンロードすると、解凍してすぐに使用できます。
Responsively Appの使い方
Responsively Appの使い方は、簡単です。
アドレスバーに表示したいページを入力します。
当ブログをResponsively Appで表示
レイアウトは自由に変更できます。
プレビューのカスタマイズ
レイアウト方法やデバイスのフィルター機能も備えています。
プレビューのカスタマイズ
デバイスの追加も簡単、「Active Devices」にドロップするだけです。
デバイスの追加
iPad Proを追加してみました。
デバイスの追加
右上にあるツールは左から、ライト・ダークモードの切り替え、スクロールダウン、スクロールアップ、スクリーンショット、デバイスの向き変更、インスペクタ、ズームです。
右上のツールが便利
CSSのprefers-color-schemeで実装されたライトモード・ダークモードの表示にも対応しています。
参考: CSSでダークモード対応、メディアクエリ「prefers-color-scheme」の使用方法と注意点
ライト・ダークモードの切り替え
表示サイト: Tom Brow
sponsors
