携帯電話で表示できる絵文字群
▲携帯電話の絵文字の例(iモード)

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

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

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

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

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

携帯電話(iモード)搭載の絵文字を表示した携帯サイトの例
▲docomoの絵文字を使ったページの表示例(auでも表示可)

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

携帯電話(Yahoo!ケイタイ)搭載の絵文字を表示した携帯サイトの例
▲Softbankの絵文字を使ったページの表示例

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

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

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

携帯キャリア別 絵文字の互換性表
▲携帯キャリア別 絵文字の互換性 [○=表示可能,×=表示不可]

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

絵文字を使ったページのサンプルは

サンプル携帯サイトのURL(QRコード)
 

前回と同様に、作成結果はサンプル携帯サイトに反映してありますので、お手持ちの携帯端末で見てみて下さい。(右図のQRコードを読み取ればURLが得られます。)
パソコンのブラウザからも閲覧可能です。(ソースを参照したい場合にどうぞ)

今回のサンプルページへは、下図のように、トップページの下部にある「全マンガリストを一覧」のリンクをクリックしてアクセスできます。 もしくは、http://mc.rumic.org/manga/へ直接アクセスしても構いません。

絵文字を使ったサンプルページへの移動手順
▲今回のサンプルページへの移動方法

それでは、絵文字の入力方法を順番に見ていきましょう。
docomo・au・Softbankのキャリアごとに絵文字の入力方法が異なりますので、キャリア別に解説していきます。


【携帯サイトの作り方 第3回 目次】

1. はじめに・サンプル (このページ)
2. ┣┯ docomo(iモード)の絵文字を入力する方法
3. ┃├─ 「i絵文字」を使って絵文字を入力する方法
4. ┃└─ 絵文字の表示色・サイズを好きに変更する方法
5. ┣━ au(EZweb)の絵文字を入力する方法
6. ┗━ Softbankの絵文字を入力する方法