【mac + Firefox】実機を使わずにレスポンシブデザインのデモ画面を取得する方法

最終更新日:2015-12-24

実機を使わずに WordPress.com テーマ等の iPhone 等での表示画像を取得する方法についての覚え書きです。作業環境は mac の Yosemite + Firefox 35.0.1 1 です。

2015-03-14 at 10.55

iPad や iPhone 等で WordPress.com のテーマがどのように表示されるのか、といったことを記事内で表現するとき、私自身は当初、実際に iPad、ipod touch といった実機とアプリ「Reflector」を使って、mac 上に iPad 等の画面を表示させ、それを Skitch 等でキャプチャし、以下のような画像を作成していました。

adfafsd

それから、一時的にアプリ「Reflector」が使えなくなったことを契機として、アプリ「Omnigraffle」の以下のようなステンシルを使って、その中に iPad や ipod touch の画面のキャプチャを流し込む、といった方法に切り替えていました。

Untitled 2015-02-22 10-45-05

今回は、上記の画像に埋め込む iPad や ipod touch の画面のキャプチャ画像を、実際の iPad や ipod touch ではなく、Firefox を使って生成する方法についての覚え書きです。

このあたりのことについてはちょっと自信がないのですが、たぶん、Firefox には最初から「開発ツール」というメニューがあると思います。その中の「レスポンシブデザインビュー」という機能から、iPad 等で表示したときの画像を取得します。

Web_開発_と_ツール

以下のメニューで画面の大きさを選択し、

2015-03-14 at 10.37

以下のボタンをクリックすると

2015-03-14 at 10.38

フォルダ「ダウンロード」にその大きさで画像が保存されます。

2015-03-14 at 10.41

あとはこの画像を Omnigraffle の画面の部分にドラッグ&ドロップさせれば OK です。

2015-03-14 at 10.44

なお、少々細かい話になりますが、この方法でちゃんと表示されないから、iPhone 等でもちゃんと表示されない、というわけではありません。また逆に Firefox のレスポンシブデザインビューでちゃんと表示されていても実際の iPhone 等ではちゃんと表示されないケースもあります。なので、「表示確認」ではなく、あくまで、「デモ表示」用に限定して使用すべきであると私自身は認識しています。

あと、この方法は実際にはほぼ使わないとは思いますが、技術的にはおもしろいなと思ったので書き留めておくと、上記 Firefox のレスポンシブデザインビューを起動させている状態でアドオン「Pearl Crescent Page Saver Basic」を使うと、以下のような感じで、スクロールして見れる範囲、ページ全体をキャプチャすることができます。

Hew  Description

参考

  1. 2015-03-14時点での最新版ではありません。 

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。