webアプリTweetこんにちは。Retinaディスプレイモデルを支給されました浅海です。Retinaディスプレイ、非常に快適なのですが、Retinaディスプレイに最適化されていないWebページやアプリケーションでは、ビクセルベースで作られている部分がすこしぼけたように見えてしまいます。文字を画像にしている場合なんかは、かなり気になります。Retinaディスプレイは既にiPhoneで使われているほか、一部のAndroidもRetina相当の解像度を持っているモデルが登場しており、モバイルWebサイトやWebアプリがRetinaディスプレイを意識した作りになっていることはよく見られるようになりました。これからもPCなど、Retinaディスプレイ対応のニーズは増えるだろうと思い、対応方法をまとめました。MapscanvasタグサンプルimgタグRetinaディスプレイで見た時に、webサイトの画像がボケて滲んだように見えてしまうという現象があります。これを回避するには、imgタグに解像度を2倍にした画像を使い、widthとheight属性には画面上に表示する大きさを指定する方法があります。以下のような125×125のtest.pngという画像があるとします。src="test.png">このままではRetinaディスプレイで見たときにボケボケなってしまうので、これを回避するために縦横2倍の大きさ(250×250)の画像を用意します。それを仮にtest@2x.pngとして保存し、imgタグを以下の様に書き換えます。@2xというのは高解像度画像に使うサフィックスの慣例です。厳密なルールがあるわけではないので、どんな名前でも大丈夫です。height="125">高解像度版の画像サイズは250×250ですが、widthとheight属性にはもともとの大きさである125×125を指定しています。このようにすれば、Retinaディスプレイの謎技術により、表示上の125×125の領域に250×250の画像を表示してくれます。下に比較画像を載せました。Retinaディスプレイでのスクリーンキャプチャなので、ピクセル数が表示上の2倍になっています。Retinaディスプレイで125×125の画像を倍に引き伸ばす時にどれだけ画像が劣化しているのかよく分かると思います。この方法を使った場合、非Retinaディスプレイで見ると、ブラウザが250×250の画像を125×125に縮小して表示することになります。表示が酷く崩れることは無いかとは思いますが、画像によってはジャギーなどが入ってしまう可能性があります。そのような場合には、次に紹介しているCSSでの画像切り替えを使うと良いでしょう。2014年4月14日追記chromeがバージョン34からimgタグのsrcsetに対応したようです。2x">のように書くと、Retinaディスプレイではtest@2x.pngが使われ、非Retinaディスプレイではtest.pngが使われるというものです。サイズですが、widthとheightを指定しなくとも、’2x’というサイズ指定から自動的に1/2に縮小して表示をしてくれます。CSS画像をHTML要素のbackground-imageとしてCSSで指定している場合は、画像の切替をCSSですることができます。QueryCSSのメディアクエリを利用する方法です。url("test.png");}のようにしますが、Retina対応をする場合は、background-sizeで通常の画像サイズを指定するメディアクエリのmin-device-pixel-ratioかmin-resolutionでRetinaディスプレイを判別の手順を踏む必要があります。具体的には以下のようになります。}}min-device-pixel-ratioは、w3cの仕様に無いwebkitの独自拡張です。標準化が進んでいるのはmin-resolutionの方ですが、webkitがmin-resolutionに対応していないので、webkitだけmin-device-pixel-ratioを使用しています。pixelを表す単位です。pixelなのでRetinaディスプレイが該当するわけです。この部分の単位には、他にもdpcmやdpiなども指定できるようです。image-setiOSがバージョン6となった時に、safariでimage-setが使えるようになりました。そのため、CSS4を先取りし、image-setを使ってRetinaディスプレイに対応するという手もあります。2x);}このように書くことにより、1xの時の画像、2xの時の画像、というように出し分けることができます。ベンダプレフィックスが必要なプロパティなので注意してください。javascriptjavascriptで動的に出し分けるライブラリがあるので紹介します。retina.jshttp://retinajs.com/bodyの最後でretina.jsを読み込んでおけば、クライアントがRetinaディスプレイだった場合に、勝手にサーバから@2xのプレフィックスを付けた画像をロードしてくれます。Mapsのマーカーにオリジナルの画像を使うと、Retinaディスプレイではボケて表示されてしまいます。Mapsを使う場合などは重要になってくるテクニックです。通常、オリジナルマーカは以下の様に作成します。marker_image});Retinaディスプレイに対応するには高解像度の画像を使えば良いように思えますが、それだけではRetinaディスプレイで見た時にぼけたままです。MarkerImageのscaledSizeに、表示上のサイズを指定する必要があります。marker_image});通常の画像サイズが24x24pxとしていますので、test@2x.pngは48x48pxの画像です。実際の比較画像を載せます。左がRetina非対応のマーカー、右がRetina対応をしたマーカーです。canvascanvasに描画している内容もピクセルベースなので、ただ単に描画しただけでは、Retinaディスプレイで見た時に描画内容がボケてしまいます。これを解消するために、CSSで実際のサイズを指定し、canvasタグのwidthとheightでは高解像度(2倍)のサイズを指定する必要があります。height="300"></canvas>このようにした場合、注意点があります。ブラウザでの表示上のサイズは変わりませんが、内部では2倍のcanvasに描画しているものを50%に縮めて表示しているわけです。そのため、座標や線の太さなどは、全て既存の2倍にして描画する必要があります。全て2倍を指定して描画するか、context.scaleを2にして描画してください。canvasの手書きライブラリを使用して比較してみました。左がRetina非対応、右がRetina対応版です。同じ絵を描いているわけではありませんが、左に描いた絵の不鮮明さはわかると思います。サンプル記事中にスクリーンキャプチャとして紹介したもののHTMLを実際に用意しました。http://hai3.net/dev/retina.htmlRetinaディスプレイで見ればその違いがわかりますし、非Retinaディスプレイで見た場合には、Retina対応による差異はそんなにないことが確認できると思います。宣伝DocBaseとは小さく始める・みんなで育てる・適切に伝える・安心して伝えるをコンセプトにした情報共有サービスです。メモという形で小さく始められる、エンジニア以外のメンバーでも使いやすい仕組み、情報をまとめて整理できる、柔軟な権限設定で様々なプロジェクトで使えるなど、積極的な情報共有と業務の効率化を実現し、チームの成長を促します。date*日本語が含まれない投稿は無視されますのでご注意ください。キーワードは『Retina』でした。メディアクエリを使う。fax.0422-26-9781お問い合わせはこちらからどうぞ。