author: hondazn

もじえもじ、はじめました


本文の中に、動く小さな文字を置けるようにしました。たとえばもじやえもじのように。

正体は mojiemoji というサービスです。

mojiemoji とは

mojiemoji は、文字を渡すと動く画像が返ってくる API です。OK と渡せば、OK がそのまま返ります。

面白いのは、**URL がそのまま画像**だということ。ブラウザでツールを開く手間も、登録も、導入も不要です。

文字絵文字を作るツールは昔からありました。ただ多くは、サイトを開いて、色やアニメを選んで、できた画像を保存して、Slack や Discord に手でアップして……という手順が要りました。mojiemoji はこれを全部飛ばして、URL を書くだけで完了です。

<img> が書ける場所なら、どこでも使えます。GitHub の README や issue、Zenn、Qiita、Notion、メール、Discord。curl でファイルとして保存することも。README の冒頭に shields.io のバッジを並べる、あの感覚で文章に差し込める、と考えるとイメージしやすいかもしれません。

同じ URL は、いつ叩いても同じ画像を返します。だから一度貼った了解が、あとから勝手に変わる心配はありません。

本家はこちら — mojiemoji.jozo.beer

このブログでの仕組み

このブログは Astro で作っていて、記事を MDX で書けます。だから本文に <Moji> をそのまま置けます。

書き方は単純で、記事の中に <Moji emoji="語" /> と書くと、その語が mojiemoji の画像に変身します。書くのは語だけ。色もフォントもアニメも、こちらでは指定しません。

語は属性に書きます。*_ のような記号が混ざっていても、Markdown に解釈されず、そのまま画像になるからです。

見た目は自動で決まります。しかも、同じ語でも出てくる場所が違えば表情が変わります。さっきの自動と、この自動は別の見た目です。語そのものと、本文の何番目に出てきたかの両方から、色・フォント・アニメを選んでいるためです。

とはいえ、でたらめに選んでいるわけではありません。記事を変えずにビルドし直せば、毎回まったく同じ見た目になります。一度書いた記事の表情は不変です。これは mojiemoji の「同じ URL は同じ画像」という性質と、ちょうど噛み合います。

使うときの作法

mojiemoji は、語レベルのワンポイントです。文や節をまるごと渡すものではありません。1 語は短く。目安は漢字 2 文字、カナ 3 文字、ひらがな 5 文字くらい。長い言葉は、小さな画像の中で潰れてしまいます。

とはいえ、これだけの数を手で選ぶのは正直面倒です。どの語を画像にするかは AI に任せれば、書く手間はほとんど消えます。

もうひとつの入り口

ここまでは、このブログの中で <Moji> を書く話でした。これとは別に、書くこと自体を任せる道もあります。

mojiemoji-plugin は、Claude Code から日本語の GitHub Markdown を書くときに、キーワードを自動でスタンプに変えてくれるプラグインです。issue や PR、レビューの本文を書くと、ふさわしい語を選んで mojiemoji の画像を埋め込みます。URL を手で組む必要はありません。

このブログは手で置いて楽しむ。GitHub では plugin に任せる。同じ mojiemoji でも、入り口が違います。

プラグインはこちら — jozobeer/mojiemoji-plugin

速さと、寄り道と

このブログは、表示の速さを最優先にしています。CSS も、クライアントの JavaScript も、できるだけ持ちません。動く文字の画像は、その方針とは逆を向いています。

それでも入れたのは、速さだけでは出ない楽しさがあるから。全部を速くしたうえで、ここだけ少し寄り道する。そんな例外です。