WEB開発者の苦悩
WEB開発、いわゆるフロントエンドの開発において、最早必須とも言えるスマホ対応。PCのブラウザとは異なり、端末の種類やOSによってかなり見え方が左右されることもあり、出来る限り全ての機種に対応させようと、フロントエンドのエンジニアは苦悩していることでしょう。
全ての端末を買って揃えてテストするのはとても大変です…。私も現在フロントエンド周りの開発を行っていますが、毎日Android、iPhoneを複数台並べて仕事をしています。
しかし、今となっては必ずしも実機を用意する必要がなくなってしました。
何と、何かとお馴染みなPCブラウザのChromeのデベロッパーツールのエミュレーター機能でAndroid、もiPhoneもエミュレート出来てしまいます♪
Wikipedia エミュレーター
https://ja.wikipedia.org/wiki/%E3%82%A8%E3%83%9F%E3%83%A5%E3%83%AC%E3%83%BC%E3%82%BF
Chromeでスマートフォンをエミュレート
エミュレーターの使い方は簡単。PC版のChromeを立ち上げて、任意の画面を表示しているときに下記コマンドを実行するとデベロッパーツールが立ち上がります。
| Mac OS の場合 | Windowsの場合 |
| Command + Option + I | F12 |
デベロッパーツール起動（例では楽天市場のページを使用）
いよいよエミュレーター起動！
続いて、デベロッパーツールを起動した状態で、左上のアイコンをクリックします。するとページが細長になります。
この状態で一度画面を更新してください。（Macの場合は Command + R、Windowsの場合は F5 または Ctrl + R）するとスマートフォンっぽい画面に切り替わります。
更に、左上のドロップダウンメニューを押すと、複数デバイスを選択出来ます。（プリセットで最初からいくつか用意されているもの以外も追加可能）
更に更に、画面の回転なんかも出来ます。
WEB開発において、Chromeとデベロッパーツールは切っても切れない関係なので、これを機にデベロッパーツールをマスターしてみましょう♪
