emoemo — かんたんemojiメーカー

なぜつくったか

Slackでemojiをつけてリアクションをすることが多く、emojiを作成するWebアプリケーションを自分でつくってみたくなって取り組みました。

最初はDjangoでバックエンドを実装していましたが、デプロイと運用の気軽さを考えてフロントエンド中心の構成に切り替え、Reactベースでつくることにしました。

つくったもの

テキストを入力し、フォントと文字色を選ぶだけで、SlackやDiscord向けのカスタム絵文字をつくれます。プレビューを並べて比較しながら選び、完成した画像をそのままダウンロードできます。

画像の生成はブラウザ内で完結します。「おまかせ」を使ったときだけ、入力したテキストを外部エンドポイントへ送り、合いそうなフォントと色の提案を受け取ります。

技術

画面はReact、TypeScript、Vite、Tailwind CSSで構成し、画像はCanvas APIで描画しています。「おまかせ」のバックエンドはCloudflare WorkersとWorkers AIで動かしています。TypeScriptの学習も兼ねて開発している個人プロジェクトです。