今日のつちや

岐阜の田舎に住むエンジニアの日記です

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

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

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

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

slackemojigen.com

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

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

デモ動画

こだわりとか

  • リアルタイムにフォントを見比べられる
  • 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のほうが使いやすかった。

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

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

今後

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

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

twitter.com

Thanks!!

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