Opera搭載のPHS、AirH" PHONE AH-K3001Vが出てきたので、ADPでもCSSをhandheldメディア対応にしようと思って、いろいろ実験してきた。ある程度、わかってきたのでここにまとめる。今回は前提の説明。
具体的な目的はふたつある。handheldメディア対応のCSSを作る、というのがひとつ、Opera対応にするのがもうひとつ。このふたつがイコールではない、というのが今回のキモ。
まず、handheldメディア対応のCSSについて。それっぽいCSSを作ること自体はそれほど難しくはない。ただ、問題はそれがW3CのCSS Validatorに通らないことである。
CSS ValidatorにそれっぽいCSSのURIを指定し、Mediumをhandheldに指定してcheckを行うと、ErrorとWarningの山になる。色の指定に#xxxxxxなどと指定したり、font-sizeを%で指定するとエラーになるし、そもそも
Property color doesn't exist for media
などというWarningが出たりする。CSS Level 2がRecommendationになったのが1998年ということを考えると、携帯電話でいえば「こっちのは（モノクロ）3行表示じゃなくて4行表示だ！」といっていた時代なので、colorがパソコン同様に使えるなんて発想はなかったのかもしれない。marginやfont-sizeやtext-decorationもWarningの対象となる。これだと、じゃあ何が指定できるの？という感じである。
現在Candidate RecommendationであるCSS Mobile Profile 1.0では、比較的しつこくない指定方法はすべて許容されているので、これが通れば、たぶんValidatorでも文句は言われなくなるのだろう。ただ、現時点ではそれを待っていられない。うーむ。
つぎに、Opera対応について。AH-K3001VにのっているOperaは、UserAgentの表示が下記の2種類になるらしい。
Mozilla/3.0(DDIPOCKET;KYOCERA/AH-K3001V/1.1.16.65.000000/0.1/C100) Opera 7.0
Mozilla/4.0 (compatible; MSIE 6.0; KYOCERA/AH-K3001V/1.1.16.65.000000/0.1) Opera 7.0 [ja]
"AH-K3001V"実機体験レポート（memn0ckさん）より
なので、対応させるべきモードは、WindowsのOpera 7におけるShift-F11（スモールスクリーンモード）と同様と考えられる。
Opera 7でShift-F11をやると、通常はOpera独自のスモール・スクリーン・レンダリングのモードになる。これは、ADP: スモール・スクリーン・レンダリングで思ったこと（続）で書いたように、できの悪いHTMLをむりやりうまく再構築してしまうモードである。ちゃんとしたHTMLとCSSを書けるひとが少ないためにしかたなく誕生したようなものなので、できればお世話にならないようにしたい。
ここで、ページの制作者がhandheldメディア用のCSSを書けば、Opera 7はスモール・スクリーン・レンダリングをやめて、handheldメディア用のCSSをそのまま適用してくれる。味も素っ気もないスモール・スクリーン・レンダリングではなく、独自のデザインを作ることができるので、かなりの差別化を図れる。
ただし、CSS中の@import "handheld.css" handheldであったり、@media handheld{}であったりといった書き方だと、まともには適用してくれない。最初は適用しても、一度CSSファイルがキャッシュに入るとスモール・スクリーン・レンダリングに戻ってしまったりする。
いろいろ試してみたかぎり、Opera 7ではHTML中に
<link rel="stylesheet" type="text/css" href="handheld.css" media="handheld" />のように書かないとまともに適用してくれないらしい。なんて中途半端な！
上記ふたつをまとめると、Operaで動くhandheldメディア対応のCSSを「ちゃんとした形で」作るには、handheld用のCSSをlink要素で呼んできて、かつ、それをvalidにする必要がある。もちろん、validなんてする必要ねーよ、という人はそれでもいいが、ちょっとねえ。
というわけで、ところどころ間違っているような気もしつつ、後半へ。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/169
最初に思ったことですが、Opera for Smartphoneがhandheldを利用すること自体が仕様違反では？カラー云々はさて置き、QVGAクラスのものに対して"small screen"というのは違和感ありまくりです。PDAであればなんでもかんでもhandheldっつーつもりなのかと。
# screenとhandheldの差は画面の大きさだけでなくcolorかmonochromeかでもあるわけで。
実装した人は「画面が小さいからhandheld」と考えてしまったのかも知れませんが、PCでは例えばSVGAとSXGAで同じメディアタイプというのに疑問を感じたことは無いのでしょうねぇ。
ありがとうございます。もう一度http://www.w3.org/TR/REC-CSS2/media.html あたりをちゃんと見直してみますが、個人的には、CSS2の仕様上ではscalabilityがちゃんと考慮されていると思っています（QVGAだけどhandheld、というのがアリかどうかは書いてませんが）。問題は、scalabilityについてきていないCSS Validatorなんじゃないか、というのが今の私の考えです（あっさり変わる可能性あり）。
scalability…？？？google様に問い合わせても意味が判りません。それは兎も角。
Operaは"handheld"を流用したのかと思いましたが、CSS Mobile Profileに「The MP-UA SHALL accept and process style sheets that target the handheld media type.」とありますね。こちらの模様。
http://www.w3.org/TR/css-mobile
# 表示領域の大きさに対応したCSS (変な日本語…) は、CSS3 media queriesです。http://www.w3.org/TR/css3-mediaqueries/
Referenceの提供ありがとうございます。scalabilityは、むちゃくちゃ説明不足でした。すみません。CSS2ではhandheldの高機能化を見越して、わざと仕様をゆるめ（拡張できるよう）に作っている、という（仕様の）scalabilityのつもりでした。CSS2.1では、handheldの説明からmonochromeが消えて、ますますゆるくなっていますhttp://www.w3.org/TR/CSS21/media.html