携帯の機種によって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モードにならないので、
いじらない方が無難です。
6
iモードHTMLとiモードXHTMLの両方に対応したモードが搭載されています。
例えば、最新のハイエンド機種FOMA 904iでは、ドコモの技術情報の端末スペック表を見ると、
iモードHTMLはバージョン7.0、iモードXHTMLは2.1に対応していることが分かります。
これは、携帯電話が機能向上するのと並行して、
携帯に対応したHTMLもバージョンアップを繰り返すためです。
このi-HTMLとi-XHTMLの違いは、多くはHTMLタグで指定できる属性やCSSの対応状況になりますが、簡単に言ってしまえば、i-XHTMLのほうがより豊かな表現が可能になっていると解釈しても間違いではないでしょう。
さて、携帯サイトを作成する際のポイントについてふれますが、
多くの方が勘違いされているのは、
ドコモの機種が割と新しい機種、つまりXHTMLに対応した機種であれば、
HTMLは自動的にXHTMLモードになるということ。
言い換えると、
i-XHTMLでしか対応していないCSSや書き方でも、
普通にHTML内に書けばそれに対応している機種なら表示できるということ。
結論から言ってしまえば、これはどちらも間違いです。
ドコモ携帯のブラウザをi-XHTMLモードで表示させるためには、
以下のような点に注意しなければなりません。
2点目のMIMEタイプはHTMLのヘッダーで・DOCTYPE宣言が正しく行われていること。
・コンテンツのMIMEタイプが「application/xhtml+xml」であること。
が指定されていて、<meta http-equiv="ContentType" Content="application/xhtml+xml">
かつサーバー側においても正しいHTTPヘッダが出力されている必要があります。
設定されていない場合は、.htaccessで
「AddType application/xhtml+xml .html」
のいう一文を追加します。
このような条件がそろって初めて、ドコモの機種はi-XHTMLモードでの表示が可能になります。
よりstrictな設定が必要だということですね。
これに関連して、よく質問される内容として、
というケース。DIVタグでbackgroundプロパティを指定したい
ドコモ機種では文字の後ろに背景色をつけたような表示をさせるには、
以下の2種類の方法があります。
ただ、tdタグでの背景色指定はi-HTMLバージョンが6.0以上、i-XHTMLで2.0以上という条件に対し、・tableタグを用いる。（正確にはtdタグのbgcolor要素を使用する）
・DIVタグを用いる。（正確にはstyleでインライン指定する。）
DIVタグのstyle指定ならi-XHTML1.0以上という条件ですから、
DIVタグで指定する方法のほうが、より多くの端末を内包することになります。
従って、上記のようなケースではDIVタグを用いるほうが正解ですが、これも先ほど説明したようにブラウザがi-XHTMLモードになるようにHTML側で正しく設定していた場合の話です。
以下のサンプルを参考によく理解しておきましょう。
■DIVタグのSTYLE属性で背景を指定する例
<?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" />
<title>テスト</title>
</head>
<body>
<div style="background-color:#808080;">aaa</div>
</body>
</html>
ドコモの絵文字で入力したページを作成して、他のキャリアの携帯で見ると、auはサーバー側で自動変換されますが、ソフトバンクは対応していないので表示されません。
そこで、キャリアに合わせてドコモ&auとソフトバンクという2ページでページを作るのは面倒だし、
3キャリア別々に作成してもいちいち同じ絵文字を探して入力するのは少々面倒です。
そこで、絵文字を自動変換してくれるスクリプトが登場するわけですが、
僕が探したところフリーってのはなかなかないみたいです。
ということで作ってみました。
絵文字を変換するにあたって、まず考えなくてはならないのは、
絵文字の相互変換表を作ること。
そもそも、キャリアによって用意している絵文字数にはかなり開きがあります。auやソフトバンクに比べて、ドコモは拡張絵文字も含めても230個くらいしかないので、相互変換表を作るにしても、数が合わない以上すべての絵文字を同期させることは不可能です。
したがって、自然な流れとしては一番数の少ないドコモの絵文字に他社を合わせる方法をとるのがふつう。ドコモの絵文字を主体に考えるので、ドコモの絵文字を基準に他社の絵文字はそれと似たものが表示されるような設計にします。
ドコモを基準に考えているので、表示できる絵文字数は少ないのが欠点ですが、スクリプトで自動変換する仕組みはあってこしたことはないので、絵文字変換表を作ることにしました。
これを自分で作るのは面倒なのですが、運良くウノウラボさんでEメール用に絵文字の相互変換リストを公開されていたので、ありがたくダウンロードさせていただいて、自作のプログラムで使いやすいようにカスタマイズしてCSVに変換。
ある程度は変換できない絵文字がゲタ「〓」にならないようにしましたが、それでもまだ残っているので、この辺は自分の好きなように変えてもよいかと思います。
■絵文字変換表（emoji.csv）ドコモ→他社
これをもとにPHPで以下のようなプログラムを作成。
■PHP絵文字変換スクリプト（sample.txt）
<?php
//絵文字変換表
$emoji_data = "emoji.csv";
//入力値取得
$num = $_GET["emoji"];
//ファイルオープン
$file =fopen($emoji_data, "r");
//変換表を配列に格納
for ($i = 1; $i <= 300; $i++) {
if (feof($file)) {
break;
}
$emoji_array[$i] = fgetcsv($file, 1000, ",");
}
//ファイルクローズ
fclose($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
}
}
//携帯キャリアに合わせて絵文字を出力
function emoji($data) {
global $agent,$emoji_array;
if(preg_match("/[0-9]{1,3}/", $data) && is_numeric($data) && 0 < $data && $data < 253) {
switch(mobile($agent)){
case "i";
$put = $emoji_array[$data][1];
break;
case "e";
if (preg_match("/[^0-9]/", $emoji_array[$data][2])) {
$put = $emoji_array[$data][2];
} else {
$put = "<img localsrc=\"".$emoji_array[$data][2]."\" />";
}
break;
case "s";
if (preg_match("/^[A-Z]{1}?/", $emoji_array[$data][3])) {
$put = "\x1B\$".$emoji_array[$data][3]."\x0F";
} else {
$put = $emoji_array[$data][3];
}
break;
case "p";
$put = "[PCでは絵文字は表示されません]";
break;
}
echo $put;
}
else {
echo "[Error!]\n";
}
}
//処理
emoji($num);
?>
使用される場合は、trans.phpなどの名前で保存し、お使いください。携帯端末の判別は携帯電話(機器)情報サイトさんで公開されている携帯端末のユーザエージェント振り分けを参考にしました。
先ほどの絵文字変換表を元にドコモの絵文字を基準に、各キャリアに合わせたフォーマットで絵文字が出力されるようにしています。予期しない入力値は[Error!]を表示します。
携帯サイト用に使うので、あまりセキュリティは考えていない点はご愛敬とさせてください。
要望があれば直そうかな。
で、このPHPスクリプトをどのように呼び出すかということなのですが、
手っ取り早い方法は携帯サイト全体をすべてPHPで運用する方法。
でもこれだと結構いやがる人が多いし、PHPってだけでちんぷんかんぷんになっちゃう人もいるし（ちょっと前の僕がそうです。）、変えたくない一番の理由は、やっぱり今までのHTMLをPHPに変えるのが面倒だから。
ということで、今までのHTMLのまま、そこからこのスクリプトを呼び出すには、
SSIをHTML内に書いてスクリプトを呼び出す方法が最も簡単。
以下のようなSSIを絵文字を表示したい部分に書けばOKです。もちろん、HTMLでSSIを動かすには、.htaccessなどで拡張子htmlでSSIが動くように設定を有効にしておく必要があります。
<!--#include virtual="/php/trans.php?emoji=絵文字番号"-->
（execでの実行形式だと引数を渡せずエラーになります。また、virtualのディレクトリパスに注意。virtualはトップディレクトリからの相対パスで記述します。）
絵文字番号ってところはドコモを基準にしているので、
こちらの表を参考に、書けば良いです。例えば、一番最初の「晴れ」なら、
<!--#include virtual="/php/trans.php?emoji=1"-->
です。
拡張絵文字の番号は、
基本絵文字の最後の番号から続けての連番になります。
ちなみに、自分の携帯はauなので、ドコモやソフトバンクはちょっと未確認。
特にソフトバンクが心配。テスト要員募集です（笑）。
http://www.dspt.net/data/emoji/test.html
こちらに携帯でアクセスしていただいて、ゴルフの絵文字が表示されたらOKでございます。
バグ等あればご指摘くださいませ。
8月31日
ドコモで絵文字が表示されない問題に対応しました。
emoji.csv、sample.txtが変更されています。
そういうふうに思っている人って結構いるはず。
みなさんどんなものが欲しいのかなぁ…。
というのも最近は、PHPプログラミングにはまっていて、
携帯サイト作成の補助ツールをWEBで公開できたらいいなと思っとるのです。そろそろ携帯サイト構築ネタも尽きてきてしまったので…すみません。
ということで前回このブログで一つ作成したツールを紹介したのですが…
それほどの反響は……泣
あまりのマニアックさで需要のないものを作っても意味がないと思うので、悩み中。
ということでアンケート。
もし、このブログを見ていただいている方、通りすがりの方も結構なので、アンケートに答えてくださる方は、具体的にこんなのがあればいいなってのをコメントをいただけるとうれしいです。
例えば、絵文字変換スクリプトとか、絵文字入力ツール、携帯対応掲示板とか？？かな。でもこれは、すでに作っておられる方がいるので今更という感じもします。
独創的かつ汎用的なコメントをお待ちしてます。
以前、このブログで書いた、
携帯サイトでのユーザのターゲッティングと運営。第2回 「PCからの閲覧制限」
で、携帯サイトを運営する上で、PCからの閲覧を制限するための方法と、
注意点についてふれました。
この記事を簡単におさらいすると、サーバーに「.htaccess」というファイルをおくと、PCからの閲覧を制限（携帯端末からのアクセスのみ許可）することができるということだったんですが、
このファイルの書き方が分からないという方も何名かいらっしゃたので、このhtaccessを簡単に生成できるツールを本家のサイトで公開しましたので、よかったら使ってみてください。
auのGPS機能を利用する方法と、GPSの起動方法については前回の
au携帯のGPS機能で地図を表示させるプログラム
を参考にしていただければ、だいたいの流れは分かったとは思いますが、
今回は最終回「auのGPSから緯度や経度を取得するプログラム例」を書きたいと思います。
前回の記事で、
GPSを起動させるには、
というような記述をすればよいということはふれました。<a href="device:gpsone?url=test.php&ver=1&datum=1&unit=0&acry=0&number=0">位置情報取得</a>
ここで、上記の「url=test.php」という部分は、GPSにより得られた結果を処理するプログラムを指すわけですが、実際のところ、プログラムの肝となるのは、MapFanのような携帯地図表示サービス（要登録）が提供している仕様に合わせて、結果をカスタマイズすれば良いのです。
今回は、このMapFanが提供しているサービスを例に、そのプログラム（といっても数行ですが…）を紹介したいと思います。
まず、MapFanが提供しているサービスとは、
予め登録した携帯サイトにMapFanが提供するAPIを組み込むことで、
誰でも簡単に携帯GPSを使った地図表示サービスの提供が可能となり、
例えば、自社周辺の地図を提供したり、今回のようなプログラムを使用することで、現在地を提供したりすることが無料でできるようになります。
一方、MapFan（インクリメントP社）は、地図サービスを無料で提供する一方で、地図を表示するのは1回に限ったりと制限を加えることで、オリジナル版と差別化を図ることでMapFanへの登録を促したり、サービスをより広く告知する意味でもAPIを公開することがプラスになるわけです。
だいぶ本題からはずれましたが、
このサービスを利用するには登録が必要ですので、登録しなければ得られない情報は「***」で伏せてありますので、予めご了承ください。
スクリプト例
test.php
といった感じです。<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Cache-Control" content="no-cache">
<title> [周辺地図検索]</title>
</head>
<body bgcolor="#fffcee">
<a name="top"></a>
<center><font color="orange">[周辺地図検索]</font></center>
<center>
<form method="get" action="http://****************.cgi">
<input type="hidden" name="***" value="http://">
<input type="hidden" name="***" value="戻る">
<input type="hidden" name="***" value="11">
<?
chop($lat);
chop($lon);
$lat_s = explode("+", $lat);
$lon_s = explode("+", $lon);
echo "<input type=hidden name=*** value=E$lon_s[1]N$lat_s[1]>";
?>
<input type="submit" value="現在地表示">
</form>
<br><font size="-2">powered by MapFan</font></center><br>
<hr size="1" color="orange" width="90%">
<font color="red">[ご注意]</font><br>地図の表示は1枚に限ります。2頁目以降はMapFanへの登録が必要です。
<hr color="blue" size="1">
<a href="/">ﾄｯﾌﾟへ戻る</a>
<hr color="blue" size="1">
</body>
</html>
上記例はPHPを使ったスクリプトですので、CGIなどの言語にも応用可能なはずです。
ここで重要となるは、
の<form>タグで書かれた部分ですが、<form method="get" action="http://****************.cgi">
<input type="hidden" name="***" value="http://">
<input type="hidden" name="***" value="戻る">
<input type="hidden" name="***" value="11">
<?
chop($lat);
chop($lon);
$lat_s = explode("+", $lat);
$lon_s = explode("+", $lon);
echo "<input type=hidden name=*** value=E$lon_s[1]N$lat_s[1]>";
?>
<input type="submit" value="現在地表示">
</form>
まず、わざわざMapFanのサービスにformタグを用いて情報を渡す必要があるのは、MapFanの仕様では、経度や緯度などの情報はURLエンコードされてなければならない理由があるためです。
「http://****************.cgi」は、MapFanからいただける技術情報に記載のURLで、これが経度や緯度といった情報を渡す地図プログラムです。
さらに、hiddenの隠しパラメータで戻りURLを指定したり、そのアンカーテキストなどを指定することができます。それが2〜4行に書かれているものです。
そのほか、phpの部分である
は、auのGPSが返す戻り値を参考に、MapFanの仕様に合わせるだけです。<?
chop($lat);
chop($lon);
$lat_s = explode("+", $lat);
$lon_s = explode("+", $lon);
echo "<input type=hidden name=*** value=E$lon_s[1]N$lat_s[1]>";
?>
上記例は、MapFanの地図サービスの中で、「経度・緯度」による地図表示を使用していますので、それ以外にも、駅名検索や電話番号検索などのサービスもこの応用で使えます。
ごらんの通り、「経度・緯度」による地図表示は現在地を上手く表示するためには、それなりの精度が求められます。これはau携帯のGPSが取得する情報に大きく依存することになりますので、
auのGPS起動時のパラメータを上手く設定してあげる必要がありますが、
これは前回の記事に詳しく書いてありますので参考にしてください。
まず、GPSで場所を特定して、地図に表示させるには、
以下のような手順を踏む必要があります。
実際には、以下のようなサービスを最終的に作るまでの流れです。1. au携帯のGPSをホームページから呼び出す。
2. 携帯に場所（緯度・経度）を取得させる。
3. 取得した緯度と経度を変換して、地図表示プログラムへ渡す。
4. 地図の表示
■GPSによる現在地表示サービス例
（キャッシング＠消費者金融ナビ-周辺地図検索）
http://cash.mobile1st.net/ie/map/
（auのみアクセス可能）
QRコード
今回は1と2について説明します。
au携帯にあらかじめ搭載されているGPSを呼び出す（起動させる）コマンドは非常に簡単で、
GPS搭載機種の場合、
でできます。（参考：auのGPSケータイで位置情報を表示させよう）<a href="device:gpsone?url=(プログラムのURL)">位置情報取得</a>
一方、GPSが搭載されていない機種の場合、
とすることで、緯度や経度を取得できます。<a href="device:location?url=(プログラムのURL)">〜</a>
なお、プログラムには引数（ひきすう）として、検索時のオプションを以下のように指定することができます。
などがあるそうです。（参考：GPS携帯的メモ）■指定できる引数一覧
ver 通信バージョン
datum 測地系
unit 座標系
acry 位置情報精度
number 要求測位回数
一方GPSが起動して取得できるパラメータは、
■戻り値
time 測位時刻
fm 測位モード
datum 測地系
unit 座標系
lat 緯度
lon 経度
smin 最小誤差
smaj 最大誤差
majaa 誤差角度
alt GPS高度
vert 高度誤差
これらを引数として記述する方法は、
とします。&引数=値
この引数を記述しない場合や、上記のGPSが搭載されていない機種では、現在地に最も近い通信基地局の場所が取得されるため、地図上で表示されるのは実際の場所とは異なり、精度の低い結果が出ます。例：test.php&ver=1&....
より精度のよい結果を得るためには、経験的な調整が必要ですが、
概ねこちらがテストした環境では以下のような引数と値を指定してあげると、精度の高い結果が得られましたので、参考にしてください。
次回は、GPSから得られた結果から緯度と経度を変換・処理するプログラムをご紹介します。<a href="device:gpsone?url=test.php&ver=1&datum=1&unit=0&acry=0&number=0">位置情報取得</a>
