$out;}//処理switch_css($flag);?>結構作りは単純です。それぞれのCSSを保存しておくフォルダを指定します。本スクリプトではトップディレクトリからの相対パスで指定するようになっています。SSIでは以下のように書いてスクリプトを読み込みます。virtual="/data/css_switch/css.php?file=css"-->file=のところで、CSSの共通ファイル名(拡張子抜き)を指定します。上記例ではcssというファイル名が渡されます。.cssで「css_au.css」となります。後は、アクセスした端末のユーザエージェントを判断して、それぞれの外部CSSを読み込むlinkタグを発行します。ソフトバンクなら、以下のようなリンクタグを発行します。/>linkタグはHTMLの場合とXHTMLの場合で書き方が異なりますから、(といっても最後のスラッシュ/)正確を期すためにスクリプト上部で指定したとおりにlinkタグを発行するようになっています。出力先のファイルがHTMLなら「$html_type」のところを「0」に、XHTMLなら「1」にします。DIVタグ内の背景色をキャリア別(ドコモはnavy、auはorange、ソフトバンクはgray)に変えて、さらにauとソフトバンクのみ行間を120%にしたい場合を考えます。HTML内には以下のように記述します。共通用のCSS(mobile.css)を作って、普通にlinkタグをHTMLのヘッダーにべた打ちします。その下にCSSを切り替えるSSIを記述します。virtual="/data/css_switch/css.php?file=css"-->そして、mobile.cssには以下のように記述します。{line-height:120%;}また、au用のCSS(css_au.css)には以下のように記述します。{background-color;gray;}と記述します。することで、まず共通用のmobile.cssが読めるauとソフトバンク携帯は、行間が120%になる一方で、すでにstyle属性でbackgroud-colorプロパティが指定されていて、外部CSSの読めないドコモ端末はnavy色で背景が表示されます。auではスクリプトによって切り替えられたCSSを追加で読み込み、すでにstyle属性で指定されているbackground-colorプロパティをorangeに上書きします。同様な方法で、ソフトバンク携帯では背景色をgrayに上書きします。このようにすれば、1枚のHTMLで3キャリア別々のスタイルを適用することができます。32008/08/18/MonソフトバンクVGA端末の表示問題を解決する3キャリア対応携帯画像変換スクリプトこんにちは、shibaです。前回の記事「モバゲーのような携帯サイトを作るための12のTips」が予想以上の大反響で少々びっくりしてます。はてブの数とか半端ないです。こんなブックマークが付く記事を書いたことがありません。笑いといろとコメントくださった方ありがとうございます。多忙の毎日を送っています。今回は前回の記事のコメントでいただいた、ソフトバンクのVGA端末でのサイト内画像の出力に関するお話です。前回の記事で、ソフトバンクの高解像度(横240ピクセル以上)VGA端末では、ロゴなどの画像を他のキャリアに合わせて横240ピクセルで作成した画像を表示すると、高解像度のまま小さく表示されてしまう(けっこうかっこ悪い...)という問題がでてきてしまうという点について触れました。ちなみに、ソフトバンク以外のキャリアの端末では高解像端末でも、画像の自動拡大縮小機能がブラウザについているので、画面ぴったりに表示されます。確かにソフトバンクの端末は挙動としては最も正しいのですが、このサイトの方針のように3キャリア対応で作成するとなると、やはりこの問題は無視できません。画像のwidth属性を100%で指定すれば、とりあえず画面いっぱいに表示されますが、これだと画像が拡大され粗が目立ってしまってかっこ悪い。そこで、今回は他とは違ったアプローチでこの問題を簡易的に解決する方法を考えました。今回もコーダー視点で作成し、導入の敷居は低く設定してます。このブログのターゲットやサイト規模とかも考えて、MobaSiFのようなフレームワークを導入するほどじゃないんだけど...って人結構多いですからね。・1枚のオリジナル画像(横480ピクセル×縦自由のJPG)を3キャリアで共有する。・ソフトバンク端末のVGA機種(正確には横400ピクセル以上の端末)のみ、オリジナル画像をそのまま表示する。・その他のキャリアは画像をサーバー側で縮小(GDを利用)し、横240ピクセルに縮小した画像を出力する。・HTMLからの読み出しはSSIを使用する。本来は、端末から機種名を読み出し(画像サイズを端末から読み出せないキャリアもあるため)、画像サイズのデータベースと照らし合わせ、適切な画像サイズに加工してから最適なサイズで出力する。いったスクリプトが一番良いのですが、そこまで対応させる労力はありません。