D905iを使って気づいた。これ、ADP: デザインテンプレート1124の段組切り替えがまともにできるよ。ようやく出会った。残念ながら条件付きなのだが、個人的にはかなりうれしい。
条件付き、とは、フルブラウザ（NetFront）の、しかもケータイモードのときしかそれらしい結果に出会えないことである。興味がある人は少ないと思うが、とにかくうれしいので解説する。
デザインテンプレート1124は、モバイル端末がどんどんscreenメディア用のCSSを解釈するようになり、handheldメディアの指定は意味がなくなる、という傾向をふまえて、画面の横幅が広いときには2段組、狭いときには段組なしになるよう、max-widthを使ってわざとfloatを崩壊させる手段をとっている。今なら、メディアクエリも十分視野に入ってくるだろうが、2004年末～2005年初頭では手を出せなかった。
#container {
width: 760px;
max-width: 100%;
}
#navigation {
float: left;
width: 210px;
max-width: 100%;
}
#content {
float: left;
width: 550px;
max-width: 100%;
}せっかく作ったのだが、これまではパソコン上のFirefox/Opera/Safariではうまくいくものの、実際にモバイル端末で意図したとおりの表示をするものには出会えず（iPod touchはどうなのか知らない）、まったく意味がなかった。なぜかといえば、いわゆる「フルブラウザ」は、ADP: 仮想スクリーン機能が邪魔をするで書いたとおり、横幅1024ピクセルといった仮想スクリーン上に描画するため、floatが崩壊しなかったからだ。
D905iは、モーションコントロールのおかげで、フルブラウザ起動時、横にすると表示領域の横幅が864ピクセル、縦にすると横幅が480ピクセルになる。NetFrontなので、PCモードとケータイモードがある。なので、計4つの描画パターンがある。
D905i表示領域 (385 by 257 pixels, 4.65KB)
このうち、横幅864ピクセル時のPCモード、ケータイモード、横幅480ピクセル時のPCモードでは2段組になる。横幅480ピクセル時のPCモードは、仮想スクリーンを設定しているため段組が崩れない。
だが、横幅480ピクセル時のケータイモードは、意図したとおりの段組なしで描画してくれる。テーブルが破壊される以外、意図した以上のレイアウトの崩れもない。
ここから、これまでうまくいかなかった理由のもうひとつが明らかになる。いままでも、ケータイモードであればうまくいく可能性があったのだ。だが、これまで見た端末では画面の横幅が狭すぎたせいで、Netfrontがなんとか横スクロールを出さずにすむようさらにレイアウトを破壊してしまい、意図したとおりにならなかったのだ。横幅480ピクセルというそれなりに大きな幅になったので、ようやく結果がついてきたことになる。長かった。
これのいい点は、横240ピクセルというケータイの現状に制約されないことだ。携帯電話が多少進化して、画面の横幅が320ピクセルになっても、480ピクセルになっても、ついてきてくれる。かつ、そうなったときこそ真価を発揮すると踏んでいる。）
京ぽんのフルスクリーンモードは、実際の画面の横幅240ピクセルではなくて、幅640ピクセルの仮想スクリーンのようなものを想定して表示しているらしい。）
とにかくうれしい。そろそろまじめに取り組まなければならないかもね、と思わせる今回の成功事例であった。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/692
