「今から始める携帯サイト制作」を執筆させていただきました。
本日より公開です。
このブログと同じで、PCサイトを制作したことはあるけど、
携帯サイトは初めてっていう方向けに書きました。
Think ITについてちょっとだけ説明させていただくと、Impress ITが運営するThink ITは、
Webに関わる技術者向けの技術解説サイトで、毎月2つの特集が組まれています。
特集では、一つのテーマを一人の著者が毎週同じ曜日を担当し、
1ヶ月で3〜5回（1回につき3ページ）に渡って解説しています。
で、10月は特集2でモバイル向け制作という特集が組まれ、
その中の毎週火曜日「今から始める携帯サイト制作」が僕の担当。
全4回に渡り以下のようなテーマでお話しします。
第1回 携帯サイトとPCサイトはここまで違う！ - 本日
第2回 携帯サイトの制作から公開まで（仮） - 10月17日（火）
第3回 3キャリア対応サイトを作るには（仮） - 10月24日（火）
第4回 携帯サイトならではのユーザビリティ向上（仮） - 10月31日（火）
このブログをギュッと濃縮して重要なポイントだけに絞って書いてみたので、
よければ見てみてください。サンプルソースとかもダウンロードできたりしますよ。
携帯×PHPで有名なmemokamiさんも昨日から同じ特集で記事を書かれていますよ〜
「携帯サイトをテストする方法」というテーマで。素敵。
ちなみに、裏話をさせていただくと、
今回の執筆は以前書いた記事「モバゲーのような携帯サイトを作るための12のTips」に、はてブがえらくつく光景にピンっときたThink ITの担当者様から直接メールを頂いたんです。
やっぱり携帯サイトを制作するにあたって、あまりに情報が少ないんじゃないかと。
そしてそれを求めている人が多いと言うこと。目の付け所が違いますな〜笑
実は同時期に別件でも話をもらっていて、いろいろと裏で作業を進めていたりします。
やっぱり携帯サイトってみんな注目しているですね。
肝心の記事ですが、偉そうに語っていて、さらに顔出ししちゃってるし。
あまりその辺は触れないでおいてください。
では。
0
ドコモ iモードサイト作成時のHTML DOCTYPEまとめ
（http://dspt.blog59.fc2.com/blog-entry-37.html）
について書きましたが、今読み返すとあまりに適当な気がして、
読者の方に誤解を招くのは申し訳ないので、携帯サイトを制作する際に、
DOCTYPEはどのように記述すべきかもう一度考えてみます。
現在、各キャリアが推奨しているDOCTYPEは、
Kamitani79-メロンとバナナとブログさんに書かれているように、各社独自に定めています。
が、しかし実際のところは、3キャリア共通のXHTMLを書く場合には、
XHTML Mobile Profileに従って記述するほうが、各社のXHTMLの仕様を見ても、
一番合っている気がします。
ただ、XHTML Mobile Profileはかの有名なW3Cが勧告したものではなく、
携帯端末の特性に合わせて、WAP Forumが仕様化したもの。
PCのようにW3Cに合わせるべきだという論調に従うのであれば、
W3Cがモバイル用に定めた、XHTML Basicに合わせる方がよいのでは？という意見もあります。
ただし、XHTML Basicではstyle属性によるCSSの指定ができません。
PCサイトを制作してきた人にとっては、今更style属性なんて。
と思われるかもしれませんが、携帯サイトでCSSを使う場合、
ドコモではstyle属性でしかできません。
ということで、どっちみち3キャリア対応とするならば、
XHTML Mobile ProfileかXHTML 1.0 Transitionalあたりを使うほかない気がします。
検索エンジンへのフォローという意味では、
GoogleはDOCTYPEにXHTML Basicを推奨していますが、
それはあくまで世界的に見た場合であって、独自に進化している日本においては、
それでいいの？という疑問符がつきます。
もちろん、検索エンジンのロボットはこのDOCTYPEだけで、携帯サイトを認識するのではなく、
例えば「絵文字が含まれているか」とか「半角カナが使われているか」、「ページ容量はどのくらいか」というように複合的に判断しているらしいので、XHTML Basicじゃなきゃダメ！というわけでもなさそうです。
ということで、私は以下のDOCTYPEがよいのでは？という考えで、サイトを制作しています。
■XHTML Mobile Profile 1.0
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
■XHTML 1.0 Transitional
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
豊富な表現が可能になっています。（ドコモはダメ）
ただし、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を利用する。
のようになっています。
では以下スクリプトです。
ソース：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キャリア別々のスタイルを適用することができます。
前回の記事「モバゲーのような携帯サイトを作るための12のTips」が予想以上の大反響で少々びっくりしてます。はてブの数とか半端ないです。こんなブックマークが付く記事を書いたことがありません。笑
いといろとコメントくださった方ありがとうございます。
おかげさまで、この記事以来、怒濤のように仕事が舞い込んできており、
多忙の毎日を送っています。
さて、今回は前回の記事のコメントでいただいた、
ソフトバンクのVGA端末でのサイト内画像の出力に関するお話です。
前回の記事で、ソフトバンクの高解像度（横240ピクセル以上）VGA端末では、ロゴなどの画像を他のキャリアに合わせて横240ピクセルで作成した画像を表示すると、高解像度のまま小さく表示されてしまう（けっこうかっこ悪い…）という問題がでてきてしまうという点について触れました。
ちなみに、ソフトバンク以外のキャリアの端末では高解像端末でも、画像の自動拡大縮小機能がブラウザについているので、画面ぴったりに表示されます。ちょうど以下のような感じ。
確かにソフトバンクの端末は挙動としては最も正しいのですが、このサイトの方針のように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を起動してしまったりと若干効率が悪いです。この辺はファイルの存在を確認する一文を入れたほうがいいかも。時期を見計らってまた更新します。
本日は以上です。
『モバゲーのような携帯サイトを作るためにはどうしたらいいんですか？』
っていう質問を最近良く受けます。
おそらく、モバゲーがとても有名で、ある種モバゲーが携帯サイト界のデファクトスタンダードのような
位置づけになってきているのでしょうか。
モバゲーのサイトデザインにするには、結構難しいことも多いし、学ぶことも多い。しかし、最近の携帯サイトは、実機からしかアクセスできないようになっていて、PCからコードを覗くことができないことも多く、学ぶことも難しいようです。
ということで、今回は実際にモバゲータウンに携帯でアクセスして、携帯の画面を見ながら、デザインを真似て新しく自分なりに作ってみましたので、そこから得た経験をTipsとして公開したいと思います。
ちなみに、左のスクリーンショットは、自分が似せて作った偽モバゲーのサイトの画像。おそらく、本家と変わらないデザインとなっていると思います。
なお、本来なら、HTMLやCSSのコードを公開してしまうほうが理解という意味では、最善だとは思うのですが、それをしてしまうとそのまま他のサイトにアップロードして、悪用する輩が必ず現れるので、残念ですが、公開はできません。コードを公開することは目的ではありませんし、悪用されることは本意ではありませんので、何卒ご理解ください。
さて、では順に説明していきます。なお、今回のサイトは3キャリア対応版ということで、1枚のHTMLですべて完成させています。
Tips 1. XHTMLで作成する。
画面の「新着ﾆｭｰｽ」や「お知らせ」にあるように、ブロックレベル要素に背景をつけるためには、ドコモではXHTMLで書かなければなりません。TABLEタグを使用することもできますが、その場合だと対応する端末の敷居を高くする結果となるので、XHTMLで全体をコーディングする必要があります。
XHTMLでHTMLを書くにはPC向けとは異なり、少々テクニックが必要です。これについては、前回の記事で詳しく書きましたので、そちらをご覧ください。
参照） iモードHTMLとiモードXHTMLを正しく切り替える方法
Tips 2. キャリアごとの仕様の差は外部CSSで。
モバゲーのように文字を1段階小さくして全体のテキストを表示する場合など、キャリアごとに若干差が出てきてしまう場合もあります。この場合、特に（ドコモ）と（au・ソフトバンク）に差がでることが多いので、こういうケースでは、外部CSSを読めるブラウザ（au・ソフトバンク）と読めないブラウザ（ドコモ）
の仕様の差を埋めるために、あえて外部CSSを読み込ませ、こちらにau、ソフトバンク向けのスタイルを記述することで解決します。
参考） 外部CSSの読み込み有無で微妙なレイアウトの違いを出す
Tips 3. 文字サイズを
（補足有り）
文字を小さくして表示するサイトも最近はよく見かけます。サイト全体の文字を一括で指定する方法は残念ながらありません。これは、ドコモが対応していないから。BODYタグに、インラインCSSで「font-size:smaller;」のように記述できないからです。
なので、これは文字ごとに指定してやるしかないです。
ではどうするかというと、私はこう書きました。たとえば、画像の「[マイページ ｜ 友達紹介]」の部分は、
<div style="text-align:center;" class="small">
<span style="font-size:smaller;">[<a href="test.html">マイページ</a> | <a href="test.html">友達紹介/a>]</span>
</div>
と書いてます。ここで、DIVタグのclass属性の「small」は外部CSSにスタイルを記述していますが、
そこには以下のように書いています。
.small {
font-size:12pt;
}
外部CSSが読み込まれるauとソフトバンク携帯の場合、文字サイズが12ptという情報が初期の段階で読み込まれます。一方、ドコモではこの情報は無視されますが、SPANタグに書いたインラインCSSで文字サイズを一段階小さくする記述をしているので、文字は小さくなる。なお、このSPANタグのCSSは
※追記
ごめんなさい。ちょっと誤解を招く書き方をしてしまいました。
CSSによる携帯サイトの文字サイズ指定については後日改めて記事にします。
※さらに追記
どうやら、以下のようにDIVタグにfont-sizeプロパティを指定して、bodyタグ以下の属性として
記述してやれば、全体で文字サイズを指定することも可能な様子。
BODYタグに記述しても不可なのは確かですが、この方法なら簡単ですね。
ドコモの仕様ではSPANタグしかfont-sizeは指定できないって書いてあるのに…
<body>
<div style="font-size:small;">
本文
</div>
</body>
Tips 4. ロゴ画像のサイズは横240ピクセル
最近の携帯はほとんどが横240ピクセルより高解像度化していますが、auやドコモのブラウザでは、画像を自動的に拡大縮小する機能が備わっており、横240ピクセルで作っておけば、大抵は画面ピッタリに収まるようになっています。ただし、ソフトバンクは高解像度のまま表示する他に合わせないKYな仕様をしている端末もあり、240ピクセルでは画像が小さく表示されてしまう端末もありました。
参考） 3キャリア対応サイトを作る際の注意点 （画像フォーマット編）
Tips 5. 流れる文字はDIVタグで
実際のモバゲーにはないのですが、電光掲示板のような流れる文字を表示させることもできます。この場合、HTMLタグにマーキータグがありますが、今回はXHTMLで書いているので、以下のようにDIVタグを使いました。
参考） 狭くて小さな画面だからこそ携帯に適したマーキー（marquee）タグ
<div style="display:-wap-marquee;">
この画面はﾓﾊﾞｹﾞｰﾀｳﾝに似せて作ったﾃｽﾄ画面です。
</div>
Tips 6. 反転文字
「新着ﾆｭｰｽ」のような背景をつけた反転文字はどのように表現するかというと、
<div style="text-align:center;background-color:#007128;">
<span style="color:white;">新着ニュース</span>
</div>
としてます。
ここで重要なポイントは2点。
まず、背景はDIVタグにbackground-colorプロパティでCSSで指定します。ここで、同時に、文字の色も指定すれば、もっと単純化できますが、colorプロパティをDIVタグに書いてもドコモでは読み込まないので、別途SPANタグで文字カラーを指定します。
参考） iモードHTMLとiモードXHTMLを正しく切り替える方法
Tips 7. 色つき水平線
（補足有り）
新着ﾆｭｰｽの帯の前後についている背景の水平線（区切り線）はどのように表現するかというと、
<hr style="border-color:#ccc;background-color:#ccc;height:1px;" color="#cccccc" />
としました。CSSとタグの属性でなんで2回指定してるんだと思われるかもしれません。しかし、これもテクニックで、線の色を変える場合、インラインCSSの「background-color」プロパティだけでは、auで見ると変わらないんです。なので、改めて、同じ色をcolor属性でつけています。
border-colorは線の太さを1ピクセルにしている場合、ドコモでしか効ききませんが、これをしないとドコモでは線の外側は黒になってしまうので、同色を指定しています。
Tips 8. 右寄せ
（補足有り）
画像中の「もっと見る」にあるように、右寄せで文字を表示させる方法は、CSSで「text-align」プロパティを用いるのが良いと思われます。したがって、
<div style="text-align:right;">
<a href="test.html">もっと見る</a>
</div>
とするのが一般的です。中央揃えの場合はCENTERタグを使うこともできますが、XHTMLでは古いので、こちらのほうがよいでしょう。ちなみに。DIVタグではなく、SPANタグで囲む方法もありますが、本来「text-align」プロパティはブロックレベル要素にしか適用できないので、誤用となります。
Tips 9. 画像の回り込み
（補足有り）
画像中のエンタメ内にあるように、画像に文字を回り込ませて、たとえば、モバゲーのように画像の右側に文字を回り込ませる方法は以下。
<img src="./images/firefox.jpg" width="50" height="50" alt="" style="float:left;margin-top:3px;margin-right:3px;margin-bottom:8px;" align="left" border="0" /><a href="game.html">ゲーム</a><br />ﾊﾞｽｹで給料UP!?<br clear="all" />
です。ここでのポイントは、2つ。
まず、通常回り込みを行う場合は、DIVタグなどにfloatプロパティを用いて実現しますが、auなどではfloatプロパティに対応していないので、上記のようにドコモ用にインラインCSSでIMGタグにfloatプロパティで回り込みさせ、一方au向けにはIMGタグのalign属性で同様に指定します。
そして回り込みを解除したい位置で<br clear="all" />します。
また、その他の方法として、TABLEタグを使って、擬似的な回り込みを実現する方法もありますが、TABLEタグに対応していない端末が多いので、避けるべきです。
参考） Openwave XHTML Mobile Profile レファレンス
Tips 10. 携帯サイトは文字でデザインする！
携帯サイトは文字でデザインするといっても過言ではなく、改行せずに画面いっぱいに表示できる文字数は決まっているので、できる限り文字を短くし、他と文字数が揃うように調整してやりながら、全体としてみたときに上手く調和がとれている必要があります。
参考） 半角カナのなせる技〜オシャレかつスマートに着飾る魅力
たとえば、コミュニティー＆アバター内の「友達検索〜友達を誘おう」までの部分を見てください。
メニューとそのメニューの説明が「：」を境に区切られ、しかも全体が揃っているため、見やすくなっています。これをコーディングする際、通常はTABLEタグを使う発想が考えられますが、たぶんモバゲーもTABLEタグは使用していないでしょう。
たとえば、友達検索の部分では、単に
友達検索：友達探そう
として、文字が一文字分足らない「タウン」の部分は、
タウン ：身近な仲間も!?
として、タウンの文字の後に単に全角スペースを挿入するに過ぎません。
でも、これでも携帯サイトの場合はOKでしょう。
また、「サークル」の部分では、本来携帯サイトは文字幅の節約をするために、「ｻｰｸﾙ」のようにカタカナは半角で表示するテクニックが使われますが、今回のように「：」までの文字数はモバゲーの場合は4文字にしているので、あえてサークルを全角で書いているのだと思います。
Tips 11. フッターは最後に。そして質素に。
お問い合わせや利用規約など、あまり読まれないようなリンク先は通常フッターにもってくるのが、普通です。携帯サイトは極端に縦に長いですし、上から順に目を通していくので、あまり目立たせる必要のないメニューはフッターでよいでしょう。また、目立たせる必要がありませんので、背景をつけたり、文字を大きくしたりする必要もなく、簡素に書くことも必要だと思います。
Tips 12. 絵文字のちょっとしたテクニック
ドコモやソフトバンクの絵文字は、文字を一段階小さくした場合でも、そのタグの中に収められた絵文字は文字と同じように縮小されて表示されます。
一方で、auの場合、auの技術情報にあるようにau向けの絵文字を表示させる場合のタグは、
<img localsrc="絵文字番号" />
としますが、この場合だと、絵文字は端末内から呼び出されるので、文字と同じようには縮小されません。つまり、
<div style="font-size:10pt;"><img localsrc="絵文字番号" />文字</div>
と表記しても、文字は小さくなっても、絵文字は小さくなりません。
これを回避するためには、あえてドコモの絵文字を記述し、auのサーバー側で絵文字をau向けに自動変換させる方法があります。この場合であれば、ドコモの絵文字の記述方法でauに対応させることもできますし、絵文字を縮小表示させることができるので一石二鳥です。
なお、このブログで以前紹介した、携帯絵文字変換スクリプトの改良版では、この縮小表示に対応していますので、もしご興味があれば使用してみてはいかかがでしょうか。
参考） 携帯絵文字変換スクリプト改良版の配布 （3キャリア対応 - PHP）
長くなってしまいましたが、今回はこのへんで。
携帯サイトは仕様が乱立しているだけに、なかなか一筋縄ではいきませんね（笑）
------------------補足情報 （8月19日）------------------
記事を投稿してからある程度メールやコメントなどでツッコミをいただき、
情報がまとまってきたので、ここで一度補足しておきます。
1. ソフトバンクのVGA端末のKYっぷりをなんとかして
この記事の次でPHPスクリプトを使った解決方法をまとめてみました。
静的なHTMLで対応させるのはやはり難しいようです。
2. HRタグを使うよりスペーサー.gifを使うほうが一般的なのでは
モバゲーのように区切り線を使って段落を分ける場合、HRタグを使うより、spacer.gifを使った方がよいのでは？という指摘がありました。
たぶんご指摘の方法が一般的ですね。ただ、こちらで改めて複数の端末で確認したところ、auとソフトバンクはspacerは使っていませんでした。たぶん、これらのキャリアはCSSで対応させて、ドコモの場合はスペーサーを使ってるかもしれませんね。
3. 12pt+smallerは文字が2段階下がることもある
これは、こちらの書き方が悪かったですね。申し訳ありません。確かに、ソフトバンクの携帯ではCSSの挙動に正確な機種が多いので、この指定方法だと文字サイズが2段階下がる機種も多いです。ただ、私が調べた限りではこの方法がキャリア間の違いが一番少ない指定方法だったので。
ちなみに、実機のソフトバンク携帯で実際のモバゲーを見たのですが、見事に文字サイズが2段階下がってました。機種の文字サイズ設定にもよるので、このへんは大目に見る必要があるのかも。とりあえず上記のTipsはタイトルを修正させていただきました。
もし、1枚のHTMLとCSSで文字サイズを全ての機種で1段階下げる方法を知っている方はぜひ教えてください。もちろんプログラムを使用しないという条件付きでお願いします。
改めて文字サイズについては新しい記事でまとめる予定です。
4. XHTMLはmova非対応
ご指摘はおっしゃるとおりですが、今回の記事の目的はあくまで「モバゲーのようなサイトを作るには」がテーマですので、DIVタグを使った反転文字等の関係で、省略させていただきました。
5. docomoは<br clear="all" />で回り込みを解除できないよ！
仰せの通りです。訂正させてください。
ご指摘の通り、ドコモでは<br clear="all" />だけでは解除できません。
回り込みを正しく解除するには2通りの方法があります。1つは回り込み解除位置の次にHRタグを使用する方法。この場合であれば、HRタグによって<br clear="all" />はなくてもドコモでもauでも回り込みは解除されます。
2つ目は回り込みを解除したい位置の次にくる要素をDIVタグで囲み、以下のように回り込みを解除する方法です。回り込みを解除する位置に<br clear="all" />は必要ありませんが、古い機種も考えると入れておいたほうがよいです。
<br clear="all" />
<div style="clear:both;">
次にくる内容
</div>
ちなみに、画像と回り込みさせる文字のほう側をDIVタグなどのブロックレベル要素で囲ってあげでもドコモでは回り込みは解除できません。また、2つめの方法だとauでは改行されないという指摘がありましたが、そのような現象は確認できませんでした。
なんと前回から約8ヶ月ぶりという更新。
さぼりすぎててすみません。
言い訳すると、ちょっと私的な都合でホームページの運営や更新の現場から離れていまして、
最近復活しました。
いろいろとコメントを頂きありがとうございます。
一通り読ませていただいています。
さて、もう今となっては古い情報になってしまいましたが、
話題のiPhone 3Gが7月に発売されるようですね。
デジモノ好きの自分としてはなんとも物欲をそそる商品。
ぜひ値段も安いそうですし欲しいですね。
さて、このiPhone。日本ではソフトバンクから発売されるそうで。
auを使っている自分ははたしてどうするか。
中にはiPhoneを今のキャリアを変えてまで欲しいという人もいますが、
自分としてはiPhoneは2台目に最適な商品ではないかと思うのです。
MNPまでしてソフトバンクに変更しない理由。
それは、ネットワークの信頼性。
現在通信方式としてiPhoneに対応しているのはドコモとソフトバンクですが、
2社が決定的に違うのは、プラットフォーマーなのか、コンテンツプロバイダなのかどうか。
ドコモは前身がNTTなので、無線通信の技術力が非常に高い。
一方、ソフトバンクはボーダフォンを買収した過去から分かるように、
ゼロからの基地局整備の経験や通信に関する技術の蓄積がない。
だから技術に関しては2社には劣っているはずです。もともと進む方向が違うのでしょうけれど。
マーケティングや戦略などは意思決定の早いソフトバンクが勝っていると思いますが、
このような理由で、すべて（音声+データ通信）をソフトバンクに委ねるというのは正直不安です。
iPhone欲しいけど、ドコモからだったらよかったのに。って思っている人
意外と多いんじゃないでしょうか。
携帯電話って確かにランニングコストが安いことも大事なのだけれど、
やっぱりカナメは音声通話が途切れずにいつでもどこでも可能なこと。
現にソフトバンクは最近、度重なるネットワーク障害で、総務省から行政指導を受けています。
海外と違い日本の場合は、電波は国民の財産という考え方がベースになっていて、
通信事業者にはクリティカルなサービスを提供する義務を課す代わりに、
電波帯域を無料で認可する形式をとっているので、このような障害が発生するとお役所に怒られちゃう。
だから、24時間のノンストップサービスを提供し続けることがいかに大事かってことも理解できます。
iPhoneを使うにあたって、自分の場合は結構スミワケができていて、現在持っているauは音声通話とメール。
iPhoneはWebブラウジングといったデータ通信で主に使おうと思っているので、
現在ダブル定額を契約しているauの料金を下げ、その分をiPhoneに充当すれば、
まぁそこそこの値段で2台もつこともできそうです。
もともとこのような使い方だと、最悪ソフトバンクで障害が起きてもデータ通信が出来ないだけで
auの電話機で音声とメールは使えるので、安心です。
iPhoneは完璧大人のおもちゃな気がして、そこにはまってしまう自分がいるのですが、
すべては料金しだいですね…
携帯サイト作成法から離れて、今回はiPhoneについて自分なりの見解を載せてみました。
ちなみに、iPhone3Gは自作アプリにも対応しているそうで。
しかも、全世界にiTunesStoreを通して発信できるそうですね。
ということは開発者にとっては、マーケットが非常に大きい。
日本だけでなく、うまく海外ユーザの心をつかめれば、iPhoneで有償アプリの提供で収益を
十分に確保するモデルも生まれそう。
今後は、iPhoneも視野に入れた携帯アプリの開発も視野に入れていきたいですね。
携帯の機種によってDOCTYPEを自動出力するようなプログラム（関数）
を作ろうかなって思ったので、ここで今一度覚え書き程度にまとめてみます。
3回にわたって各キャリア別に書いていきます。
まずはドコモから。
○iモードHTML
通称：Compact HTML（CHTML）。W3Cで正式な勧告がなされている。<!DOCTYPE HTML PUBLIC "-//W3C//DTD Compact HTML 1.0 Draft//EN">
以前、携帯メーカー各社がこの「Compact HTML」をW3Cに逆提案したいきさつがある。
現在バージョンは7.0まであり、バージョンアップを重ねるごとに
ドコモの新機能に対応した形でリリースされる。基本的にはHTMLと同様。
このDOCTYPEは省略可能か公式サイトには明言されていませんが、
省略しても動作はするようです。
○iモードXHTML（バージョン共通）
基本はこの共通系で動作しますが、通常はiモードXHTMLのバージョンによってDOCTYPEが用意されているので、そちらに合わせた方が良いでしょう。<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />...
バージョンによるDOCTYPEは以下。
iモードXHTML1.0
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.0) 1.0//EN" "i-xhtml_4ja_10.dtd">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />...
iモードXHTML1.1
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/1.1) 1.0//EN" "i-xhtml_4ja_10.dtd">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />...
iモードXHTML2.0
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.0) 1.0//EN" "i-xhtml_4ja_10.dtd">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />...
iモードXHTML2.1
<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.1) 1.0//EN" "i-xhtml_4ja_10.dtd">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />...
たぶん分かると思いますが、iモードXHTMLの場合は、
DOCTYPEの以下の部分がバージョンに合わせて変わるだけです。
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.1) 1.0//EN" "i-xhtml_4ja_10.dtd">
文字コードはiモードXHTMLの場合に限り、UTF-8も可能です。
この場合は、「Shift_JIS」を「UTF-8」に変えて、HTMLをUTF-8で保存し直せばOKでしょう。
ただし、3キャリア対応サイトを作るなら、Shift_JISにするほうが良いです。
これは前の記事でふれました。
なお、iモードXHTMLのDOCTYPEは省略不可。これは前回の記事で詳しく解説しました。
DOCTYPEを省略したり、記述を間違うと、ブラウザがXHTMLモードにならないので、
いじらない方が無難です。
