このページの本文へ

作って学ぶスマートフォン対応サイトの基本

2010年08月04日 10時00分更新

たにぐちまこと/H2O Space.

  • この記事をはてなブックマークに追加
本文印刷

プレビュー環境を整える

 ここまでの作業で分かるように、スマートフォン向けのWebサイトを作る際、毎回実際の端末で確認するのは非常に手間がかかります。そこで、本格的なサイト制作に入る前に、PC上で確認できるプレビュー環境を整えておくと便利です。

■Safari、Google Chromeで確認する

 今後詳しく解説しますが、iPhone/Androidに搭載されているブラウザーは、それぞれSafariとGoogle Chromeのエンジンを利用しています。そのため、単純なレイアウトの確認程度であれば、SafariやChromeで済む場合もあります。

 ブラウザーのウィンドウサイズをスマートフォンに近づければ、画面上に表示された時のイメージもある程度は確認できます。ただし、Mac版のSafariやChromeは横幅を350px程度より小さくできないため、実際のiPhoneと同じ横幅(320px、縦向きの場合)での表示ができません。

zu2-5-1
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」をクリックします(バージョンが新しい場合は、最新版を入手します)。

zu2-6-1
iPhone SDKをダウンロードする

 SDKにはシミュレーターのほか、開発用のソフトが同梱されているためファイルサイズが非常に大きく、ダウンロードには多少時間がかかります。ダウンロードしたファイルはダブルクリックし、指示に従ってセットアップしましょう。

 セットアップが完了すると、シミュレーターを利用できます。シミュレーターは、Finderのハードディスクのアイコン(標準の名前は「Macintosh HD」)から「Developer」フォルダをダブルクリックし、次のようなパスを辿った先にあります。

Platforms→iphoneSimulator.platform→Developer→Applications→iPhone Simulator

 iPhone Simulatorをダブルクリックすると、シミュレーターが起動します。今後の作業のために分かりやすい場所にショートカットを作っておくとよいでしょう。

zu2-6-2
iPhoneのシミュレーターは非常に深い階層にあるのでショートカットを作っておくと便利

 シミュレーターではiPhoneのほとんどの操作を再現できます。タップやドラッグなどの操作はマウスでできますし、2本指での操作はaltキーを押すことで操作できます。また、Macがインターネットに接続されていれば、シミュレーター上でもそのままインターネットに接続できます。ホーム画面からSafariを起動して、Webサイトを閲覧してみましょう。

zu2-6-3
シミュレーター上で実際のiPhoneとほぼ同じ操作ができる
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く