読者です 読者をやめる 読者になる 読者になる

Knowledge

オープンソースで情報共有のサービス「Knowledge」を作っています。ブログでは、サービスの説明や開発で得た情報などを書いていきます。https://support-project.org/knowledge_info/index

すごく簡単に「絵文字」に対応したサイトが作れます - 「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を処理しているサイトでは組み込むと良いと思っています