-ちょっと詳しいモバイルサイトの作り方-XHTML+CSSで一歩進んだモバイルサイトを作るテクニックを幅広く紹介☆2009/05/09/Satドコモの絵文字がすべて白黒で表示されてしまう現象についてこんにちは。更新が滞ってしまい申し訳ありません。(PHP・SSI対応版)を作りました」の記事や過去の記事においてもたびたびご質問があったケースについてここで一度回答したいと思います。ご質問いただいた方ありがとうございました。「ドコモの絵文字がすべて白黒で表示されてしまう」という問題です。当ブログで配布している携帯絵文字変換スクリプトに限らず、ある指定をHTMLにしていると、ドコモの絵文字がすべて黒で表示されてしまいます。絵文字の色もすべてテキストと同じ色になってしまいます。これは、結論から言ってしまうとドコモの仕様であり、ドコモの絵文字が平滑な2Dのピクトグラムであるためです。絵文字自体に多くの色が使われており、その色自体を変更することはできません。このドコモの仕様がいいのやら悪いのやら...まぁそこは利点でもあり欠点でもあるので、この仕様を理解した上で、うまく使いこなすことをオススメします。style="color:#******;"></span>とします。コーディング&デザイン」の増刷(第3刷り)がまたまた決定しました!ご購入いただいた方々本当にありがとうございます。今回はその改良版です。今まで、こちらの携帯絵文字変換スクリプトを使用していた方で、どうやっても動作しないよ!と悩んでいた方はこちらに変えてみてください。・PCで閲覧した場合にも絵文字が表示される・ドコモの絵文字を基準とするのはそのまま以前の携帯絵文字変換スクリプトはドコモの絵文字においてShift-JISの2バイトコードを絵文字の変換テーブルに用いていたため、サーバー環境によっては文字化けが起きたり、XHTMLとHTMLで動作が異なったりしていましたが、今回は全キャリアが対応しているUnicodeという数値参照方式を採用しているのため、絵文字の出力が安定的(サーバーの環境に依存しにくい)です。■SSIで動作させる場合サンプルソースはこちらからダウンロードできます。ファイル構成は以下の通り。(絵文字をSSIから読み出す場合のサンプルファイル)------------------------------------※includeフォルダ以下の構成は変えない方が良いです。一つづつ解説していきます。(Unicode)の変換テーブルです。1~3列目でドコモ、au、ソフトバンクの順番。各キャリア絵文字をUnicodeで入力する場合は「&#x\\\\;」となりますが、この「\\\\」の部分のみこのファイルに書いてあります。Unicodeで絵文字を入力する場合、ドコモではiモードHTML4.0以上となっているので、これ以上の機種が対応となります。(共通ファイル読み込み)絵文字変換スクリプトに必要なファイルを読み込むためのファイルです。includeフォルダ以下の構成を変えない限り特に変える部分はありません。(絵文字変換スクリプト)この部分が絵文字変換の肝となるスクリプトです。以下の部分を必要に応じて変えます。"/emoji/table.tsv";絵文字変換テーブルの場所を指定します。このファイルからの相対パスで記述します。通常はそのままでOK。"/include/emoji/images/";PC絵文字用のGIFファイルが格納されているフォルダの場所を、トップディレクトリからの相対パスで指定します。その他の部分は、すべてそのファイルからの相対パスですが、この部分はトップディレクトリからの相対パスにしてください。[include]以下のフォルダの場所(階層)によってこの部分は書き換える必要があります。0;PHPから読み出す場合は「0」に、SSIから読み出す場合は「1」に設定します。SSIで動作させる場合にこの部分が「0」のままだと正しく動作しません。(キャリア判別)携帯端末のキャリアを判定する関数。ここも通常はこのまま。(SSIをHTMLで動作させるためのファイル)HTMLでSSIを動作可能にするためのおまじないファイルです。html」とするのがミソ。(それ以外の部分は関係ありません)HTMLと同じフォルダに設置します。htaccessが設置可能なサーバーに限ります。SSIで動作させない場合はこのファイルは必要ありません。(絵文字をPHPから読み出す場合のサンプルファイル)まず、上の共通ファイルである「commons.php」をincludeする文を冒頭で指定。相対パスで指定すればOKです。あとは、絵文字番号を以下のように指定して、絵文字を表示させたい部分に書けばOK。emoji('1');?>絵文字番号表はこちらに掲載しています。(絵文字をSSIから読み出す場合のサンプルファイル)こちらも絵文字番号を指定するだけでOK。virtual="/include/emoji_trans.php?emoji=1"-->SSIから読み出す場合は、ちょっと気をつける点があります。「virtual」でSSIは読み出さないと、「?」以下の「emoji」という引数が渡されないため、このようにします。「exec」では引数が渡されないためNG。従って、SSIの読み出しで「virtual」が不可となっているサーバーでは使用できないので注意してください。パスはトップディレクトリからの相対パスで「emoji_trans.php」がある場所を指定します。絵文字番号はPHPから読み出す場合と同じです。262009/02/13/FriXHTML仕様で携帯サイトを作成する際のコンテンツMIMEタイプ切り替え最近では携帯サイトはXHTMLで作るようになってきていますが、そこで指定すべきコンテンツMIMEタイプはどのようにしなければならないか。これはこのブログや書籍をご購入いただいた方はすでにご存じかと思いますが、ドコモの仕様に合わせて「application/xhtml+xml」を指定するということでした。再度説明するとドコモがXHTMLモードになる条件は1サーバーが出力するHTTPヘッダーを「application/xhtml+xml」とする。2metaタグの「content」を「application/xhtml+xml」とする。古い機種によってはエラーになってしまう可能性があること。auやソフトバンクはMIMEタイプを「text/html」としてもXHTMLで動作すること。「application/xhtml+xml」としなければならないのはドコモのFOMAだけであるということ。鑑みると、仕様上「must」でなければならないFOMAを除いては「text/html」でもよい。いう考えもありかと思っています。そこで、ドコモのFOMAのみ「application/xhtml+xml」を出力するPHPで動作するプログラムを作ってみました。(user_agent_docomo.php)まず、ドコモ端末においてmovaとFOMAを判断するプログラムを関数化しました。ユーザエージェントはmovaが「DoCoMo/1.0...」、FOMAが「DoCoMo/2.0...」です。「mova」という文字列を返します。このあたりはPEARライブラリのNet_UserAgent_Mobileを使ってもよいでしょう。(mime_type.php)この結果を受け取り、ドコモのFOMAのみ「application/xhtml+xml」のコンテンツMIMEタイプを返すプログラムの関数は以下。「application/xhtml+xml」という文字列を返します。"text/html";}}?>以上で必要なプログラムはおしまい。適正なコンテンツMIMEが指定されたHTMLとなります。先ほど2つの関数が書かれたファイルをインクルードします。あとはHTTPヘッダーとmetaタグのコンテンツMIMEタイプを指定する部分に、mime_type関数より適正なMIMEタイプを出力します。(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タグそのものを出力しません。"";}}?>なお、ソースコードを保存するのが面倒という方は、こちらからダウンロードできますので。「background-position」の各携帯キャリアの挙動CSSの「background-positionプロパティ」の値の指定方法で各社どのように対応するか詳しく挙動を調べてみたのでメモ。※background-positionプロパティはauとソフトバンクのみに対応(ただし、使えるタグが限られる)※画像はbackground-imageで指定するが、ドコモではbodyタグのみ。END--></body>合成形はあまり指定することはないですが、auでは対応してないようです。02008/10/06/Mon携帯サイトのDOCTYPEについてもう一度考えてみる。読者の方に誤解を招くのは申し訳ないので、携帯サイトを制作する際に、DOCTYPEはどのように記述すべきかもう一度考えてみます。現在、各キャリアが推奨しているDOCTYPEは、Kamitani79-メロンとバナナとブログさんに書かれているように、各社独自に定めています。合っている気がします。Forumが仕様化したもの。Basicに合わせる方がよいのでは?という意見もあります。Basicではstyle属性によるCSSの指定ができません。PCサイトを制作してきた人にとっては、今更style属性なんて。思われるかもしれませんが、携帯サイトでCSSを使う場合、ドコモではstyle属性でしかできません。Transitionalあたりを使うほかない気がします。Basicを推奨例に、WML、cHTML、XHTML-MPを推奨しています。それはあくまで世界的に見た場合であって、独自に進化している日本においては、それでいいの?という疑問符がつきます。Basicじゃなきゃダメ!というわけでもなさそうです。適切にマークアップできていればどのDOCTYPEを選んでも問題なさそうです。いうことで、私は以下のDOCTYPEがよいのでは?という考えで、サイトを制作しています。追記はてなブックマークで以下のコメントをいただきました。Basic1.1が「勧告候補」となった。勧告なので、日本を始めメーカー、キャリアが今後この勧告を受け入れていけば、標準化(統一化)されていくでしょう。Basic1.1には対応していません。豊富な表現が可能になっています。(ドコモはダメ)ただし、auとソフトバンク端末に搭載されているブラウザは種類が異なるので、3キャリア対応のサイトを1枚のHTMLで作る場合は、文字サイズなどの違いがどうしてもでてきてしまいます。これに対処するためには、auとソフトバンク端末で読み込む外部CSSを切り替えてあげる方法があります。そこで、今回はauとソフトバンクで外部CSSを切り替えるスクリプトをご紹介します。・au用の外部CSS「css_au.css」とソフトバンク用の外部CSS「css_sb.css」を用意する。・au端末でアクセスしてきたら、「css_au.css」を読み込むようにlinkタグを発行する。・同様に、ソフトバンク携帯には「css_sb.css」を読み込むようなlinkタグを発行する。・それ以外のドコモ端末やPCでのアクセスには「dummy.css(空)」を読み込ませる。・HTMLとXHTML用のlinkタグを発行できる。