📌 更新履歴
2024/10/21
読み込み中のフォントに loading... 表示を追加
フォントファイルを読み込んで絵文字に使う機能を追加
インストールされたフォント名を直接指定して使える機能は以前からありましたが、いかんせん難しかったため。
2024/10/17
最新の Safari で絵文字が左上しか描画されない不具合を修正
最新の Safari のみ、絵文字がなぜか左上しか描画されない不具合が起こっていたため修正しました。
https://scrapbox.io/files/670fda866798f7001c224c4b.png
2024/6/25
長方形絵文字の Foil エフェクトをすっきり
Foil エフェクトを長方形絵文字に適用したとき、反射光が絵文字に合わせて横に伸びてしまう現象を改善しました。
https://scrapbox.io/files/667af5625e05e4001d4996df.gif 従来の実装
https://scrapbox.io/files/667af5671d926c001d6ba1ef.gif 新しい実装
2024/6/24
アニメ GIF で疑似的な半透明を表現できるように
GIF には本来半透明は存在しませんが、ディザリングを自前実装することで疑似的な半透明表現ができるようになりました。
拡大すると若干キモいですが、実際に使用するサイズなら案外自然に見えると思います (少なくとも以前の実装よりは)。
https://scrapbox.io/files/66787222534e7e001d08000a.gif 透過前
https://scrapbox.io/files/6678725e36685f001d780308.gif 透過（以前の実装）
https://scrapbox.io/files/668504b87731b9001c7285cd.gif 透過（今後の実装）
あわせて、「GIF アニメは非推奨」としていた透過オプションを、 GIF アニメにもなるべく対応していく方針に切り替えました。
グローバルパレットでファイルサイズを最適化
フレームごとにパレットを作るのではなく、全体で１つのパレットを使い回すことでファイルサイズを軽量化しました。
https://scrapbox.io/files/66793fbec90a19001ce06713.gifhttps://scrapbox.io/files/66793fc5ead2be001c6f5ee2.gif
左：フレームごとにパレットを生成、 78 KB
右：全フレームで１つのパレットを共有、 62 KB
細かいところですが、減色処理を rgba4444 ではなく rgb565 でやるようにしたので、色の再現度も若干向上していると思われます (僕には違いがわかりません)。
2024/6/23
一部のオプションの組み合わせで透過アニメ GIF の品質を改善
アニメーションと透過を組み合わせたときに、黒のピクセルが過剰に透過されやすい問題を改善しました。
https://scrapbox.io/files/6676e847982ac9001c738c86.gifhttps://scrapbox.io/files/6676e84b3058b9001d08024b.gif
アニメ GIF における透過は引き続き非推奨としていますが、これで多少は使いやすくなるかもです。
2024/2/7
アウトラインを片側だけにつけられるように
3D 風表現の幅が広がりました
全周にアウトライン
https://scrapbox.io/files/65c30efbeac07d002916700a.png
右・下のみにアウトライン
https://scrapbox.io/files/65c30f018e7de80025d90a4b.png
2023/12/19
新エフェクト：ノリノリ
久々の追加エフェクトを提案いただきました。これはありそうでなかったですねw
https://private-user-images.githubusercontent.com/133759614/291171087-1616ec33-95f3-4a05-ab46-2431fe05ca1b.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTEiLCJleHAiOjE3MDMwNTIzMjQsIm5iZiI6MTcwMzA1MjAyNCwicGF0aCI6Ii8xMzM3NTk2MTQvMjkxMTcxMDg3LTE2MTZlYzMzLTk1ZjMtNGEwNS1hYjQ2LTI0MzFmZTA1Y2ExYi5naWY_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBSVdOSllBWDRDU1ZFSDUzQSUyRjIwMjMxMjIwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDIzMTIyMFQwNjAwMjRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT05MTY0MWQ1NmZiY2JlMjJmMWE4Y2VlMzk0NmNjNDZhZWNmNGFiMjJhMWI2ODUzMzgzZjMzNDVhMWU2NzVjZDIxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.qHBs6OjOJLopkRrHI7UGqsQiVRFID7EZ1oIFXOCaHSw
2023/11/9
テキスト絵文字の外周の空白を調整する機能を追加
加えて、ダークモードでの視認性などを考慮して、デフォルトでもごくわずかな空白を付加するようにしました。
https://scrapbox.io/files/654c50b4d5a91e001cb8dbc3.pnghttps://scrapbox.io/files/654c50c375815d001b0cb84f.png
ポエム：同じことを実現するのに複数の方法があるとややこしくなりがちなので、極力すべての機能が直交するように意識しているところがあるのですが、パディングの設定はトリミングの設定 (負のトリミングを設定することでも空白を付加できる) と若干重なってしまうのだけちょっと気になっています。
2023/10/23
テキスト絵文字のファイル名変更
テキスト絵文字のファイル名を megamoji.png から、入力されたテキストに変更しました。
2023/10/7
Thanks 30k MAU 🎉
30日間のアクティブユニークユーザーが３万人に届きました🎉
2023/10/4
イージング「いったりきたり」を廃止
必要な場面が少なそうだったので廃止しつつ、一部の「いったりきたり」に合わせて調整していたエフェクトを元に戻しました。
アニメーション OFF の環境を想定したエフェクトの微調整
アニメーション OFF の環境で開いたときに真っ白の画像になってしまうことを防ぐため、エフェクトのタイミング等を微調整しました。
2023/10/3
手書き系フォントの入れ替え
ドヘタ字J のライセンスが 文字主体の制作物の配布・販売 を禁止する内容に変わっているとの情報を確認したため、近いテイストを持った、利用条件の緩いフォント チカラヨワク に入れ替えました。
https://scrapbox.io/files/651b000541fde4001c03dc5e.png
2023/7/31
プレビューの仕様修正
正方形以外の絵文字を作った時、プレビューで正方形に圧縮されて表示されてしまう問題があったので修正しました。
2023/7/5
レアケースのエラー修正
「切り抜き」を「そのまま」に設定した状態で、絵文字サイズを非常に小さくした場合にエラーが発生する問題を修正しました。
2023/4/28
デザインをほんのり改修
配色（特にダークモード時のコントラスト）を若干調整しました。
https://scrapbox.io/files/644aadd3a97112001c4d18b8.gif
https://scrapbox.io/files/644aa9c0043a6c001b049c0f.gif
押しても「色がちょっと濃くなるだけ」だったボタンに、背景色を追加して「押した感」を出しました。
https://scrapbox.io/files/644aaadc293061001b2c7ac9.gif
画面内でも特に重要なボタンについては、影でほんのり立体感を足して、「押した感」を出しました。
https://scrapbox.io/files/644aac5d6b9636001b2d4833.gif
リンクに下線を引いて、カーソルを触れなくても「押せる場所」であることがわかるようにしました。
https://scrapbox.io/files/644aaa177ac9ce001b246081.png
2023/4/7
Thanks 20k MAU 🎉
30日間のアクティブユニークユーザーが２万人に届きました🎉
2023/03/06
アニメ速度のプリセットから「爆速」を削除
組み合わせによっては高速点滅が目に入ってしまう可能性があったので、過度の光刺激を避けるため削除しました。
「職人モード」はそのままにしているので、必要な場合は直接入力してください。
2023/02/19
正方形以外の絵文字に対応
https://scrapbox.io/files/63f0eae54177cc001c2d71c1.gif
Misskey が正方形以外の絵文字に対応していて面白かったので、こちらも対応してみました
2022/12/27
「詳細オプションを開く」を「職人モード」に改名
「開く / 閉じる」という表現がもはや実態に合わなくなっていたため。Twitter などで「絵文字職人」というワードを観測していたので、とりあえず「職人」に。
ついでに場所を取りすぎていたので角に移動。
2022/12/8
Unicode 絵文字から画像を作れなくなっていた不具合修正
Unicode 絵文字（🎉 など）が使えなくなってしまっていたので、「テキストから作る」絵文字を SVG 実装から Canvas 実装に一旦戻しました。
2022/11/4
手書き・筆文字系フォントを入れ替え
アイコンとしてより使いやすそうだったので、「ドヘタ字 J」「玉ねぎ楷書「激」」に入れ替えました。
https://scrapbox.io/files/6363f1487c3f530023728de9.png 玉ねぎ楷書「激」
https://scrapbox.io/files/6363f144b5529f00223fea0e.png ドヘタ字 J
2022/10/14
画像サイズを変更できるように
画像サイズを変更できるようになりました。
※ 大きな画像はチャットツールの容量制限等に引っかかる可能性があるので、ご注意ください。
「テキストから作る」「パーツから作る」のパフォーマンス・品質向上
エフェクトをかけるギリギリまで SVG で扱うようにしたため、パフォーマンスや画質が若干良くなりました。
アウトライン周りの処理も変更して、トゲトゲが出なくなりました (代償として、全体にちょっと丸っこい感じになります)。
after <-> before
https://scrapbox.io/files/63490a1a394be2001e9ba70a.png https://scrapbox.io/files/63490a095aa286001dc5f534.png
システムフォントでの絵文字生成ができなくなった代わりに、好きなフォントファイルを直接読み込ませて使えるようになりました。
2022/10/4
FireFox のバグに対応
SVG の width, height をピクセル指定しないと Canvas に描き写せない不具合があるようだったので、対応しました。
「パーツから作る」が FireFox でも使えるようになりました。
2022/8/22
ダウンロードしたファイルの拡張子が .undefined になってしまう問題を修正
前回の更新以降、ダウンロードした gif アニメの拡張子が .undefined になって、そのままでは開けない不具合がありました。
2022/7/26
GIF エンコーダーをリプレース＆パフォーマンス改善
内部で使っている GIF エンコーダーを gif.js から gifenc に差し替えました。
いくつかの問題が解決しているはずです：
白が含まれる画像をアニメ GIF にして、さらに透過オプションもオンにすると、白だった部分が透明になる
高速でオプションをいじりまくると描画が詰まったり、最悪ブラウザのタブがクラッシュしたりする
合わせてテキストから画像へ変換する部分についても、描画回数を間引くことで負荷が高まりすぎないように調節しました。
2022/7/5
イージングを選べるようにした
アニメーションのイージングを選べるようにしました。「押し出し」は「スクロール＋イージング：シュッシュ」で再現できるので削除しました。
https://scrapbox.io/files/62c325a187ad99001daafc33.gif スルスル (デフォルト)
https://scrapbox.io/files/62c325a57fe374001d7cd610.gif シュッシュ
https://scrapbox.io/files/62c325aadffcf10023a0c133.gif ニュルニュル
https://scrapbox.io/files/62c325afc9da9b002387ed2d.gif ボテボテ
https://scrapbox.io/files/62c325b3fd8d2d002369ec98.gif いったりきたり
2022/6/2
カラーピッカーにテキスト入力を追加
ブランドカラーなど特定のドンピシャな色を使いたい場合を考慮して、テキスト入力を追加しました。
https://scrapbox.io/files/6297882a0166260022b04137.png
2022/5/31
「キラ」エフェクトを HSV ではなく YIQ 色空間で適用するように変更
after:
https://scrapbox.io/files/6295d844079cab002085b7d5.gif
before:
https://scrapbox.io/files/6295d83a0e49ca0023d6b10e.gif
2022/3/18
一部のフォント・文字の組み合わせでトゲが発生する問題を改善
意図したトンガリは潰さないようにしないといけないので、完全になくすことはできませんが、発生しづらくなりました。
2021/10/20
ダークモードをサポート
OS がダークモードに設定されている場合はダークモードで表示します。
2021/10/6
タブのデザインを若干変更
文言をシンプルにして、代わりにタップ領域を少し広げました。
2021/9/17
Thanks 10k MAU 🎉
月間のアクティブユニークユーザーが１万に届きました🎉
2021/8/23
新エフェクト：爆散
https://scrapbox.io/files/615407812965b3001d5402ae.gif
集中線エフェクトを調整
透明度を少し上げつつ線の量を増やして、アイコンサイズにしてもわかりやすくなりました。
グリッチエフェクトを調整
https://scrapbox.io/files/615407f9300454001dac82dd.gif
色ズレエフェクトとうっすらノイズを加えて、さらにレトロっぽくなりました。
2021/8/17
全 UI パーツを自前実装完了
これまでとっかえひっかえ、いろんなデザインシステムを拝借していましたが、やる気が出たのですべて自前実装に移行してみました。
少しづつ入れ替えていったのでまだ Naive UI の影響がかなり残ってはいます。
2021/7/26
源暎エムゴを Mplus 1 に入れ替え
源暎エムゴのライセンスには RFN (予約フォント名) が含まれており、 WOFF に圧縮する際に別のフォント名をつける必要がありました。
処理に自信がないので、 RFN のないフォントに入れ替えました。
はちまるポップを追加
かわいい手書き系がなかったので。
2021/7/21
「エフェクト」を WebGL 実装に移行完了
Canvas でピクセルデータをゴリゴリする特殊な実装になっていましたが、 WebGL 実装に統一しました。
あわせてエフェクトの内容も若干調整しました。
ちょっとだけパフォーマンスがよい（はず）＆実装がシンプルになった。
2021/7/17
透過 gif のクオリティがちょっとマシになった
半透明が使えないため透過 gif のクオリティに限界があるのですが、以前よりはちょっとマシになりました。
これまでは完全に透明なピクセルだけが透過になり、それ以外は一律不透明になっていましたが、閾値を調整できる仕組みを入れました。
2021/7/16
Foil エフェクトをリニューアル
全体が点滅するだけのエフェクトでしたが、斜めに光った方が使いやすそうだったのでそうしました。
旧
https://scrapbox.io/files/615408be34f2e200232f046f.gif
新
https://scrapbox.io/files/615408c59d52c7001dbc990b.gif
新エフェクト：ストロボ
ボロ感とかホラー感が出るやつ。
https://scrapbox.io/files/615408e036ecc9001ff4a14f.gif
2021/7/15
新エフェクト：ウェイヴ
びびったときのテロップみたいなやつ。
https://scrapbox.io/files/615408f03657c8001d1aa738.gif
2021/7/14
フォントの整理
Noto Sans を源暎エムゴに入れ替え
「ゴシック」「丸ゴ」「明朝」は意図的にスタンダードなフォントを選んでいましたが、絵文字に使うならこちらの方が適任 (小さいサイズでもインパクトが出る) かなと思えてきたので替えてみました。
それとなくレトロな感じも好き。
ポッタを青柳隷書しもに入れ替え
筆文字枠を入れ替え。絵文字にしたときに、より力強い字体の方が向いていそうだったため。
黒薔薇ゴシックを追加
中二っぽいのがなかったので。
全体スクロールを改名＆仕様変更
「全体スクロール」を「通過」に改名して、つなぎ目に隙間を入れました。
文章を流したときにちょっと読みやすくなります。
2021/7/13
新アニメーション：全体スクロール
https://scrapbox.io/files/6154093509860100239c7bfd.gif
トリミング「はみだす」と組み合わせると良い感じになります。
アニメ速度の仕様変更
アニメ速度に遅いを追加しました。
写真などから絵文字を作らない限り、ファイルサイズに余裕がありそうだったので FPS も上げました。
グラデ・アウトラインの配色調整
文字色をいったん HSL に飛ばして生成するようにしました。
2021/7/11
Vue3 + Naive UI に移行した
せっかく Vue3 移行したので、久々にデザインシステムを入れ替えてみました。
あわせてプリセットの文字色をちょっと変えたり、簡単なチュートリアルを設置したりしました。
2021/7/8
Webpack + Typescript 化した
思い立ったが吉日。
2021/5/26
プレビューを追加した
作った絵文字をそれっぽくプレビューできるようにしました。
2021/4/25
glfx.js を使ったエフェクトをいくつか追加した
WebGL で動いているので、古いブラウザでは動きません。
https://scrapbox.io/files/61540982371535001d510608.gif
https://scrapbox.io/files/6154098c963d06002306e167.gif
2021/2/16
新エフェクト： 直球を追加した
2021/2/6
テキスト絵文字にグラデーションを敷けるようにした
ゴージャスなテキスト絵文字が作れます。 5000 兆円欲しい。
https://scrapbox.io/files/615409a422f0b9001d302b48.gif
デフォルトでは金属光沢っぽいグラデーションを設定していますが、自由にいじれるので遊んでみてください。
2021/2/4
新オプション：左右/上下反転を追加した
アウトライン付きテキスト絵文字を作れるようにした
パキっとした文字が出せるようになりました。
https://scrapbox.io/files/615409c01f4c190023b4cb8d.png
新エフェクト： モザイクを追加した
あわせて「もやもや」の具合を調整しました。
画像のトリミング範囲がたまにズレる問題を修正
テキスト絵文字を作った時、たまに文字の端が欠けたりする原因にやっと気づいたので直しました。
自動計算されたデフォルトの offsetLeft, offsetTop が極めて小さい場合、フォームの input に描き戻されるときに指数表記になってしまって、それを再び使うために parseInt した際、指数部が解釈されないために桁がずれてしまっていたのが原因。 Math.floor(Number(...)) に置き換えたら直りました。
ずっと canvas の謎挙動だと思ってました。なるほど…。
2021/2/3
新フェクト： グリッチを追加した
実装してみたくなったので追加してみました。
https://scrapbox.io/files/615409d636ecc9001ff4a8fe.gif
エフェクトの整理
利用頻度の少ないものを中心に、エフェクトを少し整理しました。
動きが激しすぎるエフェクト
すいっすいっ
ネガ
似たエフェクトが他にあるもの
ピチピチ (ジャンプ系)
オーロラ (ネオン)
タイムマシン (めまい)
動きのないエフェクト
影
チェック
ストライプ
前景色を選ぶ背景エフェクト
川
サインポール
あわせていくつかのエフェクトの名前を変えました。
2021/2/2
アニメ絵文字のサイズをちょっと大きくした
Slack の 64KB 制限を一撃でクリアできるように 64x64px でレンダリングしていましたが、制限が「128KB 以下推奨」に緩和されていたのでちょっと大きくしました。
128KB を超えてしまった場合は自動でちょっと小さくなります。
新エフェクト：集中線を追加した
新しいエフェクトを追加しました。
内部実装的にも新しい概念が追加されて表現の幅が広がっているので、やばいエフェクトを思いついた人はぜひプルリクください。
https://scrapbox.io/files/615409f024f5b9001dac99b5.gif
2021/1/20
デザイン系フォントを追加した
フォントワークスさんのフォントがいくつかオープンソースになったので、スタンプにして面白そうなものをピックアップして入れてみました。
カラーピッカーを「詳細オプション」から出した
他のオプションに比べると頻繁に使うので、出しました。
2021/1/8
デザイン系フォントを入れてみた
おためしで派手なフォントを入れてみました。
どれくらい使われているかなどを見て厳選します。
色を簡単に選べるようにした
色をカラーピッカーから選ぶのが面倒だったので、基本的な色はラジオボタンから選べるようにしました。
デフォルトの行間を調整した
0.1 文字分から 0.05 文字分に変更しました。
アイコン用途だとこれくらいみちっとしていてもいい気がしました。
UI 整理
項目が増えてきたので仕様頻度の低いものを「詳細オプションを開く」にしまいました。
2020/10/22
デフォルトの背景色を白に戻した
背景色を透明にしても、ダークモードでいい感じに表示されない絵文字も多かったので、デフォルト値は白に戻しました。
透過の実装をもう少し丁寧にやるのが先決でした。
UI の微修正
「リセット」ボタンが効果をリセットするのか全てリセットするのか曖昧だったので、文言を変更しました。
2020/10/13
デフォルトの背景色を透明にした
ダークモードで使われる場面も増えてきたので、背景色をデフォルト透明にしました
使用感をわかりやすくするため、サンプル背景を選べるようにしました
※ gif アニメにする場合、以下の制限があります (が、メリットの方が多そうという判断をしました)
純色の白 (#fff) のピクセルが透明になってしまう
半透明のピクセルが不透明になってしまう
2020/10/9
デザインを一新した
「いったん元画像を作ってから、絵文字画像を作る」と２工程の構成になっていたものを、１つにまとめました
いちいちボタンを押さなくても絵文字が更新されるようにしました
画面が縦長になるのを極力避けるようにし、上下にスクロールの必要がないようにしました
フレームワークを Spectre から Bulma に変えてみました
2020/10/8
フィルター選択を「＋その他」メニューから出した
存在にあまり気づかれていなさそうだったのでいつでも選べるようにしました
Bugfix: 「ファイルから選ぶ」を複数回選ぶと壊れる不具合
「ファイルから選ぶ」でファイルを選んだ後、「テキストから作る」など他のモードに一旦遷移して、また「ファイルから選ぶ」に戻ってくると死ぬ不具合がありました
2020/6/9
壊れていたアニメーションを修正
「押し出し」系のアニメーションが壊れていたので修正しました
2020/5/25
対応フォントを入れ替え
Google Fonts を 早期アクセス版 から正式版 に移行＆整理
削除されたフォント
ニコモジ, こころ明朝 (正式版に未収録)
さわらびゴシック (Noto Sans に太字用の字形が収録されているので)
さらわび明朝 (Noto Serif に極太の字形が収録されているので)
修正されたフォント
M PLUS 1p (正しく読み込まれていなかった)
追加されたフォント
Rounded M+ 1c, Bold (Black では太すぎる時用)
Noto Sans (さわらびゴシック Bold に代わって)
Noto Serif (極太明朝がなかったので)
ライセンスを更新
フォントに GPL 非互換なライセンスが入っていたりしてややこしそうだったので、全体を GPL にするのをやめた
2020/5/7
Bugfix: Safari でアニメーション未指定の場合にトリミングが壊れる不具合修正
drawImage の sx, sy に負の値が渡った場合の振る舞いがブラウザによって違ったため
2020/5/1
拡大縮小・回転系エフェクトを組み合わせた時のアニメーションをよりダイナミックに
トリミングされたものにエフェクトがかかっていたところを、エフェクトをかけてからトリミングするよう変更しました。
動きの激しいエフェクトを組み合わせた時の結果がよりダイナミック（？）になります。
旧
https://scrapbox.io/files/61540a78e7d3df001dcd8bc1.gif
新
https://scrapbox.io/files/61540a83a70f900023660c93.gif
2020/4/30
巨大絵文字の effect の振る舞いを変更
分割された巨大絵文字を作る際、 effect もセルごとではなく絵文字全体に適用するよう変更しました。
エフェクトの組み合わせによって巨大絵文字が崩壊しにくくなること、コードも綺麗になることなどが理由です。
旧
https://scrapbox.io/files/61540a9836ecc9001ff4ae62.gifhttps://scrapbox.io/files/61540a9c704bec002389e173.gif
新
https://scrapbox.io/files/61540aa8639cbe00234ea16c.gifhttps://scrapbox.io/files/61540aac1dc9ba001f3ddc56.gif
ライセンスをちゃんと書いた
「パーツを選んで作る」の素材は CC-BY のもと、ソースコードは GPLv3 のもと、自由に使ってください。
このツールを使って生成・加工した画像についても私は追加の権利を主張しません (このツールを使って作ったよと宣伝してくれることは嬉しいですが、必須ではありません)。
更新履歴を残し始めた
2017/6/18
Qiita 記事を公開
2017/6/16
initial commit