何をやったの

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;

まとめ

みんなもクソコラ絵文字で遊ぼう！面白い絵文字を錬成したら教えてくれよな