Webデザインをやっているお友達のみんな! スマホサイトのデザイン検証ってサクサクやれているかな?
きっと、面倒臭いからChromeのF12(Windowsの場合)押してデベロッパーツールとか使ってるよね。実際、それで大体の場合は事足りるけど、たまにPCのシミュレートとスマホ実機ではデザインの解釈が違う時があって、本番環境に上げて公開してから、後で細かくみたら変な隙間ができていて、焦った経験も1度や2度あるんじゃないかな?
使ってるPCとかスマホの種類とかによるけど、実はiPhone & Macの組み合わせだと、ほぼUSBケーブルで繋ぐだけで、あっさりPCサイトみたいにデベロッパーツールで検証することができるんだ。
できる気はしたけど、つい最近まで試したことがなかったもんだから、メモがてらに紹介するよ。メモ書き程度だから、詳細な手順を知りたい人は、もっと詳しい人のサイトでも調べてね。
iPhone & Macの場合
これは驚くほど超簡単。機種とかバージョンにもよるだろうけど、ここ数年の機種なら大体できるはず。
基本、iPhoneとMacをUSBケーブルで繋いで、MacのSafariの開発メニューからデベロッパーツールを表示するだけ。それでiPoneのSafariで開いているページを検証できるようなメニューが出るから、あとはいつもデベロッパーツールでいじっている感じで検証できる。
簡単に文字とかもリアルタイムに差し替えできるから、こういうときだけ、Appleのパッケージングはすげえなと思うよ。普段はカスタマイズしづらくてガラケーなんだけどね、iPhomeって。多分、iPadもできるんじゃないかな。
Androidの場合
Androidはメーカーというか端末ごとにカスタマイズされていて、検証とか一般人が使わない部分はダークゾーンになっている場合がある。
古いものなど機種によっては、ある部分を7回タップするとか、Huaweiの端末は隠しコマンドみたいな電話番号を打ち込むとかしないとならない。他のエンジニアとかのページでは超簡単とか言ってる場合があるが、超難しい場合もあるから、どうしてもやる必要がなければ諦めた方がコスパいい場合もあると思うよ。
うまくいく機種であれば、WindowsやMacのChromeから、AndoidスマホのChromeで表示しているページを検証できる。これもPC側のChromeに隠しコマンドみたいなURLを打ち込む必要があるから、ちょっとややこしいな。機種によっては挙動がおかしかったりするし。
Huaweiの端末とかだと、メーカーのHisuiteとかいう専用のファイラーアプリをインストールしないと使えない模様。PC側のChromeがスマホとやりとりするのに、機種ごとのドライバーがいるみたいなんだ。オプション項目とかもちょっとややこしいね。
Webデザイナーの場合はガチの実機検証はそれほど必要ないかもしれないけど、いざという時にそういう方法もあるんだと知っているのは心強いよね。
