lifeLOG + REPOsitory: Retina ディスプレイ搭載の iPod touch

発表されてすぐに発注したのが 9/2 の早朝、出荷は 2 〜 3 週先だと言われしょんぼり。待つこと 2 週間。出荷を知らせるメールが届いたのが 9/16。上海からやって来るとわかる。待つこと、さらに 3 日。ようやく、今日、新しい iPod touch をゲット。

まずは、写真をいくつか載せておく。

iPod touch、到着

薄い！ (；゜Д゜)

背面は iPod 伝統の鏡面仕上げ

電源、オン！

アクティベーション完了

ファーストインプレッション

やはり一番のオドロキは、その薄さだ。iPhone 3GS と並べて見ても一目瞭然。こんなに薄くて大丈夫なのか、と心配してしまうほど。初代の iPod のことを思い出すと嘘のような薄さだ。

最近は、iPhone しか使っていないし、その前でもすでにウチの iPod の主力は nano に移っていた。だから久しぶりに鏡面仕上げの背面を見て、これが iPod だよな、と思い出した。指紋がベタベタつくし、ケースに入れずに使うと傷だらけになったりするけど、それも iPod らしさってもんだ。

まだ、アプリを同期させていないので、ebook を表示させたときの Retina ディスプレイの見え方なんかは試していないけど、それはおいおい。

ウェブページを Retina ディスプレイ搭載機器対応にする

デバイスの検出

すでに、このブログは iPhone (3G/3GS) 対応になっている(iPad 対応はそれなり)。その仕掛けの主要部分が GAE アプリによるスタイルシートの切り替えだ。その肝になっているのが、リクエスト機器が送ってくるユーザエージェント文字列によるデバイスの検出だ。こう書くと大袈裟だが、やっていることはユーザエージェント文字列の中から "iPhone" や "iPad" といった文字列を探しているだけだ。

iPod touch 対応にするため、まずは上述の仕掛けの中で iPod touch を検出する。そのためには iPod touch が送るユーザエージェントの文字列を知らなければならない。調べれば(ググれば)わかるだろうが、ここは実機で確かめることにした。そのためのテストプログラムがこれ。

(useragent.cgi)
 1: #! /opt/local/bin/ruby1.9 -w
 2: # -*- coding: utf-8 -*-
 3: 
 4: # useragent.cgi: check the user-agent string sent by client devices.
 5: # Last modified: 2010-09-19
 6: 
 7: require 'cgi'
 8: 
 9: cgi = CGI.new
10: 
11: puts "Content-type: text/plain"
12: puts
13: 
14: print cgi.user_agent
15: STDERR.puts cgi.user_agent

CGI を実行できるフォルダ(Snow Leoaprd の Apache なら標準で /Library/WebServer/CGI-Executables)に置いてブラウザからアクセスすれば良い。iPhone や iPod のようなデバイスだと、ブラウザの画面から Mac にコピペできないので、標準エラー出力にもユーザエージェント文字列を書き込んでいる。こうすると Apache のエラーログ(Snow Leopard の標準設定なら /var/log/apache2/error_log)に書き出される。

ついでなので、iPod touch 以外のデバイスでもユーザエージェントを調べてみた。

各種デバイスのユーザエージェント文字列
Device	OS	User-Agent
Mac	Snow Leopard 10.6.4	Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_4; ja-jp) AppleWebKit/533.18.1 (KHTML, like Gecko) Version/5.0.2 Safari/533.18.5
iPhone 3GS	iOS 4.1 (8B117)	Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; ja-jp) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7
iPad	iOS 3.2.2 (7B500)	Mozilla/5.0 (iPad; U; CPU OS 3_2_2 like Mac OS X; ja-jp) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B500 Safari/531.21.10
iPod touch (Retina Display)	iOS 4.1 (8B117)	Mozilla/5.0 (iPod; U; CPU iPhone OS 4_1 like Mac OS X; ja-jp) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7

iPhone と iPad を "iPhone"、"iPad" で検出したように、iPod touch も "iPod" で検出すれば良いことがわかる。

Retina ディスプレイの検出

iPhone にも 3G/3GS と 4 があるように、iPod touch にも Retina ディスプレイを搭載している新モデルと旧モデルがある。これら新旧のモデルの区別には、今のところ CSS のメディアクエリーを使うしかないようだ。

「iPhone 4 の CSS を切り替える方法」にあるように -webkit-device-pixel-ratio: n で新旧モデルを切り替える。n = 1 なら旧モデル、n = 2 なら Retina ディスプレイ搭載のモデル、となる。

あれ、どちらも 320 * 480 なんだけど……

実際にスタイルを定義し始めるまでは、上述のようにして Retina ディスプレイ搭載モデルを検出すれば、640 * 960 の画素数の画面として扱えると思っていた。しかし、新モデルも、Safari から見ると、デバイスの画素数はやはり 320 * 480 なのだ。1/2 ピクセル単位で指定できるのでない限り(できる？できないよね？)、スタイルを定義する観点から言えば、新旧モデルに差はないということだ。

「iPhone 4 の CSS を切り替える方法」の最後に少し書かれているように、JavaScript を使って、viewport を書き換えるという方法もある。ただし、このページに載っているコードそのままだと、iPod の向きを変えたときに width が変わらない。もう少し、工夫が必要らしい。

小さい文字がくっきり見える

CSS の定義上は変わらないと言っても、実際に見比べれば Retina の解像度には目を見張るものがある。はっきり言って全然別ものだ。わかりやすい例を挙げると、Retina ではより小さなポイント数の文字がはっきりと読める。iPhone 3GS では 10 pt より小さいと見えにくくなるが、Retina の iPod touch なら 9pt でも余裕で読める。

この違いならスタイルに反映させることができる。つまり、Retina モデルでは少し小さい文字を表示に使うというものだ。実際の表示を写真で示す。以下の写真を iPhone/iPod touch 等で見るときは、本体を横向きにしてほしい(サムネイルを 400px にしてあるので)