ITエンジニア/デザイナ向けにオープンソースを毎日紹介

様々なタブレット、スマートフォンでのデザイン確認に便利ですよ!

スマートフォン、タブレット全盛の時代になり、各デバイスでの見え方をテストするのも大変になっています。主立ったデバイスだけで済ませてしまえれば良いですが、Androidの各バージョン、解像度ごとのテストが求められる場合も少なくありません。

エミュレータで済ませてしまえれば幸せですが、数多くのデバイスで適切な表示ができるのかどうかテストを求められるのであればRemote Previewを使ってみると幸せになりそうです。

デスクトップでも使う場合はGoogle Chrome機能拡張をインストールします。

Google Chrome拡張のインストール
Google Chrome拡張のインストール

ついで機能拡張の設定画面でコントローラのURLを指定します。

設定画面
設定画面

そしてWeb版のコントローラを表示します。
そしてWeb版のコントローラを表示します。

iPhoneからアクセスすると自動的にサイトを読み込みますが、URLはそのままです。
iPhoneからアクセスすると自動的にサイトを読み込みますが、URLはそのままです。

下にデモ動画を置きますので、ぜひご覧ください。多数のデバイスでの表示が一気に確認できます。

Remote Previewは各デバイスが実際に指定されたWebサイトにアクセスする代わりにデータを取得して送信する仕組みのようです。各デバイスでの表示確認用プロキシと言えます。

データはそのまま流しているはずなのですが、アクセスがPHPから行われるため、サーバサイドでテンプレートを切り替える仕組みの場合うまく表示されないケースがあります。また、MOONGIFTのようにレスポンシブであっても表示が異なる場合もあるようです。

とは言え通常のサイトであれば問題なく使えるでしょう。多数のデバイスで表示を確認するのは面倒ですが、Remote Previewの仕組みを使えばコーディングしてデザインの確認と言うフローがとても簡単になりそうですね。

Remote PreviewはPHP、JavaScript製のオープンソース・ソフトウェア(MIT License)です。

Remote Preview

Chrome ウェブストア - Remote Preview

viljamis/Remote-Preview

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2