携帯サイトを作ろう! -ちょっと詳しいモバイルサイトの作り方-
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キャリア別々のスタイルを適用することができます。
スポンサーサイト


このエントリーを含むはてなブックマーク このエントリーをブックマークに追加
こんにちは、shibaです。

前回の記事「モバゲーのような携帯サイトを作るための12のTips」が予想以上の大反響で少々びっくりしてます。はてブの数とか半端ないです。こんなブックマークが付く記事を書いたことがありません。笑
いといろとコメントくださった方ありがとうございます。


おかげさまで、この記事以来、怒濤のように仕事が舞い込んできており、
多忙の毎日を送っています。


さて、今回は前回の記事のコメントでいただいた、
ソフトバンクのVGA端末でのサイト内画像の出力に関するお話です。

前回の記事で、ソフトバンクの高解像度(横240ピクセル以上)VGA端末では、ロゴなどの画像を他のキャリアに合わせて横240ピクセルで作成した画像を表示すると、高解像度のまま小さく表示されてしまう(けっこうかっこ悪い…)という問題がでてきてしまうという点について触れました。

ちなみに、ソフトバンク以外のキャリアの端末では高解像端末でも、画像の自動拡大縮小機能がブラウザについているので、画面ぴったりに表示されます。ちょうど以下のような感じ。

ソフトバンクVGA端末の挙動

確かにソフトバンクの端末は挙動としては最も正しいのですが、このサイトの方針のように3キャリア対応で作成するとなると、やはりこの問題は無視できません。画像のwidth属性を100%で指定すれば、とりあえず画面いっぱいに表示されますが、これだと画像が拡大され粗が目立ってしまってかっこ悪い。

そこで、今回は他とは違ったアプローチでこの問題を簡易的に解決する方法を考えました。
結論から言うと、今回も絵文字のときと同じようにスクリプトに頼るのですが、
今回もコーダー視点で作成し、導入の敷居は低く設定してます。このブログのターゲットやサイト規模とかも考えて、MobaSiFのようなフレームワークを導入するほどじゃないんだけど…って人結構多いですからね。

今回のスクリプトの設計はというと、

・1枚のオリジナル画像(横480ピクセル×縦自由のJPG)を3キャリアで共有する。
・ソフトバンク端末のVGA機種(正確には横400ピクセル以上の端末)のみ、オリジナル画像をそのまま表示する。
・その他のキャリアは画像をサーバー側で縮小(GDを利用)し、横240ピクセルに縮小した画像を出力する。
・HTMLからの読み出しはSSIを使用する。


ただこれだけです。本来は、端末から機種名を読み出し(画像サイズを端末から読み出せないキャリアもあるため)、画像サイズのデータベースと照らし合わせ、適切な画像サイズに加工してから最適なサイズで出力する。といったスクリプトが一番良いのですが、そこまで対応させる労力はありません。すみません。

ではスクリプトです。
サンプルURL:http://www.dspt.net/data/imagetrans/
ソース:http://www.dspt.net/data/imagetrans/trans.txt

<?php

//┌─────────────────────────────────
//│ [ IMG TRANS Ver1.0]
//│ trans.php - 2008/08/13
//│ Copyright (C) DSPT.NET
//│ http://www.dspt.net/
//└─────────────────────────────────

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

//リサイズ後の画像保存先ディレクトリ(相対パス)
$img_dir = 'images/';

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

//対象画像のファイル名を取得
$img_file = $_GET["file"];

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

//携帯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
}
}

//横240ピクセル用の画像を作成(GD利用)
$img_240 = ImageCreateFromJPEG($img_file);
$width = ImageSx($img_240);
$height = ImageSy($img_240);
$resize_width = $width/2;
$resize_height = $height/2;
$out = ImageCreateTrueColor($resize_width, $resize_height);
$base = basename ($img_file,".jpg");
$img_filename = $img_dir.$base."_240.jpg";
ImageCopyResampled($out, $img_240, 0, 0, 0, 0, $resize_width, $resize_height, $width, $height);
ImageJPEG($out, $img_filename, 100);

//パス取得
$path = dirname($HTTP_SERVER_VARS['PHP_SELF'])."/".$img_filename;
$path_s = dirname($HTTP_SERVER_VARS['PHP_SELF'])."/".$img_file;

//ソフトバンク携帯の場合
if (mobile($agent) == "s") {
//ソフトバンク携帯の画面サイズ取得
$softbank_display = $_SERVER["HTTP_X_JPHONE_DISPLAY"];
$display = array();
$display = explode("*", $softbank_display);

//縦横それぞれ取得
$softbank_display_width = $display[0];
$softbank_display_height = $display[1];
}

//携帯キャリアに合わせて画像タグを出力
function img_tag() {
global $agent,$img_file,$path,$path_s,$width,$height,
$resize_width,$resize_height,$softbank_display_width;
switch(mobile($agent)){
case "i";
$put = "<img src=\"".$path."\" width=\"".$resize_width."\" height=\"".$resize_height."\" alt=\" \" /><br />";
break;
case "e";
$put = "<img src=\"".$path."\" width=\"".$resize_width."\" height=\"".$resize_height."\" alt=\" \" /><br />";
break;
case "s";
if ($softbank_display_width > 400) {
$put = "<img src=\"".$path_s."\" width=\"".$width."\" height=\"".$height."\" alt=\" \" /><br />";
} else {
$put = "<img src=\"".$path."\" width=\"".$resize_width."\" height=\"".$resize_height."\" alt=\" \" /><br />";
}
break;
case "p";
$put = "<img src=\"".$path."\" width=\"".$resize_width."\" height=\"".$resize_height."\" alt=\" \" /><br />";
break;
}
echo $put;
}

//処理
img_tag();

?>


このスクリプトの仕組みは、まず、対象となる画像を以下のようにHTML側でSSIで指定し、本PHPを読み出します。

<!--#include virtual="/data/imagetrans/trans.php?file=test.jpg"-->


赤字の部分で読み出したい画像のファイル名を「file=ファイル名」で指定します。
オリジナルとなる画像(test.jpg)はPHPスクリプトと同じディレクトリに置く必要があります。
今回もPHPの場所はトップディレクトリから相対パスで指定します。

スクリプトはSSIで指定された画像を読み出し、とりあえず縮小版(横240ピクセル)をGDを使って作成し、スクリプト冒頭で指定したフォルダ(実行権限を707等にすること)に「_240」をつけて保存(test_240.jpg)します。

例によって、SSIをHTMLで読み出してやらなければなりませんから、.htaccess等に
以下の一文を追加し、PHPと同じディレクトリに置きます。

AddHandler server-parsed html


GDについては、サーバー側にインストールされている必要がありますが、たぶんたいていは大丈夫かと。不安であれは<?php phpinfo(); ?>でGDの項を見て「enable」になっていればOKかと思います。XREAサーバーで動作確認しました。

後は、携帯のユーザエージェントを判断して、ソフトバンクVGA端末以外は縮小画像を表示するHTMLタグを出力し、ソフトバンク端末のみ「HTTP_X_JPHONE_DISPLAY」というHTTPヘッダーから画面サイズを取得し、横が400以上の端末はオリジナル画像を表示するHTMLタグを出力する仕組みです。

このスクリプトはとりあえず付け焼き刃的なものなので、いったん縮小画像を作ってからも
毎回GDを起動してしまったりと若干効率が悪いです。この辺はファイルの存在を確認する一文を入れたほうがいいかも。時期を見計らってまた更新します。

本日は以上です。




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

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