携帯サイトの作り方 No.3 絵文字の入力方法 [ホームページ作成] All About

▲携帯電話の絵文字の例（ｉモード）

携帯電話などから閲覧できる「携帯サイト」を作る記事の第3弾です。今回は、絵文字の表示（入力）方法をご紹介致します。

最初の記事「携帯サイトの作り方第1回作成方法の基礎」では、携帯サイトとして機能する基礎的な記述方法をご紹介いたしました。
前回の記事「携帯サイトの作り方第2回番号キーで移動」では、携帯電話の番号ボタンを使ってリンクを移動させる記述方法をご紹介いたしました。

今回は、右上図に掲載したような、携帯電話ならではの「絵文字」を表示（入力）する方法をご紹介致します。携帯電話には、独自の絵文字が数百種類用意されています。これらの絵文字は「画像」ではなく「テキスト」の扱いなので、読み込みに時間がかかりません。サイズの変更も自由自在ですし、（docomoの絵文字なら）色も簡単に変えられます。うまく活用すれば、素早く表示されるグラフィカルな携帯ページが作れるでしょう。

携帯電話の絵文字を表示させる

今回は、絵文字を使った携帯サイトの例として、下図のようなページを用意しました。「雷マーク」で見出しの先頭を装飾したり、「星マーク」を並べて罫線の代わりにしています。コンテンツ（マンガ）の内容に合わせて、「口紅」・「ペンギン」・「ブタ」などの絵文字も使っています。

▲docomoの絵文字を使ったページの表示例（auでも表示可）

絵文字は、キャリア（携帯電話会社）間で互換性がほとんどありません。そこで、上図のdocomo・au用とは別に、Softbank用として別途下図のようなページを用意しました。（コンテンツは同じですが絵文字だけ異なっています。）

▲Softbankの絵文字を使ったページの表示例

今回は、上記のサンプルような、携帯電話独自の「絵文字」を表示させる方法（XHTMLソースに入力する方法）をご紹介致します。

絵文字の互換性はほとんどない

docomo用（ｉモード用）の絵文字は、auの携帯電話でも表示可能です。しかし、逆にau用（EZweb用）の絵文字は、docomoの携帯電話では表示できません。キャリア間では絵文字の互換性はほとんどなく、下表のようになっています。

▲携帯キャリア別絵文字の互換性［○＝表示可能，×＝表示不可］

三大キャリアで共通する絵文字がないため、今回は「docomo・au用ページ」（＝docomoの絵文字を使用）と、「Softbank用ページ」（＝Softbankの絵文字を使用）の2種類に分けてサンプルを作っています。
※1ページで同時に三大キャリアに対応させるには、（CGIなどを使って）絵文字だけを別途合成させる仕組みが必要です。今回の記事では、その点には触れていません。