プレビュー環境を整える
ここまでの作業で分かるように、スマートフォン向けのWebサイトを作る際、毎回実際の端末で確認するのは非常に手間がかかります。そこで、本格的なサイト制作に入る前に、PC上で確認できるプレビュー環境を整えておくと便利です。
■Safari、Google Chromeで確認する
今後詳しく解説しますが、iPhone/Androidに搭載されているブラウザーは、それぞれSafariとGoogle Chromeのエンジンを利用しています。そのため、単純なレイアウトの確認程度であれば、SafariやChromeで済む場合もあります。
ブラウザーのウィンドウサイズをスマートフォンに近づければ、画面上に表示された時のイメージもある程度は確認できます。ただし、Mac版のSafariやChromeは横幅を350px程度より小さくできないため、実際のiPhoneと同じ横幅（320px、縦向きの場合）での表示ができません。
Mac版のSafariにはウィンドウサイズの制限がありiPhoneと同じサイズにはできない
また、iPhoneの標準フォントは「ヒラギノ角ゴ」ですが、MacのSafariの標準フォントは「ヒラギノ明朝」に設定されているため、フォントの設定を変えないと同じ見た目になりません。Androidの場合はそもそもPCと異なる専用フォントが採用されているので、PC上で表示を再現するのはさらに困難です。
このため、SafariやChromeを利用する際は、簡単なレイアウトの確認や、JavaScriptの動作確認などにとどめておくのがよいでしょう。
シミュレーターをインストールする
それでは、もう少し実際の端末に近いイメージで表示を確認したい場合はどうしたらよいでしょうか。幸い、iPhone/Androidのアプリ開発者向けに配布されているSDK（Software Development Kit）に、「シミュレーター」が用意されています。シミュレーターを利用すると、より実際の端末に近い状態でWebサイトの表示を確認できます。SDKは本来、アプリ開発者を対象としたソフトなのでインストールには若干の手間がかかりますが、手順を詳しく紹介しますのでぜひ導入しましょう。
■iPhoneシミュレーター（Macのみ）
iPhoneの場合、Mac用のシミュレーターのみが配布されています。
まず、次のページにアクセスして、Apple IDでログインします。IDを取得していない場合は、無料で取得できます。
次に、「iPhone Dev Center」から「iOS 4」の「Downloads」をクリックして、「Xcode 3.2.3 and iPhone SDK 4」をクリックします（バージョンが新しい場合は、最新版を入手します）。
iPhone SDKをダウンロードする
SDKにはシミュレーターのほか、開発用のソフトが同梱されているためファイルサイズが非常に大きく、ダウンロードには多少時間がかかります。ダウンロードしたファイルはダブルクリックし、指示に従ってセットアップしましょう。
セットアップが完了すると、シミュレーターを利用できます。シミュレーターは、Finderのハードディスクのアイコン（標準の名前は「Macintosh HD」）から「Developer」フォルダをダブルクリックし、次のようなパスを辿った先にあります。
Platforms→iphoneSimulator.platform→Developer→Applications→iPhone Simulator
iPhone Simulatorをダブルクリックすると、シミュレーターが起動します。今後の作業のために分かりやすい場所にショートカットを作っておくとよいでしょう。
iPhoneのシミュレーターは非常に深い階層にあるのでショートカットを作っておくと便利
シミュレーターではiPhoneのほとんどの操作を再現できます。タップやドラッグなどの操作はマウスでできますし、2本指での操作はaltキーを押すことで操作できます。また、Macがインターネットに接続されていれば、シミュレーター上でもそのままインターネットに接続できます。ホーム画面からSafariを起動して、Webサイトを閲覧してみましょう。
シミュレーター上で実際のiPhoneとほぼ同じ操作ができる
