携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-
XHTML+CSSで一歩進んだモバイルサイトを作るテクニックを幅広く紹介☆
このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
auとソフトバンクの3G端末は外部CSSを読み込むことで、
豊富な表現が可能になっています。(ドコモはダメ)

ただし、auとソフトバンク端末に搭載されているブラウザは種類が異なるので、
3キャリア対応のサイトを1枚のHTMLで作る場合は、文字サイズなどの違いがどうしてもでてきてしまいます。これに対処するためには、auとソフトバンク端末で読み込む外部CSSを切り替えてあげる方法があります。

そこで、今回はauとソフトバンクで外部CSSを切り替えるスクリプトをご紹介します。

まず、どのような設計にするかというと、

・au用の外部CSS「css_au.css」とソフトバンク用の外部CSS「css_sb.css」を用意する。
・au端末でアクセスしてきたら、「css_au.css」を読み込むようにlinkタグを発行する。
・同様に、ソフトバンク携帯には「css_sb.css」を読み込むようなlinkタグを発行する。
・それ以外のドコモ端末やPCでのアクセスには「dummy.css(空)」を読み込ませる。
・HTMLとXHTML用のlinkタグを発行できる。
・SSIを利用する。


のようになっています。

Mobile CSS Switcherのイメージ


では以下スクリプトです。
ソース:http://www.dspt.net/data/css_switcher/css.txt

<?php

//┌─────────────────────────────────
//│ [ MOBILE CSS SWITCHER Ver1.0]
//│ css.php - 2008/08/21
//│ Copyright (C) DSPT.NET
//│ http://www.dspt.net/
//└─────────────────────────────────

/********************** 初期設定 ***********************/

//au,softbank用のCSS格納フォルダ(トップディレクトリから相対指定)
$css_dir = '/data/css/';

//CSS命名規則(末尾に付ける名前)
$au = "_au.css"; //au
$sb = "_sb.css"; //softbank

//HTMLの種類(0:HTML 1:XHTML)
$html_type = 1;

/********************** 以下からは改変しないほうが無難 ***********************/

//文字エンコード変換
function encode($data) {
$data = mb_convert_encoding($data, "SJIS", "auto");
return $data;
}

//共通CSS名を取得
$filename = encode($_GET["file"]);
$au_file = $filename.$au;
$sb_file = $filename.$sb;

//HTMLの種類によって出力するヘッダ末尾
function html($data) {
if ($data == 1) {
$out = " />";
} else {
$out = ">";
}
return $out;
}

//携帯UA取得
$agent = $_SERVER["HTTP_USER_AGENT"];

//携帯端末のユーザエージェントを判定
function mobile($data){
if(preg_match("/^DoCoMo\/[12]\.0/i", $data))
{
return "i";// i-mode
}
elseif(preg_match("/^(J\-PHONE|Vodafone|MOT\-[CV]980|SoftBank)\//i", $data))
{
return "s";// softbank
}
elseif(preg_match("/^KDDI\-/i", $data) || preg_match("/UP\.Browser/i", $data))
{
return "e";// ezweb
}
elseif(preg_match("/^PDXGW/i", $data) || preg_match("/(DDIPOCKET|WILLCOM);/i", $data))
{
return "w";// willcom
}
elseif(preg_match("/^L\-mode/i", $data))
{
return "l";// l-mode
}
else {
return "p";// pc
}
}

//携帯UA判定後の値を取得
$flag = mobile($agent);

//キャリアによってCSSを振り分ける処理
function switch_css($data) {
global $css_dir,$au_file,$sb_file,$html_type;
if ($data == "e" ) {
$file_out = $css_dir.$au_file;
$out = "<link rel=\"stylesheet\" href=\"".$file_out."\" type=\"text/css\"".html($html_type);
}
elseif ($data == "s" ) {
$file_out = $css_dir.$sb_file;
$out = "<link rel=\"stylesheet\" href=\"".$file_out."\" type=\"text/css\"".html($html_type);
} else {
$file_out = $css_dir."dummy.css";
$out = "<link rel=\"stylesheet\" href=\"".$file_out."\" type=\"text/css\"".html($html_type);
}
echo $out;
}

//処理
switch_css($flag);

?>


結構作りは単純です。
まず、それぞれのCSSを保存しておくフォルダを指定します。
本スクリプトではトップディレクトリからの相対パスで指定するようになっています。

SSIでは以下のように書いてスクリプトを読み込みます。

<!--#include virtual="/data/css_switch/css.php?file=css"-->


file=のところで、CSSの共通ファイル名(拡張子抜き)を指定します。
上記例ではcssというファイル名が渡されます。

スクリプトの命名規則のところで指定した通りに、末尾が追加されるので、
例えば、au用ではcss + _au + .cssで「css_au.css」となります。

後は、アクセスした端末のユーザエージェントを判断して、
それぞれの外部CSSを読み込むlinkタグを発行します。

例えばソフトバンクなら、以下のようなリンクタグを発行します。

<link rel="stylesheet" href="/data/css/css_sb.css" type="text/css" />


linkタグはHTMLの場合とXHTMLの場合で書き方が異なりますから、(といっても最後のスラッシュ/)
正確を期すためにスクリプト上部で指定したとおりにlinkタグを発行するようになっています。
出力先のファイルがHTMLなら「$html_type」のところを「0」に、XHTMLなら「1」にします。


このスクリプトを使って、どのような使い方ができるかというと、

例えば、DIVタグ内の背景色をキャリア別(ドコモはnavy、auはorange、ソフトバンクはgray)に変えて、さらにauとソフトバンクのみ行間を120%にしたい場合を考えます。

まず、HTML内には以下のように記述します。

<div style="background-color;navy;">
<div class="line">
文字文字文字文字文字文字文字文字
</div>
</div>


行間を変えたいCSSプロパティは外部CSSが読めるauとソフトバンクで共通ですから、
共通用のCSS(mobile.css)を作って、普通にlinkタグをHTMLのヘッダーにべた打ちします。
その下にCSSを切り替えるSSIを記述します。

<link rel="stylesheet" href="/data/css/mobile.css" type="text/css" />
<!--#include virtual="/data/css_switch/css.php?file=css"-->


そして、mobile.cssには以下のように記述します。

.line {
line-height:120%;
}


また、au用のCSS(css_au.css)には以下のように記述します。

.line {
background-color;orange;
}


一方、ソフトバンク用のCSS(css_sb.css)には

.line {
background-color;gray;
}


と記述します。

こうすることで、まず共通用のmobile.cssが読めるauとソフトバンク携帯は、行間が120%になる一方で、すでにstyle属性でbackgroud-colorプロパティが指定されていて、外部CSSの読めないドコモ端末はnavy色で背景が表示されます。さらに、auではスクリプトによって切り替えられたCSSを追加で読み込み、すでにstyle属性で指定されているbackground-colorプロパティをorangeに上書きします。同様な方法で、ソフトバンク携帯では背景色をgrayに上書きします。

このようにすれば、1枚のHTMLで3キャリア別々のスタイルを適用することができます。





管理者にだけ表示を許可する


お世話になってます
サイト作成で調べていてたどり着きました。
すごくためになる内容をありがとうございます。
HPの方でちょっと心配な記述があったので、お仕事順調に行かれていると伺って安心しました。
これからも時々お邪魔させていただきます^^
| URL | 2010/04/04/Sun 17:15 [EDIT]
古い質問で申し訳ありません
cssインクル-ドのタグですが・・・SSIではなくphpでインクル-ドする方法は
'<?php include("/include/css_switch/css.php?file=css"); ?>'
でいいのでしょうか
よろしくお願いします
かやまっち | URL | 2010/04/02/Fri 18:29 [EDIT]
swf回り込み
突然ですが、
style="float:left;" align="left"と記述する事によりimgは回り込むのですが、
swfの場合うまく回り込ません。なにか方法はないでしょうか?




Copyright © 携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-. all rights reserved.

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。