[備忘録]XcodeでiOSシミュレータでレスポンシブデザインの表示確認！そしてAndroidの場合のあれこれ。

本日読んだ以下のブログが、非常に参考になりました。

XcodeでiOSシミュレータ …

端的に言えば、Xcode付属のiOSシミュレータでデザインをチェックするというお話。
MacユーザでWeb制作をやってる人にとっては常識の範疇なのかもしれませんが、僕にとっては目からウロコ。
なんせ僕は、今まで下記のエントリーに書いたような超強引なやり方でiPhoneの表示確認をしていたのだから！

参考：[備忘録]Macのlocalhostで構築中のwordpressサイトにiPhoneからアクセスするためのあれこれ。
CSSやJSや画像などへアクセスする歳、URLの”localhost”という文字列をIPアドレスにまるごと書き換えるという方法を使っています。

最終的な実機確認はやった方がいいとは思うものの、開発中の細々したチェックはシミュレータを使う方が圧倒的に便利！
というわけで、今後はシミュレータをうまく使いながら開発効率を上げたいと思います。

ところで、Androidの場合は、、、

ついつい無視してしまいがちなAndroidですが、なんだかんだでユーザ数は結構な数がいるわけで。
こちらもできる限りの端末で表示確認をすべきなんですが、iOSと違い多種多様なデバイスがあるのがAndroid。（そしてそのデバイスの数だけ固有のふるまいをしてしまうというやっかいなヤツです。。）

これこそエミュレーターで表示確認できたら便利だよな〜。

ということで、以前作っていたAndroidの開発環境からエミュレータを起動。
“localhost”のURLを打ち込んでみると、、、

うーん、表示されません。

それもそのはず、これはAndroidの“シミュレータ“ではなく“エミュレータ”。
URLに「localhost」と打ち込めば、当然Android端末内のローカルホストを見に行くわけで。
Androidでサーバーを起動させていない限りは、上の画像のように「サーバー応答なし」のエラー画面になるわけです。

じゃあどうする？

Androidではそういう時のために特別なIPアドレスが用意されていて、「エミュレータが起動しているPCを指すIPアドレス：10.0.2.2」を指定することで、ちゃんとPCのローカルホストにアクセスすることが出来ます。

出来た！

ただ、これだと結局、cssやjsや画像のアドレスである「localhost/xxxx/」がエラーになるので、冒頭で書いたようなIPアドレス書き換え処理が必須。
処理さえ入れればちゃんと表示されるんですが、、、これじゃあ画期的に便利！とは言い難いですね。。

ちなみに、Androidが用意している特別なIPアドレスには以下のものがあります。

10.0.2.1 ：ルータ/ゲートウェイアドレス

10.0.2.2 ：エミュレータが起動しているPCを指すlPアドレス

10.0.2.3 ：DNS サーバ

10.0.2.4/10.0.2.5/10.0.2.6 セカンドDNSサーバ、サードDNSサーバ…

10.0.2.7 ：エミュレータデバイスのethernet interface

127.0.0.1 ：エミュレータのloopback

というわけで、Androidでの確認はやっぱり一手間が必要で、エミュレータの重さも考慮するとあんまり実用的ではないかも。
「開発は基本iOSで進めて、ある程度完成した時点でAndroidの実機確認」というのが現実的な手順になりそうです。

今日の学び

それぞれの開発環境でiOS版は「iOSシミュレータ」、Android版は「Androdidエミュレータ」という表記になっていて。
シミュレータとエミュレータの違いもよくわかっていなかったんですが、“ハードウェアを動作を再現したもの”がエミュレータで、“ソフトウェアのふるまいを再現したもの“がシミュレータと考えればシンプル。

iOSの開発環境はAndroidに比べたらサクサクだな〜と思っていたんですが、
そっか、iOS版はシミュレータだったんですね。

便利な半面、「アプリ開発」の時なんかは、シミュレータ上で動いたからって全然安心はできないってこと。
CPUもメモリも全てが潤沢なPC環境で動いたからって、それだけでは何の保証もないわけですから。
いやー、大事だね、実機確認！