何をやったの
Unicode 絵文字のいろんなパーツをごちゃ混ぜにして、クソ絵文字を錬成できるツールを作りました。
暇つぶしや、チャットでの小ボケにドウゾ。こんな時代だしリモートを楽しもうぜ。
https://zk-phi.github.io/MEGAMOJI?mode=fukumoji
(4/13 更新: MEGAMOJI に統合しました)
きっかけ
Emoji Mashup Bot https://twitter.com/emojimashupbot がときどき放つ会心の一撃が好きすぎたので、自分で作ってみたいなと思いました。
それっぽいツールは既存でもいくつかあるのですが、オープンソースのものがなかったり、権利が怪しかったり (iOS の絵文字がベースになってそうなパーツがある etc) したので、権利的にも UI 的にもシンプルなものを自前実装してみました。
実装
実装上の知見などを簡単に紹介します。
使いやすい絵文字素材
権利がクリアかつ扱いやすい絵文字画像が必要なのですが、 Twitter 社の OSS Twemoji がとても便利でした。
画像は CC-BY 、コードは MIT でライセンスされていて、自分の理解が正しければ、権利表示さえすれば自由に改変して使用することができます。
形式も SVG になっていて、イラレなどで簡単にパーツを抜き出せるのでかなり使いやすいです。
保存できる画像を生成する
たんに福笑いを表示するだけなら、 img を position: absolute して重ねるなどすればよいのですが、絵文字として使ってもらうためには、ちゃんと右クリックで保存できるようにしてあげたいところです。
自分のツールでは、すべての画像を１枚の canvas 要素に合成することで１枚の保存できる画像を生成しています。
// パーツ画像の url リスト -> 合成された画像の url
function (items) {
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
canvas.width = EMOJI_SIZE;
canvas.height = EMOJI_SIZE;
var img = document.createElement("img");
for (var item of items) {
img.src = item;
ctx.drawImage(img, 0, 0, EMOJI_SIZE, EMOJI_SIZE);
}
return canvas.toDataURL();
}
上のコードで、各パーツの画像はすでに一度ロードされている想定になっているところだけ注意が必要です。まだロードされていない画像ファイルを使う場合は、以下のようにロードを待つ必要があり、めでたくコールバック地獄となります。
img.onload = function () {
ctx.drawImage(img, 0, 0, EMOJI_SIZE, EMOJI_SIZE);
};
img.src = item;
まとめ
みんなもクソコラ絵文字で遊ぼう！面白い絵文字を錬成したら教えてくれよな