iPhoneおよびiPod touch版Safariでは、コンピュータデスクトップのSafariと同じWeb Kitエンジンが使用されています。このSafari Web Kitエンジンにより、iPhoneユーザを惹きつけ楽しませる高度なWeb 2.0のサイトやアプリケーションの開発ができます。iPhone上でひときわ光る、優れたユーザ体験を約束するWebアプリケーションを設計するには、次のことをするとよいでしょう。
- iPhoneの機能を理解する
- すでに確立されているWebのデザインプラクティスに従う
- iPhone固有の設計原則を取り入れる
以下のガイドラインは、iPhone向けWebコンテンツやWebベースのアプリケーションを用意するのに役立ちます。熟練のWebデベロッパであれば、若干の調整を行うだけでiPhone上でも優れた、最も効果的に機能するサイトを確実に作成できるでしょう。iPhoneに特有のガイドラインだけを参照すれば十分です。Web開発を最近始めたばかりであれば、Web標準およびWebデザインの確立されたベストプラクティスを確実に理解してからiPhone固有のガイドラインに従うのがよいでしょう。
ご注意： ユーザがiPhone専用アプリケーションへのリンクをタップする場合を除き、iPhone上のSafariは、iPhoneおよびiPod touch上で同じく動作します。
ユーザとiPhoneの対話を理解する
iPhoneは、コンピュータと同じように使えるものだと考えたくなるかもしれません。しかし、そうではありません。ユーザによるiPhoneとの対話を独特なものにするいくつかの相違点があります。この文書で説明するガイドラインに沿ってWebコンテンツを設計する際には、それらに留意しておく必要があります。
入力デバイスを知る
iPhoneユーザは、それぞれ自分の入力デバイスを用意します。すなわち、2本の指です。指には、細くて先がとがったタイプから太くて丸いタイプまで、さまざまな大きさや形状があります。しかしWebページは、指イベントではなくマウスイベントを受け取るように設計されています。既存のページは、入力デバイスが指であっても、想定どおりに動作し続ける必要があります。
指には、マウスが制御するポインタのような精度はありません。また、マウスと異なる機能もあります。たとえば、マウスはクリックできるのに対し、指はつまむ動作ができます。指とマウスとの相違点は、Webページへのイベントの伝わり方やその操作対象領域に影響があります。これらについては「処理できるイベントを知る」と「ダブルタップを考慮して設計する」で説明しています。
次の表に、指を入力デバイスとして使用した操作とその結果を示します。
| ジェスチャ | 結果 |
|---|---|
| ダブルタップ | コンテンツブロックを拡大してセンタリング |
| タッチアンドホールド | インフォメーションバブルの表示 |
| ドラッグ | ビューポートを移動、またはパン |
| フリック（はじく） | 指の動く方向に応じてスクロールアップ、スクロールダウン |
| ピンチオープン（つまんで開く） | ズームイン |
| ピンチクローズ（つまんで閉じる） | ズームアウト |
そのほかに、入力デバイスとしての指について、以下に留意しておく必要があります。
- カット、ペースト、ドラッグアンドドロップ、およびテキスト選択などの操作を実行するジェスチャはありません。
- 指には幅があるため、ページ上のリンク密度は制限されます。リンクが互いに近すぎると、ユーザは1つのリンクを選択できません。
ウインドウは存在しない
コンピュータのユーザは、頻繁にWebブラウザのウインドウをリサイズしたり移動したりします。iPhone版Safariにはウインドウがなく、あるのは固定のビューポートです。そのため、iPhoneにはスクロールバーやリサイズコントロールがありません。その代わり、iPhoneがコンテンツを自動的に調節して拡大縮小し、前述のジェスチャで操作することで、ユーザがコンテンツ内をズームインして特定の領域に焦点を合わせられるようにしています。これらについては、「iPhoneのビューポート向けにコンテンツを配置する」と「読みやすいテキストサイズに調整する」で説明しています。
ダブルタップを考慮して設計する
ユーザがページでダブルタップすると、iPhone版Safariはダブルタップされた要素を見て、一番近いブロック（DIV、OL、UI、TABLEなどの要素によって識別されます）か、または画像要素(IMG)の祖先を検索します。見つかった要素がブロックであれは、iPhone版Safariはビューポートの幅に合わせてコンテンツを拡大表示し、センタリングします。画像であれば、iPhone版Safariは画像に合わせて拡大表示し、センタリングします。ブロックや画像がすでに拡大表示されている場合、iPhone版Safariは縮小表示します。
既存のページがあれば、レイアウト以外にサイトに変更を加える必要はありません。レイアウトとして最適なのは、ページ全体が単純なブロック構造のものです。望ましいのは、段組を使用して処理しやすい単位にコンテンツを編成することです。
幅の広いテキストブロックは、ユーザが指でページを前後にスクロールせずにコンテンツを閲覧できるようには拡大表示できないため、避けるようにします。
処理できるイベントを知る
iPhoneのジェスチャによって生じるイベントについては、「Safari Web Content Guide for iPhone」の「処理イベント」をご参照ください。ユーザが縦長表示から横長表示（または、その逆）に切り替える際に生じるonorientationイベントに関する記述があります。
Web標準および実証済みのデザインプラクティスを使用する
電話、電子メール、マップとYouTubeを統合する
iPhone版Safariは、ほかのiPhoneアプリケーションとシームレスに融合することで、豊かなユーザ体験を提供できます。ほかの機能にアクセスするには、以下の種類のリンク要素をWebページに追加します。
-
電話リンク
電話番号へのリンクは次のような形式です。
<a href="tel:1-408-555-5555">1-408-555-5555</a>
電話番号は、リンクの中になければ、電話番号の形式になっている番号としてSafariによってすべて自動的に電話リンクに変換されます。電話番号として解釈される可能性があるけれども実際にはそうではない一連の番号がページに含まれているような場合は、この機能をオフに設定できます。
-
電子メールリンクは、組み込みのメール作成画面を開きます。
<a href="mailto:frank@wwdcdemo.example.com">John Frank</a>
-
Googleマップリンクは、公開のWebサイト経由で接続を試みるのではなく、組み込みのGoogleクライアントを開きます。
次のリンクは、マップ上のある地点を開きます（カリフォルニア州のクバチーノ）。
<a href="http://maps.google.com/maps?q=cupertino">Cupertino</a>
次のリンクは、サンフランシスコとクパチーノの2地点間の案内を表示します。
<a href="http://maps.google.com/maps?daddr=San+Francisco,+CA&saddr=cupertino">Directions</a>
YouTubeリンクの説明については、「Safari Web Content Guide for iPhone」の「Using iPhone Application Links」をご参照ください。
ユーザは、指を使ってリンクを選択することを思い出してください。ページ上のリンクが互いに近すぎると、ユーザが意図したリンクを選択できない可能性があります。
ページを読みやすくするために最適化する
コンテンツのレイアウト、テキストサイズの調整、画像の最適化などについて簡単な方策を取り入れることで、iPhone上のWebアプリケーションを見た目にもすばらしく、効果的に機能するものにできます。
ページのレンダリング先を知る
iPhone向けSafariのユーザエージェント文字列は、ほかのプラットフォーム上のSafariのユーザエージェント文字列に似ていますが2つの点で異なります。前者には、iPhoneのプラットフォーム名とモバイルバージョン番号が含まれます。iPod touch上のSafariのプラットフォーム名はiPodです。
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/XX (KHTML, like Gecko) Version/ZZ Mobile/WW Safari/YY
それぞれの値として、「XX」はSafariで使用されるwebテクノロジーフレームワークのビルドバージョン、「YY」はSafariアプリケーションのビルドバージョンです。iPhone上のSafari 3では、ユーザエージェント文字列に「Mobile/WW」という追加部分が含まれ、「WW」はオペレーティングシステムバージョン番号です。すべてのプラットフォーム上のSafari 3以降では、ユーザエージェント文字列に「Version/ZZ」という追加部分が含まれ、「ZZ」はSafariのファミリーバージョン番号です。
プラットフォーム文字列の例は、(iPhone; U; CPU like Mac OS X; en)です。
バージョン文字列の例は、Version/3.0 Mobile/1A543a Safari/419.3です。
マーケティングバージョンの(Version/3.0)は、ほかのプラットフォームのSafariにも含まれており、これを使って、すべてのプラットフォームについて横断的に使用統計を追跡できます。
ユーザエージェントとオブジェクト検出の詳細については以下を参照してください。
- http://trac.webkit.org/projects/webkit/wiki/DetectingWebKit
- http://developer.apple.com/internet/webcontent/objectdetection.html
- http://developer.apple.com/jp/internet/safari/faq.html#anchor2
iPhoneスタイルシートを指定する
Webデザイナは多くの場合、サイトを設計する際に特定のウインドウサイズを仮定します。そのような方法を取るのであれば、iPhone版Safariに合うサイズも用意するとよいでしょう。iPhone（に限らず、ほかのデバイスでも）に対応した条件分岐CSSも指定するべきです。
iPhoneに対応したスタイルシートを提供することで、Webページのスタイルを調整することができます。これは、CSS 3メディアクエリを使用すれば実現できます。print、handheld、およびscreenを含め、いくつかのタイプのクエリがあります。printおよびhandheldメディアクエリは、ハイエンドなコンテンツを提供しないため、iPhoneでは無視されます。そのため、使用する必要があるのはscreenクエリです。
iPhoneにのみ対応し、ほかのデバイスに影響しないスタイルシートを指定するには、次に示すようにonlyキーワードにscreenキーワードを組み合わせて使用します。
<link media="only screen and (max-device-width:480px)" href="small-device.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">
メディアクエリの詳細については、以下を参照してください。
Phoneのビューポート向けにコンテンツを配置する
ビューポート(viewport)は、Webページのコンテンツの配置やテキストの折り返し位置を決める矩形の領域です。デスクトップでは、ビューポートはウインドウのサイズによって決まります。ユーザは、ウインドウのサイズを変更することでビューポートのサイズを変更し、スクロールすることでWebページの別の領域を表示します。iPhone版Safariにはウインドウはありません。スクロールバーもサイズ変更ノブもありません。つまり、「ウインドウ」はiPhoneのスクリーンサイズに準じた固定のサイズです。ユーザは、パンすることでWebページのほかの部分を表示でき、ダブルタップやピンチジェスチャでズームインやズームアウトすることもできます。
iPhoneでこの機能を実現するために、ビューポートには縮尺（scale）と幅（width）と高さ（height）というプロパティがあります。最初にWebページが読み込まれると、SafariによってWebページの幅全体がiPhoneスクリーンの幅に合うように縮尺の初期値が設定されます。iPhone版Safariではまた、ほとんどのWebページの幅と同じ980ピクセルにビューポートの幅が設定されます。このデフォルト値がデベロッパのコンテンツに合わない場合、コンテンツの中でviewport metaタグを使用して、この値やビューポートのほかのプロパティも変更できます。
たとえば、Webページの幅が980ピクセル以下の場合、iPhoneでの縮尺が小さすぎます。そこで、ビューポートの幅をWebページの幅に合わせて設定します。コンテンツの幅はいつでもビューポートの幅よりも大きくできますが（その場合、ユーザがコンテンツのほかの部分を表示するためにパンする必要があります）、小さくすることはできません。縮尺の初期値のプロパティは、Webページの初回表示時の縮尺を制御するだけです。その後の縮尺は、ユーザのジェスチャで操作されます。コンテンツの拡大縮小をユーザにまかせたくない場合は、viewport metaタグを使用して、ユーザによるコンテンツの拡大縮小操作を無効にします。
以下にviewport metaタグのプロパティを示します。
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]です。
すべてのプロパティを設定する必要はありません。プロパティの一部だけを設定した場合、iPhone版Safariがほかの値を推測します。たとえば、縮尺を1.0に設定した場合、Safariでは幅が縦長表示の場合なら320ピクセル、横長表示の場合なら480ピクセルだと想定されます。したがって、幅を980ピクセルにして縮尺の初期値を1.0にするには、両方のプロパティを設定します。
以下に、viewport metaタグを使用した例を示します。
<meta name="viewport" content="width = 320" /> <meta name="viewport" content="initial-scale=2.3, user-scalable=no" />
デバイスの寸法を指定するには、320×480ではなく、device-widthおよびdevice-height 定数を使用してください。
Webアプリケーションに対して推奨するビューポートの幅は、device-widthです。その場合、Webアプリケーションが1.0の縮尺でレンダリングされ、表示を横向きに切り替えてもレイアウトが変わりません。
読みやすいテキストサイズに調整する
iPhone版Safariでは、テキストサイズが、ユーザがダブルタップしたあとに読みやすくなるように調整されます。ダブルタップすると、iPhone版Safariはテキストブロックの幅を取得し、ダブルタップ後の幅を特定します。iPhone版Safariは、その後レイアウトに適用する適切な乗数を決めます。
ときには、自動的に調整されたテキストサイズが理想的な結果でない場合もあります。たとえば、絶対位置にある要素のテキストは調整後にはビューポートからはみ出ることがあります。また、最適な表示を得るために若干の調整が必要なページもあります。こうした場合、テキストサイズ調整をオーバーライドすることができます。
Safariのデフォルトのテキストサイズ調整をオーバーライドするには、CSSの-webkit-text-size-adjustプロパティを使います。-webkit-text-size-adjustの値は、以下のとおりです。
- none:
<body style="-webkit-text-size-adjust:none"> - auto:
<table style="-webkit-text-size-adjust:auto"> - multiplier percentages:
<div style="-webkit-text-size-adjust:200%">
画像を最適化する
iPhone版Safariでは、次の画像フォーマットをサポートしています。
- GIF
- PNG
- TIFF
- JPG
GIF、PNG、およびTIFF画像は、デコードされた画像サイズで2Mピクセルまでです。そのため、かならずwidth * height &le 2 * 1024x1024になるようにします。アニメーションGIFのデコードされた画像サイズは2 MB未満にする必要があります。大きなサイズのアニメーションGIFの場合、表示されるのは最初のフレームだけです。
JPG画像は、サブサンプリングによりデコードするとピクセル数が16分の1にまでなるため、オリジナルサイズで最大32Mピクセルまで可能です。2Mピクセルよりも大きなJPG画像はサブサンプリングされます。つまり縮小サイズへデコードされます。JPGサブサンプリングによって、ユーザは最新のデジタルカメラから取り込んだ画像を見ることができます。
非常に大きな画像をページに含めると、iPhone版Safariでは小さなサイズに対応してページのレイアウトを変更する場合があります。最適な結果を得るためには、縮小したサイズの画像を提供すべきです。
画像のエンコード後のサイズも含め、リソースサイズの制限にも常に留意しましょう。「リソースと実行の制限」を参照してください。
フォームを適切に配置する
Webページでフォームを使用する場合、iPhoneでフォームを送信するために使用するキーボードやほかのコントロールのレイアウトを知っていると役に立ちます。Webコンテンツで使用できる領域は、キーボード表示の有無によって変わります。この領域を計算し、フォームを適切に設計する必要があります。
スクリーンの上部に表示されるステータスバーには、時計とWi-Fiインジケータが含まれています。URLのテキストフィールドは、ステータスバーの下に表示されます。キーボードは、フォームにテキストを入力するのに使用され、スクリーンの一番下に表示されます。フォームの編集時には、キーボードの上にフォームアシスタントが表示されます。ここには「Next」、「Previous」および「Done」ボタンがあります。ユーザは、「Next」ボタンおよび「Previous」ボタンをタップしてフォーム要素間を移動します。「Done」ボタンをタップするとキーボードが閉じます。ボタンバーには、戻る、進む、ブックマークおよびタブの各ボタンがあり、スクリーンの最下部に表示されます。キーボードが表示されていると、ボタンバーは表示されません。Webページが表示されるのは、URLテキストフィールドの下からボタンバーまたはキーボードの上までです。
iPhoneコントロールの高さは次のとおりです。
- ステータスバー：高さ20ピクセル
- URLテキストフィールド：高さ60ピクセル
- フォームアシスタント：高さ44ピクセル
- キーボード：縦長表示時の高さ216ピクセル、横長表示時の高さ180ピクセル
- ボタンバー：縦長表示時の高さ44ピクセル、横長表示時の高さ32ピクセル
上記を参考に、キーボードの表示／非表示に合わせてWebコンテンツに使用できる領域を計算してください。たとえば、キーボードが非表示の場合、Webコンテンツに使用できる高さは、480-20-60-44=356となります。そのため、コンテンツは縦方向の場合、320×356ピクセルの範囲に合わせて設計する必要があります。キーボードが表示されている場合、使用できる領域は320×140ピクセルです。
iPhone版Safariがフォームコントロールを表示する方法についての詳細は、「iPhone Human Interface Guidelines」の「Accommodate the Built-in Form Interface」をご参照ください。
カスタムのフォームコントロールを適切に設計する
詳細については 、「iPhone Human Interface Guidelines」の「Metrics, Layout Guidelines, and Tips」をご参照ください。
リストレイアウトに適切なメトリック情報を使用する
Webページはしばしば、RSSフィードのリストのように、情報をリスト形式で表示します。コンテンツの構成に応じて、すべての項目を同一サイズの行として表示する単純なリスト配置を使用したり、項目のサブセットをグループ化する角丸の矩形を使用したレイアウトにしたりもできます。項目をグループ化するとコンテンツを階層化して表示できますが、1つのレイアウトで2レベルを超える階層の表示は避けるべきです。ネストが深い項目は、ユーザにとって選択が難しいからです。リストレイアウトに関する詳細およびその他のデザインガイドラインについては、「iPhone Human Interface Guidelines」の 「Metrics, Layout Guidelines, and Tips」をご参照ください。
単純な項目リストを表示するには、コンテンツで最大限の領域を利用できる、境界が接したデザインを使用します。各行（セル）はそれぞれ、高さ44ピクセル（セルの一番下の線も含む）で幅320ピクセルです。テキストはすべて、黒色のHelvetica、20ポイントにします。デフォルトでは、テキストはなるべく読みやすくするために太字にするべきですが、あまり重要でないコンテンツには標準フォントを使うこともできます。リストの背景の塗りつぶしの色は白で、項目間の区切り線はR=217、G=217、B=217です。テキストは左端から10ピクセル内側に、セルの下端の線から14ピクセル内側に設定します。
コントロールを挿入する必要がある場合、高さ29ピクセルで角の丸みを7度に設定した角丸矩形ボタンをデザインします。ボタン上に表示するテキストにはHelvetica、12ポイントを使用します。ボタンは、セルの右端から10ピクセルに配置し、垂直方向では中心に配置します。
グループ分けした項目を表示するには、角丸矩形のデザインを使います。角丸矩形はそれぞれ、角の丸さが10度、幅が300ピクセル、背景の塗りつぶしが白です。角丸矩形の端と、その内側のセル間の水平な区切り線はR=217、G=217、B=217にします。このデザインでは、コンテンツで利用できるスペースが若干少ないため、テキストはすべて、黒色のHelvetica、17ポイントを使用します。境界が接するデザインの場合と同様に、デフォルトで太字のフォントを使用するべきですが、二次的なコンテンツには標準フォントを使用できます。角丸矩形のテキストは、左端から内側に10ピクセル、セルの下端から14ピクセルに配置します。
角丸矩形は、iPhoneのスクリーンの左右両端から内側に10ピクセル、ボタンバーの上端から17ピクセルに配置します。
このデザインにすることで、角丸矩形の間にテキストを表示することができ、コンテンツのラベルとして使用できます。このテキストは、太字のHelvetica、17ポイントにします。ただし、テキストは黒色ではなくR=76、G=86、B=108にします。角丸矩形の背後の領域のサイズは、幅320ピクセルで高さ356ピクセルです。背景の塗りつぶしの色はR=197、G=204、B=211です。
豊かなオーディオ体験とビデオ体験を実現する
iPhoneでは、EDGEおよびWi-Fiネットワーク経由のHTTPを使用してムービーやオーディオをストリーミングします。最良のWebオーディオ体験やWebビデオ体験をiPhoneで実現するには、次のようにします。
- EDGEおよびWi-Fiネットワークに合った適切なサイズとビットレートでH.264/AACをエンコードする。「Wi-FiおよびEDGE用にビデオをエンコードする」を参照してください。
- リファレンスムービーを使用して、現在のネットワーク接続に対して最適なバージョンのコンテンツをiPhoneが自動的にストリームできるようにする。「リファレンスムービーを作成する」を参照してください。
- メディアファイルをホストしているHTTPサーバが、必ずバイト範囲要求をサポートするようにする。「サーバーを設定する」を参照してください。
- 現在のベストプラクティスに従ってWebページにムービーを組み込む。
- Webページに組み込んだムービーのプレビューを表示するには、（ムービーのポスターフレームではなく）ポスター用JPEGを使用する。Webページにムービーを組み込む」を参照してください。
- サイトでカスタムのメディアプレーヤーを提供している場合は、メディアファイルへの直接リンクも提供する。iPhoneユーザは、そのリンクをたどって直接再生を実行できます。
- ユーザにFlashをダウンロードさせるJavaScriptの警告は表示しないようにする。Flashもダウンロードもサポートされていません。
- iPhoneでのビデオの再生に、JavaScriptムービーコントロールは使用しないようにする。iPhoneでは、独自のコントロールが提供されます。
- 「ムービーからiPhone」は、Wi-Fi用ムービーを作成する。
- 「ムービーからiPhone（セルラー）」は、EDGE用ムービーを作成する。
- 次の設定で、「ムービーからMPEG-4」エクスポータを使用してWi-Fi用ムービーを作成する。
H.264ビデオオプションでは、エンコーダがBaselineプロファイルを使用するように設定し、「詳細ビデオ設定」ダイアログでは「高速エンコード（1回実行）」エンコードを選択します。
ビデオ設定：900キロビット/秒、H.264、480×360、フレームレート：現在のサイズ、指定のアスペクト比を保持：サイズ内に収める
オーディオ設定：128キロビット、AAC-LC
.mp4 file - 次の設定で、「ムービーから3G」エクスポータを使用してEDGE用ムービーを作成する。
ビデオ設定：64キロビット、H.264、176×144、フレームレート：10または15、指定のアスペクト比を保持：レターボックスまたは切り取る
オーディオ設定：16キロビット、AAC-LC
.3gp file - H.264 BaselineプロファイルLevel 3.0ビデオ、30 fpsで640×480まで。Baselineプロファイルでは、Bフレームはサポートしていません。
- MPEG-4 Part 2ビデオ（Simpleプロファイル）
- AAC-LCオーディオ、48 kHzまで
- .mov、.mp4、.m4v、.3gpの各ファイル形式
- iPodで再生できるすべてのムービー、またはオーディオファイル
Wi-FiおよびEDGE用にビデオをエンコードする
QuickTime Pro v7.2の書き出し（エクスポート）コマンドから以下のエクスポータを使用して、iPhone向けビデオコンテンツを用意できます。
v7.1.6以前のQuickTime Proでは、次のエクスポータと設定を使用します。
v7.1.6以前のQuickTime Proの各エクスポータでは、ストリーミングを無効にします。iPhoneではRTP/RTSPを使ってメディアはストリーミングされません。
ムービーを適切なサイズにする
iPhoneを横向きにすると、スクリーンは480×320ピクセルです。ユーザは、スクリーンに収まるように縮小（レターボックス）したり、フルスクリーン（センタリングして切り取り）にしたり、簡単に表示モードを切り替えられます。コンテンツのアスペクト比を維持しつつ480×360の矩形に収まるサイズにする必要があります。480×360は、表示モードをフルスクリーンにしても鮮明な映像を保てるため、4対3のアスペクト比のコンテンツに適した選択です。
ビットレートが原因でムービーを遅延させない
ネットワーク経由でメディアを視聴しているとき、ビットレートは再生体験に大きな違いを生みます。ネットワークがメディアのビットレートに対応できない場合、再生の遅延が生じます。
サポートしている形式のムービーを使用する
以下の形式のムービーをサポートしています。
リファレンスムービーを作成する
リファレンスムービーには、ムービーのURLリストが含まれており、それぞれのURLにテストのリストがあります。リファレンスムービーを開くと、再生デバイスまたはコンピュータによってすべてのテストが合格した最後のムービーのURLが選択されます。テストでは、デバイスまたはコンピュータの機能、およびネットワーク接続の速度を確認できます。
リファレンスムービーやその設定方法の詳細については、「HTML Scripting Guide for QuickTime」の「Applications and Examples」を参照してください。
リファレンスムービーを作成するコマンドラインツールについては、MakeiPhoneRefMovie sample for a command-line tool that creates reference movies.
MakeRefMovieツールは以下からダウンロードできます。
http://developer.apple.com/quicktime/quicktimeintro/tools/index.html
サーバを設定する
iPhoneのメディアファイルをホストするHTTPサーバは、バイト範囲要求をサポートしている必要があります。iPhoneは、これを利用してメディア再生でランダムアクセスを行います（バイト範囲サポートは、コンテンツ範囲サポートまたは部分範囲サポートとも呼ばれます）。すべてではありませんが、ほとんどのHTTP 1.1サーバではすでにバイト範囲要求をサポートしています。
メディアサーバでバイト範囲要求をサポートしているか不明な場合、Mac OS Xで「ターミナル」アプリケーションを開き、curlコマンドラインツールを使用してサーバ上のファイルから短いセグメントをダウンロードしてみます。
curl --range 0-99 http://example.com/test.mov -o /dev/null
ツールを使って100バイトダウンロードできていれば、メディアサーバではバイト範囲要求が正しく処理されています。ファイル全体がダウンロードされた場合は、メディアサーバを更新する必要があります。curlの詳細については、Mac OSのManページを参照してください。
次の表に示すムービーファミリファイルの拡張子について、正しいMIMEタイプがHTTPサーバから送信されるようにします。
| ファイル拡張子 | MIMEタイプ |
|---|---|
| .mov | video/quicktime |
| .mp4 | video/mp4 |
| .m4v | video/x-m4v |
| .3gp | video/3gpp |
iPhoneでは、2 GB以上のムービーをサポートしていることに留意してください。ただし、一部の古いWebサーバではこの大きさのファイルを提供できません。Apache 2では、2 GB以上のファイルのダウンロードをサポートしています。
RTSPは、サポートしていません。
Webページにムービーを組み込む
iPhoneでは、ユーザがムービー再生モードにするまでビデオはデコードされません。つまり、ビデオを組み込んだWebページを表示すると、再生ボタンが押されるまでユーザに対してはQuickTimeのロゴが表示されたグレーの矩形が表示されます。Webページで表示されるプレビュー画像を提供するには、画像をSRCに、ムービーをHREFに、メディアMIMEタイプをTYPEに、そして"myself"をTARGETに指定します。
<embed src="poster.jpg" href="movie.m4v" type="video/x-m4v" target="myself" scale="1" ...>
デスクトップWebブラウザでは、この画像はユーザにクリックされるまで表示され、クリックされるとムービーに置き換わります。
WebページへのQuickTimeムービーの組み込みの詳細については、Including QuickTime in a Webpageを参照してください。
iPhoneでSafariが何をサポートするかを知る
iPhone版Safariでは、コンピュータデスクトップのSafariと同じWeb Kitエンジンが使用されていますが、iPhoneには、ポータブルデバイスに適した、ユーザとの固有の対話機能があります。iPhone版Safariで使用できる機能セットに限定して使うようにし、iPhoneで使用できないSafariの機能については代替策を提供する必要があります。
リソースと実行の制限
HTML、CSS、JavaScript、画像、または非ストリーミングメディアファイルを問わず、ダウンロードされるリソースはすべて10 MB未満でなければなりません。この10 MBの制限は、エンコードされた画像のサイズに適用されます。デコードされた画像のサイズにも制限があります。「画像を最適化する」を参照してください。
JavaScriptの実行は、トップレベルのエントリポイントごとに、5秒までに制限されています。スクリプトが5秒以上実行していると、例外が報告されます。このタイムアウトによって、デベロッパの作成したページとの対話やほかの場所へのユーザの移動が、JavaScriptの実行によって妨げられることのないようにしています。
ダウンロードさせるJavaScriptが、現在のページにかならず必要なものであることを確認してください。不要なJavaScriptは、貴重なメモリリソースを消費してしまいます。作成してからしばらく時間が経っているWebサイトには、使われていないJavaScriptがしばしば含まれています。サイトの簡単な検査は、メモリリソースの解放やサイトのパフォーマンス向上に役立つでしょう。
サポートしているリッチメディアのMIMEタイプ
「supported rich media MIME types」については「Safari Web Content Guide for iPhone」をご参照ください。
PDF文書
PDF文書は、iPhoneで簡単に表示できます。ページめくりはもっと簡単です。WebコンテンツからリンクされているPDF文書は、自動的に開きます。文書内のユーザの位置は、ページインジケータによって常に把握できます。またムービーと同様に、ユーザはiPhoneを回転してPDFを横長で表示させることもできます。
サポートされないテクノロジー
iPhoneコンテンツでは、FlashおよびJavaを使用しないようにする必要があります。ユーザに、Flashの最新版をiPhoneへダウンロードさせることも避けるべきです。FlashもダウンロードもiPhone版Safariではサポートされていません。
iPhone版Safariとコンピュータデスクトップ版Safariの相違点
iPhone上とコンピュータデスクトップ上では、Safariの動作に一部異なる点があります。
iPhone版Safariでは、デフォルトでポップアップウインドウがブロックされます。しかし、この環境設定はユーザが変更できます。
iPhone版Safariでサポートされているもの：
- Cookies
- ユーザが行うwindow-open呼び出し。ページ表示における上限は、8ページ（ウインドウを8つ開いているのと同等）までです。
iPhone版Safariでサポートされていないもの：
window.showModalDialog() or window.print()- Mouse-overイベント
- hoverスタイル
- ツールチップ
- Javaアプレット
- Flash
- SVG
- XSLT
- プラグインのインストール
- カスタムのx.509証明書
- WML
- ファイルのアップロードとダウンロード
セキュリティ
iPhone版Safariでは、エンドツーエンドのセキュリティを実現するために、実質的に、コンピュータデスクトップで使用されているのと同じSSL実装を使用しています。回線上の傍受を防止する暗号は、Wi-FiまたはEDGEのどちらの無線環境で使用しても同様にセキュアです。
iPhoneでは、多くの一般的な暗号スイートとともにSSL 2、SSL 3、およびTLSをサポートしています。
RSA鍵は、4096ビットまでサポートしています。
HTTPS
Diffie-Hellmanプロトコル、DSA鍵、および自己署名された証明書はiPhoneでは使用できません。
デバッグする
iPhone上でwebコンテンツをデバッグするにはDebug Consoleを使用してください。Settings > Safari > Developerの順に移動してDebug ConsoleをONに設定するとコンソールが動作します。コンソールは、デベロッパのwebページによって生じたエラー、警告、ヒントを表示します。