X/Windows用のSafari(以下、PC版Safari)のサブセット版が搭載されている。iPhoneのSafariでは一般的なWebサイトのほとんどが閲覧可能だが、Appleが提供している「iPhone向けのWebサイトデザイン」に従ったデザインを施すことで、iPhoneで閲覧した際により操作しやすいWebサイトを構築できる。本記事では、このようなiPhone向けのWebサイトを作成するテクニックを紹介する。touchに搭載されているSafariについても仕様はまったく同一だ。iPhone版Safariの特徴iPhoneに搭載されているSafariは、PC版Safariに採用されているレンダリングエンジン「WebKit」を使用している。Xのレンダリング結果に近いものとなる。XのSafariとで完全に同一の表示が得られるわけではない。iPhone版Safariではフォームを使ったファイルのアップロードに対応していない。画面サイズがPCに比べて小さいことや、マウスを備えていないといった、ハードウェア的な違いもある。そこで、まずはiPhoneに搭載されているSafariと、PC版Safariとの相違点をまとめておこう。・画面サイズが異なるiPhone版SafariとPC版Safariとの違いでもっとも分かりやすいのが、画面サイズだろう。PC/Macでは1024×768ドット以上の解像度が主流だが、iPhoneの解像度は480×320ドットと小さい。iPhone版Safariでは画面上部にステータスバーやURLバー、画面下にボタンバーが表示されるため、実際にHTMLがレンダリングされるエリアはそれよりも小さくなる(図1)。iPhone本体を横向きにすると、画面表示もそれに併せて横長となる(図2)。横向きでの表示例また、iPhone版Safariには画面解像度の小ささを補うため、簡単に拡大/縮小を行う仕組みが用意されている。拡大表示したい部分をダブルタップ(指ですばやく2回タッチする操作。マウスでのダブルクリックに相当)すると、タップした部分を含むブロックの幅が画面の幅と一致するように拡大表示される(図3)。そのほか、2本指で画面をタッチし、指を開くような操作(ピンチ操作)を行うことで任意のサイズに画面を拡大したり、逆に2本指で指を閉じる操作を行うことで画面を縮小できる。・操作はすべてタッチで行うiPhone版Safariではすべての操作をタッチパネルで行うため、マウスカーソルが存在しない。そのため、一部のイベントの処理が異なる。マウスオーバーイベントは対象となるオブジェクトをタッチした際に発生する(この際、マウスクリックイベントも同時に発生する)。あるオブジェクトをタッチしたあと、別のオブジェクトをタッチすると、先にタッチしていたオブジェクトにマウスアウトイベントが発生する。このような処理のため、たとえば「マウスオーバーで色が変わる」や「マウスオーバーでメニューが表示される」といったユーザーインターフェイスをiPhone版Safariで利用したい場合、CSSやJavaScriptの修正が必要となる場合がある。ツールチップは表示できない。・スクロールバーが存在しないiPhone版Safariではスクロールをタッチ操作で行うため、スクロールバーが表示されない。スクロールバーが存在しないため、フレームを使用したWebサイトは各フレームの内容をすべて表示するように画面が分割される。PC版Safariで図4のように表示されるWebページは、iPhone版Safariでは図5のように表示される。iPhoneに向けたWebサイトを作る際は、できるだけフレームを使用しないようにするべきだろう。・表示できるHTMLファイル/画像の大きさやファイルサイズに制限があるiPhoneはPC/Macと比べ、搭載するRAMのサイズが非常に小さい。そのため、表示できるHTMLファイルおよび画像ファイルの大きさやファイルサイズに下記のような制限がある。2MBを超えるサイズのアニメーションGIFは、最初のフレームのみ表示される・同時に表示できるWebページ数は8つまでiPhone版Safariは複数のWebページを同時に開く機能があるが、PC版Safariのタブブラウズ機能とは異なり、同時に開いておけるWebページは最大8つまでである。・JavaScriptの実行時間は最大10秒間iPhone版Safariでは、JavaScriptは最大10秒間までしか実行できない。HTMLの読み込み時や各種イベントの発生によってJavaScriptが実行された後、10秒を超えるとそのスクリプトは実行途中で強制的に中断される。・一部のフォーム要素の表示方法が異なるiPhone版Safariでも、PC版Safariと同様にフォームを使ってユーザーからの入力を受け付けることができる。type=”file”>)は無効化され、利用できない。PCで図6のように表示されるページでは、iPhoneでは図7のようにファイル選択要素が無効化されて表示される。iPhone版Safariでのフォーム表示例また、iPhone版Safariではセレクトボックス(<select>~</select>)要素の選択時に専用のインターフェイスが表示される(図8)ことや、テキストエリアの入力時に画面下に図9のようなソフトウェアキーボードが表示される点も注意してほしい。これらの入力/選択時には対象の要素が拡大表示されるため、要素のサイズが大きすぎると画面からはみ出してしまうことがある。Mapへのリンクをクリックすると、自動的にiPhoneの「マップ」アプリケーションが起動し、URLで指定された場所の地図が表示される。Storeへのリンクをクリックした場合についても、同様にYouTubeアプリケーションやiTunesアプリケーションが起動する。そのほか、「mailto:<メールアドレス>」や「tel:<電話番号>」といったリンクも認識可能だ。前者をクリックすると、「メール」アプリケーションが起動し、指定したメールアドレス宛のメールの新規作成画面となる。touchでは利用できない)。iPhone版SafariではWebページ内で電話番号と思われる文字列は自動的にクリッカブルになる。この動作は、HTMLのheadタグ内に下記のようなmetaタグを記述することで抑制が可能だ。"telephone=no">・一部のwindow関連JavaScriptの動作が異なるiPhone版Safariでは、window関連のJavaScriptの挙動が一部異なる。新たなウィンドウを開く「window.open()」関数は、iPhone版Safariでは「新規ページで指定したURLを開く」という動作となる。ダイアログを表示するJavaScript関数については、alert()とconfirm()、prompt()のみがサポートされている。PlayerやJavaランタイムは現時点で提供されておらず、これらはiPhone版Safariでは一切表示できない。FlashやJavaアプレットに限らず、表示するのにプラグインが必要なコンテンツも同様に表示は不可能だ。iPhoneで表示できる動画/音声ファイル形式は次の表2の通りだ。m4vWebサイトをiPhoneに対応させる以上で述べたとおり、iPhone版SafariとPC版Safariには細かい点で多くの相違点があるものの、多くのWebサイトはiPhone版Safariでも問題なく表示できる。Webサイトによっては、若干の修正を加えるだけで、著しくiPhoneでの操作性を向上させることができる場合がある。最小限の修正だけで、WebサイトをiPhoneで見やすいようにするテクニックを紹介しよう。・ページの横幅を指定するiPhoneはWebページをレンダリングする際、デフォルトではWebページの横幅が980ピクセルであると仮定してレンダリングを行う。その結果をiPhoneのディスプレイの横幅である320ピクセル(iPhoneを横向きにして、横長の画面で閲覧する場合は幅480ピクセル)に収まるように縮小して表示する(図10、11)。iPhone版Safariの表示レイアウト(横表示の場合)最近のWebサイトは横幅が800~1024ピクセル程度での表示が想定されているものが多いため、多くのWebサイトではこのデフォルトの動作で問題なく閲覧できることが多い。段の幅が980ピクセル以下に固定されているような場合や、逆に980ピクセルを超える横幅が想定されている場合、iPhoneでは若干見にくい表示になることがある(図12)。content=”プロパティ“>」というタグを記述することで、Webページの横幅を指定すればよい(図13)。viewportの設定によって横幅を調整した際のWebページ表示例たとえば、Webページの横幅として800ピクセルを想定している場合、次のように指定すればよい。content="width=800">また、プロパティでは幅だけでなく、拡大/縮小表示する際のスケールといったパラメータも指定できる(表2)。ページの最小スケール。ページの最大スケール。noを指定すると、ユーザー操作での拡大/縮小やスクロールを禁止できる。デフォルトはyes・テキストのサイズを調整するiPhone版Safariでは、基本となるテキストのサイズは自動的に決定される。多くのサイトでは、iPhone版Safariで読みやすいようなテキストサイズが自動的に設定されるが、もしフォントサイズが小さすぎる、もしくは大きすぎる場合はCSSの「-webkit-text-size-adjust」プロパティで変更が可能だ。1.0の「text-size」プロパティと同様の働きをするが、異なるのはiPhone版Safariでのみ効果を発揮する点だ。通常のWebブラウザ向けにはtext-sizeプロパティでフォントサイズを指定し、iPhone版Safariに向けては-webkit-text-size-adjustプロパティでフォントサイズを指定することで、iPhone版Safariとそれ以外で異なるフォントサイズでの表示が行える。図14は標準のフォントサイズでの表示例、図15はp要素の-webkit-text-size-adjustプロパティを150%に指定した場合の表示例だ。iPhone版Safariでは本文部が異なるフォントサイズで表示されるが、PC版Safariでは両者ともに同じフォントサイズで表示される。・マウスオーバーで表示するメニューをクリックで表示するようにする前述の通り、iPhoneにはマウスポインタが存在しないため、たとえばマウスオーバーでポップアップするメニューなど、特定の要素をマウスオーバーすると表示が変化するような指定は行えない。そのため、iPhoneを想定してWebサイトをデザインする場合はマウスオーバーによるポップアップではなく、マウスクリックによるポップアップを行うようにデザインを修正する必要がある。・iPhone専用アイコンを用意するiPhone版Safariでは、Webサイトをブックマークする際に「ホーム画面に追加」というオプションを選択できる。これを選択すると、iPhoneのホーム画面にそのWebサイトをワンクリックで呼び出せるボタンを追加できる(図16)。「ホーム画面に追加」を行う際、通常はそのWebサイトのスクリーンショットがボタンとして利用されるのだが、サイト側でアイコンを指定することも可能だ。図17のようなアイコン(ファイル名はapple-touch-icon.png)を指定したい場合は、HTMLファイルのheadタグ内に次のように記述すればよい。左が用意したボタン画像、右がiPhoneのホーム画面に表示されるボタン画像なお、アイコンがボタンとして登録される際には自動的に角が丸められ、ドロップシャドウや光沢が追加されてiPhoneらしいボタンになる。画像のサイズは任意だが、この加工が加えられることを考慮すると、画像サイズは57×57ピクセルで、影や光沢がないものが望ましいようだ。