Chromeでスマホサイトを見れる!
User-Agent Switcher for Chrome

2015-11-23

uaswitcher_official

 

最近ではスマートフォンやタブレット端末が普及してきたせいもあって、プライベートに限ればかなりの割合の方が携帯端末でのウェブサイト閲覧が中心になっているんじゃないかと思います。

 

運営側もサイト確認用にその都度実機で確認できればよいのですが、機種ごとに解像度がまちまちだったりするので現実的ではないですね。

 

Chromeの場合ブラウザに付いている開発者用の機能で携帯端末のサイト表示を再現することも出来るのですが、エンジニアでない方にしてみればその都度慣れない画面を開くのは手間ですし、スマホサイトが手軽にブラウザで見れるとありがたいのではないでしょうか。

 

 

User-Agent Switcherダウンロード&準備


 

screenshot_01

 

User-Agent Switcher for Chrome

http://spoofer-extension.appspot.com/about

 

User-Agent Switcher for Chrome/ Chromeウェブストア

https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=ja

 

上記アドレスからダウンロードして下さい。

 

筆者はChromeウェブストアからいきます。

 

screenshot_02

 

右上にアイコンが出ていればダウンロードは成功です。

 

screenshot_03

 

使いはじめる前に簡単に設定をしておきましょう。一番右端、三本線のアイコンから「その他のツール→拡張機能」と進んでください。

 

screenshot_04

 

User-Agent Switcher for Chromeの項目の所にある「オプション」を押すと設定画面に飛びます。

 

screenshot_05

 

左側の項目の上から四番目「Other Settings」を押してください。

 

screenshot_06

 

上から三つめ「Send anonymous error reports」にチェックが入っています。ここにチェックの入ったままだとエラー時にいちいちレポートを送信する設定になってしまうので、このチェックを外してください。

 

User-Agent Switcher for Chromeの機能


 

screenshot_07

 

機能を見ていきましょう。Yahoo! JAPANのトップページです。PC用の表示だとこうなのですが、User-Agent Switcher for Chromeのボタンを押して「iOS→iPhone6」と選択していくと…

 

screenshot_08

 

screenshot_09

 

screenshot_10

 

と、こんな感じにPCでもiPhoneのページが見れちゃいます!

 

screenshot_11

 

アイコンの表示も「IP6」となっていますね。

 

ただ、それでもやはり擬似的に環境を再現しているだけなのでjavascriptの箇所など実機と挙動が異なるところも少なからず出てくるようです。最終的にはやはり実際の環境で確認することを忘れないで下さい。