暮らしの情景、悠々アフィリエイト日記

スマホサイトの必要性は、いまや通常のものとなり、

制作者にとってサイトがうまく表示されているかの確認は、日常的なものとなっているともいえるだろう。


以下、できるだけ簡潔を心がけて、記事タイトルに則し説明していこう。

スマホ表示の確認はけっこうめんどう

たとえば、Moba8.net では、ＰＣ、スマホ（また、タブレット）で、投稿記事をみることが予定されている。


しかし、Web サイトのスマホ表示をみること（確認すること）には、けっこうめんどうな手順が要求されている。


一方、Moba8.net サポートセンターでは、「スマホ向けのページを確認する方法」については、サポート対象外とされている。

これは後述するように、スマホ表示の現段階を語る現象ともとらえられるだろう。

ＰＣのブラウザのエミュレーション機能

さて、スマホサイトをみることができるのは、スマホからだけではない。

ＰＣからでも、みること（確認すること）はできる、

ブラウザの機能（emulaton 機能）を使うことによって。

ブラウザの表示のエミュレーション（仮想実行）機能が使われる。


主要なブラウザとしては、ここでは、４つを挙げておく（いずれもぼくのＰＣの「アクセス解析」欄の「ユーザー属性」によくみられるもの）。

Internet Explorer 　 (IE)
Google Chrome 　 (Chrome)
Firefox
Safari

これら各種ブラウザには、仮想的にスマホ表示をさせるための機能があらかじめついている。

とはいえ、上記各種のブラウザでスマホサイトをみる（確認する）方法は、一様ではない。

上に述べた「サポート対象外」の理由の過半は、「どうやってみるのか、その方法は？」に答えるのに、複数の例について説明が義務付けられてしまうかの問いの性質に、あるのではないだろうか。

「スマホサイトをみる（確認する）方法」の基本

「スマホサイトをみる（確認する）方法」は、基本的には、各自に１つの解法があればよいと、ぼくはこのブログの場では考える。

そこで、とりあえず、ここに、ブラウザが Chrome の場合の「みる（確認する）方法」を説明しておこう。

それ以外のものを必要とする方には、それなりの簡単な案内を最後に添えておくこととしたい。

Chrome の場合の、みる（確認する）方法

それでは、

Google Chrome の「デベロッパーツール」で、「エミュレート」すれば、ＰＣ版ブラウザでスマホサイトを簡単に表示できる。

つまり、スマホサイトを簡単にみる（確認する）ことができる。

以下はその運用法。



Google Chrome を開いて、


１　　右上の設定アイコン（三本線）＞［その他のツール（Ｌ）］＞［デベロッパーツール（Ｄ）］とクリック

２　　左右に２分割

　　　左は　Google トップ画面
　　　右の　右上のアイコン（＞＿）をクリックし、
　　　　　　　右下　Emulation タブ　を選択

３　　 Model　の右枠内　プルダウン選択　ぼくはGoogle Nexus 4 を
　　　　　　Emulate　にチェックが入っている
　　　　　　Resolution　には　384　×　640　とあり

４　　２の左　Google トップ画面に　サイト名　入れる

５　　ただし、このままだとディスプレイのサイズが変っただけ

６　　再読み込みボタン（F5）を押してリロード
　　　　これでスマホ用の表示に切り替わる

７　　ＰＣ表示に戻したい場合は、
　　　　Emulation 内の　［Reset］をクリック

以上　

（なお、３ のプルダウン選択は、試験的にスマホ本機と比較しながら）



※　上記した、Chrome 以外のブラウザの場合の運用法を知りたい方は、「ＰＣ　スマホ表示　確認」などのキーワードで検索されると、説明サイトが表示されますので、ご検討ください。