前回の「携帯絵文字変換スクリプトの改良版 （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刷り）がまたまた決定しました！
ご購入いただいた方々本当にありがとうございます。
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制作でお仕事をされている方がかなりいらっしゃいました。
もちろん、そういう方も中にはいるだろうなっというのは、
この書籍を書き始めるときから、すでにブログの読者層から見ても
感じていました。（だから、本書がこういった方や個人で携帯サイトを制作されている方向けにターゲットを絞っているのですが…）
中には学生なんていう方も。いやはや、すばらしい！
やはり携帯サイトはそもそも若年層向けのものがヒットしやすいですし、
ユーザもそれだけ多いですから、携帯のことをよく知っているこういった若い方々に
ぜひ、携帯サイト制作にチャレンジしてほしいと思います。
自分もまだまだ若いですが （っと思い込んでいます。笑）
携帯サイトでのau端末の動作を確認する「Openwave SDK 6.2K」って
今公開中止になっていますよね。
これによって携帯サイト開発が滞ってる方って結構いらっしゃるんじゃないでしょうか。
実は私もサブPC用に入れたいのに入手できずにいた者の一人です。笑
プログラムがないかネットで情報を探したところ、
どうやらweb.archive.orgで入手可能な様子。
リンクはっておきますね。
Openwave SDK 6.2K
いつなくなるか分からないので、まだ入手できてない方は、
今のうちににゲットしちゃいましょう。
では。
P.S プレゼント企画ですが、続々とメッセージ届いてます。
ありがとうございます。現在約20名ほど頂いてます。
早くも「携帯サイト コーディング＆デザイン」の増刷が決定しました！
ご購入いただいた皆様、日頃から当ブログをご覧頂いている皆様
本当にありがとうございます！
また、当初は品切れが続いてご迷惑をおかけしました。
増版のご連絡を頂いたのは先週ですので、
発売日から計算すると…20日くらい？
いやはや自分もびっくりです。
コンピュータ書はもともと万人受けするようなものではないので、
増刷されずに姿を消していく書籍が多いと聞く中、こんな短期間で増刷されるとは。
それだけニーズも多いってことですから、本当にうれしいです。
ちなみに担当者様談では半年で増版でも珍しいとか…(^ ^;)
さてさて、前置きはこのくらいにして本題に。
せっかくですから、こちらでもプレゼント企画をやっちゃいましょう。
ささやかではありますが、
読者の方へ本書をプレゼントさせていただきたいと思います。
以下よりまずはご応募ください。
-------------------------------------------
■「携帯サイト コーディング＆デザイン」を2名様にプレゼント。
21日の23:59までご応募を受け付けます。→終了しました。
タイトルは「携帯サイト コーディング＆デザイン プレゼント応募」としてください。
※応募のときには住所などは書かなくて結構です。
※当選した方へ後日ご連絡さしあげます。その際にお届け先を伺います。
※2通以上のご応募があった場合は、抽選とさせていただきます。
※ご自身のブログ、Amazonレビューなどで書評をいただける方を優先します。
-------------------------------------------
そんなに人気ブログでもないので、たぶんそんなには集まらないでしょう。発売後ですし。
ですから、たぶん当選確率はかなり高いですよ（笑）
ぜひ、ふるってご応募ください！
あっそれと、プレゼントする書籍は初版のほうになります。
2刷りでは初版で直しきれなかった誤植や間違いなどがある程度修正されますが、
出版社の正誤情報で初版のミスは掲載していますので。
それでは。
