発表されてすぐに発注したのが 9/2 の早朝、出荷は 2 〜 3 週先だと言われしょんぼり。待つこと 2 週間。出荷を知らせるメールが届いたのが 9/16。上海からやって来るとわかる。待つこと、さらに 3 日。ようやく、今日、新しい 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 にしてあるので)
iPhone 3GS { font-size: 11pt; } |
iPod touch (Retina) { font-size: 10pt; } |
iPhone 3GS { font-size: 11pt; } |
iPod touch (Retina) { font-size: 10pt; } |
iPod touch のフォントを 9pt にしていないのは、さすがに目が疲れそうだから。くっきりと読めるということと、楽に読めるということは別物だからね。
関連リンク
- メディアクエリー (2010年7月27日付 W3C 勧告候補の日本語訳)
- iPhone 4 の CSS を切り替える方法 (Fonland)
関連記事
- twitter より (2010-09-02) (新しい iPod touch の発表されたストリーミングを見ながらのつぶやき)
- GAE アプリによるスタイルシートの切り替え
- ウェブページのスタイルを iPad に最適化する方法
0 件のコメント:
コメントを投稿