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

前回の投稿に引きつづいて、スマホサイトでdocomo絵文字(ていうか今回はガラケー絵文字)の装飾を試してみたメモです。

こんな感じ <span class="emoji sun"></span> の記述でガラケー絵文字をスマホサイト(for iOS/Android)へ表示します。

• HTMLファイルは UTF-8 形式を想定しています。
• 最終的には今回も画像(CSSスプライト)で表示でします。

デモ

こちらをご覧ください。

• http://hkusu.github.io/emojisprite_demo/

利用するライブラリ

この「emoji-splite」というJavaScriptライブラリを使います。

• https://github.com/matsubo/emoji-sprite/wiki

導入手順メモ

手順

• このライブラリを取得
  • https://github.com/matsubo/emoji-sprite

$ git clone git://github.com/matsubo/emoji-sprite.git

• index.html で CSSファイル をインクルード

index.html

<link rel="stylesheet" href="emoji-sprite/lib/emoji-sprite/emoji.css">

• HTMLへの記載

index.html

これは<span class="emoji sun"></span>晴れマークです。<br>
これは<span class="emoji cloud"></span>曇りマークです。

結果

ブラウザで表示するとこんな感じ。

デモのソースはこちらに置いておきます。

• https://github.com/hkusu/emojisprite_demo
  • index.htmlを見てください。

ほか

• 参考にした記事はこちら
  • 1時間で携帯サイトをスマートフォン対応にする方法
• 絵文字の画像は、シックス・アパートさんが公開しています。
  • http://www.sixapart.jp/about/emoji.html
  • 利用する際はライセンスに従ってください。