こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は知ってると便利なtipsを紹介します！

以前、 手話アプリのキャンペーンサイトを制作しているとき、
ルビをサイト全体のテキストに振りたい、という要望がありました。
ですが、Movable TypeのWYSIWYGエディタには、デフォルトでルビを振る機能はなく、
プラグインの開発が必要だということで、その話は流れてしまいました。

あ〜あの時、このコードがあれば解決できたのになぁ・・・

実装例

狸は音楽の挨拶扉らから顔を置い子たな。するといきなり気の毒たらますという音うまし。まじめますでことたはだするとあとのだめたちのところからはよほど同じましたと、みんなばかり狸をなっれんでた。あき過ぎぼくはざとじぶんのが恐いだてたくさんの風の猫あたりでわらわ第二舌曲のおねがいに叫びてだしやます。一心は一生けん命いえてきた。次は六こめ灰のようへ持たていまし。外も手ゆうべとそれがやめてくるです。おいではゴーシュにとてもにあるからやり直しから光輝のようがどなりつけて下がやぶれてふっとょってじぶんのを云いてやっます。するするぞろぞろ糸をゴーシュに知っませます。
わたしまだにセロをして穴に出しございござい。外にちがいんだ。「愕をいえた。頭、きみを手。なっ。」おまえはいまのときのまもなくひとつのときがやれまします。狸は頭におゴーシュへいけて二つが窓を見てどうしてこんどとりられるますところをありましや。ちらちら話して、とって云いでっますて狸をそれから楽長にぱっとつまみ睡うまし。「曲やっ。
慈悲に弾いまし。弾くな。何はおまえとセロをするてまでちがい兎もむずかしいのたてな。」みんなは粗末そうをくらべてなあ目ぼうからまげたりましろの鳥を飛びつきてぶっつかっだりいうているた。かっこうはけりて肩が思いたまし。
誰もいったいゴーシュはよかっんましが入り口はまた白い気たた。「前のたくさんの兎が。ある。」これもぎっしりのんだます。孔も東にして前まし。ではこんどはぴたっとふくたなら。
ひどいおねがいらしとしので行くてさきがなっようでし自分をいいてだってまるで眼にそうあるましまし。ぴたりかと音楽もてさも持たたですて悪いのをはたくさんは猫のトマトなた。金はみんなを前まし窓のときあなたを落ちですようにな狩足に譜より帰っておまえかかも方をとりていんう。「けれどもいきなり夕方の子。
ぶっつかっ。」はいとしがなっうかといってすこしかっこうをゴーシュからまして来でゴーシュありでした。「正確まし。まるで云いてはじめでし。こういうのもゴーシュの風たのまし。ぼくをそのかなりひるまたら方が。あたり。ごつごつまで何だかぼう一そうも痛くのやな。嵐をセロをなりて来おれげにその猫蚊息と片手げのおっかさんまでの窓ねずみにいろと行きましもっともぼくの面目はすこしき方です。
足ぶんさん。さまにも急いんまいがぞ。ゴーシュというのにがたがたはじめいた。
おどすは鳴っは自分という方でいきなりもっで気まし。ではがらんとそんなにさきの下と教えたはなあ。これだけ何まで鳴った光輝の晩を飛びつきて何の処をおろしておろしようでしのた、笑いな、すこしせてしまいたがな。
小麦出この仲間かっこう家にぼく二寸のなかをぱちんととめておじぎををあけようんことたは、それをはしばらくくたくただてよ。するといまも返事も私まで、鳴らしと十ぺんへはぜひゴーシュを開くて来出し。」どこはおじぎを云いて、すると一心へ思ってまん中が吹き出たりそれかで弾きてきたりぶっつかっなます。キャベジはその同じますホールみたいましゴーシュを走ってゴーシュののを教わっがゴーシュを急いてどうか二つで曲げましまして、東がやめまわってましろまでいるましねずみ夕方はいった所をはじめがセロへは足館とけでまし。このかっこう悪い穴もわたしか狸ますなよしんが済むホールたちをなってまわったん。こどもと思えてはおまえしか床の狸頭ませをはいっ弾いせうまん中かっこうへ、いちども何に思わず一日なてなっと一生はおっかさんのかっこうの大きな口を交響の口をふりまわしたり風車の泣き声から弾いとなって云いすぎをあけてもうやめていといるないものた。口へままに云いてあかりでやぶれのにいまの物すごい音楽をひいたまい。これもそればかります。この一番の活動出う舌んまし。すきはなんで赤のところをけろりと行くが、しばらく外国へゴーシュから云いてセロのねどこへもっとも聞きつけましだろ。
まっゴーシュを来ます。

HTML例

<p id="js-word-target">狸は音楽の挨拶扉らから顔を置い子たな。するといきなり気の毒たらますという音うまし。まじめますでことたはだするとあとのだめたちのところからはよほど同じましたと、みんなばかり狸をなっれんでた。あき過ぎぼくはざとじぶんのが恐いだてたくさんの風の猫あたりでわらわ第二舌曲のおねがいに叫びてだしやます。一心は一生けん命いえてきた。次は六こめ灰のようへ持たていまし。外も手ゆうべとそれがやめてくるです。おいではゴーシュにとてもにあるからやり直しから光輝のようがどなりつけて下がやぶれてふっとょってじぶんのを云いてやっます。するするぞろぞろ糸をゴーシュに知っませます。
わたしまだにセロをして穴に出しございござい。外にちがいんだ。「愕をいえた。頭、きみを手。なっ。」おまえはいまのときのまもなくひとつのときがやれまします。狸は頭におゴーシュへいけて二つが窓を見てどうしてこんどとりられるますところをありましや。ちらちら話して、とって云いでっますて狸をそれから楽長にぱっとつまみ睡うまし。「曲やっ。
慈悲に弾いまし。弾くな。何はおまえとセロをするてまでちがい兎もむずかしいのたてな。」みんなは粗末そうをくらべてなあ目ぼうからまげたりましろの鳥を飛びつきてぶっつかっだりいうているた。かっこうはけりて肩が思いたまし。
誰もいったいゴーシュはよかっんましが入り口はまた白い気たた。「前のたくさんの兎が。ある。」これもぎっしりのんだます。孔も東にして前まし。ではこんどはぴたっとふくたなら。
ひどいおねがいらしとしので行くてさきがなっようでし自分をいいてだってまるで眼にそうあるましまし。ぴたりかと音楽もてさも持たたですて悪いのをはたくさんは猫のトマトなた。金はみんなを前まし窓のときあなたを落ちですようにな狩足に譜より帰っておまえかかも方をとりていんう。「けれどもいきなり夕方の子。
ぶっつかっ。」はいとしがなっうかといってすこしかっこうをゴーシュからまして来でゴーシュありでした。「正確まし。まるで云いてはじめでし。こういうのもゴーシュの風たのまし。ぼくをそのかなりひるまたら方が。あたり。ごつごつまで何だかぼう一そうも痛くのやな。嵐をセロをなりて来おれげにその猫蚊息と片手げのおっかさんまでの窓ねずみにいろと行きましもっともぼくの面目はすこしき方です。
足ぶんさん。さまにも急いんまいがぞ。ゴーシュというのにがたがたはじめいた。
おどすは鳴っは自分という方でいきなりもっで気まし。ではがらんとそんなにさきの下と教えたはなあ。これだけ何まで鳴った光輝の晩を飛びつきて何の処をおろしておろしようでしのた、笑いな、すこしせてしまいたがな。
小麦出この仲間かっこう家にぼく二寸のなかをぱちんととめておじぎををあけようんことたは、それをはしばらくくたくただてよ。するといまも返事も私まで、鳴らしと十ぺんへはぜひゴーシュを開くて来出し。」どこはおじぎを云いて、すると一心へ思ってまん中が吹き出たりそれかで弾きてきたりぶっつかっなます。キャベジはその同じますホールみたいましゴーシュを走ってゴーシュののを教わっがゴーシュを急いてどうか二つで曲げましまして、東がやめまわってましろまでいるましねずみ夕方はいった所をはじめがセロへは足館とけでまし。このかっこう悪い穴もわたしか狸ますなよしんが済むホールたちをなってまわったん。こどもと思えてはおまえしか床の狸頭ませをはいっ弾いせうまん中かっこうへ、いちども何に思わず一日なてなっと一生はおっかさんのかっこうの大きな口を交響の口をふりまわしたり風車の泣き声から弾いとなって云いすぎをあけてもうやめていといるないものた。口へままに云いてあかりでやぶれのにいまの物すごい音楽をひいたまい。これもそればかります。この一番の活動出う舌んまし。すきはなんで赤のところをけろりと行くが、しばらく外国へゴーシュから云いてセロのねどこへもっとも聞きつけましだろ。
まっゴーシュを来ます。</p>

JavaScript例

async function applyRubyOnLoad() {
    const targetElement = document.getElementById('js-word-target');
    if (!targetElement) return;
    let keywordsData;
    try {
        const response = await fetch('./ruby.json');
        keywordsData = await response.json();
    } catch (error) {
        console.error("Error loading ruby.json:", error);
        return;
    }
    keywordsData.keywords.forEach(({ word, text }) => {
        const regex = new RegExp(word, 'g');
        targetElement.innerHTML = targetElement.innerHTML.replace(
            regex,
            `${word}${text}`
        );
    });
}
document.addEventListener('DOMContentLoaded', applyRubyOnLoad);

JSON例

{
    "keywords": [
      { "word": "小麦", "text": "こむぎ" },
      { "word": "返事", "text": "へんじ" },
      { "word": "仲間", "text": "なかま" },
      { "word": "正確", "text": "せいかく" },
      { "word": "音楽", "text": "おんがく" },
      { "word": "慈悲", "text": "じひ" },
      { "word": "嵐", "text": "あらし" }
    ]
}

まとめ

今回もjQueryではなく、Vanilla.jsで実装してみました。
ぜひコピペしてガンガン使っちゃってください！