hoge

新しい絵文字の実装に取り組んでいますが、前回ブラウザやOSのバージョンによって表示できる絵文字が限られてしまうことが分かりました。 ブラウザで調べてみると、Windows10の環境下におけるInternet ExplorerのUnicode対応は9.0以下で、10.0以上は対応していないようです。またIneternet ExplorerではIE11であっても絵文字が全て白黒で表示されてしまい、このままでは使いたいとは思われなさそうです。 そのためHTML Entityでの表示はやめて、画像として本文に埋め込むことによってOSのバージョンやブラウザに左右されない絵文字が表示できます。 ## 画像に変換する HTML Entityを画像化するには、絵文字に対応した画像が用意されてなければならない。2000種類以上ある絵文字を用意するのは難しいため、オープンソースで公開されているライブラリを利用する。 絵文字を画像化するライブラリはTwemojiとEmojiOneが有名所だろう(この2つ以外知らない)。 ### Twemojiで画像化 TwemojiはTwitter社が公開しているライブラリで、個人的に一番馴染みがある画像群だ。 Twemojiでは以下の方法で画像化ができる。 ```markup ``` このコードではdocument内にある絵文字を全て置き換えているため、置換する要素を適宜変更する必要がある。 ### EmojiOneで画像化 EmojiOneではTwemojiのように`document.body`を変数として渡せないため、1文字ずつ変換を行う。 ```markup // 任意の絵文字1つ ``` ライブラリを使うことによって簡単にHTML Entityを画像にすることができるが、EmojiOneは1つずつなので描画完了までのパフォーマンスが悪い。 ## 画像を挿入するときの問題点 絵文字を画像にすることは簡単だが、今までと異なりtextareaにそのまま挿入するとimgタグとして埋め込まれるためユーザが何の絵文字を使ったのかが分からなくなる。 textareaに入力する時だけHTML Entityにし、ブログの記事として表示するときは画像にすることも可能だが、画像化は本来対応できていなかったHTML Entityまで表示できるようにしているため、HTML Entityとしてtextarea上で表示しようとすると対応できておらず、これもまたユーザが何の絵文字を使ったのかが分からなくなる。 挿入された時imgタグではなく、画像そのままを表示するのはtextareaでは不可能だが、divタグに`contenteditable="true"`と書くことでdivタグがtextareaのように入力が可能になる。 ```markup ``` タグを直接書き込んでも反映されないが、ボタンのクリックなどで書き加えたタグはHTMLとして表示されるため、画像がimgタグの文字列としてではなく、画像そのまま利用できる。