コンテンツへスキップ

絵文字入力/表示ライブラリまとめ

by : 2017/11/07

業務システムにおいても絵文字が使われるようになっています。報告書などはとても無理ですが、従業員同士のコミュニケーションにおいて絵文字を使うことで感情を上手に表現できるようになります。

自社システムに絵文字機能を組み込む際には次のようなライブラリを使うと良いでしょう。

EmojiPanel

スマートフォンやデスクトップで使える絵文字入力によく似た絵文字ピッカーです。絵文字自体は派手すぎないデザインになっているので、多くの場面で利用できそうです。絵文字自体はアイコンで、肌の色などには対応していないようです。

EmojiPanel

mervick/emojionearea: WYSIWYG-like EmojiOne Converter / Picker Plugin for jQuery

テキストエリア、テキストボックスで使える絵文字ピッカーです。jQueryプラグインで、多くのオプションを提供しています。自動補完機能もありますが、設定でオフにすることもできます。

mervick/emojionearea: WYSIWYG-like EmojiOne Converter / Picker Plugin for jQuery

Textcomplete

入力補完の際には絵文字がでていますが、テキストエリアやテキストボックスには文字列として絵文字が追加されます。見た目と異なるので、一般ユーザよりも開発者向けに使えるのではないでしょうか。

Textcomplete

wdt-emoji-bundle – Demo

テキストを解析して絵文字にしてくれます。デザインをシステムに合わせて変更可能で、Apple/Google/Twitter/Facebook/Emojioneといったサービスごとに若干異なるアイコンデザインになります。

wdt-emoji-bundle – Demo

iamcal/js-emoji: A JS Emoji conversion library

Webブラウザ毎に異なる絵文字のデザインを吸収してくれるライブラリです。テキストを解析し、それぞれの環境に合わせた絵文字を表示してくれます。jQueryと組み合わせた使い方もできます。

iamcal/js-emoji: A JS Emoji conversion library

emojione/emojify.js: A Javascript module to convert Emoji keywords to images

テキストを解析して絵文字に変換します。絵文字自体は500種類以上用意されています。すでに入力されたテキストに対して適用される仕組みです。

emojione/emojify.js: A Javascript module to convert Emoji keywords to images

diy/jquery-emojiarea: A rich textarea control that supports emojis, WYSIWYG-style.

WYSIWYGで使える絵文字ピッカーです。絵文字は自分で用意しなければならないですが、入力できる文字を自由に制御できるとも言えます。jQueryプラグインなのでカスタマイズも容易でしょう。

diy/jquery-emojiarea: A rich textarea control that supports emojis, WYSIWYG-style.


絵文字は感情表現を和らげたり、手軽に反応を返せるようになります。あまり多用するとカジュアルになりすぎたり、ビジネスには向かないかも知れません。あくまでもスムーズなコミュニケーションを実現するために使うのが良いでしょう。

From → HTML5

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。