携帯サイト市場としてすぐに対応は必要ですか？
というご質問を頂いたので、今更ではありますが僕なりの見解をお伝えしますね。
結論から言うと
「もちろん動向をウォッチしていくことは必要だが、焦ってすぐに対応する必要はない」
と思います。
iモードブラウザ2.0がドコモ新機種（昨年の夏モデル）に搭載されたとき、
技術系のブログではいち早く過去のブラウザバージョンとの違いを比較した情報を伝えていましたが、
私はその情報はもちろん作り手として知る必要はあると思うんですけど、
おそらく皆さんが思っているのは、そうではなくて、
じゃぁすぐに対応すべきかっていうことだと思うんです。
確かに携帯サイト業界のトレンドや動向は変化が早いと言われますが、
XHTML+CSSベースで携帯サイトが作れるようになった今でも、
核となる制作ノウハウは実はそれほど変わっていないんです。
この手の情報が少ないだけに、気になってしまうのかな？と思っています。
確かに、市場にiモードブラウザ2.0に対応した携帯端末が増えてきたのは事実。
しかし、全体のパイから考えればまだまだ割合では少ないはずです。
全体の機種の割合ではなく、あくまで売れた数で割合は決まりますので。
世の中的な動向を鳥瞰すると、
現況としては、ようやく3G端末のシェアが8割を超えて、movaなどの2G機種から3Gの移行を
キャリアが躍起になっているところに次世代のLTEが始まろうとしている。
という状況ですので、
ようやく2Gユーザを切り捨てようかなと思っている携帯サイトをリッチ化して2.0向けに
改修する時間的、規模的コストを考えてもその必要性がなければ今のままでも十分なのではないかと思います。
とはいってもねぇ・・。
その気持ち分かります。笑
しかし、私もなぜかすぐに対応する気は起こりません。
やはり以下の特徴があるからではないでしょうか。
という現状がありますから、あまり対応する必要性が見あたらないのです。■iモードブラウザ2.0対応のメリット
・i-CSS2として外部CSSの読み込みができるようになっていることは大きな変化
・これにより、ようやく3キャリア対応携帯サイトの作成もだいぶ楽になるのではと思われる
■iモードブラウザ2.0の今
・まだiモードブラウザ2.0搭載機種の市場シェアがだいぶ低い。
・iモードブラウザ2.0の下位互換性により既存のページの改修は
2.0ではないといけない要件がなければ特に対応が不要。
もちろん要件次第とは言えますが、
やはり、結論としては
まだまだdivタグ直書きCSS+XHTMLという
従来の携帯サイトの作成手法が有用かつ一般的と思われます。
1
ご無沙汰しております。かなりブログを放置して、かれこれ1年が過ぎてしまいました。
まだ、当ブログを見ている方はいらっしゃるのでしょうか。。
すみません。。冬眠...いや、いろいろと忙しい毎日を送っておりました。
1年の間に携帯サイト業界も目まぐるしく変わり、
スマホの台頭、iPhone、iPad発売、それでもまだガラケーがシェアを独占している日本です。
携帯サイトはこれからどうなるか分かりませんが、
それでも携帯サイトの魅力ってまだまだありますよね、秘めた力も持っている。
そろそろ、何か書かなくてはならないなぁと焦り初めている今日この頃です。
すみません、他愛もない話をしてしまって。
まだ書くネタは決まっていませんが、
踊る4みたいに、またちょっと制作のやる気が出てきましたので、また書き始めようかなと思います。
とりあえず報告まで。
#執筆させていただいた「携帯サイト コーディング＆デザイン」ですが、
今もなお順調に売れ続け、増刷を繰り返しております。ありがとう！
前回の「携帯絵文字変換スクリプトの改良版 （PHP・SSI対応版）を作りました」の記事や
過去の記事においてもたびたびご質問があったケースについてここで一度回答したいと思います。
ご質問いただいた方ありがとうございました。
質問の内容は、
「ドコモの絵文字がすべて白黒で表示されてしまう」
という問題です。当ブログで配布している携帯絵文字変換スクリプトに限らず、
ある指定をHTMLにしていると、ドコモの絵文字がすべて黒で表示されてしまいます。
その条件とは、
①HTMLで、BODYタグ内の属性においてページ全体の文字色を指定しているケース
例： <body text="#000000">…
どちらの場合の例でも、ページ全体の文字色を黒に指定していますが、②XHTMLまたはHTMLでBODYタグ内のstyle属性でCSSでページ全体の文字色を指定しているケース
例： <body style="color:#000;">…
ドコモ端末の場合に限り、この指定をしてしまうと、
絵文字の色もすべてテキストと同じ色になってしまいます。
これは、結論から言ってしまうとドコモの仕様であり、
ドコモの絵文字が平滑な2Dのピクトグラムであるためです。
他のキャリアではそもそも絵文字がソリッド感のある3Dのドットイメージのため、
絵文字自体に多くの色が使われており、その色自体を変更することはできません。
このドコモの仕様がいいのやら悪いのやら…
まぁそこは利点でもあり欠点でもあるので、この仕様を理解した上で、
うまく使いこなすことをオススメします。
ちなみに、ドコモのデフォルトの絵文字色を変更する場合は、
とし、HTMLでは
<font color="#******">絵文字</font>
とします。XHTMLまたはHTMLでは
<span style="color:#******;"></span>
P.S 書籍「携帯サイト コーディング＆デザイン」の増刷（第3刷り）がまたまた決定しました！
ご購入いただいた方々本当にありがとうございます。
今回はその改良版です。今まで、こちらの携帯絵文字変換スクリプトを使用していた方で、
どうやっても動作しないよ！と悩んでいた方はこちらに変えてみてください。
改良点は以下の通り。
・もちろん
・PHPとSSI両方に対応
・安定動作のため、Unicode数値参照方式（&#x\\\\;）に変更
・PHPは4と5で動作
・PCで閲覧した場合にも絵文字が表示される
・ドコモの絵文字を基準とするのはそのまま
以前の携帯絵文字変換スクリプトはドコモの絵文字においてShift-JISの2バイトコードを
絵文字の変換テーブルに用いていたため、サーバー環境によっては文字化けが起きたり、
XHTMLとHTMLで動作が異なったりしていましたが、今回は全キャリアが対応している
Unicodeという数値参照方式を採用しているのため、絵文字の出力が安定的
（サーバーの環境に依存しにくい）です。
では、まず、サンプルから。
■PHPで動作させる場合
■SSIで動作させる場合
サンプルソースはこちらからダウンロードできます。
ファイル構成は以下の通り。[ ]はフォルダ。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
[public_html]
├[include]
├[emoji]
├[images]--***.gif （PC絵文字用の画像）
└table.tsv （絵文字変換テーブル）
├commons.php （共通ファイル読み込み）
├emoji_trans.php （絵文字変換スクリプト）
└user_agent_carrier.php （キャリア判別）
├.htaccess （SSIをHTMLで動作させるためのファイル）
├test_emoji.php （絵文字をPHPから読み出す場合のサンプルファイル）
└test_emoji_ssi.html （絵文字をSSIから読み出す場合のサンプルファイル）
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
※includeフォルダ以下の構成は変えない方が良いです。
では一つづつ解説していきます。
■table.tsv （絵文字変換テーブル）
絵文字 （Unicode）の変換テーブルです。1～3列目でドコモ、au、ソフトバンクの順番。
各キャリア絵文字をUnicodeで入力する場合は「&#x\\\\;」となりますが、この「\\\\」の部分のみ
このファイルに書いてあります。なお、Unicodeで絵文字を入力する場合、
ドコモではiモードHTML4.0以上となっているので、これ以上の機種が対応となります。
■commons.php （共通ファイル読み込み）
絵文字変換スクリプトに必要なファイルを読み込むためのファイルです。
includeフォルダ以下の構成を変えない限り特に変える部分はありません。
■emoji_trans.php （絵文字変換スクリプト）
この部分が絵文字変換の肝となるスクリプトです。
以下の部分を必要に応じて変えます。
絵文字変換テーブルの場所を指定します。このファイルからの相対パスで記述します。○12行目
//絵文字変換テーブル（相対パス）
$emoji_data = "/emoji/table.tsv";
通常はそのままでOK。
PC絵文字用のGIFファイルが格納されているフォルダの場所を、○15行目 （重要！）
//PC用絵文字格納フォルダ（トップディレクトリからの相対パス）
$emoji_img_dir = "/include/emoji/images/";
トップディレクトリからの相対パスで指定します。その他の部分は、すべてそのファイルからの
相対パスですが、この部分はトップディレクトリからの相対パスにしてください。
つまり、[include]以下のフォルダの場所（階層）によってこの部分は書き換える必要があります。
○18行目 （重要！）
PHPから読み出す場合は「0」に、SSIから読み出す場合は「1」に設定します。//動作モード（PHPから呼び出す場合は0、SSIなら1）
$mode = 0;
SSIで動作させる場合にこの部分が「0」のままだと正しく動作しません。
■user_agent_carrier.php （キャリア判別）
携帯端末のキャリアを判定する関数。
ここも通常はこのまま。
■.htaccess （SSIをHTMLで動作させるためのファイル）
HTMLでSSIを動作可能にするためのおまじないファイルです。
「AddHandler server-parsed html」とするのがミソ。（それ以外の部分は関係ありません）
HTMLと同じフォルダに設置します。ただし、htaccessが設置可能なサーバーに限ります。
また、SSIで動作させない場合はこのファイルは必要ありません。
■test_emoji.php （絵文字をPHPから読み出す場合のサンプルファイル）
まず、上の共通ファイルである「commons.php」をincludeする文を冒頭で指定。
相対パスで指定すればOKです。
あとは、絵文字番号を以下のように指定して、絵文字を表示させたい部分に書けばOK。
絵文字番号表はこちらに掲載しています。<?php emoji('1');?>
■test_emoji_ssi.html （絵文字をSSIから読み出す場合のサンプルファイル）
SSIから読み出す場合は、ちょっと気をつける点があります。こちらも絵文字番号を指定するだけでOK。
<!--#include virtual="/include/emoji_trans.php?emoji=1"-->
まず、「virtual」でSSIは読み出さないと、「?」以下の「emoji」という引数が渡されないため、
このようにします。「exec」では引数が渡されないためNG。
従って、SSIの読み出しで「virtual」が不可となっているサーバーでは使用できないので注意してください。
また、パスはトップディレクトリからの相対パスで「emoji_trans.php」がある場所を指定します。
絵文字番号はPHPから読み出す場合と同じです。
以上です。
そこで指定すべきコンテンツMIMEタイプはどのようにしなければならないか。
これはこのブログや書籍をご購入いただいた方はすでにご存じかと思いますが、
ドコモの仕様に合わせて「application/xhtml+xml」を指定するということでした。
再度説明するとドコモがXHTMLモードになる条件は
①サーバーが出力するHTTPヘッダーを「application/xhtml+xml」とする。
②metaタグの「content」を「application/xhtml+xml」とする。
ことでした。しかし、この方法では、
1. 古い機種によってはエラーになってしまう可能性があること。
2. auやソフトバンクはMIMEタイプを「text/html」としてもXHTMLで動作すること。
3. 「application/xhtml+xml」としなければならないのはドコモのFOMAだけであるということ。
を鑑みると、仕様上「must」でなければならないFOMAを除いては「text/html」でもよい。
という考えもありかと思っています。
そこで、ドコモのFOMAのみ「application/xhtml+xml」を出力するPHPで動作する
プログラムを作ってみました。
■USER AGENT DOCOMO SWITCH FUNCTION （user_agent_docomo.php）
まず、ドコモ端末においてmovaとFOMAを判断するプログラムを関数化しました。
以下がソースコード。
ユーザエージェントはmovaが「DoCoMo/1.0…」、FOMAが「DoCoMo/2.0…」です。
user_agent_docomo( )関数にユーザエージェントを投げると、
「foma」 or 「mova」という文字列を返します。
このあたりはPEARライブラリのNet_UserAgent_Mobileを使ってもよいでしょう。
<?php
//┌─────────────────────────────────
//│ [ USER AGENT DOCOMO SWITCH FUNCTION Ver1.0]
//│ user_agent_docomo.php - 2009/01/27
//│ Copyright (C) DSPT.NET
//│ http://www.dspt.net/
//└─────────────────────────────────
//携帯端末のユーザエージェントを判定（ドコモのみmovaとFOMAの判別あり）
function user_agent_docomo($data){
if(preg_match("/^DoCoMo\/1\.0/i", $data))
{
return "mova"; // mova
}
if(preg_match("/^DoCoMo\/2\.0/i", $data))
{
return "foma"; // FOMA
}
else {
return "unknown"; // unknown
}
}
?>
■CONTENTS MIME TYPE SWITCH FUNCTION （mime_type.php）
この結果を受け取り、ドコモのFOMAのみ「application/xhtml+xml」の
コンテンツMIMEタイプを返すプログラムの関数は以下。
以下で指定するmime_type( )関数において、fomaが投げられた場合、
「application/xhtml+xml」という文字列を返します。
<?php
//┌─────────────────────────────────
//│ [ CONTENTS MIME TYPE SWITCH FUNCTION Ver1.0]
//│ mime_type.php - 2009/01/27
//│ Copyright (C) DSPT.NET
//│ http://www.dspt.net/
//└─────────────────────────────────
//ドコモのFOMAのみ適切なコンテンツMIMEタイプを出力する
function mime_type($data) {
if($data == 'foma') {
return "application/xhtml+xml";
}
else {
return "text/html";
}
}
?>
以上で必要なプログラムはおしまい。
あとはこのファイルをインクルードして、以下のようなサンプルPHPとして動作させれば、
適正なコンテンツMIMEが指定されたHTMLとなります。
■テストプログラム （test_mime_type.php） テストURL
<?php
include ('include/user_agent_docomo.php'); // USER AGENT DOCOMO SWITCH
include ('include/mime_type.php'); // MIME TYPE
include ('include/cache_control.php'); // CACHE CONTROL
//携帯UA取得
$agent = user_agent_docomo($_SERVER["HTTP_USER_AGENT"]);
//HTTPヘッダー
header("Content-Type: ".mime_type($agent));
echo "<?xml version=\"1.0\" encoding=\"Shift_JIS\"?>\n";
?>
<!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="<?php echo mime_type($agent);?>; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<?php echo cache_control('on','xhtml');?>
<meta name="description" content=" " />
<meta name="keywords" content=" " />
<meta name="robots" content="index,follow" />
<title>MIME TYPE</title>
</head>
<body>
<!--WRAPPER-->
<div style="font-size:x-small;">
UA : <?php echo $_SERVER["HTTP_USER_AGENT"];?><br />
Content-Type: <?php echo mime_type($agent);?><br />
</div>
<!--WRAPPER END-->
</body>
</html>
$_SERVER["HTTP_USER_AGENTにより携帯端末からユーザエージェントを抜き取り、
先ほど2つの関数が書かれたファイルをインクルードします。
あとはHTTPヘッダーとmetaタグのコンテンツMIMEタイプを指定する部分に、
mime_type関数より適正なMIMEタイプを出力します。
■CACHE CONTROL SWITCH FUNCTION （cache_control.php）
ちなみに、「cache_control」という関数は、キャッシュコントロールを制御するための
metaタグを適正に出力するというものでおまけ。「include」で読んでいる「cache_control.php」は
以下のようなソースコードになっています。
キャッシュOFFとONの切り替えができるのと、HTMLとXHTMLのmetaタグの切り替え機能がついています。
cache_control（'on','xhtml'）とすると、キャッシュオフのmetaタグを出力するとともに、
XHTML用のmetaタグを出力します。cache_control（'on','html'）とすれば、HTML用のmeta
タグを出力します。cache_control（'off','***'）とすれば、
キャッシュオフのmetaタグを出力しないというよりmetaタグそのものを出力しません。
<?php
//┌─────────────────────────────────
//│ [ CACHE CONTROL SWITCH FUNCTION Ver1.0]
//│ cache_control.php - 2009/01/27
//│ Copyright (C) DSPT.NET
//│ http://www.dspt.net/
//└─────────────────────────────────
//キャッシュコントロール制御
function cache_control($data,$html) {
$meta_line1 = "<meta http-equiv=\"pragma\" content=\"no-cache\"";
$meta_line2 = "<meta http-equiv=\"cache-control\" content=\"no-cache\"";
$meta_line3 = "<meta http-equiv=\"expires\" content=\"-1\"";
if($data == 'on') {
if ($html == 'xhtml') {
$out = $meta_line1." />\n".$meta_line2." />\n".$meta_line3." />\n";
}
else {
$out = $meta_line1.">\n".$meta_line2.">\n".$meta_line3.">\n";
}
return $out;
}
else {
return "";
}
}
?>
なお、ソースコードを保存するのが面倒という方は、
こちらからダウンロードできますので。
各社どのように対応するか詳しく挙動を調べてみたのでメモ。
| ||||||||||||||||||||||||||||
※画像はbackground-imageで指定するが、ドコモではbodyタグのみ。
ソース例
合成形はあまり指定することはないですが、<body style="background:url(./image.gif) no-repeat; background-position:30px;">
<!--WRAPPER-->
<div style="font-size:xx-small;">
<div style="background:navy;color:white;text-align:center;"><background-position></div>
<br />
<!--文字-->
background-positionの挙動<br />
body要素に適用<br />
</div>
<!--WRAPPER END-->
</body>
auでは対応してないようです。
携帯サイト コーディング＆デザインの
プレゼント企画無事終了いたしました。
今回は全部で36名の方からの応募がありました。
当初はもっと少ない（5名くらい？）と思っていたので、ちょっと驚いてます。
ご応募頂いた方、ありがとうございました。
メッセージすべて読ませて頂きました。
当選した方には、すでにメールをお送りしています。
残念ながら、抽選からもれてしまった方、ご期待に添えず申し訳ありません。 m(_ _)m
応募頂いた方ではWEB制作でお仕事をされている方がかなりいらっしゃいました。
もちろん、そういう方も中にはいるだろうなっというのは、
この書籍を書き始めるときから、すでにブログの読者層から見ても
感じていました。（だから、本書がこういった方や個人で携帯サイトを制作されている方向けにターゲットを絞っているのですが…）
中には学生なんていう方も。いやはや、すばらしい！
やはり携帯サイトはそもそも若年層向けのものがヒットしやすいですし、
ユーザもそれだけ多いですから、携帯のことをよく知っているこういった若い方々に
ぜひ、携帯サイト制作にチャレンジしてほしいと思います。
自分もまだまだ若いですが （っと思い込んでいます。笑）
