複数のモバイルWebレイアウトが一度に確認出来るツール「Sizzy」の紹介です。
Webサイトのレイアウトをスマホやタブレットに合わせるレスポンシブデザイン対応も
今や当たり前になりましたが 各種モバイル端末用の確認となると 少し手間が掛かります。
単体の端末として流通量が特に多いiPhoneを例に挙げると、
iPhone (4, 5, 6, [6,7 plus])は それぞれ画面のサイズが変わってきます。
Google Chromeの " Dev-Tools " には
画面のサイズを各種デバイスに切り替える便利な機能が搭載されていますが、
もっと手軽に複数端末のモバイルレイアウトを 一度に確認出来そうなツールが「Sizzy」です。
っということで、実際に「Sizzy」を導入して使ってみました。
・指定したWebページ(URL)を 複数のモバイル端末のサイズで一度に確認できる
* 執筆時の最新バージョン (* 0.0.2 )で用意されているモバイル端末のサイズ
- ios
iPhone ( 4, 5, 6, 7 Plus ) , iPad Air
- Android
Nexus 6P, Galaxy S5, Nexus7
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が使えます
* reactコンポーネントでレンダリングされているので、ユーザーエージェントは切り替わりません
* 実際にSizzyを使ってみた動画
上記の説明はローカルマシンで起動させる前提ですが、
SizzyはReactで作られているツールなので、ホスティング用に静的ファイルにビルドが可能です。
( * buildにはyarnがインストールされている必要があります )
# ホスティング用に静的ファイルにビルド
yarn build
ビルドが完了するとsizzyフォルダ内に' build ' フォルダが作成されるので、
nginxなどのwebサーバーで' build 'フォルダをルートに設定すればホスティングが可能です。
# buildフォルダ内の構成
- build
- static
asset-manifest.json
favicon.ico
index.html
複数のモバイル端末の画面サイズを一度に表示させることが出来るので、
レイアウト確認の時間短縮にもなり 活躍する機会も多いと思われます。
特にWebデザイナーさんに重宝すると思うので、気になった人はゼヒ×2チェックしてみてください！
GitHub : kitze/sizzy
