DoCoMo/サイト制作

※スパム編集が多いため一時凍結させていただきます

目次

概要

iモード向けコンテンツの仕様詳細についてはページ下部に、公式サイトへのリンクがはってありますのでそちらを参考にして下さい。

概要としては次の通りです。

  • 基本的には普通のHTMLとそう変わりません。ただし無視される要素や属性も多いです。
  • 文字コードは「Shift_JIS」です。
  • 画面スペース・パケ代節約のため、半角カナを使うと良いです。
  • 画像フォーマットはGIFで、ただし旧機種以外(503i・211iの一部機種から)はJPEGでもOK。
  • ECMAScriptなどのスクリプト言語は使えない。
  • 505i以降の機種はFlashが使用できる。

技術情報

iモード対応HTMLのバージョンと機種について

公式サイトのこちらのページをご覧下さい。
http://www.nttdocomo.co.jp/mc-user/i/spec/ryouiki.html

  1. iモード対応HTML1.0(501iシリーズ)
  2. iモード対応HTML2.0(502iシリーズ)
  3. iモード対応HTML3.0
    1. PDC(503iシリーズ、210iシリーズ、211iシリーズ)
    2. FOMA(2001/2002/2101V)
  4. iモード対応HTML4.0
    1. PDC(504i等)
    2. FOMA(2051/2102V/2701)
  5. iモード対応HTML5.0
    1. PDC(505iシリーズ)
    2. FOMA(900iシリーズ)

各HTMLバージョンの違いについてはこちらで説明しています。

表示できるHTMLの条件

作成待ち

PCでは使えるけどiモードでは使えないタグ

作成待ち

iモード独自のタグ

作成待ち

ツールをダウンロードしよう

  • ドコモ公式サイトより

絵文字について

501iの時代のころは、絵文字はエンティティ形式(&#xx;)形式で使用しないと文字化けしましたが(P501以外の機種?)、現在の機種ではどちらの方式でも使用できます。

入力方式は3通りあります。

  1. i絵文字などで直接入力する
  2. &#*****; (*****は10進コード) で入力する。
  3. &#x****; (****は16進コード) で入力する。 ※iモード対応HTML4.0対応機種以降のみ対応

2番目の方式は公式サイトでは「推奨しません」となっていますが、3番目の方式は対応機種の面で使い物にならず、結局使わざるを得ないでしょう。

絵文字の一覧はこちらにありますが、i絵文字やその他の絵文字エディタを使ったほうがわかりやすいと思います。
絵文字リスト: http://www.nttdocomo.co.jp/mc-user/i/tag/emoji/list.html

iモード絵文字のコードは1バイト目が「F8」または「F9」となっています。
SJISにはそのようなコードはないため、これを目安に文字列をチェックすればよいのですが、普通に正規表現でマッチさせると2バイト目がF8やF9となっている文字にもマッチしてしまいます。
mb_*系の関数をうまく使うなどして回避しましょう。
また自作のマッチング処理を書いた場合はかならず「笹(8DF9)」のように2バイト目が「F8」や「F9」になっている文字でもテストしてましょう。


参考コード

perl版

# iモードの絵文字コードから10進コードに変換
$sjis  = '[\x81-\x9F\xE0-\xF7\xFA-\xFC][\x40-\x7E\x80-\xFC]|[\x00-\x7F]|[\xA1-\xDF]';
$emoji = '[\xF8\xF9][\x40-\x7E\x80-\xFC]';
$str =~ s/\G((?:$sjis)*)($emoji)/$1.'&#'.unpack('n',$2).';'/ego;
# iモードの絵文字を10進コードからSJIS絵文字コードへ変換
$str =~ s/&#(63\d{3});/pack('n',$1)/eg;

PHP版

// 絵文字コードから10進コードに変換
$converted = '';
if (preg_match("/[\xF8\xF9]./", $tpl_output)) {
    // 絵文字を含んでいる可能性がある場合のみ処理
    for($i = 0; $i < (mb_strlen($tpl_output)); $i++) {
        $tgt = mb_substr($tpl_output, $i, 1);
        if (2 == mb_strwidth($tgt)) {
            // 2バイト文字の場合のみ処理
            $tgt_arr = unpack("C*", $tgt);
            if(0xf8 == $tgt_arr[1] || 0xf9 == $tgt_arr[1]) {
                // 絵文字の場合(1バイト目のコードで判断)
                $hex =  dechex($tgt_arr[1]) . dechex($tgt_arr[2]);
                $converted .= '&#' . hexdec($hex) . ';';
            } else {
                $converted .= $tgt;
            }
        } else {
            $converted .= $tgt;
        }
    }
} else {
    // 絵文字がないのでそのまま出力
    $converted = $tpl_output;
}
// 上記と同じ処理を正規表現で処理(約3倍高速)
// 絵文字コードから10進コードに変換
$sjis  = '[\x81-\x9F\xE0-\xF7\xFA-\xFC][\x40-\x7E\x80-\xFC]|[\x00-\x7F]|[\xA1-\xDF]';
$emoji = '[\xF8\xF9][\x40-\x7E\x80-\xFC]';
$pattern = "/\G((?:$sjis)*)(?:($emoji))/";

// 絵文字を検索
preg_match_all($pattern, $tpl_output, $arr);		// $arr[2]に対象絵文字が格納される

// 絵文字を置換
$converted = $tpl_output;
foreach($arr[2] as $value) {
    $pattern_rep = "$value";
    $emoji_cd = unpack("C*", $value);
    $hex =  dechex($emoji_cd[1]) . dechex($emoji_cd[2]);
    $replacement = '&#' . hexdec($hex) . ';';;
    $converted = mb_ereg_replace($pattern_rep, $replacement, $converted);
}
// iモードの絵文字を10進コードからSJIS絵文字コードへ変換
// 絵文字10進を検索
$pattern = "/&#(63\d{3});/";
preg_match_all($pattern, $tpl_output, $arr);		// $arr[0]に対象絵文字が格納される

// 絵文字に置換
$converted = $tpl_output;
foreach($arr[0] as $value) {
    $pattern_rep = "$value";
    $replacement = pack('n', substr($value, 2, 5));
    $converted = mb_ereg_replace($pattern_rep, $replacement, $converted);
}

参考にしたページ
i-mode 絵文字の処理: http://specters.net/cgipon/labo/it_emoji.html
ML PHP-users[1467]: http://ns1.php.gr.jp/pipermail/php-users/2001-August/001474.html
ML PHP-users[1562]: http://ns1.php.gr.jp/pipermail/php-users/2001-August/001569.html

2004-07-30 20:43:00 matsui 作成
2005-12-26 15:23:00 matsui 参考コード追加

認証について

公式サイトの場合は、GETパラメータに「NULLGWDOCOMO」という文字列を入れると、そこが自動的に個体識別情報(端末固有のコード)に置き換えられ、それを利用して認証を行えます。(非常に楽ですね)
勝手サイトの場合は、この方法は使えないので次の方法で認証を行います。

iモード対応HTML 3.0以降の機種(但しSO210i,SH251i,SH251iSを除く)では、フォームから個体識別情報が取得できます。
使い方は次の通りです。

<html><body>
 <form action="./test.cgi" method="get" utn>
  <input type="submit" name="submit">
 </form>
</body></html> 

formタグの最後の"utn"がポイントです。

なおutn属性は、Aタグでも使用可能です。

<A href="test.cgi" utn>

上記のHTMLを使用すると、ユーザエージェントに次のような文字列が入ります。
試しにApacheのログを見てみましょう。

  • 通常のアクセス
    210.xxx.xxx.xxx - - [28/Oct/2003:20:25:52 +0900] "GET /test.html HTTP/1.0" 200 127 "-" "DoCoMo/1.0/P504iS/c10/TB"
  • utnを入れた場合のアクセス
    210.xxx.xxx.xxx - - [28/Oct/2003:20:26:00 +0900] "GET /test.html HTTP/1.0" 200 127 "-" "DoCoMo/1.0/P504iS/c10/TB/serxxxxxxxxxxx"

このように「/serxxxxxxxxxxx」が追加されるので、ここから端末を特定できます。

FOMAの場合は、FOMA端末製造番号(15桁)とFOMAカード識別番号(20桁)が追加されます。


Perlの場合ですと

$agent = $ENV{'HTTP_USER_AGENT'};

PHPの場合ですと

$agent = getenv("HTTP_USER_AGENT");

といった形で利用できます。

携帯電話側にはアクセス時に
「携帯電話情報を送信しますか?」
というダイアログが出ますので、利用者に誤解を招かないように注意書きが必要でしょう。

なおD503i,D503iS, N2001,N2002ではこの機能を使う場合にはバグがあります。
大した問題ではありませんが、一応目を通しておくとよいと思います。

留意事項(個体識別情報)
PDC: http://www.nttdocomo.co.jp/mc-user/i/tag/s5.html#5_14
FOMA: http://www.nttdocomo.co.jp/mc-user/i/tag/s5.html#f_3

詳細な仕様は公式ページをご覧下さい。
utn(属性)について: http://www.nttdocomo.co.jp/mc-user/i/tag/utn.html

2004-07-30 20:43:36 matsui 作成

メーラーを起動する方法と注意点

作成待ち

セッションについて

iモードではcookieがないため、cookieを使ったセッション管理は利用できません。
trans_sidURL埋め込み方式(URL埋め込み方式)のセッションを利用しましょう。
php.iniを次のように設定することで使用できます。

session.use_cookies = 0
session.use_trans_sid = 1

session.use_cookiesの設定は必ずしも変更しなくても良いのですが、PCからも同様の環境でデバッグできるようにcookieによるセッション管理はオフにすると良いとです。
trans_sidをオンとすることによって、アクセスした際のURLの後ろに「PHPSESSID」という文字列とその値が自動で付加されます。
セッションIDには有効時間があります。ブックマークや放置による時間切れの処理も忘れずに書くようにしましょう。

2004-07-30 23:38:32 matsui 作成

FOMAではここが変わった

iモード対応XHTMLというのができた。 しかしFOMAのみの対応なのであまり使われていない。

残りは作成待ち

リンク


トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: Fri, 21 Dec 2007 11:44:55 JST (3926d)