chrome凄い！ iPhoneやAndroidの表示確認はエミュレータ不要だ！

Webサイトの表示チェックどうされてますか？

自分は普段記事にエネルギーを注いでいるので、デザインは必要最低限に近い感じで運営していました。

最近読者も増えてきたので、見やすいよう記事の分類を少し整理したいのと、メニューや告知を増やす機会も増えてきたので、デザインを少し見直してます。

そこでiPhoneやAndroidなどスマートフォンで見たときもパソコンと同じ情報が伝わるよう、エミュレーターでも使って確認していこうと、ネットで探してみました。

探してみると、Windowsにインストールして使うタイプから、オンラインで使用できるものなど、色々見つかりました。

その中で、できるだけ手間をかけずに...と探していたら、何とchromeの標準機能で対応可能なことを知りました。ん～灯台下暗しとはこの事か。

となれば普段利用してるし、一番手軽なchromeの機能を使うことに決定して早速準備開始です。

とはいっても手順は簡単、

1. chromeで【F12】を押して、デベロッパーツール(Developer Tools)を起動





ツールが起動するとchromeウィンドウ下部にこんな情報が表示されます。



2. ツールウィンドウ内の をクリックして残りのメニューを表示

   

   赤印の位置にある

3. 表示されたメニューからEmulationを選択
   
   
4. Deviceから表示確認したいデバイスを選択し【Emulate】ボタンをクリック
5. そのままだと下記みたいになるので、【F5】を押してページの再読込
6. とこんな風にスマートフォン向けの表示が確認でき、もちろん操作もできます

パソコンで表示したときのイメージ

スマートフォンで表示したときのイメージ

専用のツールを使うと複数デバイス同時表示ができたり、エミュレーションの精度があがったり更に便利だと思いますが、それ程こだわりがなければ、これで必要十分かと思います。

タッチ動作の確認もできるし、かなり優秀だと思います。
（最初画面にでる、まっくろくろすけのようなものは何かと思ったらタッチカーソルでした (^^)）

※下記画面でタッチカーソルが黄色いのは画面キャプチャツールのせいです



サイト運営されている方で、chromeお使いの方はどうぞお試しください。

エネルギーは有限なので、ツールに懲りすぎず重要な事に目を向けていきましょう。

技術屋はツールに興味津々になるのは重々承知の上で。自戒を込めて。(^^)/でもツールは楽しいのよね～