|
|---|
スマートフォンは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向けに、写真などをより美しく見せる方法もありますので、今後の連載の中で紹介しましょう。
