【Webアプリ】iPhone4 で画像をきれいに表示するもう一つの方法【mod_rewrite】

iPhone4は解像度が高いので、画像を切り替えないと、もやっとする。

【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】 | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

Retinaディスプレイに画像を最適化させるのって意外とめんどいよね！

という現実に打ちのめされたので、まとめてみます。

によると

  • ぜんぶ高解像度の画像にする → 3Gで表示が重いかも
  • 画像を2種類つくって切り替える → 画像の数が多いとひとつひとつCSS指定するのが辛すぎる
  • 画像はスケーラブルなデータ形式で用意する → 次に作るときはそうしよう……
  • 画像はそもそも使わないデザインにする → 次に作るときはそうしよう……

ということで決定打はなさそうな感じ。

でも、画像の切り替えって USER_AGENT 見て mod_rewrite で画像置き換えれば楽勝じゃねｗｗｗｗ とか思って調べたら、iphone3も4も同じなのね…サーバでiphone3か4か見分けるのは無理。

なんかもっといい方法無いのかーと探し回ったら

iOS4とiPhone4にアプリケーションを対応させる - システム開発ブログ （システム開発のアイロベックス｜東京都新宿区の業務システム開発会社）

このためSDK4では既存の画像のファイル名の後に「@2x」という文字列を付けて、
「既存ファイル名@2x.拡張子」という形で同じパスに設置することで、
iPhone4の場合は@2xの画像を優先して使用することが出来ます。

とかいう表記を見付けて大喜びしたけど無理でした。アプリだけなのね。
普通に考えてそんなリクエスト数が二倍になるような仕様入れるわけない……

でまあ、そこでもうちょっと考えた。
ブラウザの読み込みは常にHTML→画像であり、HTML中ではjavascriptが動くので、そこにリクエストヘッダに影響を与えるよう何かを書いてやればいい。cookieだ。
今回は全部の画像について高解像度版を用意する必要がないと判断したので（DBに入っているのもあるし）、ファイル名の最後に @1x とついているファイルのみ、それを @2x に置き換えるようにする。

<html>
<head>
<script>
document.cookie = "pxratio="+window.devicePixelRatio+"; path=/;";
</script>
</head>
<body>
<img src="[email protected]" height="43" width="100" alt="高解像度も用意">
<img src="button2.png" height="43" width="100" alt="高解像度は用意しない">
</body>
</html>

まー普通のフレームワークとか使ってれば全部のページのヘッダにjs書き込むとか簡単なはず。これで解像度二倍の環境では、画像リクエスト時のクッキーに「 pxratio=2 」が書き込まれる。後は mod_rewrite で振り分けてやればいい。ファイル名も指定したものを一括置換できる環境を用意するのは難しくない。

後は httpd.conf で

  RewriteEngine on
  RewriteCond %{HTTP_COOKIE} pxratio=2
  RewriteRule ^(.*)@1x(\.[^.]*)$ $1@2x$2

のような指定を適当なところに書く。

これで今回の目的は達成された。