iPhone向けWebアプリを作ろう

Safari Web Content Guide for iPhone

　iPhone搭載のSafariはデスクトップ版と基本的には同じものだと書きましたが、実際には、携帯デバイス向けのWebブラウザとして独自の振る舞いがいくつか追加されています。また、イベントハンドラの扱いについても特徴があります。

　iPhone向けのWebアプリケーションを作るうえでは、そういったiPhone版Safariの振る舞いについて理解しておく必要があるでしょう。「Safari Web Content Guide for iPhone」には、iPhone版Safariの特徴や注意点が詳しく書かれています。その中から、重要な部分をピックアップしてみました（以下の内容は、iPod touchに搭載のSafariにも同様に適用できます）。

■ Web標準に対応

　まずiPhone版Safariは、デスクトップ版Safariと同じWeb Kitエンジンを使っており、以下のWeb標準技術およびセキュリティ機能に対応します。

• HTML 4.01
• XHTML 1.0
• CSS 2.1（およびCSS3の一部）
• ECMAScript 3（JavaScript）
• DOM Level 2
• AJAX（XMLHTTPRequestなど）
• SSL 2、 SSL 3、 TLS
• RSA（鍵長4096ビットまで）
• HTTPS
  

■ 未対応の技術

　一方、iPhone版Safariでは次の技術は使えないので注意が必要です。

• JavaScript でモーダルダイアログを表示する showModalDialog() や print() メソッド。ただし、window.open()、alert()、confirm()、prompt() メソッドは使える
• マウスオーバーイベント。iPhoneでは、マウスオーバーという操作自体がない
• hover スタイル。マウスオーバーがないので
• ツールティップ（によるtitle属性値表示など）。マウスオーバーがないので
• Javaアプレット
• Flash
• SVG
• XSLT
• プラグインのインストール
• カスタムX.509電子証明書
• WML
• ファイルアップロードおよびダウンロード

■ Webブラウザ判定

　通常のWebブラウザと同様に、ユーザーエージェント名からiPhone版Safariを判定できます。iPhone版Safariのユーザーエージェント文字列は、次のようなものになります。

Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543 Safari/419.3

　米アップルが提供している「Web Kit 判定スクリプト」を使えば、より簡単にiPhone版Safari（Mobile Safari）を判定できます。以下のページから「webkit_normal.zip」をダウンロードして解凍し、「WebKitDetect.js」をWebページに読み込ませます。

• 　Detecting WebKit with JavaScript

　そして次のファンクションを実行すれば、閲覧中のWebブラウザがiPhone版Safariかどうか、ブーリアンで返ってきます。

WebKitDetect.isMobile()

　これで、「trueが返ってきたらCSSをiPhone用に切り替える」といった仕組みを作ればよいでしょう。

■ フレームは避ける

　iPhone版Safariはフレームを用いたページを表示可能ですが、各フレーム内のスクロールバーは表示されません（そもそもiPhoneのUIにはスクロールバーはありません）。またフレームセットで指定した縦横サイズを無視して、各フレームが内容に応じてできるだけ広がろうとします。ドラッグ操作を行うと、すべてのフレームを含んだページ全体のスクロールとなり、個別にはスクロールできません。

　これらの理由から、iPhone向けWebアプリでは、フレームの使用は避けるべきです。ただしiframeであれば、2本指ドラッグでのスクロールが可能です。

■ 段組みやブロックを活用する

　iPhone版Safariが持つ独自機能で一番特徴的なのが、ダブルタップによるズームでしょう。iPhone版Safariでは、Webページが読み込まれると、まずページ全体を俯瞰（ふかん）できるように縮小表示されます。

　そしてページの中で任意の個所をダブルタップすると、そこを中心にコンテンツがズーム表示されます。もう一度ダブルタップすると、元の縮小表示に戻ります。これを繰り返すことで、ユーザーは小さなスクリーンでも素早く必要な情報を得ることができます。

画面2　まずは、Safariでページ全体を縮小表示

画面3　ダブルタップによってブロック幅に合わせてズーム

　ダブルタップによるズームは、次のような仕様で機能します。

• 画像（img）のダブルタップ：画像の横幅いっぱいにズーム
• 画像以外要素のダブルタップ：その要素を包含するブロック要素（div、ol、ul、table など）の横幅いっぱいにズーム

　そのため、例えば文章がページ幅いっぱいに流し込まれているようなページでは、ダブルタップしてもそれ以上拡大できないので、ユーザーはピンチ操作で任意の大きさに拡大して、それを横スクロールしながら読まなければいけません。

　一方、文章がdivを使った段組などで提示されていれば、ダブルタップした部分のdivの幅まで一気にズームされるので、読みやすくなります。

■ リソースの制約

　パソコンに比べてiPhoneは、メモリなどの内部リソースが小さいため、次のような制約があります。

• デコード後の GIF、PNG、TIFFといった画像は、2Mbytesまで
• デコード後のJPEG画像は、32Mbytesまで
• アニメーションGIFは、2Mbytesまで
• HTML、CSS、JavaScriptといった各リソースファイルは、10Mbytesまで
• JavaScriptの実行時間は、5秒まで
• JavaScriptのアロケーションは、10Mbytesまで
• 同時に開けるドキュメントは、8つまで

2/4

INDEX
iPhone向けWebアプリを作ろう
	Page1 Safari Web Content Guide for iPhoneを読み解く iPhoneへの最適化とは、UIを最適化すること iPhone Human Interface Guidelines
	Page2 Safari Web Content Guide for iPhone ・ Web標準に対応 ・ 未対応の技術 ・ Webブラウザ判定 ・ フレームは避ける ・ 段組みやブロックを活用する ・ リソースの制約
	Page3 ・ ビューポートの設定 ・ メタタグ／リキッドレイアウトとビューポート設定
	Page4 ・ スタイルシート ・ iPhone内のほかの機能を呼び出すリンク デバッグ

ご意見、ご感想は Smart＆Social 会議室へどうぞ

Smart＆Social フォーラム トップページへ