Help us understand the problem. What is going on with this article?

暇だしクソ絵文字でも作ろうぜ!

何をやったの

Unicode 絵文字のいろんなパーツをごちゃ混ぜにして、クソ絵文字を錬成できるツールを作りました。

暇つぶしや、チャットでの小ボケにドウゾ。こんな時代だしリモートを楽しもうぜ。

https://zk-phi.github.io/MEGAMOJI?mode=fukumoji
(4/13 更新: MEGAMOJI に統合しました)

スクリーンショット 2020-04-12 15.30.40.png

emoji.gifemoji.gifemoji.gifemoji.gifemoji.gif

きっかけ

Emoji Mashup Bot https://twitter.com/emojimashupbot がときどき放つ会心の一撃が好きすぎたので、自分で作ってみたいなと思いました。

それっぽいツールは既存でもいくつかあるのですが、オープンソースのものがなかったり、権利が怪しかったり (iOS の絵文字がベースになってそうなパーツがある etc) したので、権利的にも UI 的にもシンプルなものを自前実装してみました。

実装

実装上の知見などを簡単に紹介します。

使いやすい絵文字素材

権利がクリアかつ扱いやすい絵文字画像が必要なのですが、 Twitter 社の OSS Twemoji がとても便利でした。

https://twemoji.twitter.com/

画像は CC-BY 、コードは MIT でライセンスされていて、自分の理解が正しければ、権利表示さえすれば自由に改変して使用することができます。

スクリーンショット 2020-04-12 15.46.43.png

形式も SVG になっていて、イラレなどで簡単にパーツを抜き出せるのでかなり使いやすいです。

保存できる画像を生成する

たんに福笑いを表示するだけなら、 imgposition: absolute して重ねるなどすればよいのですが、絵文字として使ってもらうためには、ちゃんと右クリックで保存できるようにしてあげたいところです。

自分のツールでは、すべての画像を1枚の canvas 要素に合成することで1枚の保存できる画像を生成しています。

// パーツ画像の 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;

まとめ

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

zk_phi
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした