ばかおもちゃ本店:Youtube twitter:@sashimizakana Amazon.co.jpアソシエイト

2015年4月7日火曜日

Javascriptでemojiを扱うライブラリ書いた

emoji

emojiは実は権利的に不透明なアイコンを使わなくてもSegoe UIとかに含まれているのでフォントで使える。ただブラウザによって表示に違いはあるようだけど、最近ではだいたいどうにかなるっぽい。Windows8.1のIE11とかならカラーで表示することもできる。

ただ、ユーザーに入力してもらうには、Githubみたいに:smile:って書いたらsmileの絵文字を出すみたいな仕組みがほしいよなーということで、GithubのgemojiというemojiライブラリのJSONを使って、エイリアスからフォントを出力するライブラリ、mojierを書いた。

sashimizakana/mojier

npmにも登録してあるのでnpm install mojierで利用することができる。
mojier.get(“smile”)みたいな感じで使うと対象の文字を返す。
ついでにAngularJSのサービスとフィルタとして利用できるようにangular-mojierというのも書いた。

sashimizakana/angular-mojier

これもnpmに登録してあるのでbrowserifyから使ったりrelease/mojier.jsを普通にロードして使ったりできる。

デモを見てもらえばどんな感じで使えるのかわかると思うので、どうぞ。

angular-mojierのデモ

下の海苔巻きのボタンは息子(3歳)が「ぼくおすしのボタンほしい」というのでつけた。
一応エイリアスからemojiを検索できるようになっているので、こういうことも出来るというサンプルとして。jQuery.textcompleteなんかと組み合わせればGithubのemoji入力みたいなものが簡単に作れると思う。