複数のモバイルWebレイアウトが一度に確認出来るツール「Sizzy」の紹介です。

Webサイトのレイアウトをスマホやタブレットに合わせるレスポンシブデザイン対応も
今や当たり前になりましたが 各種モバイル端末用の確認となると 少し手間が掛かります。

単体の端末として流通量が特に多いiPhoneを例に挙げると、
iPhone (4, 5, 6, [6,7 plus])は それぞれ画面のサイズが変わってきます。

Google Chromeの " Dev-Tools " には
画面のサイズを各種デバイスに切り替える便利な機能が搭載されていますが、
もっと手軽に複数端末のモバイルレイアウトを 一度に確認出来そうなツールが「Sizzy」です。

* Sizzyの公式レポジトリから

っということで、実際に「Sizzy」を導入して使ってみました。
 

Sizzyで出来ること

指定したWebページ(URL)を 複数のモバイル端末のサイズで一度に確認できる

* 執筆時の最新バージョン (* 0.0.2 )で用意されているモバイル端末のサイズ
- ios
iPhone ( 4, 5, 6, 7 Plus ) , iPad Air

- Android
Nexus 6P, Galaxy S5, Nexus7


Sizzyのインストール ~ 使い方

Sizzyは導入から、使い方まで凄く手軽で、
" レポジトリからソースの入手 " -> " 依存関係のインストール " -> " Sizzyの起動 "
この3ステップだけで使うことができます。

# 全てコマンドライン上から * 事前にnode.jsが導入されている必要があります

# 1.githubからSizzyのソースを入手
git clone https://github.com/kitze/sizzy.git

# 2. 依存関係のインストール
cd sizzy # ディレクトリの移動
npm install  # yarnの場合は 'yarn install'

# 3. sizzyの起動 * サーバーが起動します
npm start # yarnの場合は 'yarn start'

# ブラウザから http://localhost:3033/ にアクセスするとsizzyが使えます


* Sizzyを起動させた画面 (フォーム内にレンダリングしたURLを入力)

* このサイトをレンダリングさせてみました ( ズームやフィルター機能も用意されています ) 
* reactコンポーネントでレンダリングされているので、ユーザーエージェントは切り替わりません

* 実際にSizzyを使ってみた動画

 

Sizzyをビルド

上記の説明はローカルマシンで起動させる前提ですが、
SizzyはReactで作られているツールなので、ホスティング用に静的ファイルにビルドが可能です。
( * buildにはyarnがインストールされている必要があります )

# ホスティング用に静的ファイルにビルド
yarn build


ビルドが完了するとsizzyフォルダ内に' build ' フォルダが作成されるので、
nginxなどのwebサーバーで' build 'フォルダをルートに設定すればホスティングが可能です。

# buildフォルダ内の構成
- build
 - static
   asset-manifest.json
   favicon.ico
   index.html

 

Summary

複数のモバイル端末の画面サイズを一度に表示させることが出来るので、
レイアウト確認の時間短縮にもなり 活躍する機会も多いと思われます。

特にWebデザイナーさんに重宝すると思うので、気になった人はゼヒ×2チェックしてみてください!

GitHub : kitze/sizzy

 

この記事のカテゴリ

プログラミング

この記事のタグ

開発ツール , Webデザイン , 効率化

Socialシェアボタン

スポンサーリンク