docomo絵文字をスマホサイトで表示する①

7550 ワード
unicode JavaScript emoji JavaScript テキストリンク

  • Unicode形式の docomo絵文字 をスマホサイト(for iOS/Android)で表示します。
    • 絵文字の例：晴れマークの場合 → 
    • HTMLファイルは UTF-8 形式を想定しています。
  • これ重要なのですが、最終的には画像(CSSスプライト)で表示でします。
    • iOSとAndroidの違いや、Android端末の機種依存を考えると、画像で表示するのが今のところベストプラクティスかなと。
    • なので特にスマホに限らず、PC等でも表示できます。
  • docomo絵文字に限らず、今回利用するJSライブラリは au、SoftBank の絵文字も対応しているようです(未検証)。

デモ

利用するライブラリ

docomo絵文字について

導入手順メモ

  • 今回は Bower でJavaScriptライブラリのパッケージ管理をすることにします。

手順

$ 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">
        これは&#xE63E;晴れマークです。
        これは&#xE63F;曇りマークです。
    </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固有の絵文字がそうなるようです。
    • 「晴れ」と「曇り」が続くと「晴れのち曇り」の絵文字になる？謎。

ほか

さいごに

  • Unicodeで入力するの面倒だよ単純に装飾として絵文字を使いたいんだよ、というもあるかと思いますので、それは別の投稿で書きます。