手書きで動くSlack Emojiを作るツールを作った
Slack 絵文字のマンネリ化にお困りのそこのあなた、フリーハンド(手書き)で Slack, Discord などの絵文字画像を作れるジェネレーターを作りました。
クライアントサイドですべての処理を完結する仕様になっているので、気軽に使ってみてください。
こちらです
こんなかんじのEmojiが作れます👇
デモ
使っているもの
Vue + Nuxt.js
使い慣れているというのと、OG 関連のタグ、GA、PWA 化などあまり考えたくない部分をサクッと対応できるので Nuxt でつくりました(あくまで個人的に)。
Vue2.x ですが基本的に composition-api で書いているので、いずれ Vue3 + Vite に移行とかしても面白いかもしれないです。
Vuetify.js
コンポーネントライブラリ、css utility として Vuetify を使っています。
カラーピッカーとか複雑で作るのがめんどくさそうなコンポーネントも含めてまるっと含まれているので Vuetify を使いました。
VueUse
react-useの Vue 版のようなライブラリで、composition-api で使える便利機能が全部盛りされている感じです。
今回、手書き path やパレットの内容を保存する store 層として composition-api の reactive を共通 store として root(Nuxt.js の template)に inject して共有する形で実装しています。
それぞれのコンポーネントで、この store を参照する際に toRefsがかなり便利でした。
同じく、composition-api の ref の拡張として useManualRefHistoryというのがありキャンバスと undo/redo 機能はこの composition util を使って実装しました。
VueUse かなり便利。
PixiJS
アニメーションとエフェクトを実現するために使っています。
当初、gsap と生の canvas でアニメーションを作り始めたが、途中で辛くなってやめました。PixiJS に乗り換えたことで結果的にエフェクトを簡単に実装できたので良かったかもしれないです。
PIXI.Ticker という API がありこれを requestAnimationFrame ごとにアップデートしてパラパラ漫画的にアニメーションを作っていきます。
参考にしたもの
実装にあたって参考にしたものとか。
絵文字ジェネレーター
日頃から、絵文字ジェネレーターを使っていて、こんな感じでシンプルな機能だけど日頃使われるものが作れればいいなぁというのが作り始めたモチベーションでもあります。Chrome Extention を入れておくと画面上から直接Slackに絵文字登録できるがかなり便利。
MEGAMOJI
治安を悪くする機能(エフェクト)は完全にMEGAMOJIのパクり リスペクトです。
アニメーション周りの実装は参考にさせてもらいました。gif のエンコード含めてクライアントサイドで完結するコンセプトも同じです。
結果的に、MEGAMOJI がやっているような keyframe アニメーションではなく、pixijs の Ticker API を使うことになりましたが、MEGAMOJI ではアニメーション/エフェクトが他の実装とうまいこと切り離されており Plugin 的にどんどん追加できるようになっている設計は同じようなものを作ってみてよくできていると感心しました。
最後に
まだ、バグも多く改善点もあるかと思います。
Issue でのバグ報告、Pull Request お待ちしております 🙇♂️
気に入ってもらえたら、スターつけてくれると喜びます。
Discussion