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

■Mobile Safariの制限

　Mobile Safariは、ハードウェアの制限などからMac版、Windows版とはいくつかの違いもあります。

・プラグインに非対応

　ブラウザーの機能を拡張するプラグインが追加できません。特にアドビ システムズの「Flash Player」をインストールできないため、Flashコンテンツを表示できない大きな制限があります。ほかにも、マイクロソフトの動画ファイル形式である「Windows Media Video」の埋込みや、QuickTimeムービーのページ内再生などもできません。これらは、HTML5やYouTubeなどで対応することになります（詳しくは今後の連載で紹介します）。

・設定項目が少ない

　Mobile Safariは、［設定］［Safari］から設定画面を呼び出せますが、デフォルトの検索エンジンやセキュリティの設定などの項目しかありません。PC向けのWebブラウザーのような「文字サイズの変更」や「エンコーディングの設定」はなく、設定もできません。

iPhone Safariの設定画面。最小限の設定項目しかなく、文字サイズやエンコーディングの変更はできない

　つまり、文字コードの設定が不適切なWebページは文字化けした状態のまま、ユーザー（iPhone）側で直す方法がないということです。HTMLの文字コードはmeta要素で忘れずに指定しておき、文字化けが発生しないように気をつける必要があります。

文字コードの設定が正しくないと文字化けして表示され、ユーザー側では対応できない

・ウィンドウの制御ができない

　iPhoneのアプリは、常に全画面に展開され、大きさの変更ができません。JavaScriptを使うとポップアップウィンドウは開けますが、標準で「ポップアップブロック」が有効になっているため、次のようなスクリプトを実行してもウィンドウは開きません。

　ポップアップウィンドウは設定画面でオフにできますが、その場合も以下のような許可を求めるダイアログが表示されます。

ポップアップブロックをオフにした状態でも許可を求めるダイアログが表示される

・ファイルのアップロード・ダウンロードができない

　iPhoneは、Finder（Windowsのエクスプローラー）に相当するファイル管理ソフトを内蔵しておらず、Mobile Safariではファイルのダウンロードやアップロードができません。ファイルアップロードのコントロールがあるフォームを表示すると、以下のように選択ボタンがグレーアウトした状態になります。このため、ファイルのアップロードが必要なWebサービスでは専用のアプリを作って対応するしかありません。たとえば写真共有サービスの「Flickr」では専用のアップロードアプリを配布しています。

iPhoneではファイルのアップロードができないため、選択ボタンがグレーアウトして表示される

・そのほかの細かな制限事項

　Mobile SafariはPC向けのSafariと同様、画像ファイルとしてGIF/JPEG/PNG/TIFFが表示できますが、容量については厳しく制限されています。また、JavaScriptの処理時間などにも決まりがあります。こうしたMobile Safariの細かな制限についてはアップルの「Safari Web Content Guide」に記載されています。

　Safari Web Content Guideには以下のような制限が記載されています。

• GIF、PNG、TIFF画像はデコード時の状態で3メガピクセル以下
• サブサンプリングされたJPEG画像は、デコード時の状態で32メガピクセル以下
• canvas要素は3メガピクセル以下
• HTML、CSS、JavaScriptなどの要素はそれぞれ10MB以下
• JavaScriptの処理時間は10秒まで

　これらの制限はiPhone 4（iOS 4）を基準としたもので、iPhoone OS 2では画像が2メガピクセル以下までだったり、JavaScriptの処理時間が5秒までだったりと、古いOSほど制限は厳しくなります。古い機種にも対応させるためには、制限ギリギリまで使うのではなく、できるだけ余裕を持った作りにする必要があります。

■日本語フォントはゴシック体のみ搭載

　iPhoneのSafariとMac版で大きく違うのがフォントです。Mac版のSafariは明朝体（ヒラギノ明朝）が標準なのに対して、iPhoneのSafariはゴシック体（ヒラギノ角ゴ）で表示されます。iPhoneに搭載されている日本語フォントは「ヒラギノ角ゴ」の「W3」および「W6」のみで、明朝体は搭載されていません。このため、CSSで明示的に明朝体を指定しても反映されません。

iPhoneの日本語フォントはゴシック体のみ。PC版のSafariでは明朝体で表示されるページ（左）でも、iPhoneではゴシック体になる（右）

　メモリ容量などの制約を考えると仕方ないとはいえ、日本語を美しく見せる明朝体が収録されていないのは少し寂しいところです。一方、欧文フォントは「Arial」や「Helvetica」など、Macで利用できるフォントが数多く収録されています。以下に、iPhoneに搭載されているフォントの一覧をまとめます（出所＝soundscape out）。

Androidの仕様を確認する

　続いて、Androidの仕様をiPhoneと比較しながら確認します。Androidは携帯電話そのものではなく、グーグルが中心になって開発しているモバイル用OSの名称です。携帯電話に限らず、カーナビや家電、ノートパソコンの一部にも搭載されています。本連載では携帯電話に絞って解説し、「Android」または「Android端末」と表記した場合には「Androidを採用した携帯電話端末」を指します。

■日本でのAndroid端末

　Android端末は海外、特に北米やヨーロッパでは台湾HTCや米モトローラなどの端末メーカーがさまざまな機種を発売していますが、日本で入手できる機種はまだそれほど多くありません。2010年7月現在、国内で発売されているAndroid端末は以下のとおりです。

	NTTドコモ		au	ソフトバンク
	HT-03A	SO-01B(Xperia)	SHI01(IS01)	X06HT(HTC Desire)
	HTC	ソニー・エリクソン	シャープ	HTC
サイズ	113×56×14.0mm	119×63×13.1mm	149×83×17.9mm	119×60×11.9mm
重さ	123g	139g	227g	135g
容量	512MB	1GB	3.4GB	512MB
カラー	ホワイト／ブラック	ホワイト／ブラック	ブラック／ライトブルー	ブラウン
画面サイズ	3.2インチ	4.0インチ	5.0インチ	3.7インチ
画面解像度	480×320px	854×480px	960×480px	800×480px
カメラ	3.2メガピクセル	8.1メガピクセル	5.3メガピクセル	5メガピクセル
搭載OS	Android 1.5 ※Android 1.6にアップグレード可能	Android 1.6	Android 1.6	Android 2.1

■Androidのバージョン

　Android OSは現在も活発に開発が続けられており、執筆時点の最新バージョンは「2.2」ですが、国内で発売されている端末ではHTC Desireの「2.1」が最新です。Desireよりもあとに発売された「IS01」は「1.6」を搭載するなど、常に新しいバージョンが採用されるとは限りません。

　また、すべての端末が最新のAndroid OSにバージョンアップできるとは限らず、端末メーカーの意向によってはバージョンアップできないケースもあります。

■Androidの標準ブラウザーは「ブラウザ」

　Androidに標準搭載されているブラウザーは、その名も「ブラウザ」というソフトウェアで、特に固有の名称は付いていません。実際にはGoogleが開発した「Chrome」に非常に近い性能を持つことから、「Chrome Lite」などと呼ばれることもあります。

Androidの標準ブラウザーは「ブラウザ」

　名称はともかく、レンダリングエンジンはSafariと同じ「WebKit」を採用しているためHTML5やCSS3の先行実装が進んでおり、JavaScriptが高速に動作する高機能なWebブラウザーです。

■プラグインには非対応、Flash Playerは搭載

　Androidの「ブラウザ」もiPhoneのSafariと同様、プラグインには非対応ですが、Android 2.2以降はFlash Playerが標準搭載され、Flashコンテンツを再生できるようになりました。しかも、一般的な携帯電話に搭載されている「Flash Lite」ではなく、PC版と同じフル機能が使える「Flash Player 10.1」なので、PC上向けのFlashコンテンツがそのまま再生できます（ただし、携帯電話回線で利用されること、画面の大きさなどへの配慮は必要です）。

　また、ブラウザの起動中に本体の［メニュー］ボタンを押して［その他］［設定］を開くと、文字サイズの変更やエンコードが設定できます。iPhoneは文字化けを起こすとユーザー側では対応できませんが、Androidでは設定を変更することで解消できます。

ブラウザの設定画面。文字サイズやエンコードの設定変更が可能だ

　ファイルのアップロードはiPhoneと同様、対応していませんが、ファイルのダウンロードはできます。各ソフトに対応したデータはそのソフトに引き継がれ、「.zip」ファイルなどのいずれのソフトでも開けないファイルは内蔵メモリに保存されます。こうしたダウンロードファイルは、PCに接続した状態で操作したり、ファイル管理ソフトを利用して管理したりできます。

　ブラウザーのウィンドウの大きさが変更できない点はiPhoneと同様です。

■その他のWebブラウザー

　Androidでも「Android Market」を通じて多くのWebブラウザーが提供されていますが、そのほとんどは標準の「ブラウザ」を内部的に利用しており、レンダリング性能は変わりません。

　例外が「Opera mini」で、iPhone版のOpera miniと同様、オペラのサーバー上でレンダリングした結果を受け取って表示しています（フォントの関係でiPhone版のOperaとも少し違った表示結果になります）。

標準の「ブラウザ」とOpera miniの違い。表示結果にはかなりの違いがある

　また、モジラがAndroid版の「Firefox」を提供すると発表しており、2010年末頃にはリリースされる予定です。

■不自然な日本語フォント

　日本で発売されているAndroid端末には、「Droid Font」と呼ばれるフォントもしくは、端末メーカーが独自に用意したフォントが搭載されています。HT-03Aなどの少し前に発売された端末では、「CJK統合漢字」と呼ばれる、中国（Chinese）・日本語（Japanese）・韓国語（Korean）で共通して同じ漢字を利用しているため、日本語のページを表示すると若干不自然に見える場合があります。

CJK統合漢字による表示。「戻」の上が点のようになっているなど、若干不自然な漢字がある

■画像はSVGに非対応

　AndroidもiPhoneと同様、GIF、JPEG、PNG、TIFFに対応していますが、現状ではSVG形式には対応していません（Android 2.2以降で対応）。

　容量制限については明確な規定はないようで、各端末が搭載しているメモリ量などに左右されるようです。筆者が試したところ、サイズの大きなページ（2ちゃんねるのスレッドページや、楽天の商品ページなど）を開こうとすると、Webブラウザーが重たくなったり、落ちてしまったりと不安定な状態になりました。スマートフォン向けのWebページは、極力軽く作成しましょう。

◆

　次回はスマートフォンサイトを設計するときのポイントを解説します。

著者：たにぐちまこと

東京世田谷でWeb制作を営む、H2O Space. 代表。PHPを中心としたWebシステムの開発などを主に手がける。 Adobe Dreamweaverで、iPhoneサイトを制作しやすくする拡張機能「iPhone site extension」を配布し、スマートフォンのサイト制作にも積極的に取り組んでいる。主な著書に「Dreamweaver PHPスターティングガイド」（毎日コミュニケーションズ）、「ホームページ担当者が知らないと困るHTMLの仕組みとWeb技術の常識」（ソシム）など。