- Unicode形式の docomo絵文字 をスマホサイト(for iOS/Android)で表示します。
- 絵文字の例：晴れマークの場合 →
 - HTMLファイルは UTF-8 形式を想定しています。
- 絵文字の例：晴れマークの場合 →
- これ重要なのですが、最終的には画像(CSSスプライト)で表示でします。
- iOSとAndroidの違いや、Android端末の機種依存を考えると、画像で表示するのが今のところベストプラクティスかなと。
- なので特にスマホに限らず、PC等でも表示できます。
- docomo絵文字に限らず、今回利用するJSライブラリは au、SoftBank の絵文字も対応しているようです(未検証)。
デモ
- こちらをご覧ください。
利用するライブラリ
- このJavaScriptライブラリを使います。
docomo絵文字について
- docomoのサイトで説明されています。
- docomo絵文字の入力ツール
- docomoから入力ツール「i絵文字」が提供されています(ただしWindows用のみ)。
- Macの方はこのサイトが便利です。
- http://code.cside.com/i-mode/emojimode/#
- このサイトの「ユニコード」欄をコピペすればOKです。
導入手順メモ
- 今回は Bower でJavaScriptライブラリのパッケージ管理をすることにします。
手順
- Bower で、このライブラリ(https://github.com/fengmk2/emoji)をインストール
$ bower install emoji --save
- index.html で CSSファイル をインクルード
index.html
<link rel="stylesheet" href="bower_components/emoji/lib/emoji.css">
- index.html で JSファイル をインクルード ※jQueryも必要です。
index.html
<script src="bower_components/emoji/lib/emoji.js"></script>
- HTMLへの記載
- 実際には JavaScript の記載は外部ファイルにした方がいいです。
-
class="emojstext"は一カ所しか書けないようです。- なのでページ全体を絵文字対応したいなら body のすぐ下の層で div で定義する。
index.html
<body>
<div class="emojstext">
これは晴れマークです。
これは曇りマークです。
</div>
<script>
$(function () {
var $text = $('.emojstext');
var html = $text.html().trim().replace(/\n/g, '<br/>');
//html = jEmoji.softbankToUnified(html);
//html = jEmoji.googleToUnified(html);
html = jEmoji.docomoToUnified(html);
//html = jEmoji.kddiToUnified(html);
$text.html(jEmoji.unifiedToHTML(html));
});
</script>
</body>
結果
- ブラウザで表示するとこんな感じ。
- うまく動かない！という方の為に、デモのソースはこちらに置いておきます。
-
https://github.com/hkusu/emoji_js_demo
-
index.htmlを見てください。
-
- 何カ所か変換できてないのがありますが（□みたいな表示）、iアプリマークなどdocomo固有の絵文字がそうなるようです。
- 「晴れ」と「曇り」が続くと「晴れのち曇り」の絵文字になる？謎。
-
https://github.com/hkusu/emoji_js_demo
ほか
- PHP版もあるようです。
- https://github.com/iamcal/php-emoji
- ただ、結局は CSSスプライト で画像を表示するようです。
さいごに
- Unicodeで入力するの面倒だよ単純に装飾として絵文字を使いたいんだよ、というもあるかと思いますので、それは別の投稿で書きます。