絵文字のコミュニケーションって楽しいですよね。
ところで絵文字を半分だけ表示したいときってありませんか。私はあります。例えばプリンを食べたいがダイエットのために半分だけにしておこうという気持ちを表明するときに、プリン半分の絵文字があればなあと、毎日のように思っています。
そんなときに使えるジョークAPIを作りました。みなさん使ってください。
<img src="https://storage.googleapis.com/zenn-user-upload/6391bf63aab5-20220701.png" alt loading="lazy" class="md-img">
<aside class="msg message">!<div class="msg-content">
使ってくださいとは書いたものの、動作が安定していないと困る場合は使わないでくださいね。ジョークで作ったものなので。
</div></aside>
<h2 id="%E4%BD%BF%E3%81%84%E6%96%B9">
<a class="header-anchor-link" href="#%E4%BD%BF%E3%81%84%E6%96%B9" aria-hidden="true"></a> 使い方</h2>
以下のURIにリクエストすると24pxのプリンが1.5個のSVGが返ってきます。
<div class="code-block-container"><pre><code>https://alteremoji.mochieer.workers.dev/🍮/1.5?size=24
</code></pre></div>なので、Markdownが許されているコミュニケーションツールだと
<div class="code-block-container"><pre class="language-md"><code class="language-md">![](https://alteremoji.mochieer.workers.dev/🍮/1.5?size=24)
</code></pre></div>みたいに貼り付けることができると思います。その他、用例を<a href="https://github.com/mochieer/alteremoji#readme" target="_blank" rel="nofollow noopener noreferrer">GitHubのREADME</a>に書いています。
<h2 id="%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E6%A6%82%E8%A6%81">
<a class="header-anchor-link" href="#%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E6%A6%82%E8%A6%81" aria-hidden="true"></a> 技術的な概要</h2>
<h3 id="%E7%B5%B5%E6%96%87%E5%AD%97%E3%82%92%E5%88%87%E6%96%AD%E3%81%99%E3%82%8B%E6%8A%80%E8%A1%93">
<a class="header-anchor-link" href="#%E7%B5%B5%E6%96%87%E5%AD%97%E3%82%92%E5%88%87%E6%96%AD%E3%81%99%E3%82%8B%E6%8A%80%E8%A1%93" aria-hidden="true"></a> 絵文字を切断する技術</h3>
SVGでテキストを表示し、それを<a href="https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/viewBox" target="_blank" rel="nofollow noopener noreferrer">viewBox</a>でぶった切っています。
例えば <code>/🍮/1.5?size=24</code> だとこんなSVGを返しています。
<div class="code-block-container"><pre class="language-svg"><code class="language-svg">&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24" width="36" height="24"&gt;
 &lt;text x="12" y="50%" text-anchor="middle" dominant-baseline="central" font-size="22"&gt;🍮&lt;/text&gt;
 &lt;text x="36" y="50%" text-anchor="middle" dominant-baseline="central" font-size="22"&gt;🍮&lt;/text&gt;
&lt;/svg&gt;
</code></pre></div>見ての通りプリンは2つあり、それを1.5個分の横幅36pxでぶつ切りにしているだけです。
ただ、少し工夫が必要で、絵文字はフォントサイズを24pxとしたとき実際には24x24px以上の領域を使って描画されることがあるようです。これは環境（OS、というか絵文字フォント）によっても違いますし、どうも小さいサイズを指定した際により顕著に起こりやすいようです。
なので、実際に絵文字を表示する<code>&lt;text&gt;</code>ノードでは少し小さめのフォントサイズを指定し、1文字分の領域（24x24px）の中心に位置するように調節しています。
<h3 id="cloudflare-workers">
<a class="header-anchor-link" href="#cloudflare-workers" aria-hidden="true"></a> Cloudflare Workers</h3>
URLやクエリパラメータに応じてSVG（テキストファイル）をちょっと動的に変更したら良いだけなので、以前から使ってみたかった<a href="https://workers.cloudflare.com/" target="_blank" rel="nofollow noopener noreferrer">Cloudflare Workers</a>を使いました。
CLIのセットアップからプロジェクトの開始、ローカルの開発、デプロイまですんなりで素晴らしいと感じました ⛅️
（この絵文字は曇り空＝やや不満という意志の表明ではなく、Cloudflareのイメージです）
特に開発時にTypeScriptを選ぶと<code>index.ts</code>にはCloudflare Workersにおける<code>Request</code>と<code>Response</code>の型ありのhello worldが書き出されるので、単に<code>Request</code>を受けて<code>Response</code>を返す関数を書けばいいだけという、「これがFunction as a Service……！」という気持ちになりました。
<h3 id="%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89">
<a class="header-anchor-link" href="#%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89" aria-hidden="true"></a> ソースコード</h3>
GitHubにあります。
<iframe id="zenn-embedded__e97bbc883142f" src="https://embed.zenn.studio/card#zenn-embedded__e97bbc883142f" data-content="https%3A%2F%2Fgithub.com%2Fmochieer%2Falteremoji" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/mochieer/alteremoji" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/mochieer/alteremoji</a>

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

Discussion