Zenn
🍮

半端なサイズの絵文字を表示する技術

2022/07/01に公開
Cloudflare
SVG
emoji
tech

絵文字のコミュニケーションって楽しいですよね。

ところで絵文字を半分だけ表示したいときってありませんか。私はあります。例えばプリンを食べたいがダイエットのために半分だけにしておこうという気持ちを表明するときに、プリン半分の絵文字があればなあと、毎日のように思っています。

そんなときに使えるジョークAPIを作りました。みなさん使ってください。

使い方

以下のURIにリクエストすると24pxのプリンが1.5個のSVGが返ってきます。

https://alteremoji.mochieer.workers.dev/🍮/1.5?size=24

なので、Markdownが許されているコミュニケーションツールだと

![](https://alteremoji.mochieer.workers.dev/🍮/1.5?size=24)

みたいに貼り付けることができると思います。その他、用例をGitHubのREADMEに書いています。

技術的な概要

絵文字を切断する技術

SVGでテキストを表示し、それをviewBoxでぶった切っています。

例えば /🍮/1.5?size=24 だとこんなSVGを返しています。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24" width="36" height="24">
  <text x="12" y="50%" text-anchor="middle" dominant-baseline="central" font-size="22">🍮</text>
  <text x="36" y="50%" text-anchor="middle" dominant-baseline="central" font-size="22">🍮</text>
</svg>

見ての通りプリンは2つあり、それを1.5個分の横幅36pxでぶつ切りにしているだけです。

ただ、少し工夫が必要で、絵文字はフォントサイズを24pxとしたとき実際には24x24px以上の領域を使って描画されることがあるようです。これは環境（OS、というか絵文字フォント）によっても違いますし、どうも小さいサイズを指定した際により顕著に起こりやすいようです。

なので、実際に絵文字を表示する<text>ノードでは少し小さめのフォントサイズを指定し、1文字分の領域（24x24px）の中心に位置するように調節しています。

Cloudflare Workers

URLやクエリパラメータに応じてSVG（テキストファイル）をちょっと動的に変更したら良いだけなので、以前から使ってみたかったCloudflare Workersを使いました。

CLIのセットアップからプロジェクトの開始、ローカルの開発、デプロイまですんなりで素晴らしいと感じました ⛅️

（この絵文字は曇り空＝やや不満という意志の表明ではなく、Cloudflareのイメージです）

特に開発時にTypeScriptを選ぶとindex.tsにはCloudflare WorkersにおけるRequestとResponseの型ありのhello worldが書き出されるので、単にRequestを受けてResponseを返す関数を書けばいいだけという、「これがFunction as a Service……！」という気持ちになりました。

ソースコード

GitHubにあります。

https://github.com/mochieer/alteremoji

Discussion