ぐーたら主婦ブログをはじめる

お金はないけど心は錦 47歳子なしで引きこもりがちなぐーたら主婦が日々思うことを綴ります

User-Agent Switcherが便利!Chrome拡張でパソコンからスマホ画面を確認しよう

前から書こうと書こうと思っていたのに、ついつい後回しになっておりました。

以前にここで、自分のブログのアドセンスの広告をスマホで誤クリックしてしまう!助けて!的なことを書きました。

その後解決策を見つけたので、ご報告しておくことにします。

 

パソコンのブラウザでスマホ画面を表示する

わりとメジャーな方法なのかもしれませんが、私のように最近ブログをはじめたばかりの方は、ご存じでない可能性もあるので、ご紹介しておきたいと思います。

 

解決法とは、Chrome拡張の「User-Agent Switcher for Chrome」を使って、ユーザーエージェントを偽装し、パソコンのブラウザからスマホ画面を確認する方法です。

ユーザーエージェントとはわかりやすく言うと、Webサイトへのアクセスの際に使用されるプログラムのことです。

 

もし「なんか難しそう」と感じる方がおられましたら、実際に使ってみてください。

簡単すぎてびっくりしますよ。

 

User-Agent Switcher for Chrome のインストール

User-Agent SwitcherにはChrome版とFirefox版が存在します。

インストール方法、使用方法は、ほぼ同じです。

 

ここではChrome版でのインストール方法をご案内します。

こちらにアクセスをして、拡張をインストールしてください。

 

ユーザーエージェントを切り替えてみる

ツールバーにこんなアイコンが表示されるので、クリックするとメニューが出ます。

f:id:rararutan:20171115172322p:plain

スマホだけでなく、様々なブラウザに偽装することができます。

ここでは Android ⇒ Android Kit Kat を選択してください。

すると一瞬で、スマホ画面の表示に切り替わります。

f:id:rararutan:20171115175449j:plain

横幅は最大で表示されますので、適当に調整してください。

右クリックメニューの「検証」から、デベロッパーツール(要素の検証)を起動させますと、編集作業がはかどります。

f:id:rararutan:20171115174847p:plain

使い終わったら、元に戻すのを忘れないでくださいね。

ご自分でお使いの ブラウザ ⇒ Default を選択するだけです。

 

これがあれば、そうそうアドセンスを誤クリックすることもなくなります。

(そんなんじゃ、いつまで経ってもスマホの操作に慣れないよ!と言われたら、ぐうの音もでません)

 

テンプレートをカスタマイズされている方はご注意を

「スマホ表示ははてなのプレビューで十分!」

「レスポンシブデザインだから編集の必要なし!」

と、仰る方も、もう少しだけお付き合いくださいませ。

 

この拡張のすごいところは、スマホだけでなく、様々なユーザーエージェントに対応している点であります。

 

Firefox利用時は、表示が崩れたり、不具合のでるWEBサイトがまれにありました。

管理者に報告すれば直してもらえるのかもしれませんが、実際はそこまでしようとはなかなか思わないんですよね。

 

特に利用者の少ないブラウザを使っている場合、「私のためにCSSを見直してください」とは言い出せないものです。

そして自然と足が遠のくことになってしまうのです。

 

滅多にないとはいえ、このようなことは起こりえます。

特に、ご自身でカスタマイズされている方は、要注意です。

 

アナリティスクでユーザーエージェントを確認する方法

ユーザー ⇒ 概要 ⇒ メインページのシステム

ここからユーザーの利用しているブラウザや、オペレーションシステムを確認することができます。

f:id:rararutan:20171115172430p:plain

Firefoxが少なすぎてびっくりしました。

元ユーザーとしては複雑な思いです。

そろそろFirefox57の正式が出る頃かと思われますが、巻き返しは絶望的ですね。

 

最後に

古いバージョンのChrome3Xでは、デベロッパーツールでユーザーエージェントの切替ができるとの情報がありましたが、私の使っているバージョンではどれだけ探しても見当たりませんでした。

現在のバージョンはChrome62です。

 

見つけたのは「デバイスの切替」ボタンだけで、これでは、ユーザーエージェントを切り替えることができません。

もし、デベロッパーツールで切り替える方法をご存知の方がおられましたら、コメントにて教えていただけると助かります。