Retinaディスプレイに対応する3つの方法

By@mtoksuyOn 2013年01月31日

Tag To
Retina
HTML
CSS
JavaScript

もうそろそろ、Retinaディスプレイに対応してみませんか?
どんな人にでも対応出来る様に3パターンをまとめてみました。

Media Queryで差し替えてみよう

まずはCSS3で画像を差し替えるにはどうすればいいかを検証してみましょう。

CSS3の機能を使いますのでやはりネックはIEですね。
そこで!ここで書くと時間がなくなっちゃいますので参考ブログを載せときます。ぇ

Media Query まとめ - IT戦記
CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き

上記のブログを参考にしてMedia Queryの理解も深まったところで実際にコードを見ていきましょう。

	
/************
CSSの記述です
************/
.box {
  background-image: url(box.png);
  -webkit-background-size: 100px 100px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .box {
    background-image: url(box@2x.png);
    -webkit-background-size: 200px 200px;
  }
}

ここではboxというクラスがあったと仮定してその中のバックグラウンドの画像を差し替えてます。まぁ、何がめんどくさいかって一つ一つ変更していかなければならない事。

目次に戻る

JavaScriptで差し替えてみよう

つぎはjsでやってみましょう。ちなみに、このサイトはjsで変更しています。
では、コードの方を。

	
/*********************
Javascriptのコードです
*********************/
$(function() {
  //------------------------
  //Retinaなら画像差し替える
  //------------------------
  // ディスプレイ環境を調べる
  if(window.devicePixelRatio > 1) {
    // img要素を探す
    $('img').each(function() {
      // src取得
      var src = $(this).attr('src');
      // Retina用画像に置換
      $(this).attr('src', src.replace(/(.jpg|.png)/gi,'@2x$1'));
    });

いたって簡単に実装出来る感じですね。xxx.jpgとxxx@2x.jpgという風に2つ画像を用意するだけです。xxx.jpgが100×100だったらxxx@2x.jpgは200×200の画像にする事。注意点はJQueryを使っているところなのでダウンロードしていない人がいましたらJQueryでダウンロードして読み込み出来るようにして下さい。

一応、コメントもふんだんに入れたつもりですが、わからない人がいましたらコンタクトのところから連絡するかTwitterでお願い致します。

目次に戻る

PHPで差し替えてみよう

最後はやはりPHPで。
と、言いつつ他人様が作成したプラグインを紹介したいと思います。

ここRetina Imagesなんですが意外と難しいんですよね。
一つ一つ簡単にですが説明していきたいと思います。

retinaimages.phpを読み込むように.htaccessを設置


<IfModule mod_rewrite.c>
RewriteCond %{HTTP_HOST} ^(www.domain.com)(:80)? [NC]
RewriteRule .(?:jpe?g|gif|png|bmp)$ /retinaimages.php
</IfModule>

.htaccessというファイル名にしてROOT(トップ階層)に設置して下さい。

スクリプトを全ページに置く

最初のCSSが読み込みこまれるよりも前の場所にこのスクリプトを挿入する。

	
/*********************
Javascriptのコードです
*********************/
document.cookie='devicePixelRatio='+((window.devicePixelRatio === undefined) ? 1 : window.devicePixelRatio)+'; path=/';

bodyの下にこのスクリプトを挿入

	
    <body>
<<a>noscript</a>><<a>style</a> id="devicePixelRatio" media="only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)">#devicePixelRatio{background-image:url("retinaimages.php?devicePixelRatio=2")}<<a>/style</a>><<a>/noscript</a>

スッゲー大変、スッゲー大変。

目次に戻る

まとめ

画像を差し替えるだけでこんなにも大変なんだなって感じてしまう記事でしたが、PHPに関しても、もっとシンプルにプラグイン作れると思います。作るかどうかは別として。

最後に補足としてメリット、デメリットも書きますと、
CSSに関しては違うプラグインも入れてサイトの読み込みスピードが若干落ち、一つ一つ設定していかなければならないので大変。

JavaScriptに関しては設定が一番楽なんですが最初の画像を読み込ませた後に更にくそ重いRetina用の画像も読み込ませるのでスマホ向けではなく、ユーザー体験を捨ててまでする事ではない。

PHPではというと設定するのがめんどくさすぎ。

もう一つ解決策を考えるとするならば画像をSVG形式にしちゃう。現状、SVGが対応しているブラウザで表示する様に制御するようになるとは思うけどこれも対応していないブラウザの扱いがめんどくさい。

じゃーどうしろと?
タイトルから考えて記事を書いてみたのだがはっきり言って全部めんどくさい。現状、一番良い方法はプラグインなどを一切使わずに(重くなるから)HTMLを展開する前に超絶軽いAjaxを行い、PHPで制御する関数を作り画像を表示するのが一番表示が速い気がします。時間がある時に書いたらもう一度記事を書きたいと思います。

他に解決策があったらTwitterでリプお願い致します。

目次に戻る