Safari Web Content Guide for iPhoneを読み解く

iPhone向けWebアプリを作ろう


ソシオメディア株式会社
上野学
2008/5/29

Safari Web Content Guide for iPhone

- PR -

 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ページに読み込ませます。

 そして次のファンクションを実行すれば、閲覧中の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 フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Smart & Social 記事ランキング

本日 月間
ソリューションFLASH