code up

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

FirefoxアドオンのPrefBarでiOS5のエミュレーション

UA(User-Agent)で表示する画面を切り替えてるサイト(FC2ブログなど)にて、 iPhone用画面のDOMだったりソースを見たいことがたまーにあります。

FirefoxとかIEでアクセスしても、どうやっても出てこない!

iPhoneエミュレータはいっぱいあるけど、インストールするまででもないんだよなー、 って時にPrefBar(Firefox用アドイン)で簡単にiPhone用画面を出せます。

あくまでもUser-Agentだけで判断しているサイトです。 User-Agent+JavaScriptとかで本格的にチェックしているところでは動かないと思います。

JavaScriptやCSSの解釈がSafariとFirefoxでは異なっているので、正確ではないです。 iPhone用画面を無理矢理Firefoxで表示させて、DOMやソース等、ちょっとしたことを調べる時用です。

完成図。このブログをFirefoxで見ています。iPhone用のテンプレートが使われています。 今回はiOS5でエミュレーションしてみました。

まず必要なのはFirefox。次にPrefBar。アドインの検索で出てきます。

PrefBarをインストールするとPrefBar Toolbarがどっかに出てきます。

Toolbarを右クリックすると"Customize PrefBar..."というのがあるのでクリックします。

右側のペインにユーザーエージェント(User Agent)というのがあるので、右クリック→Editをクリック。

下にある+ボタンを押して新しい行を追加し、

Label:
iPhone(iOS5) ※ なんでもいいです。わかりやすい名前を。
Value:
Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3
※ エミュレーションしたい端末やバージョンのユーザーエージェントを指定。『ユーザーエージェントの一覧』などで検索するといっぱい出てくると思います。

OK, OKで確定していき、PrefBarの"現在使用しているブラウザ"(Real UA)とあるプルダウンを 先ほど入力したLabelのものに変えれば、反映されます。

ちなみにいろんな携帯のエミュレーションをするのであれば、FireMobileSimulatorというアドオンもあります。

私の場合JavaScriptやFlashのオン・オフをPrefBarで切り替えたりしてるので、今回はPrefBarで作成しました。

関連記事
タグ:Firefox PrefBar
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。