The WebKit Open Source Project

iPhone 4にはRetinaディスプレイと呼ばれる高解像度ディスプレイが搭載されている。これは従来のiPhone 3GSの4倍の解像度にあたり、その美しさはiPhone 4の売りのひとつになっている。iPhone 4 Retinaディスプレイの美しさはユーザを満足させるものかもしれないが、同時に、WebデベロッパやWebデザイナに対してこれまで議論に上がっていた「High DPIに対応するWebサイト」という課題を実感させるものにもなった。

サイズが同じでディスプレイの解像度だけが上がるということは、従来と同じ方法でレンダリングすればその分小さく表示されることを意味している。これでは読めたものではないため、見やすいサイズまでスケールを上げる。iPhone 3GSとiPhone 4のケースなら、縦を2倍、横を2倍にすればいい。高解像度で表示される文字はとても美しい。

文字のようにスケーラブルなデータが普及しているものはいいが、JPEG/PNG/GIFのような画像データの場合は問題だ。大きくすればその分だけ表示が汚くなる。この問題に対する対処方法は2つある。ひとつは画像をSVGのようなスケーラブルなデータとして作成し直すこと、もうひとつは高解像度でデータを用意しておき利用する解像度ごとに適切にスケールダウンした画像を提供するというものだ。

後者の方法を使う場合のテクニックが次のサイトにまとまっている。

• Aral Balkan · How to make your web content look stunning on the iPhone 4’s new Retina display
• Targeting the iPhone 4 Retina Display with CSS3 Media Queries - WaltPad
• Safari Web Content Guide: Optimizing Web Content

テクニックの内容はCSS3で策定が進められているMedia Queriesを活用して、デバイス・ピクセル比率が2以上のブラウザに対しては4倍解像度の画像を使うようにしたCSSファイルを追加で読み込ませるというもの。デバイス・ピクセル比率の問いかけに対応しているブラウザに対しては、その解像度に適した画像を提供するというわけだ。

iPhone SDK 4では画像ファイル名の最後に「@2x」という何前をつけておけば、状況に応じて自動的にこの「@2x」が付けられた画像が使われるようになる。こうすることでiPhone 3GS以前のデバイスでもiPhone 4以降のデバイスでも適切な画像が選択される仕組みになっている。Webブラウザにはこうした共通規格は存在しないため、Media Queriesを使って提供する画像を変更するというのは今のところ有力なテクニックのひとつといえる。もちろん今後「@2x」と同じテクニックがWebブラウザとHTTPサーバでも実装され普及していく可能性もあり、どういった方法がデファクトスタンダードになっていくかはまだわからない。

従来のデバイス、これから登場することになるであろう高解像度ディスプレイを搭載したデバイス、そうした多種多様なデバイスに対して美しく表示されるコンテンツを提供するには異なるどのDPIに対しても美しく表示されるように工夫する必要がある。異なるDPIを意識したコンテンツ開発の重要性は今後さらに増すことになるとみられる。