携帯サイト制作の実践ノウハウ：ドコモ絵文字を本来の色で見せたい

デフォルト（青）以外のリンク色が設定されたページで、リンクテキストに絵文字を使うと、ドコモでは絵文字の色がリンク色と同じになります。リンクに限らず通常のテキストに色指定した場合も同様のことが起きます。これでは絵文字の装飾が際立たず、見栄えもしません。

本来の絵文字の色に戻すには、下のソースのようにspanタグ（XHTMLの場合）かfontタグ（CHTMLの場合）で文字色を指定する必要があります。


（XHTML）

<span style="color:#FF00FF">&#xE6F8;</span>注目ｺﾝﾃﾝﾂ<br />
└<a href="contents1.html">新作<span style="color:#FF0000">&#xE6ED;</span>Xmas限定<span style="color:#FF00FF">&#xE71B;</span>ｼﾞｭｴﾘｰ</a><br />
└<a href="contents2.html">話題のｱｲﾃﾑ<span style="color:#FF9900">&#xE71A;</span>週間ﾗﾝｷﾝｸﾞ</a><br />
└<a href="contents3.html">注目ﾌﾞﾗﾝﾄﾞ<span style="color:#FF0000">&#xE6F5;</span>の新着NEWS</a><br />

（CHTML）

<font color="#FF00FF">&#xE6F8;</font>注目ｺﾝﾃﾝﾂ<br />
└<a href="contents1.html">新作<font color="#FF0000">&#xE6ED;</font>Xmas限定<font color="#FF00FF">&#xE71B;</font>ｼﾞｭｴﾘｰ</a><br />
└<a href="contents2.html">話題のｱｲﾃﾑ<font color="#FF9900">&#xE71A;</font>週間ﾗﾝｷﾝｸﾞ</a><br />
└<a href="contents3.html">注目ﾌﾞﾗﾝﾄﾞ<font color="#FF0000">&#xE6F5;</font>の新着NEWS</a><br />

絵文字の本来の色を調べたり、絵文字を使っている箇所を１つ１つ探して作業するのは面倒ですし、ミスもしやすいです（色指定で#を忘れてしまったり）。しかしラウンドアバウトでは、変換シートを活用することでこうした煩わしい作業を丸ごとなくすことができます。

●拡張絵文字変換シートを利用する

ラウンドアバウトの言語変換（絵文字変換を含む）は、変換ルールをプログラムの外の設定ファイルに持つという柔軟なしくみで動いています。変換ルールはCSV形式のテキストファイルで、Excelなどで自由に編集できます。デフォルトの変換ルールを編集することもできますが、サイト開発者によるカスタムルールを記述した別のファイルをルールに付け足すことも可能です。

ドコモの絵文字を表示する際には、spanタグまたはfontタグで文字色装飾されたドコモ絵文字になるよう変換ルールを作れば、オリジナルのXHTMLでは絵文字コードだけ記述すればよく、他のフォント色の影響を受けない絵文字が使えるようになります。

とはいえ、各キャリアの絵文字１つ１つに変換ルールを作るのは時間のかかる作業です。そこでラウンドアバウトでは「色付き絵文字変換シート」を用意しています。この絵文字変換シートをラウンドアバウトの変換ルールに追加すれば、色付き絵文字にすぐに対応することができます。

●色付き絵文字変換シートの変換ルール（イメージ）

変換元	ドコモ（iモードXHTML対応）向け変換後	ドコモ（CHTML対応）向け変換後
(ドコモの晴れ)	<span style="color: #FF0000;"></span>	<font color="#FF0000"></font>
(auの晴れ)
(ソフトバンクの晴れ)

色付き絵文字変換シートにより、冒頭のページはこのような表示になります。
ページ全体にテキスト色・リンク色が指定されていても、絵文字はその影響を受けず本来の色で表示できるようになりました。

色付き絵文字変換シートはデベロッパーコネクションで入手できます。