ブログやホームページを作った時やカスタマイズした時のモバイル表示確認どうしてますか？？
Google Chromeブラウザの場合にはデベロッパーツールを開いてモバイル切り替えして見るのが一般的ですね。キーボードからサッと行うにはページを開いた状態でF12→F5で表示できます（やってることはデベロッパーツールを開いてキャッシュをクリアするという作業です）。
が・・・これ結構使いにくいんですよねぇ。うまく表示されない時があるんです、自動サイズの広告がはみ出たりして・・・・。そんな時は
- パソコンとモバイル表示の切り替えをしてみる
- もう一度キャッシュをクリアしてみる
- ページをリロードしてみる
- モバイル端末の機種を変えてみる
などなどして、それなり？なモバイル画面が出てから確認するのですが、そもそもこれって本当にモバイル表示ではこうなってるの？と疑問にさえ思えてきます（私だけかな？）。
もう１つ別の方法としては実際にスマホやタブレットで表示して確認する方法。こちらは確実と言えば確実なのですが、いろいろなサイズの画面を持つ端末をすべて持っているわけでもありませんし、キャッシュのクリアについてはきっちりとブラウザを終了させてから再度ページを表示する、電源を入れ直すなどしないとできないので、CSS(デザイン要素)の編集時などではとても面倒です。
どちらの方法でも確認はできるもののやっぱり面倒ですよね？ただあくまでも私のサイトの話ですが、どんどん閲覧する人の環境におけるモバイルアクセスの比率が上がってるんです。1～2年前までは80%位パソコンだったのに、今では約半数がモバイル端末からのアクセスになっています。私はいくつかのジャンルのサイトを管理していますがどのジャンルでもおおよそ同じような結果になっています。
そうなるとやっぱりモバイルからアクセスされた時にどう表示されているのか？不具合はないのか？など気になってきますね。でも確認が・・・・そんな問題を解消できるGoogle Chromeの拡張機能を見つけました。
それが今回紹介する「mobile browser emulator」です。
「mobile browser emulator」を使ってこのページとトップページをモバイル表示してみると
のように表示できます。本当にモバイルで見ているのと同じような感じですよね？？そのままその画面からページの遷移やメニューの動作などをチェックすることもできて大変便利です。
WordPressでサイトを作っている場合には同じようなモバイルプレビュー機能を持つプラグインに
というのがありますが、こちらは画像サイズの変更ができなかったり、ユーザーエージェント（どんな端末でアクセスしているか？）という指定がないようで、完全にモバイル表示されるという訳ではないのではっきり言って使えるものではありません（作者の方ごめんなさい．．．）。特にWordPressではレスポンシブ対応のテーマだったり、表示をパソコンとモバイルで切り替えるためにwp_is_mobile関数を使って分岐させていることも多いですから、ユーザーエージェントの指定がないことでこれらが無視されて全部表示されるのはとても残念です（つまり完全なモバイル表示の確認はできません）。
この「mobile browser emulator」はいろいろな画像サイズを切り替えて表示でき、スマホだけでなくタブレットでの表示確認もできます。
またGoogle Adsenseなどの広告表示もきちんとされるので、本当に実際にモバイルではどう表示されているのかということも確認できます。
「mobile browser emulator」の入手・導入の仕方
※この拡張機能を使うにはGoogle Chromeブラウザが必要です
「mobile browser emulator」拡張機能を使うにはGoogle Chromeブラウザでアクセスし、機能を有効化するだけ、簡単に導入できます。
使い方もいたって簡単！ページを表示した状態でツールバー右側にある「m」をクリックして画面サイズを指定するだけです（下図）。
WordPressではちょっと問題が出るかも・・・
うーんとっても便利！！ということでWordPressのサイトでいろいろやっていたら不具合が出ました（泣）。
あくまでも私の環境での話ですので何とも言えないところですが、表示以外の部分で以下のようなことを行うと、その後管理画面側の動作などがおかしくなりました。
下書き保存した投稿プレビューをモバイル表示すると404になるなど
- 「投稿」を作成し、公開せず下書き状態にする（この時パーマリンクを変更しました）
- プレビューする
- 「mobile browser emulator」で確認する→404ページが表示される
その後、下書き保存時に「権限がありません」「リンク期限切れのようです」などとエラーが出るようになります。
この状態でその下書き記事も、今まで公開していた記事もプレビューすると404ページが表示されるようになります。
・・・これはちょっと困った・・・という状況で「サイト壊れちゃったの？」とちょっと焦る場面ですが、そもそもサイト自体に何かをしているわけでもないのでブラウザを再起動すればきちんと動作するようになります。
（・・・と言いながらちょっと焦りました、私。）
公開されている記事をいくら「mobile browser emulator」で見ても動作不具合は起きないようなので
パーマリンクを任意に変更した公開前の記事プレビューを「mobile browser emulator」で表示すると不具合が発生する
ようです。
一旦エラーが出ると他の作業にも引きずるようですので、エラーが出たら一旦ブラウザの再起動を行ってから次の作業を行えば問題なく使えますからまあ大丈夫でしょう。
一度「mobile browser emulator」でモバイル表示するとメディアで「httpエラー」と表示されアップロードができない
これは前述した問題の発生後でなくても出るようで、一度でも「mobile browser emulator」でモバイル表示するとその後メディアのアップロードができなくなるようです（httpエラーと表示されます）。
こちらも一旦ブラウザを再起動すれば解消します。
総じて何かWordPressのアクションと競合するものがあったりするんでしょうね（想像）
