すごく簡単に「絵文字」に対応したサイトが作れます - 「emoji-parser」

絵文字

• 日本で生まれた「絵文字」は「Emoji」となりGithubのmarkdownなどで使えるようになっています

• というわけで、Knowledgeでも絵文字を使えるようにしたので紹介します

• 絵文字を使っているページ

support-project.org

利用しているライブラリ

• フロント側のJavascriptで、表示する際に絵文字の文字列を画像に置換しています

• frissdiegurke/emoji-parser

github.com

利用方法

• 上記サイトのライブラリを読み込みます（例によってbowerで取得）
• あとは、テキストの中の絵文字を変換かけるだけです

var emoji = window.emojiParser;
var result = emoji('This is a :telephone: :smiley[:D]:', 'http://example.com/emoji/images');

• 'This is a :telephone: :smiley[:D]:' の部分に変換したいテキストを入れます

• 'http://example.com/emoji/images' の部分には画像のパス(インストールしたライブラリの中にあります）を指定します

• すると、resultには、変換後のテキストが取得されます

This is a <img class="emoji" src="http://example.com/emoji/images/telephone.png" title="telephone" alt=":telephone:" /> <img class="emoji" src="http://example.com/emoji/images/smiley.png" title=":D (smiley)" alt=":smiley[:D]:" />

というHTMLがresultに入ります

• すごく簡単に組み込めたので、どんなサイトにも用意に組み込めると思います
• 特にmarkdownを処理しているサイトでは組み込むと良いと思っています