kei3.jp | head -n 10 diary

朝からテレビでも「新しいiPad」の発売が中継されていたり、画面が高解像度化したiPadの話題で持ちきりですね。残念ながら直ぐに買う資金もないので、取りあえず今はスルーですが、ウェブデザイン的には、スルー出来ないので、Retina対応に関して少し書いておきます。

既にAppleのサイトでもRetina対応がされていたり、iPhone用のサイトでも一部では以前からされていました。方法としては幾つかあり、Appleでは、PC用のサイトはそのままに、Javascriptでピクセルレシオをチェックして、画像を入れ替える手法で対応しています。もう一つの方法として、スタイルシートのメディアクエリを使ってCSSファイルを切り替えてRetina対応する方法があります。

先ずは、Javascriptの window.devicePixelRatio をチェックする方法。この数値が2の場合、iPhone 4や第三世代のiPadと判断出来ます。onloadイベントでチェックして、画像を置き換える手法がApplで行われている手法になります。Dreamweaverのビヘイビアを使って同じ手法を行う場合、普通にスワップイメージで高解像度画像と入れ替わる設定を行い、ビヘイビアのイベントをonloadに変更した後、window.devicePixelRatioをチェックするように書き換えれば、同じ仕組みが出来ます。ただ、これだと一つ一つ手作業で設定する必要があり面倒なので、別にまとめて書いた方が効率的です。

次にスタイルシートで対応する方法ですが、HTMLにimgタグを使って画像を表示している場合、スタイルシートで背景画像に変更する必要があります。レスポンシブ・ウェブデザインを行う場合にも使われる手法なので、既にその様な仕組みで作っている場合は比較的簡単にRetina対応出来ます。Retina対応としてメディアクエリに and (-webkit-device-pixel-ratio: 2) を追加した記述を増やすだけ。

それぞれの対応の方法としては、上記のようになりますが、何れにしても問題が有ります。最初のJavascriptを使って画像を入れ替える手法は、最初にまず今までどおりのサイズの画像を表示した上で、入れ替える為、表示する画像ファイルの数が単純に二倍になります。モバイルの環境だったり、低速な通信やサーバーには負担が大きいです。次にスタイルシートを使った方法は、そもそも、画像を背景にしてしまう為、アクセシビリティ的に少々問題が有る気もします。背景画像で表示する為、古いIEでプリント出来ないという副作用も生じてしまう事も有ります。(ちゃんと対策すれば問題ない)　そもそも、メディアクエリだけに依存して作ってしまうと、CSS3非対応のブラウザで表示した場合に、面倒な事に成るという問題もあります。

そこで、出来るだけ多くのブラウザに対応しつつ、パフォーマンス的に問題の起きない手法として、Javascriptで devicePixelRatio をチェックして、読み込むCSSファイルを切り替えると言うのが良いんじゃないかなと思います。noscript などと組み合わせれば、より多くのブラウザで問題なく表示出来、新しいiPadでは綺麗に見え、一番効率が良いのではないかと思います。これは、Retina対応の場合に限らず、スマートフォン対応の場合も同じ手法をとるのが良いんじゃないかなと思います。