DoCoMo/サイト制作 の変更点

 ''※スパム編集が多いため一時凍結させていただきます''
 
 ''目次''
 
 #contents
 
 **概要 [#ycd005a8]
 
 iモード向けコンテンツの仕様詳細については[[ページ下部>#b8c2ab4b]]に、公式サイトへのリンクがはってありますのでそちらを参考にして下さい。~
 
 概要としては次の通りです。
 -基本的には普通のHTMLとそう変わりません。ただし無視される要素や属性も多いです。
 -文字コードは「Shift_JIS」です。
 -画面スペース・パケ代節約のため、半角カナを使うと良いです。
 -画像フォーマットはGIFで、ただし旧機種以外(503i・211iの一部機種から)はJPEGでもOK。
 -ECMAScriptなどのスクリプト言語は使えない。
 -505i以降の機種はFlashが使用できる。
 
 
 **技術情報 [#o7150649]
 
 ***iモード対応HTMLのバージョンと機種について [#obbcd57b]
 
 公式サイトのこちらのページをご覧下さい。~
 http://www.nttdocomo.co.jp/mc-user/i/spec/ryouiki.html
 +iモード対応HTML1.0(501iシリーズ)
 +iモード対応HTML2.0(502iシリーズ)
 +iモード対応HTML3.0
 ++PDC(503iシリーズ、210iシリーズ、211iシリーズ)
 ++FOMA(2001/2002/2101V)
 +iモード対応HTML4.0
 ++PDC(504i等)
 ++FOMA(2051/2102V/2701)
 +iモード対応HTML5.0
 ++PDC(505iシリーズ)
 ++FOMA(900iシリーズ) 
 
 各HTMLバージョンの違いについては[[こちら>DoCoMo/サイト制作#qd242436]]で説明しています。
 
 ***表示できるHTMLの条件 [#qd242436]
 
 作成待ち
 
 
 ***PCでは使えるけどiモードでは使えないタグ [#a8c9b51b]
 
 作成待ち
 
 
 ***iモード独自のタグ [#xe2478b0]
 
 作成待ち
 
 
 ***ツールをダウンロードしよう [#s1566462]
 
 -ドコモ公式サイトより
 
 --iモードHTMLシミュレータ: http://www.nttdocomo.co.jp/service/imode/make/content/html/tool.html ~
 --iモードHTMLシミュレータII: http://www.nttdocomo.co.jp/service/imode/make/content/html/tool2.html ~
 ローカルまたはネットワーク上にあるHTML,FLASHをiモードから見た感じで表示できます。~
 スクリーンショットを撮るときにも便利です。
 
 --i絵文字: http://www.nttdocomo.co.jp/service/imode/make/content/pictograph/tool/index.html ~
 パレットから絵文字を入力するツールです。またインストールするとPC上でも絵文字が表示できるようになります。
 
 --特定機種に依存したツール: http://www.nttdocomo.co.jp/p_s/imode/make/download/link.html ~
 各メーカーから特定の機種に依存したコンテンツ作成ツールが提供されています。
 
 
 ***絵文字について [#u1d2461a]
 
 501iの時代のころは、絵文字はエンティティ形式(&#xx;)形式で使用しないと文字化けしましたが(P501以外の機種?)、現在の機種ではどちらの方式でも使用できます。
 
 入力方式は3通りあります。
 ++i絵文字などで直接入力する
 ++&#*****; (*****は10進コード) で入力する。
 ++&#x****; (****は16進コード) で入力する。 ※[[iモード対応HTML4.0対応機種>DoCoMo/サイト制作#obbcd57b]]以降のみ対応
 
 2番目の方式は公式サイトでは「推奨しません」となっていますが、3番目の方式は対応機種の面で使い物にならず、結局使わざるを得ないでしょう。
 
 絵文字の一覧はこちらにありますが、[[i絵文字やその他の絵文字エディタ>DoCoMo/サイト制作#s1566462]]を使ったほうがわかりやすいと思います。~
 絵文字リスト: 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」になっている文字でもテストしてましょう。
 
 #br
 ''参考コード''
 
 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
 
 RIGHT:&size(9){&color(gray){2004-07-30 20:43:00 [[matsui]] 作成};};
 RIGHT:&size(9){&color(gray){2005-12-26 15:23:00 [[matsui]] 参考コード追加};};
 
 
 ***認証について [#xfafd3b0]
 
 公式サイトの場合は、GETパラメータに「NULLGWDOCOMO」という文字列を入れると、そこが自動的に個体識別情報(端末固有のコード)に置き換えられ、それを利用して認証を行えます。(非常に楽ですね)~
 勝手サイトの場合は、この方法は使えないので次の方法で認証を行います。~
 
 [[iモード対応HTML 3.0>DoCoMo/サイト制作#obbcd57b]]以降の機種(但し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桁)が追加されます。
 
 #br
 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
 
 RIGHT:&size(9){&color(gray){2004-07-30 20:43:36 [[matsui]] 作成};};
 
 
 ***メーラーを起動する方法と注意点 [#s05066ee]
 
 作成待ち
 
 
 ***セッションについて [#e278c7dc]
 
 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には有効時間があります。ブックマークや放置による時間切れの処理も忘れずに書くようにしましょう。
 
 RIGHT:&size(9){&color(gray){2004-07-30 23:38:32 [[matsui]] 作成};};
 
 
 ***FOMAではここが変わった [#s93aca8d]
 
 iモード対応XHTMLというのができた。
 しかしFOMAのみの対応なのであまり使われていない。
 
 残りは作成待ち
 
 
 **リンク [#b8c2ab4b]
 
 -公式サイト
 --iモードINDEX: http://www.nttdocomo.co.jp/mc-user/i/index.html
 --iモード対応HTML: http://www.nttdocomo.co.jp/mc-user/i/tag/index.html
 --iモード対応HTMLタグ一覧: http://www.nttdocomo.co.jp/mc-user/i/tag/lineup.html
 --端末スペック: http://www.nttdocomo.co.jp/mc-user/i/spec/index.html
 
 -個人サイト
 --FOMA技術情報 FOMA BLUE: http://www.star-beach.co.jp/foma.php ~
 --CGIぽん(CGIで作る全ケータイ対応ページ): http://specters.net/cgipon/

トップ   差分 バックアップ リロード   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS