実践！iPhone＆Androidサイト制作ガイド ― 第3回

サイト制作の前に知りたいiPhone/Androidの仕様

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

文● たにぐちまこと／H2O Space.

　スマートフォンはPCに近いとはいえ、モバイルならではの制限があります。iPhone/Android向けのサイト制作を始める前に、それぞれの仕様を確認しましょう。

iPhoneの仕様を知る

　iPhone（アイフォーン）は、2007年に米国で初代機が発売され（日本では未発売）、その後、3G、3GS、そして2010年にiPhone 4が発売されました。それぞれの仕様は以下の通りですが、ここではWeb制作に重要なWebブラウザーまわりを中心に掘り下げていきましょう。

	iPhone	iPhone 3G	iPhone 3GS	iPhone 4
サイズ	115×61×11.6mm	115.5×62.1×12.3mm		115.2×58.6×9.3mm
重さ	135g	133g	135g	137g
容量	4GB, 8GB, 16GB	8GB,16GB	8GB,16GB,32GB	16Gまたは32GB
カラー	ブラック		ホワイトまたはブラック
画面サイズ	3.5インチ
画面解像度	480×320px (163ppi)			960×640px（326ppi）
カメラ	2メガピクセル	3メガピクセル		5メガピクセル
搭載OS	iPhone OS 1.0	iPhone OS 2.0 ※iOS4にバージョンアップ可能	iPhone OS 3.0 ※iOS4にバージョンアップ可能	iOS 4
Safari	3.0	3.1.1	4.0	4.0.5

■iOS（iPhone OS）

　iOS（3.0以前は「iPhone OS」）は、アップルがiPhoneなどの小型端末用に開発した専用OSです。初代iPhoneに1.0が搭載されたあと、新モデルの発表に合わせてバージョンを重ねています（iPhone 4にはiOS 4が搭載）。iPhone 3G以降はOSのバージョンアップができるようになり、最新版のiOS4にも対応しています。

■iPhone標準ブラウザー「Safari」

　iPhoneには標準ブラウザーとして「Safari」が搭載されています。SafariはもともとアップルがMac OS X向けに開発したWebブラウザーで、Windows版も無償で配布されています。基本的な表示能力はiPhone版もデスクトップ版もほぼ同じですが、iPhone版にはいくつの制限があるため、「Mobile Safari」などと呼んで区別することもあります。

　Safariはオープンソースのレンダリングエンジン「WebKit」を採用し、HTML5やCSS3などの最新技術をいち早く取り入れている前衛的なWebブラウザーです。JavaScriptが高速に動作し、グーグルの「Chrome」やオペラソフトウェアの「Opera」など、JavaScriptの実行速度の評価が高いブラウザーとも肩を並べる性能を誇っています。

　iPhoneに搭載されているSafariは、前の表のとおり、iOSのバージョンアップに合わせてアップデートされており、2010年8月時点の最新版は「4.0.5」です。といっても、バージョンアップにおける変更点は、ほとんどの場合、コピー＆ペーストへの対応やセキュリティアップデートなどの機能面での改善、HTML5/CSS3の先行実装などが主で、Webページの基本的なレンダリング性能はほとんど変わりません。

　PCサイトのように「IE6とIE7で表示結果がまったく異なる」といったケースは少なく、制作者にとっては扱いやすいブラウザーと言えます。

■派生ブラウザーとWebビュー

　iPhone向けのアプリケーションをダウンロードできる「App Store」には、世界中の開発者が開発したさまざまなアプリが配布・販売されています。中にはWebブラウザーも多くあり、無料かもしくは数百円で販売されていますが、ほとんどの場合、これらのブラウザーは「Webビュー」と呼ばれるSafariのエンジン部分を利用しています。このため、Webページのレンダリング結果はSafariとまったく同じです。

　例外として、オペラソフトウェアの「Opera mini」があります。Opera miniはレンダリングエンジンを内蔵しておらず、オペラのサーバー上でレンダリングした結果を受け取って表示します。PC向けのOperaとSafariで表示結果に違いがあるように、iPhoneのSafariとOpera miniでも表示結果には差が出ます。


標準の「Safari」（左）と、「Opera mini」（右）の表示の違い。角丸や罫線の処理など細部に違いがある

iPhoneの兄弟分、iPod touchとiPad

　iOSを搭載した端末はiPhone以外にも、「iPod touch」と「iPad」があります。iPod touchは、2007年に第1世代が発売されたあと、iPhoneのモデルチェンジと合わせる形で、第2世代・第3世代が発売されています（第4世代は本連載執筆時点では発売されていません）。

　iPod touchは、iPhoneから携帯電話の通話機能やカメラなどの一部機能を省いた音楽プレイヤーです。WiFi（無線LAN）環境下でしか利用できないものの、iPhoneと同じWebブラウザーを搭載しており、Web閲覧端末としても利用できます。そのため、Web制作においてはiPod touchも「スマートフォン」と見なしてほぼ問題ありません（本連載で「iPhone」と表記した場合はiPod touchも含むものとします）。

　一方のiPadには「WiFiモデル」と「3Gモデル」があり、3Gモデルでは携帯電話の通信回線を利用できるため「スマートフォン」と呼べるかもしれません。しかし、本体サイズが240×190mm、解像度が768×1024ピクセルもあることから、Web閲覧端末としてはむしろノートパソコンに近いといえます。iPhone向けのサイトももちろん表示できますが、大画面では逆に見づらくなるため、iPhoneとiPadは切り離して考えるのが一般的です。実際、iPhone向けには最適化したサイトを表示するYahoo! JAPANやNAVERなどの情報サイトでも、iPadの場合はあえてPC向けのWebサイトを表示しています。

解像度が格段に向上したiPhone 4

　2010年6月に発売されたiPhone 4は、本体の大きさや画面サイズは従来のiPhoneシリーズとほぼ変わらないものの、画面解像度はそれまでの480×320ピクセルから960×640ピクセルへと大幅に向上しました。これによって画面がより鮮明になり、PCサイトを表示した時でも文字や細かい画像をはっきりと認識できるようになりました。

　ただし、前回の記事で説明したとおり、Mobile Safariには表示サイズを規定する「Viewport」という考え方があるため、特にiPhone 4だけを意識してWebサイトを作る必要はありません。実際、iPhone 4登場以前に作られたiPhone向けサイトを表示しても、きちんと全画面で表示されます。逆にiPhone 4向けに、写真などをより美しく見せる方法もありますので、今後の連載の中で紹介しましょう。