なっく日報

技術やら生活やらのメモ

:smile:みたいな文字列を絵文字の画像に変換してみる☺

:smile:みたいな文字列を<img src="src/smile.png" />みたいに置き換えてくれるライブラリがないか探してみたところ

github.com

から辿っていくつか見つけました(この辺https://github.com/arvida/emoji-cheat-sheet.com#want-to-add-emojis-to-your-projects

その中でも、これが一番適当に動かしてみるにはよさ気な感じでした。
https://github.com/HenrikJoreteg/emoji-images

emoji-imagesを動かしてみる

npmでインストールして(最近はクライアントのライブラリもnpmで落とせて便利ですね)

npm i --save emoji-images

htmlにタグ追加して

<html>
<body>
    <script src="./node_modules/emoji-images/emoji-images.js"></script>
    <script src="./index.js"></script>
</body>
</html>

javascript書いて

var EMOJI_ENDPOINT = 'https://raw.githubusercontent.com/jsw0528/rails_emoji/master/vendor/assets/images/emojis/';
var newContent = emoji('<div>Hello :smile:</div>', EMOJI_ENDPOINT, 15);

的な感じでざっと動きました。

補足

EMOJI_ENDPOINTな部分ですが、本当は絵文字を自分のローカルに落としてこないとダメだと思います。

が、ライセンスフリーとかで使えるものがパッと見つからず。

個人で、ちょっと見栄えを試す分にはこれくらいで。