はじめに
Slackｸｿﾃﾞｶ絵文字を作るの、大変ですよね。
参考までに、ｸｿﾃﾞｶ絵文字を作る手順としては、
- 画像を用意する。（縦横比が整数となるサイズがベター）
- 画像を正方形のブロックに分割する。
- 分割した画像に命名して保存する。
- Slackに登録、使用する。
ですが、画像をより細分化したい時に2, 3の手順がかなり厄介なんですよね。
そこで特に骨の折れる手順2, 3を簡略化することで、ｸｿﾃﾞｶ絵文字を気軽に作れるサイト「Slack Emoji Splitter」を作ってみました。
さっそく使い方から説明を。
使い方
画像は自由に用意してください。
Slack Emoji Splitter
-
①: 使用する画像をドラッグ&ドロップ、もしくはクリック・ファイル選択してアップロード
今回は縦横比が1:2の画像を使用する。 -
②③:右側のプレビューを見ながら、縦横の分割数を設定
「Horizontal Parts」が横方向、「Vertical Parts」が縦方向の分割数を指しており、1-18個に分割できる。今回の画像は縦横比が1:2なので、横:14個・縦:7個に分割する。分割後の1絵文字が128*128ピクセルの正方形になるようにリサイズされる。
-
④: 絵文字の名前を設定
Slackに登録される絵文字の先頭の名前を設定する。分割数 絵文字名 横:1・縦:1 {名前} 横:複・縦:1 {名前}-{列番号} 横:1・縦:複 {名前}-{行番号} 横:複・縦:複 {名前}-{列番号}-{行番号}} Slackに複数の絵文字を一括登録する場合、画像名が絵文字名となるので、入力した名前で画像が生成される。
-
⑤: ダウンロード
ZIPファイルで画像をダウンロードする。
登録
Slackには一括で絵文字を登録しちゃいましょう。
こちらのnoteを参考にさせていただきました。↓
手順は
-
Chrome拡張機能インストール
https://chromewebstore.google.com/detail/neutral-face-emoji-tools/anchoacphlfbdomdlomnbbfhcmcdmjej?hl=ja -
Slackワークスペースの「カスタマイズ/絵文字」を開く
https://{ワークスペースのURL}/customize/emoji -
表示されている拡張機能のボックスに、解凍したフォルダをそのままドラッグ&ドロップ
自動的にアップロード/登録処理が走る。絵文字名は画像名が適用される。
使ってみる
使うには左下「Emoji Command」をコピペするだけ！
こんな感じで表示されます。行間は閉じるのでモウマンタイ。
※登録してもすぐには使用できない場合もあるので、コーヒーでも飲んで休憩タイム。理由は謎。
使用技術
SvelteKitでキャンバスAPI使用してサイトを構築して、Cloudflare Pagesにデプロイ・ホスティングしているだけです。
SvelteKitは「コードがシンプル・超リアクティブ・仮想DOMを使用しないので早い」などの特徴があります。
Cloudflare Pagesは「安い・エッジサーバに配置されるので早い」などの特徴があります。
つまり「SvelteKit + Cloudflare Pages」の組み合わせは「美味い早い安い」のITエンジニアにとっての吉野家みたいなものでしょうか。
ちなみにSvelteKitで構築したサイトをCloudflare Pagesにデプロイするにあたり、adapterを設定する必要がありますが、ライブラリインストールして少し設定をイジるだけなので開発者体験も最高です。
以上
※324個の絵文字を使用