Other

Google Chromeで簡単にUserAgentを変更

Category

Other

サイトの表示確認をしたい場合、便利なツールはいろいろありますが、ブラウザの拡張機能を追加し、UserAgent(ユーザーエージェント)を切り替えて表示確認をするのもその方法の一つです。その中でもGoogle Chromeの拡張機能(エクステンション)は、種類も多く、使いやすいものが多いので、私もよく使っています。
今回は、UserAgent(ユーザーエージェント)を切り替えることができる"User-Agent Switcher for Chrome"を紹介します。"User-Agent Switcher for Chrome"は、設定画面からUserAgent(ユーザーエージェント)を追加することができるので、例えば、「iOS 4用」「iOS 5用」「Android 2.3用」といった使い方もできてとても便利です。

Keyword:クローム拡張,ユーザーエージェント

Google Chromeで簡単にUserAgentを変更

Google ChromeにUser-Agent Switcher for Chromeを追加

Chrome Web Storeのサイトにアクセスし、Google Chromeの拡張機能(エクステンション)”User-Agent Switcher for Chrome”を追加します。
Google Chromeをインストールし、Google Chromeに追加してください。

Chrome Web Store -User-Agent Switcher for Chrome-

User-Agent Switcher for ChromeにUserAgent(ユーザーエージェント)を追加

デフォルトで使用できるUserAgent(ユーザーエージェント)は、Chrome・Firefox・Opera・Safari・Internet Explorer・iPhone・iPad・Androidです。
ですが、iPhoneだとインスペクタから開かないとiOS 4しか選択できません(インスペクタから開くとiOS 4とiOS 5を選択できますが、あまり使い勝手は良いとは言えません…)。また、AndroidだとAndroid 2.1やAndroid 2.3といったように選択することはできません。

▼あまり使い勝手が良くないので、UserAgent(ユーザーエージェント)を追加します

User-Agent Switcher for Chromeの使用イメージ

※画像をクリックすると拡大表示されます

ファイルにメガネが付いたようなアイコンをクリックすると、それぞれのユーザーエージェントと設定画面へ移動するメニュー画面が表示されますので、”settings”をクリックします。すると、以下のような画面が表示されます。

▼UserAgent(ユーザーエージェント)の追加・削除設定

UserAgent(ユーザーエージェント)の追加・削除設定

※画像をクリックすると拡大表示されます

補足

“1″の項目に”追加するユーザーエージェント名”を入力します。
“iPhone 3″と入力すると、ユーザーエージェント名が”iPhone 3″と表示されます。

“2″の項目に”追加するユーザーエージェント”を入力します。
ユーザーエージェント名に対応するユーザーエージェントを入力します。

“3″の項目に”グループ名”を入力します。
分けたグループの箇所に表示されます。

“4″の項目に”フラグ名”を入力します。
3文字まで入力可能です。

全て入力し終えたら、Addボタンをクリックして設定を追加します。
すると、ファイルにメガネが付いたようなアイコンをクリックした際に表示されるユーザーエージェントのメニューに、追加したユーザーエージェントが表示されるようになります。

ユーザーエージェントがよく分らない場合は、OpenSpaceさんのサイトが分りやすいと思います。
OpenSpace -userAgent(ユーザーエージェント一覧)-

個人的な印象としては、最終的に実機や各ブラウザで表示確認する必要はもちろんありますが、効率的にざっとそれぞれの表示確認をしたいような場合には十分使えると思います。
正確性でいうと、やはり実機や各ブラウザよりはもちろん劣ります。
Internet Explorerでの表示も、Internet Explorerに実装されている開発者ツールでの表示とUser-Agent Switcher for Chromeでの表示に多少違いが見られる場合もありましたので…。

List

関連記事(※当記事と関連性が高いと思われる記事)

Web制作で活用したいツール

2012/09/30
Web制作で活用したいツール
スコア:11 ※スコアの数値が大きいほど、関連性の高い記事です。 パフォーマンス測定 GTmetrix オンラインツール サイトの表示速度を計測 パフォーマンスの改善点を調査 ブラウザとサーバー間のやり取りを調査※時間・データサイズ・... 続きを読む...

CSS3のベンダープレフィックス

2012/03/03
ベンダープレフィックス
スコア:5 ※スコアの数値が大きいほど、関連性の高い記事です。 ベンダープレフィックス ベンダープレフィックスとは、仕様策定途中のCSS3のプロパティや値を各ブラウザが先行実装している場合、それらの機能を動作させるためにプロパティや... 続きを読む...

印刷対応サイト

2012/08/31
印刷対応サイト
スコア:5 ※スコアの数値が大きいほど、関連性の高い記事です。 対応するブラウザ・バージョンを選定する 全てのブラウザに対応できるのが望ましいのですが、それぞれのブラウザに実装されている印刷機能に関しても把握しておく必要があります。... 続きを読む...

Internet Explorer9以前でもCSS3を使う

2012/03/04
CSS3
スコア:4 ※スコアの数値が大きいほど、関連性の高い記事です。 CSS3 PIEで何ができるの? CSS3 PIEは、Javascriptを使ってInternet Explorer6~8でも一部のCSS3を使えるようにするスクリプト... 続きを読む...

おすすめ書籍・商品(※当記事と関連性が高いと思われる書籍・商品)

ページの先頭へ