昨今のWEB制作はレスポンシブ前提での制作を行っていますが、まだまだ根強いユーザーエージェント(以下UA)切り分けのSP対応サイト。
Windowsのままページを確認するには、GoogleChromeの開発者ツールでスマホになりすまして確認する方法が一般的で、ほとんどはこの方法で問題なく確認できます。
開発者ツールでも特に問題は無いのですが、いかんせん数が多い時は大変です。
大量に作成したLPなどを一度に数十ページも確認する必要があるとき、タブごとに開発者ツールを起動して・・・となると、ショートカットを使っていても腱鞘炎を心配してしまうレベルです・・・汗。
そんな都合のいい方法は~と思っていたら、意外にもあったのでご紹介します。
手っ取り早く結果だけを求めたい方は以下の方法を
--user-agent="Mozilla/5.0 (iPhone; CPU iPhone OS 10_2 like Mac OS X) AppleWebKit/602.3.12 (KHTML, like Gecko) Version/10.0 Mobile/14C92 Safari/602.1" --user-data-dir="c:\temp
※もとから記載されているファイルパスの後ろに半角スペースを開けて追記してください
ユーザーエージェント確認 ←から確認できます。
これで、開発者ツールを開かずともUAの振り分けでSP用ページが表示されるようになります。
簡単ですね。
ここで作成したショートカットはそのまま残しておき、UAを偽装する必要がある時は、偽装用ショートカットでChromeを起動すればいつでも使うことができます。
全部つなげた場合
設定の間は半角スペースで区切ってください。
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-agent="Mozilla/5.0 (iPhone; CPU iPhone OS 10_2 like Mac OS X) AppleWebKit/602.3.12 (KHTML, like Gecko) Version/10.0 Mobile/14C92 Safari/602.1" --user-data-dir="c:\temp
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"
↑はショートカットを作成した際のデフォルト値をそのまま使ってください。
--user-agent="Mozilla/5.0 (iPhone; CPU iPhone OS 10_2 like Mac OS X) AppleWebKit/602.3.12 (KHTML, like Gecko) Version/10.0 Mobile/14C92 Safari/602.1"
上記の設定では、iOS10.2のSafariで見ているという設定になります。
その他のデバイス、OSは以下を参照して状況に併せて設定してください。
UA設定一覧
--user-data-dir="c:\temp
ユーザー設定などを保存するディレクトリを指定します。
この設定が無くても動くのですが、指定が無く通常のChromeが先に起動していた場合UA設定が先に起動していた方と同じとなるため、通常版とUA偽装版を同時に起動することができなくなってしまいます。
わかりやすい場所としてc:/temp
を指定していますが、パスは任意に変えても問題ありません。
UA偽装版Chromeを使いたい時は、おそらくたくさんのページを確認したい時だと思いますので、以下の拡張機能を入れておくと便利です。
Pasty
◆使い方 複数のURLを一気に開く!Chromeの拡張機能「Pasty」は超便利!
※UAがiPhoneのままだとGoogleStoreが開けないので、拡張機能を入れる時だけUAをデフォルトに戻す必要があります。
デスクトップアイコンが同じだと見分けづらいのでオリジナルのアイコンを設定してあげると便利です。