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 も、できるだけ持ちません。動く文字画像は、その方針とは逆を向いています。

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