Travellers Tales

Apple 公式 iPhone ウェブ開発ページ

Apple が iPhone 用ウェブ開発ページを公開しました。（追記：Apple から日本語訳も出ました。）

WWDC 2007 で明らかになったのは¹、iPhone では API の公開や SDK の提供はなく、iPhone 用にアプリケーションを開発するには、ウェブアプリケーションとして提供するしかないということです。（追記：その後、2008年に SDK が提供されることになりました。）

WWDC 2007 のセッション内容には、“Developing Web Sites for iPhone”というものがありましたが、WWDC に参加していない外部の開発者にも、この度 iPhone 用ウェブ開発の詳細が公開されたというわけです。

Web Development for iPhone では「iPhone 用にウェブアプリケーションとコンテンツを最適化する (Optimizing Web Applications and Content for iPhone)」と題して、以下の2つが挙げられています。（追記：現在は iPhone Dev Center としてリニューアルされ、アクセスできる資料やサンプルコードがかなり増えています。）

1つ目は iPhone のウェブブラウザは Safari である以上、Safari 互換でなくてはならないということで、WebKit のサイトへリンクが張られています。

2つ目は iPhone に特化した部分で、iPhone 用の開発ガイドラインが公開されています。

以下では、その iPhone ウェブ開発ガイドラインの内容を見ていってみます（大雑把な日本語訳になっています）。

iPhone ウェブ開発ガイドライン日本語版

完訳ではなく概要ですので、詳細は原文に当たってください。（追記：Apple から正式に日本語訳²が出ました。）

以下、私家版の日本語訳の目次です：

1. Understand User-iPhone Interaction（iPhone の入力・操作法）
2. Use Standards and Tried-and-True Design Practices（ウェブ標準と絶対確実なデザイン手法の使用）
3. Integrate with Phone, Mail, and Maps（電話、メール、地図との統合）
4. Optimize for Page Readability（ウェブページを読みやすいように最適化）
5. Ensure a Great Audio and Video Experience（確実な音声・ビデオ再生）
6. Know What Safari Supports on iPhone（iPhone 上の Safari がサポートしているもの）
7. Connect With Web Developers（ウェブ開発者へのリソース）

iPhone の入力・操作法 (Understand User-iPhone Interaction)

入力方法を理解しましょう (Know the Input Device)

ジェスチャー	結果
ダブルタップ（二度叩く）	コンテンツのあるブロックの中心へズームイン
触って指をそのまま置いておく	情報を表示するバブルを表示
ドラッグ	表示域の移動、またはパンする
フリック（画面をはじくようになでる）	（指の動く方向によって）スクロールアップ・スクロールダウン
ピンチオープン（つまんで広げる）	ズームイン
ピンチクローズ（つまんで狭める）	ズームアウト

ここでは、入力デバイスが、マウスではなく、2本の指であるということに注意すべき旨が書かれています。例えば、以下のようなことが挙げられています。

• コピー＆ペースト、ドラッグ＆ドロップ、テキスト選択ができない
• 指の幅があるので、リンクが狭く隣り合っていると、うまくリンクを選べない

ウインドウがないことを考慮しましょう (Think Windowless)

ウインドウというものがないため、ウインドウのサイズは変えられないし、スクロールバーがありません。

ダブルタップ操作を考えてデザインしましょう (Design for Double Tap)

iPhone は、ダブルタップで DIV、OL、UL、TABLE のようなブロック要素やイメージ要素を拡大します。そのためカラムを使っているようなレイアウトが望ましく、幅の広いテキストブロックはダブルタップしても拡大されないため、iPhone 用には避けるべきとされています。

扱えるイベントを把握しましょう (Know Which Events You Can Handle)

iPhone はイベントをサポートしていますが、コンテンツの回転やズームではイベントが発生しません。

ウェブ標準と絶対確実なデザイン手法の使用 (Use Standards and Tried-and-True Design Practices)

ウェブ標準に従いましょう (Stick With Standards)

iPhone 用 Safari は Web Kit を使用し、以下のようなウェブ標準をサポートしています。

• HTML 4.01
• XHTML 1.0
• CSS 2.1 および部分的に CSS 3.xx も
• JavaScript 1.4 (DOM のサポートを含む)
• AJAX テクノロジー (XMLHTTPRequest を含む)

iPhone 用 Safari は、プロキシーでもクライアント側でもコード変換はサポートしません。また、WML、XHTML mobile プロファイル、.mobi ドメインもサポートしません。

ADC Reference Library には Safari での開発に役立つ様々なドキュメントがあります：

• JavaScript Coding Guidelines for Mac OS X（日本語訳）
• Safari CSS Reference（日本語訳）
• Safari HTML Reference
• Safari JavaScript Reference（日本語訳）
• Web Kit DOM Programming Topics（日本語訳）
• Dynamic HTML and XML: The XMLHttpRequest Object（日本語訳）
• Safari FAQ（日本語訳）

Follow Established Web Design Practices

以下のようなガイドラインに従ったウェブデザインを行っていれば、iPhone での表示もうまくいきやすいです。

• HTML、CSS、JavaScript が分離されている
• きちんと構造化された valid な HTML になっている
• イメージ要素のサイズを正しく指定する（10 x 10 のイメージ要素に 100 x 100 のイメージを置かない）
• 背景イメージは小さなものを並べて使用し、大きなイメージを使わない
• フレームセットを使わない
• カラムとブロックを使う
• 必要なリソースのみを含める（EDGE ネットワークは遅いことに注意。不要な CSS や JavaScript を読まない）

より詳しい情報は、以下を参照してください：

Web Page Development: Best Practices（日本語訳）

電話、メール、地図との統合 (Integrate with Phone, Mail, and Maps)

電話リンク

<a href="tel:1-408-555-5555">1-408-555-5555</a>

メールリンク

通常のメールアドレスのリンクを同じです。iPhone 内蔵のメールで新規メールが作られます。

<a href="mailto:frank@wwdcdemo.example.com">John Frank</a>

Google マップリンク

以下は1ヶ所、Cupertino を示す例です。（Cupertino は Apple 本社のある場所）

<a href="http://maps.google.com/maps?q=cupertino">Cupertino</a>

以下は、2ヶ所、San Francisco と Cupertino の間のルートを示す例です。

<a href="http://maps.google.com/maps?daddr=San+Francisco,+CA&saddr=cupertino">Directions</a>

ウェブページを読みやすいように最適化 (Optimize for Page Readability)

Know Where Your Pages Are Rendering

以下は iPhone 上の Safari のユーザエージェント (user agent) です。

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

プラットフォームは、

(iPhone; U; CPU like Mac OS X; en)

バージョンは、

Version/3.0 Mobile/1A543a Safari/419.3

になります。バージョンの (Version/3.0) は、他のプラットフォーム（Mac や Windows）の Safari と共通です。

ユーザエージェントやオブジェクト検出についてのより詳しい情報は、以下を参照してください：

• http://trac.webkit.org/projects/webkit/wiki/DetectingWebKit
• http://developer.apple.com/internet/webcontent/objectdetection.html
• http://developer.apple.com/internet/safari/faq.html#anchor2（日本語訳）

iPhone 用スタイルシートを提供しましょう (Specify an iPhone Style Sheet)

Safari on iPhone の画面サイズに特化したスタイルシートを提供することができます。

screen と一緒に only を使うことによって、他のデバイスに影響を及ぼさずに iPhone 用の CSS を用意できます：

<link media="only screen and (max-device-width: 480px)"
    href="iPhone.css" type="text/css" rel="stylesheet" />

古いブラウザは only キーワードを無視するので、iPhone 用スタイルシートを読み込まないでしょう。iPhone 以外のためのスタイルシートを指定する場合は以下のような表記を使ってください：

<link media="screen and (min-device-width: 481px)"
    href="not-small-device.css" type="text/css" rel="stylesheet" />

より詳しい情報に付いては、以下を参照してください：

• http://www.w3.org/TR/css3-mediaqueries/

Lay Out Content for iPhone Viewport

通常、表示域 (viewport) はウインドウサイズによって決まりますが、iPhone には、いわゆるウインドウはないので、viewport は iPhone の表示サイズになります。ユーザは、画面を回転させたり、ダブルタップやピンチジェスチャー（指2本でつまんで広げるような動作）によって拡大させたりすることになります。

viewport は、スケール（拡大率）と幅という属性を持ちます。ウェブページが表示されるときは、iPhone の画面に合わせてスケールされます。viewport の幅は 980 ピクセルに設定されます。（つまり、980px のウインドウでブラウズしている状態。）この幅は viewport メタタグを使って指定することもできます。また、viewport メタタグによって、ユーザがコンテンツの拡大率を変えることができなくするように制御することもできます。

以下は viewport meta tag の属性です。すべてを設定する必要はありません。

• width：デフォルトの幅は 980、範囲は [200, 10,000]
• height：デフォルトの高さは、width と縦横比から計算され、範囲は [223, 10,000]
• initial-scale：ページが最初に読み込まれるときの拡大率で、デフォルトではページを画面に合わせる。範囲は [minimum-scale, maximum-scale]（ユーザが後から拡大率を変えられることに留意）
• user-scalable：ユーザが拡大を行えるかどうか。デフォルトは yes
• minimum-scale：拡大率の下限。デフォルトは 0.25 で、範囲は [>0, 10]
• maximum-scale：拡大率の上限。デフォルトは 1.6 で、範囲は [>0, 10]

以下に viewport meta tag の例をいくつか挙げます。

<meta name="viewport" content="width = 320" />
<meta name="viewport" content="initial-scale=2.3, user-scalable=no" />

ウェブアプリケーションに適した viewport 幅は 320px です。拡大率が 1 になり、landscape（横長）モードにしたときもレイアウトが変わりません。（iPhone のディスプレイサイズは、320 x 480 pixel です。³）

テキストサイズを調整して可読性を保ちましょう (Adjust Text Size for Readability)

CSS の -webkit-text-size-adjust 属性を設定することによって、Safari デフォルトの文字サイズ調整を変更することができます。webkit-text-size-adjust は、以下のような値を持ちます。

• none: <body style="-webkit-text-size-adjust:none">
• auto: <table style="-webkit-text-size-adjust:auto">
• パーセント指定: <div style="-webkit-text-size-adjust:200%">

Optimize Images

Safari on iPhone は以下のイメージフォーマットをサポートします。

• GIF
• PNG
• TIFF
• JPG

GIF、PNG、TIFF はデコードされたサイズで 8MB までです。少なくとも、幅 x 高さ x 4 が 8MB 未満になることを確認しましょう。アニメーション GIF は、デコードされたサイズで 2MB までです。大きいサイズのアニメーション GIF は、最初のフレームだけが表示されます。

サブサンプリングにより JPG はファイルサイズで 128MB まで可能です。2MB 以上の JPEG はサブサンプリングされます（画素が間引かれて表示される）。

画像を含む各リソースは、最大 10MB までの制限があります。画像はエンコードされたサイズで 10MB までです。詳しくは、Resource and Execution Limits を参照してください。

Lay Out Forms Appropriately

フォームを使うときは、ソフトウェアキーボードや他のコントロール類によって、表示領域が変わることに注意してデザインして下さい。

• Status bar: 高さ 20px
• URL text field: 高さ 60px
• Form assistant: 高さ 44px
• Keyboard: 縦長表示時の高さ 216px、横長表示時の高さ 180px
• Button bar: 縦長表示時の高さ 44px、横長表示時の高さ 32px

Design Custom Form Controls Appropriately

フォームのコントロール（ボタンやフィールド）は、解像度に依存しませんが、iPhone では特別に CSS で制御できます。

Safari on iPhone は、ファイルアップロードをサポートしていないので、<input type="file"> は disabled 状態で表示されます。

Use Appropriate Metrics

• Edge to Edge Design （角張ったデザイン）

  シンプルなリスト表示に（スペースを最大に生かす）

  

  • 全体サイズ：縦 356px × 横 320px
  • セルのサイズ：縦 44px × 横 320px （セルには区切りの下線含む）
  • テキスト配置：左端から 10px、セルの下端から 14px
  • 色：文字色 黒・背景色 白
  • フォント：Helvetica 20pt（太字をデフォルト、重要度が低いものは標準の太さ）
  • 区切り線の色： R=217, G=217, B=217 (#d9d9d9)
  • コントロール：右側から 10px、上下は中央配置、高さ 29px で 7°の角丸長方形、Helvetica 12 pt

• Rounded Rectangle Design （角丸長方形デザイン）

  階層を持つリスト（2階層までが望ましい）

  

  • 全体サイズ：縦 356px × 横 320px
  • ラベルのフォント：Helvetica 17pt・太字
  • ラベルの色：文字色 R=76, G=86, B=108 (#4c566c)・背景色 R=197, G=204, B=211 (#c5ccd3)
  • 角丸長方形：横 300px、10°の角丸
  • 角丸長方形の枠：R=217, G=217, B=217 (#d9d9d9)
  • 角丸長方形内フォント：Helvetica 17pt（太字をデフォルト、重要度が低いものは標準の太さ）
  • 角丸長方形内の色：文字色 黒・背景色 白
  • 角丸長方形内の配置：左右両端から 10px、セルの下端から 14px

確実な音声・ビデオ再生 (Ensure a Great Audio and Video Experience)

Wi-Fi と EDGE 用にビデオエンコーディングをしましょう (Encode Video for Wi-Fi and EDGE)

QuickTime Pro v7.2 の「書き出し...」コマンドを用いて、以下のような iPhone 用ビデオコンテンツを書き出すことができます：

• ムービー から iPhone：Wi-Fi 用
• ムービー から iPhone（セルラー）：EDGE ネットワーク用

QuickTime Pro v7.1.6 以前では、以下のような書き出しと設定が利用できます：

• 「ムービー から MPEG-4」書き出し（Wi-Fi 用）

  • ファイルフォーマット：MP4
  • ビデオ設定：データレートを「900」キロビット／秒、ビデオフォーマットを「H.264」、イメージサイズを「480 x 360」、フレームレートを「現在のサイズ」、「指定のアスペクト比を保持」にチェックし「サイズ内に収める」を選択
  • H.264ビデオ・オプション：プロファイルを「ベースライン」に制限、エンコーディンモードで「高速エンコード（1 回実行）」 (Single-pass) を選択
  • オーディオ設定：データレートを「128 kbps」、オーディオフォーマットを「AAC-LC」

• 「ムービー から 3G」書き出し（EDGE 用）

  • ファイルフォーマット：3GPP
  • ビデオ設定：データレートを「64」キロビット／秒、ビデオフォーマットを「H.264」、イメージサイズを「176 x 144」、フレームレートを「10」または「15」、「指定のアスペクト比を保持」にチェックし「レターボックス」または「切り取る」を選択
  • H.264ビデオ・オプション：プロファイルを「ベースライン」に制限、エンコーディンモードで「高速エンコード（1 回実行）」 (Single-pass) を選択
  • オーディオ設定：データレートを「16 kbps」、オーディオフォーマットを「AAC-LC」

「ストリーミングを使用」はチェックしないでください。iPhone は RTP/RTSP を用いたストリーミングは扱えません。

ムービーの画面サイズを適切な大きさにしましょう (Size Movies Appropriately)

横長 (landscape) 時には、iPhone の画面は 480px × 320px です。

ユーザは、scaled-to-fit（上下に黒帯が入る）と full-screen（中心寄せでクロップされる）を簡単に切り替えることができます。

コンテンツは縦横比を保ちつつ、480 x 360 の長方形より小さくすべきです。480 x 360 は、フルスクリーンビューモードにちょうど合うので、アスペクト比 4:3 のコンテンツに適しています。

Don't Let Bit Rate Stall Your Movie

ビットレート不足で再生が止まってしまうことは、ユーザの受け止め方に致命的な影響を及ぼします。

サポートされたムービーフォーマットを使いましょう (Use Supported Movie Formats)

以下のフォーマットがサポートされています：

• H.264 Baseline Profile Level 3.0 ビデオ（30 fps で 640 x 480 まで）。Baseline プロファイルでは B フレームがサポートされていないことに注意。
• MPEG-4 Part 2 video (Simple Profile)
• AAC-LC オーディオ（48 kHz まで）
• .mov、.mp4、.m4v、.3gp ファイルフォーマット
• iPod で再生できるすべての動画・音楽ファイル

リファレンスムービーを作りましょう (Create a Reference Movie)

MakeRefMovie ツールは下記からダウンロードできます：

http://developer.apple.com/quicktime/quicktimeintro/tools/index.html

サーバを設定しましょう (Configure Your Server)

iPhone 用のメディアファイルをホストする HTTP サーバは、byte-range リクエストをサポートしていなければなりません。そのことにより、ランダム再生が可能になります。（byte-range サポートは、content-range または partial-range サポートとも呼ばれます。）

サーバが byte-range をサポートしているかわからない時は、Mac OS X の場合、ターミナル (Terminal.app) を開き、curl コマンドを使って、サーバからファイルの一部分をダウンロードしてみてください。

curl --range 0-99 http://example.com/test.mov -o /dev/null

この例で、100 バイトダウンロードできたなら、byte-range リクエストを正しくサポートしているサーバです。ファイル全体をダウンロードしてしまった場合は、サーバをアップデートする必要があるでしょう。curl の詳細については、Mac OS X Man Pages を参照してください。

HTTP サーバが以下の表に示されるように、動画ファイルの拡張子に対して正しい MIME タイプを送っていることを確認しましょう。

ファイル拡張子	MIME タイプ
.mov	video/quicktime
.mp4	video/mp4
.m4v	video/x-m4v
.3gp	video/3gpp

iPhone は 2GB 以上の動画をサポートしています。ただ、古いサーバの中にはこのような大きなファイルを扱えないものがあります。Apache 2 は 2GB 以上のファイルダウンロードをサポートしています。

ウェブページにムービーを埋め込みましょう (Embed Movies in Webpages)

iPhone は動画再生モードに入らないと、ビデオをデコードしません。つまり、ウェブページにビデオを埋め込んだ場合、ユーザは再生ボタンを押すまでは、QuickTime ロゴの入った灰色の長方形を見ることになります。

プレビュー画像を提供したい場合は、以下のように SRC に画像、HREF に動画、TYPE にメディアの MIME タイプ、TARGET に "myself" を指定してください。

<EMBED SRC="poster.jpg" HREF="movie.m4v" TYPE="video/x-m4v" TARGET="myself" SCALE="1" ...>

デスクトップウェブブラウザでは、ユーザがクリックするまでこのイメージが表示され、クリックされるとムービーに替わります。

QuickTime をウェブページに含める方法については、Including QuickTime In A Web Page を参照してください。

iPhone 上の Safari がサポートしているもの (Know What Safari Supports on iPhone)

Safari on iPhone は、コンピュータデスクトップ上の Safari と同じ Web Kit エンジンを使っていますが、利用できない機能もあることに注意し、必要ならば回避策を取りましょう。

リソースの制限と実行の制限 (Resource and Execution Limits)

HTML、CSS、JavaScript、画像、その他の非ストリーミングメディアファイルのようなダウンロードされる各リソースは、最大 10MB までの制限があります。画像はエンコードされたサイズで 10MB までです。デコードされた画像サイズにも制限があります。詳しくは、[Optimize Images][#iPhoneDev_Optimize_Images] を参照してください。

JavaScript の実行は 5秒までです（各トップレベルのエントリから）。5秒を越えるとタイムアウトし、例外 (exception ) が発生します。

不必要な JavaScript は貴重なメモリを浪費するので気をつけましょう。

Supported Rich Media MIME Types

Safari on iPhone は、以下のリッチメディア MIME タイプをサポートしてます。

MIME タイプ	Description	Extensions
audio/aiff	AIFF audio	aiff, aif, aifc, cdda
audio/x-mp3	MP3 audio	mp3, swa
audio/x-m4a	AAC audio	m4a
video/x-m4v	Video	m4v
video/3gpp	3GPP media	3gp, 3gpp
audio/x-m4b	AAC audio book	m4b
audio/mpeg	MPEG audio	mpeg, mpg, mp3, swa
audio/x-mpeg	MPEG audio	mpeg, mpg, mp3, swa
audio/x-wav	WAVE audio	wav, bwf
audio/amr	AMR audio	amr
audio/3gpp	3GPP media	3gp, 3gpp
audio/x-m4p	AAC audio (protected)	m4p
audio/x-aiff	AIFF audio	aiff, aif, aifc, cdda
audio/mpeg3	MP3 audio	mp3, swa
audio/mp3	MP3 audio	mp3, swa
video/quicktime	QuickTime Movie	mov, qt, mov, qt, mqv
audio/x-mpeg3	MP3 audio	mp3, swa
video/3gpp2	3GPP2 media	3g2, 3gp2
video/mp4	MPEG-4 media	mp4
audio/mp4	MPEG-4 media	mp4
audio/wav	WAVE audio	wav, bwf
audio/3gpp2	3GPP2 media	3g2, 3gp2

PDF Documents

iPhone は PDF 書類を表示できます。回転し、横長表示にすることも可能です。

サポートされていない技術 (Unsupported Technologies)

iPhone は Flash と Java をサポートしません。Flash をダウンロードするように促す表示も避けましょう。

Differences Between Safari on iPhone and Safari on the Computer Desktop

Safari on iPhone とコンピュータデスクトップ上の Safari には、いくつか異なる点があります。

ポップアップウインドウは、iPhone ではデフォルトでブロックされています。これは環境設定で変更することができます。

Safari on iPhone は以下をサポートしています：

• Cookies
• ユーザによるウインドウオープン。page view で、最大 8ページ（8つのウインドウに相当）

Safari on iPhone は、以下をサポートしていません：

• window.showModalDialog()
• Mouse-over イベント
• Hover スタイル
• ツールチップ
• Java アプレット
• Flash
• Plug-in のインストール
• Custom x.509 証明書

セキュリティ (Security)

iPhone は SSL 2、SSL 3、TLS をサポートします。

RSA 鍵（4096 ビットまで）がサポートされています。

Diffie-Hellman プロトコルおよび DSA 鍵、自己署名証明書は、iPhone では利用できません。

ウェブ開発者のためのリソース (Connect With Web Developers)

その他ウェブ上のリソースやメーリングリストの案内です。

World Wide Web コンソーシアム、Web Hypertext Application Technology Group および HTML5：

• http://www.w3.org/html/wg/
• http://www.whatwg.org/

Web Kit コミュニティ：

• The Web Kit Open Source Project

メーリングリスト：

• Webkitsdk-dev Info Page
• Web Development Discusssion List

その他日本語による iPhone/iPod touch 用ウェブサイト開発関連資料