ご無沙汰しております。ブログを放置して、かれこれ1年が過ぎてしまいました。当ブログを見ている方はいらっしゃるのでしょうか。冬眠...いや、いろいろと忙しい毎日を送っておりました。1年の間に携帯サイト業界も目まぐるしく変わり、スマホの台頭、iPhone、iPad発売、それでもまだガラケーがシェアを独占している日本です。携帯サイトはこれからどうなるか分かりませんが、それでも携帯サイトの魅力ってまだまだありますよね、秘めた力も持っている。何か書かなくてはならないなぁと焦り初めている今日この頃です。すみません、他愛もない話をしてしまって。踊る4みたいに、またちょっと制作のやる気が出てきましたので、また書き始めようかなと思います。今もなお順調に売れ続け、増刷を繰り返しております。12009/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では対応してないようです。02009/01/24/Satプレゼント企画を終えてこんばんは。コーディング&デザインのプレゼント企画無事終了いたしました。今回は全部で36名の方からの応募がありました。当初はもっと少ない(5名くらい?)と思っていたので、ちょっと驚いてます。ご応募頂いた方、ありがとうございました。メッセージすべて読ませて頂きました。当選した方には、すでにメールをお送りしています。残念ながら、抽選からもれてしまった方、ご期待に添えず申し訳ありません。_)m応募頂いた方ではWEB制作でお仕事をされている方がかなりいらっしゃいました。いう方も中にはいるだろうなっというのは、この書籍を書き始めるときから、すでにブログの読者層から見ても感じていました。(だから、本書がこういった方や個人で携帯サイトを制作されている方向けにターゲットを絞っているのですが...)中には学生なんていう方も。いやはや、すばらしい!やはり携帯サイトはそもそも若年層向けのものがヒットしやすいですし、ユーザもそれだけ多いですから、携帯のことをよく知っているこういった若い方々にぜひ、携帯サイト制作にチャレンジしてほしいと思います。(っと思い込んでいます。次のページ≫プロフィールAuthor:shibaフリーのマークアップエンジニア。PC及び携帯サイト制作のほか、デコメ、SEO、LPO、アフィリエイトなど、WEBサイト全般の業務に携わる。TypeなどのCMSテンプレートカスタマイズ、PHPプログラミング等を経験。3年ほど前から携帯サイト制作にシフト。古くから培ってきたコーディング技術とケータイ世代に生きた若さという空回りな強みをあわせ持つ。HTML/CSSリファレンスサイトを別に運営。HTMLタグボード:http://www.dspt.net/はじめての方へ当ブログは以下のような方が対象です。初心者にはちょっと難しい内容かもしれません。2008/10)お問い合わせブログ全般に関するご質問などはこちらからお問い合わせ下さい。(08/04)お久しぶりです。