今回はデスクトップ環境で携帯端末での画面表示を再現するアプリである User-Agent Switcher を紹介したいと思います。
最近ではスマートフォンやタブレット端末が普及してきたせいもあって、携帯端末でのウェブサイト閲覧が多くの割合を占めるのではないでしょうか。
Chromeの場合ブラウザに付いている開発者用の機能で携帯端末のサイト表示を再現することも出来るのですが、エンジニアでない方にしてみればその都度慣れない画面を開くのは手間ですし、スマホサイトが手軽にブラウザで見れるとありがたいのですよね。
User-Agent Switcherダウンロード&準備
User-Agent Switcher for Chrome
User-Agent Switcher for Chrome/ Chromeウェブストア
上記アドレスからダウンロードして下さい。
筆者はChromeウェブストアからいきます。
右上にアイコンが出ていればダウンロードは成功です。
使いはじめる前に簡単に設定をしておきましょう。一番右端、三本線のアイコンから「その他のツール→拡張機能」と進んでください。
User-Agent Switcher for Chromeの項目の所にある「オプション」を押すと設定画面に飛びます。
左側の項目の上から四番目「Other Settings」を押してください。
上から三つめ「Send anonymous error reports」にチェックが入っています。ここにチェックの入ったままだとエラー時にいちいちレポートを送信する設定になってしまうので、このチェックを外してください。
User-Agent Switcher for Chromeの機能
機能を見ていきましょう。Yahoo! JAPANのトップページです。PC用の表示だとこうなのですが、User-Agent Switcher for Chromeのボタンを押して「iOS→iPhone6」と選択していくと…
と、こんな感じにPCでもiPhoneのページが見れちゃいます！
アイコンの表示も「IP6」となっていますね。
ただ、それでもやはり擬似的に環境を再現しているだけなのでjavascriptの箇所など実機と挙動が異なるところも少なからず出てくるようです。最終的にはやはり実際の環境で確認することを忘れないで下さい。
