オーケーマック

 

iPhone 7やiPhone 7 Plus、シャッター音の鳴らないiPhone、白ロムiPhone、海外版iPhone、
格安iPhone、Mac、iPad、Android Nexus、中古スマホなどをトコトン楽しむ
レビューサイト「オーケーマック」です。
徹底的な消費者目線でレビューをお届けします。
ガジェットが世界を制す!!

Macでモバイルサイトを簡単に閲覧!Window Tidyの設定

Macでモバイルサイトを簡単に閲覧!Window Tidyの設定

Macを使ってモバイルサイトを制作しているとき、iPhoneやAndroid実機からモバイルサイトがどのように見えているかを素早く確認したいと思った事はありませんか? iPhoneやAndroidを利用してわざわざ確認するのは時間がかかって面倒だ、時間を節約したいと思った事はありませんか?

良い方法があります。MacのSafariのユーザーエージェントを切り替える方法Mac向けアプリ「Window Tidy」をWindowを最適化して組み合わせて使うことです。本エントリーでは、

  1. Safari のユーザーエージェントを切り替える方法
  2. 「Window Tidy」をiPhoneからの閲覧を想定した最適な設定方法

この2点についてお伝えします。実機からの見え方そのものは確認できませんが、それに近い見え方をMac上で実現します。

Safari のユーザーエージェントを切り替える方法

Mac の Safariには開発者向けモードがあります。こちらを利用してユーザーエージェントをiPhoneに強制的に切り替える事で、iPhoneでの表示を確認できます。

Macから見たウェブサイトの画面

下記はMacから見たウェブサイトの画面のスクリーンショットです。マックやパソコンユーザからは下記のような画面が見えています。

20140222wt01

Safariのメニューに「開発」を出す

Safariには開発者向けモードが隠されています。メニューバーの詳細から

「メニューバーに”開発”メニューを表示」にチェックを入れます。

20140222wt03

すると開発が現れます。開発からユーザーエージェント→Safari iOS 6.1 – iPhone を選べばOKです。

20140222wt04

iPhoneから見たウェブサイトの画面

すると先ほどのサイトがユーザーエージェント:iPhoneと認識され、iPhone(またはAndroid携帯)から見たときの画面になります。

20140222wt05

ウィンドウをリサイズする

画面の横幅を小さくリサイズしてやればOKです。

20140222wt06

「Window Tidy」をiPhoneからの閲覧を想定した最適な設定方法

さらにMac向けアプリ「Window Tidy」を使って、ウィンドウのサイズを自動的にリサイズさせることにより、iPhoneからの見た目を短時間で実現できます。

20140222wt07a

Window TidyWindow Tidy ¥800(記事作成時)
カテゴリ: ユーティリティ, 仕事効率化
販売元: Gareth Clarke
アプリをダウンロード

「Window Tidy」はドラッグアンドドロップするだけで、Windowを任意のレイアウトにあわせてくれるスゴイソフトなんです。

文章だけではイマイチその魅力が伝わりづらいです。下記においてスクリーンショットを交えてそのすぐれた魅力をご紹介します。

この「Window Tidy」をMac App Storeからインストールします。

画面上部のアイコンから、Open Window Tidy Preferences を開きます。

20140222wt07b

Layoutsタブには、デフォルトでは4つの設定が見えます。画面左半分にいっぱいにWindowsを広げるレイアウト、右いっぱいに広げるレイアウト、ど真ん中にもってくるレイアウト、全画面いっぱいに広げるレイアウトの4つです。

20140222wt08

さてここでモバイル用にレイアウトをつくってやろうではありませんか。

レイアウト画面から [+] のボタンを押します。Edit Layout という窓が開きます。

Nameは Mobile とでも名付けてやりましょう。

Precisionタブをクリックします。

そしてSizeは 392 x 800 を入力します。(後ろの数字「800」は任意です。MacBook Air 11インチをお使いの方はもう少し小さく700ぐらいにしてやるといいと思います。)

20140222wt09

設定が完了したら Saveボタンを押します。Doneを押します。

さて先ほどの画面に戻りましょう。Safariの Window をドラッグすると画面下部に Window Tidyのレイアウト群が現れます。

20140222wt11

一番右のレイアウトにドロップしましょう。

20140222wt12

びよん!

20140222wt13

Window Tidyが自動的にモバイルから見たときのような細長いレイアウトにしてくれました! 超便利!

まとめ

モバイルサイトを制作したあと。iPhoneやAndroidの実機を使って確認するのは必須の行程です。しかしそれは最後にやれば良いです。制作途中は上記のようにウィンドウを開いて、Macの上でユーザーエージェントを変えて作っていきます。
これにより時間をかなり節約できると思います。

おまけ:Window Tidy のすぐれた機能

ど真ん中にもってくるレイアウト
20140222wt14

、全画面いっぱいに広げるレイアウト
20140222wt15

これがドラッグアンドドロップで一瞬で実現できてしまいます。とても便利です。

モバイルサイトを制作する目的でなくとも、Window Tidyは時間を節約してくれるすぐれたアプリです。

20140222wt

20140222wt07a

Window TidyWindow Tidy ¥800(記事作成時)
カテゴリ: ユーティリティ, 仕事効率化
販売元: Gareth Clarke
アプリをダウンロード
Return Top