新@kyotapyな日々

思いついたら書く… wordpress,iPad,美味しいもの,観光

iPadアプリ"Viewport"を使うとレスポンシブデザインはもちろん、サイトデザインの勉強にもなります

      2014/10/24

WordPressのテーマ"stinger5"で対応しているレスポンシブデザイン。

ガラケーしか持ってない@kyotapyは、レスポンシブデザインをチェックできるページでデザインチェックをしていました。

iPadでstinger5のレスポンシブデザインを確認できる9つのチェックサイト | 新@kyotapyな日々

同じなことができるiPadアプリを探していたところ、"Viewport”(有料アプリ)を見つけたので試してみました。
Viewport
カテゴリ: 仕事効率化, ユーティリティ

メニューは以下のとおり

レスポンシブデザインのチェック

チェックするサイトのURLを上のボックスに入力します。
3G回線のせいなのか、アプリのせいなのか分かりませんが、時々、表示されるまで時間がかかることがあります。

アコーディオンメニューの展開もでき、きちんとシミュレートできます。

”Resize”で表示する端末のサイズを指定できます。
メニュー右上の"+”ボタンでここにはない端末サイズを登録できます。

ソースコードの表示

"Viewでページのソースコードを表示できます。かっこいいデザインのページをこれでチェックして参考にできますね。

"HTTP Headers”でページのHTTPヘッダーを表示。

"PageSource”でページのHTMLソースを表示。

"Files”でページで読み込まれているcssファイルや画像ファイルなどのファイルの一覧とその内容を表示。
赤字になっているのは、サイズがゼロのファイルなので要チェックということらしいです。

スクリーンショットの取得

”Screenshot”→"VisibleArea”で表示している端末サイズでページのスクリーンショットが撮れます。
”Screenshot”→"EntirePage”では、ページ全体のスクリーンショットを撮ってくれます。スマートフォンサイズにすると上下に長くなりがちなページの全体像を把握するのに便利ですね。

カラーコードの表示

”PickColor”を選択するとスコープが現れます。スコープを移動させながら、その中心に合わせた色の色コードを確認できます。

まとめ

そのほかにも、ブラウザのUserAgentを指定できたりとなかなか多機能です。
ページを作成する際のデバッグに十分使えるアプリだと思います。
ただ、アプリ内にもサポートページにもヘルプが見当たらなかったので、ヘルプをもう少し充実させてほしいです。
新たに登録した端末サイズの修正方法が分かりません…

Viewport - Responsive Design Testing iPad App

 - アプリ ,