Slack用の絵文字ジェネレーターを作った

f:id:corocn:20190212201948p:plain:w128

Slack用の絵文字ジェネレーターを作りました。

特徴としては、リアルタイムに表示を確認しながら絵文字を作ることができるところ。

絵文字ジェネレーターなんてたくさんあるじゃーん！と言われればそれまでなんですが、普段使用している絵文字ジェネレーターが毎回生成ボタンを押さなきゃいけないので、さくさく複数フォントの確認できるやつが欲しかったので作りました。あとはVue.js + TypeScriptの練習として連休で作れるものとして採用。

ためしがきに多大なる影響を受けています。

デモ動画

使い方も兼ねて動画作った
/ Slack Emoji Generator https://t.co/mi3s5nfZGw #slackemojigen pic.twitter.com/GVCw7FNban
— ころちゃん (@corocn) February 12, 2019

こだわりとか

リアルタイムにフォントを見比べられる
Slackで表示した時のサイズ感を確認できる
9段階 font-weight に対応（フォントによって未対応の太さはある）
プリセットで使ってる4色はSlackロゴの4色から採用

技術スタック

Nuxt.jsが公式にTypeScript対応したので、ほぼTypeScriptで書いてます。最近副業でTypeScript + Express でサーバーサイド開発してるけど、TypeScriptはいいぞ。Expressも良いぞ。この辺の知見は別途記事を書きますね。

サーバーサイド不要なのでSPAとしてNetlifyでホスティングすることにしました。ドメインがせっかくAmazon Route53にあるので、Amplify Consoleを使ってもいいかと思ったけど、また次回にします。

仕組み

仕組みは簡単で、WebFontを使ってHTML5 Canvasに描画してるだけです。ダウンロードボタンを付けたけど、実は右クリックメニューからもダウンロードできます。

FontはWebFontLoaderとNuxt用のプラグインを使っています。対応したいfont-weightは全部読み込ませています。

  webfontloader: {
    timeout: 30000,
    google: {
      families: [
        'M+PLUS+1p:100,300,400,500,700,800,900',
        'M+PLUS+Rounded+1c:100,300,400,500,700,800,900',
        'Noto+Sans+JP:100,300,400,500,700,900',
        'Noto+Sans+SC:100,300,400,500,700,900',
        'Noto+Sans+TC:100,300,400,500,700,900',
        'Noto+Serif+JP:200,300,400,500,600,700,900',
        'Noto+Serif+SC:200,300,400,500,600,700,900',
        'Noto+Serif+TC:200,300,400,500,600,700,900',
        'Kosugi',
        'Kosugi+Maru',
        'Sawarabi+Gothic',
        'Sawarabi+Mincho',
      ]
    }
  },

WebFontの読み込み完了後に描画処理を走らせる必要があります。WebFontLoaderでも読み込み完了イベントをキャッチすることはできますが、FontFaceObserverのほうが使いやすかった。

Font Face Observer — fast and simple web font loading

 const font = new FontFaceObserver("M PLUS Rounded 1c", { weight: 900 })
 font.load("えも\nじ").then(() => {
     // ここで描画する
 })

自前のdrawメソッドの中に上記のような処理を入れています。 font-family, font-weight, これから描画する文字を指定して、ロード完了を待って描画。

今後

コード整理してGitHubに公開する予定。（現状だいぶ見せられない汚さｗ）色んなフォントに対応できるといいけど大変そうなので、みんな使ってくれるようなら頑張ります。

フィードバック頂けると嬉しいです。

twitter.com

Thanks!!

公開前に見てもらってありがとう〜 @nabettu @girigiribauer

ころぶろぐ

ころちゃんの雑記です。corocn.devにも投稿してます。

Slack用の絵文字ジェネレーターを作った

デモ動画

こだわりとか

技術スタック

仕組み

今後

Thanks!!