(X)HTML + CSS でもモバイルに耐えるためには

通常、(X)HTML + CSS で構築されたサイトはモバイル環境(i モードや Ez web とか)でも CSS を切り離された状態で閲覧されるのは周知の事実。一部 CSS 対応してるけど、本当にちょっとだけだし、実装もインラインの style 属性とか head 内に style 要素を記述する方法などがあるが、結局のところ外部 CSS には全く対応しておらず、ちょっとどころかかなりゲンナリする。
ただ、もし CSS に対応すると言うことになることになったら、キャリア側は CSS メディアタイプを screen ではなく handheld として実装して欲しい。フルブラウザがメディアタイプ screen 準拠していることによって、こうした状況が発生しているのは事実だし、スマートではない。

ただ、PC で閲覧する Web サイトとモバイルで閲覧する Web サイトは同じにすべきなのかどうかとされる議論もある。運営する側からすればコスト的にも同一にした方が良いのは当然だし、本来であればそうあるべき。しかしモバイル端末がそれに至っていないのは、クローズドなモバイルサイトが往々にして確立され、それが”正”だと思われているユーザ側が脱却できない点にもある。
そうしたクローズドな世界とオープンな世界のギャップを埋めるのは難しいし、もし可能になるとしてももっと先になると思う。

で、じゃあ技術的に何とか埋める方法は無いかと模索してみたが、あくまで見た目上の話だけをすればある程度は互換性を持たせることができるとは思う。ただし Valid でなければスマートでもない。あくまで互換性重視と言う意味合いで語るのであれば、完全な物理マークアップしかない。

この結論に至った経緯として、一番の課題は「(X)HTML + CSS ではモバイル端末で色・レイアウトが表現できない」ことである。ユーザ側からすると、見栄えはもっとも印象に残り、そのサイトの良し悪しの判断材料としても用いられるのは見て取れる。もちろんユーザビリティの点も重要だ。個人的に必須だと思うのは EZ-GREEに見るケータイサービス構築の重要なポイントにあるショートカット機能。つまり accesskey 属性。コンテンツの遷移を0 ~ 9と # * キーで制御するのは必須だと思う。ページの上部等へのアンカーリンクも同様。

ちょっとユーザビリティに関して偏ってしまったので話を戻すと、モバイルサイトでは未だに marquee 要素が平然と存在する。我々からすると想像を絶するような世界なのがこの要素だけで分かると思う。それだけ見栄えが重要視されている。そんな中でいかにして PC とモバイルを共存させるかを考えると、実装上の問題から物理マークアップするしかないのは致し方ないと思う。物理マークアップするにはいくつか条件が必要になる。

  1. 文書型定義は HTML4.01 Trantisional(XHTML では非推奨要素は使用できない)
  2. 文字の色、大きさは font 要素を使用
  3. 行揃えは align 属性を使用
  4. テーブルレイアウトではなく、通常の CSS レイアウト
  5. PC で閲覧する場合は CSS で font 要素等のスタイルを消す
  6. 文書構造は通常のマークアップ

簡単まとめるとこのようになる。もちろんこれが正とは思わないし、スマートだとは思わない。ただ、現状を省みるとそうせざるを得ない場面があるのは確か。
半ば強制的にモバイルと兼用させると言う考え方も問題なのかもしれないが、あくまで一例としての話なので。

ちなみに最大の問題点は画像サイズとファイルサイズだが、解決方法は無いに等しいし、あるとしればそれこそ XML 文書で作成して XSLT で UserAgent ごとに変えるとか何とかごにょごにょもあるけど、結局コストがかかると言う問題に行き当たるから意味が無い。
あと CSS でスタイルを消すと言うのは

<p align="center"><font color="#ff0000" size="+1">ほげほげ</font></p>

<p><font color="#00ff00" size="-1">ほげほげ</font></p>

この HTML に対して

font[colo]
{
color: black;
}

font[size]
{
font-size: 100%;
}

と CSS で消せばよいのだが、問題は IE では意味が無いと言うこと。なのでもっと簡略的に書いてしまえば

font
{
color: black;
font-size: 100%;
}

としてしまえばよい。

最後にもう一度言っておきますが、これは間違いであることを承知で書いています。モバイル側が互換性を無視して独自拡張を続けていくことに対して、こちら側が歩み寄った場合の話なので、運用面やコスト面重視で考えるとこうするのがベストでもベターでもないけど、解釈としてはアリなんじゃないかと思うわけです。実践するかしないかは任せますが、Perl や PHP で UserAgent 振り分けて動的にページを生成させるとか、そんなことするくらいならこっちの方がまだマシ、と言うのが自分の考えです。

関連リンク

トラックバック(0)

このブログ記事を参照しているブログ一覧: (X)HTML + CSS でもモバイルに耐えるためには

このブログ記事に対するトラックバックURL: http://www.double-team.org/mt/mt-tb.cgi/33

コメントする

このブログ記事について

このページは、yu-sukeが2007年1月31日 19:37に書いたブログ記事です。

ひとつ前のブログ記事は「旧バージョンのブラウザありかまとめ」です。

次のブログ記事は「link 要素を可視化してみる」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。